danog/sass-site
1
0
Fork 0
mirror of https://github.com/danog/sass-site.git synced 2024-11-27 04:24:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'homepage' into version-helpers

Browse Source 
* homepage:
  lint
  revert to shorthand nesting padding for now
  Quick negative css variables over using calc repeatedly
  Use {% render %} instead of deprecated {% include %}
  Do not auto-typogr for markdown
  More consistent use of typogr for all contents
This commit is contained in:
Jonny Gerig Meyer 2023-02-02 15:14:06 -05:00
commit 3d341fefd4
No known key found for this signature in database
GPG Key ID: FB602F738A872F7F
16 changed files with 111 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
eleventy.config.cjs
View File

@ -30,11 +30,15 @@ module.exports = (eleventyConfig) => {
// Paired shortcodes...
eleventyConfig.addPairedLiquidShortcode('markdown', (content) =>
typogrify.typogrify(mdown.render(content)),
mdown.render(content),
);
eleventyConfig.addPairedLiquidShortcode('markdownInline', (content) =>
typogrify.typogrify(mdown.renderInline(content)),
mdown.renderInline(content),
);
eleventyConfig.addPairedLiquidShortcode('typogr', (content) =>
typogrify.typogrify(content),
);
// Filters...
@ -43,11 +47,11 @@ module.exports = (eleventyConfig) => {
});
eleventyConfig.addLiquidFilter('markdown', (content) =>
typogrify.typogrify(mdown.render(content)),
mdown.render(content),
);
eleventyConfig.addLiquidFilter('markdownInline', (content) =>
typogrify.typogrify(mdown.renderInline(content)),
mdown.renderInline(content),
);
eleventyConfig.addLiquidFilter('typogr', (content) =>

17
source/_includes/footer.liquid
View File

@ -8,7 +8,7 @@
<div class="sl-l-grid__column">
{% renderTemplate 'liquid,md' %}
Sass &copy; 2006&ndash;{{ 'now' | date: '%Y' }} the Sass team, and numerous contributors.
It is available for use and modification under the [MIT&nbsp;License](https://github.com/sass/dart-sass/blob/master/LICENSE).
It is available for use and modification under the [MIT License](https://github.com/sass/dart-sass/blob/master/LICENSE).
{% endrenderTemplate %}
{% renderFile 'source/_includes/footer_nav.md' %}
@ -23,21 +23,6 @@
alt="Powered by MacStadium"
class="mac-stadium-icon"
src="https://uploads-ssl.webflow.com/5ac3c046c82724970fc60918/5c019d917bba312af7553b49_MacStadium-developerlogo.png"></a>
<script>
!function(d, s, id) {
var js,
fjs = d.getElementsByTagName(s)[0],
p = /^http:/.test(d.location)
? 'http'
: 'https';
if (! d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + '://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js, fjs);
}
}(document, 'script', 'twitter-wjs');
</script>
</div>
</div>
</div>

2
source/_includes/header.liquid
View File

@ -6,7 +6,7 @@
{% for alert in alerts | default: [] %}
<div class="sl-c-alert sl-c-alert--special">
<div class="sl-l-container">
<h2 class="sl-c-alert-title">{{ alert.heading | typogr }}</h2>
<h2 class="sl-c-alert-title">{{ alert.heading }}</h2>
{{ alert.body | markdown }}
</div>
</div>

23
source/_layouts/base.liquid
View File

@ -52,7 +52,7 @@
</p>
<![endif]-->
{% include 'header' %}
{% typogr %}{% render 'header', alerts: alerts %}{% endtypogr %}
<main class="content" id="main-content" itemprop="mainContentOfPage" role="main">
{% unless page | isTypedoc %}
@ -66,7 +66,7 @@
{% endunless %}
<div class="sl-l-container sl-background--white{% unless is_home %} sl-l-section{% endunless %}">
{{ content }}
{{ content | typogr }}
</div>
<div class="sl-c-alert">
@ -87,7 +87,7 @@
{% for item in section_bottom %}
<li class="sl-l-grid__column">
<h2>{{ item.header | typogr }}</h2>
{{ item.body | markdown }}
{{ item.body | markdown | typogr }}
</li>
{% endfor %}
</ul>
@ -95,7 +95,7 @@
{% endif %}
</main>
{% include 'footer' %}
{% typogr %}{% render 'footer' %}{% endtypogr %}
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@alpha"></script>
<script>
@ -115,6 +115,21 @@
}
});
</script>
<script>
!function(d, s, id) {
var js,
fjs = d.getElementsByTagName(s)[0],
p = /^http:/.test(d.location)
? 'http'
: 'https';
if (! d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + '://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js, fjs);
}
}(document, 'script', 'twitter-wjs');
</script>
<script src="/assets/dist/js/sass.js"></script>
<!-- Current page: {{ page.url }} -->
</body>

6
source/_layouts/has_complimentary.liquid
View File

@ -7,7 +7,7 @@ layout: base
<div class="sl-l-large-holy-grail__main">
<div{% unless no_container %} class="sl-l-container sl-l-container--small"{% endunless %}>
{% if before_introduction %}
{{ before_introduction }}
{{ before_introduction | markdown }}
{% endif %}
{% if introduction %}
<div class="sl-c-introduction{% if center_introduction %} sl-c-introduction--center{% endif %}">
@ -15,13 +15,13 @@ layout: base
</div>
{% endif %}
{{ content | typogr }}
{{ content }}
</div>
</div>
{% if complementary_content %}
<div class="sl-l-large-holy-grail__complementary">
{{ complementary_content }}
{{ complementary_content | markdown }}
</div>
{% endif %}
</div>

4
source/_layouts/has_no_sidebars.liquid
View File

@ -4,7 +4,7 @@ layout: base
<div class="docSearch-content{% unless no_container %} sl-l-container sl-l-container--small{% endunless %}">
{% if before_introduction %}
{{ before_introduction }}
{{ before_introduction | markdown }}
{% endif %}
{% if introduction %}
<div class="sl-c-introduction{% if center_introduction %} sl-c-introduction--center{% endif %}">
@ -12,5 +12,5 @@ layout: base
</div>
{% endif %}
{{ content | typogr }}
{{ content }}
</div>

8
source/assets/sass/components/_alerts.scss
View File

@ -10,8 +10,12 @@
);
color: theme.$sl-color--white;
font-size: typography.$sl-font-size--small;
padding-bottom: var(--alert-padding-block, var(--gutter-minus));
padding-top: var(--alert-padding-block, var(--gutter-minus));
padding: {
top: var(--alert-padding-block, var(--gutter-minus));
bottom: var(--alert-padding-block, var(--gutter-minus));
}
text-align: var(--alert-align, center);
p,

6
source/assets/sass/components/_callouts.scss
View File

@ -25,14 +25,14 @@
.signature {
// Make sure permalinks are visible.
overflow: visible;
margin-left: calc(var(--gutter) * -1);
margin-right: calc(var(--gutter) * -1);
margin-left: var(--gutter-negative);
margin-right: var(--gutter-negative);
}
}
&--impl-status {
font-size: 0.8em;
margin-top: calc(var(--gutter) * -1);
margin-top: var(--gutter-negative);
padding: 0.8rem;
.sl-c-callout & {

2
source/assets/sass/components/_link-header.scss
View File

@ -39,7 +39,7 @@ h4,
h5,
h6 {
a.anchor {
margin-left: calc(var(--gutter-sesqui) * -1);
margin-left: var(--gutter-sesqui-negative);
}
&:target {

12
source/assets/sass/components/_lists.scss
View File

@ -23,8 +23,8 @@
ul {
display: flex;
margin: {
right: calc(var(--gutter-half) * -1);
left: calc(var(--gutter-half) * -1);
right: var(--gutter-half-negative);
left: var(--gutter-half-negative);
}
}
@ -64,7 +64,7 @@
border: none;
cursor: pointer;
display: block;
margin: calc(var(--gutter-half) * -1) 0;
margin: var(--gutter-half-negative) 0;
padding: 0.3rem;
width: 100%;
@ -120,8 +120,8 @@
.sl-c-description-list--horizontal {
margin: {
right: calc(var(--gutter) * -1);
left: calc(var(--gutter) * -1);
right: var(--gutter-negative);
left: var(--gutter-negative);
}
&,
@ -159,7 +159,7 @@
&.impl-status {
font-size: 0.8em;
margin-top: calc(var(--gutter) * -1);
margin-top: var(--gutter-negative);
dt {
word-break: normal;

11
source/assets/sass/config/_scale.scss
View File

@ -11,6 +11,17 @@ $gutter-sesqui: calc(var(--gutter) * 1.5);
$gutter-double: calc(var(--gutter) * 2);
$gutter-triple: calc(var(--gutter) * 3);
// Negative Spacing Sizes
// ----------------------
$gutter-negative: calc(var(--gutter) * -1);
$gutter-quarter-negative: calc(var(--gutter-quarter) * -1);
$gutter-half-negative: calc(var(--gutter-half) * -1);
$gutter-minus-negative: calc(var(--gutter-minus) * -1);
$gutter-plus-negative: calc(var(--gutter-plus) * -1);
$gutter-sesqui-negative: calc(var(--gutter-sesqui) * -1);
$gutter-double-negative: calc(var(--gutter-double) * -1);
$gutter-triple-negative: calc(var(--gutter-triple) * -1);
// UI Sizes
// --------
/// @group scale

12
source/assets/sass/layout/_grid-system.scss
View File

@ -124,8 +124,8 @@
&--gutters {
margin: {
right: calc((var(--gutter)) * -1);
left: calc((var(--gutter)) * -1);
right: var(--gutter-negative);
left: var(--gutter-negative);
}
> .sl-l-grid__column {
@ -137,8 +137,8 @@
&-large {
margin: {
right: calc((var(--gutter-double)) * -1);
left: calc((var(--gutter-double)) * -1);
right: var(--gutter-double-negative);
left: var(--gutter-double-negative);
}
> .sl-l-grid__column {
@ -151,8 +151,8 @@
&-small {
margin: {
right: calc((var(--gutter-half)) * -1);
left: calc((var(--gutter-half)) * -1);
right: var(--gutter-half-negative);
left: var(--gutter-half-negative);
}
> .sl-l-grid__column {

4
source/assets/sass/layout/_holy-grail.scss
View File

@ -23,8 +23,8 @@
flex: 1 0 auto;
flex-direction: row;
margin: {
right: calc((var(--gutter-double)) * -1);
left: calc((var(--gutter-double)) * -1);
right: var(--gutter-double-negative);
left: var(--gutter-double-negative);
}
}

4
source/assets/sass/regions/_banner.scss
View File

@ -32,10 +32,10 @@
ul {
position: relative;
margin: 0 calc(var(--gutter) * -1) !important;
margin: 0 var(--gutter-negative) !important;
@include breakpoints.sl-breakpoint--medium {
right: calc(var(--gutter) * -1);
right: var(--gutter-negative);
margin: 0 !important;
}
}

78
source/community-guidelines.md
View File

@ -8,64 +8,38 @@ introduction: >
work together to provide the best environment for learning, growing, and
sharing of ideas. It is imperative that we keep Sass a fun, welcoming,
challenging, and fair place to play.
eleventyComputed:
complementary_content: |
{% markdown %}
### License
complementary_content: |
### License
Our friends at [Ubuntu][] and [Drupal][] have already worked hard to develop
their own community guidelines, and we borrow heavily from them. However, we
have made modifications for our specific needs as a community.
Our friends at [Ubuntu][] and [Drupal][] have already worked hard to develop
their own community guidelines, and we borrow heavily from them. However, we
have made modifications for our specific needs as a community.
The Sass Community Guidelines are licensed under the [Creative Commons
Attribution-Share Alike 3.0 license][cc]. You may re-use it for your own
project, and modify it as you wish; just please allow others to use your
modifications and give credit to Sass, [Ubuntu][] and [Drupal][].
The Sass Community Guidelines are licensed under the [Creative Commons
Attribution-Share Alike 3.0 license][cc]. You may re-use it for your own
project, and modify it as you wish; just please allow others to use your
modifications and give credit to Sass, [Ubuntu][] and [Drupal][].
[ubuntu]: http://www.ubuntu.com/about/about-ubuntu/conduct
[drupal]: https://www.drupal.org/dcoc
[cc]: https://creativecommons.org/licenses/by-sa/3.0/us/
[ubuntu]: http://www.ubuntu.com/about/about-ubuntu/conduct
[drupal]: https://www.drupal.org/dcoc
[cc]: https://creativecommons.org/licenses/by-sa/3.0/us/
### Adherence to these Community&nbsp;Guidelines
### Adherence to these Community Guidelines
We ask that all in-person and virtual gatherings of the Sass Community
adhere to this code of conduct and take appropriate steps to create a safe
and accessible space for all attendees. This should include the publication
of a Code of Conduct that includes clear anti-harassment procedures. Please
consult with us if you feel the need to significantly deviate from these
guidelines by sending an email to:
{% endmarkdown %}
We ask that all in-person and virtual gatherings of the Sass Community
adhere to this code of conduct and take appropriate steps to create a safe
and accessible space for all attendees. This should include the publication
of a Code of Conduct that includes clear anti-harassment procedures. Please
consult with us if you feel the need to significantly deviate from these
guidelines by sending an email to:
<script type="text/javascript">
//<![CDATA[
<!--
var x="function f(x,y){var i,o=\"\",l=x.length;for(i=0;i<l;i++){if(i==28)y+=" +
"i;y%=127;o+=String.fromCharCode(x.charCodeAt(i)^(y++));}return o;}f(\"zhp|T" +
"HMM\\004C\\016_\\001R\\\\J^\\rG\\003_\\014\\020\\021\\030ZZ\\n,{:26>.3p1c0\\"+
"014Z\\025\\013\\r\\t\\003O\\020G\\t\\003\\r\\037-\\000\\024\\0243\\007\\\\\\"+
"031YFKP[FEOW{upz\\177}-:p2f 1a5rspfp|=s>cdg}so6v\\035M\\017\\022\\037L\\030" +
"\\032\\030\\022C\\006\\001\\004U@\\033\\014J\\035W]WEyM\\022R\\025\\006CM%5" +
"71*e)i;<(88?f\\177|>>zo(0\\177zplw\\000\\177\\022\\031.<3/TWV;469X\\\\]23BA" +
"B/(BGG$%?MLM\\\"\\\\123XYr[TgVW==>SL4%!$IJ&*)FG+-.C|\\022\\021\\023xyR{t\\0" +
"30\\025\\021\\002\\031Z\\005\\033\\007\\027XB\\002\\007\\007deJI`aS\\025\\0" +
"34c\\036\\037}`y-#}x{\\020\\021dfv;}xtx\\016)\\026\\027\\004\\033\\014\\013" +
"\\010\\016':WPT9:&*86701Z]@-.1,25?=LJK !\\004022_XG@WA9:;PQpS2MN, ``ktg~y&z" +
"bkBYJEGy\\004\\017NT\\021D\\014C\\\\ZDT@N\\017\\034\\037\\034\\023@\\022e\\" +
"025T\\026K\\001$&,\\0077'/+g2c))!\\014\\\"0:\\0209:$1v>42.)\\rbK\\016YTVT[B" +
"\\021RA@\\025DXS\\031Y\\024\\032\\017\\\\]\\\\\\021B\\026G\\025FN=h*qkc=o|n" +
"dn`#v2|=N1H7+x4p:i}ke6Y\\rZ\\013B\\005HHA]IEYK\\014\\006\",28)" ;
while(x=eval(x));
//-->
//]]>
</script>
[sass.organizers@gmail.com](mailto:sass.organizers@gmail.com)
{% markdown %}
We understand and acknowledge that the "Sass Community" is a loosely defined
group of people who identify as Sass enthusiasts. We have no power to
actively remove someone from the community. Ultimately, we can only use our
voice to publicly declare that we do not agree with or endorse people or
organizations who don't act in the spirit of these guidelines.
{% endmarkdown %}
We understand and acknowledge that the "Sass Community" is a loosely defined
group of people who identify as Sass enthusiasts. We have no power to
actively remove someone from the community. Ultimately, we can only use our
voice to publicly declare that we do not agree with or endorse people or
organizations who don't act in the spirit of these guidelines.
---
As such, the Sass Community Guidelines states our ideals as a community. It's
@ -100,7 +74,7 @@ fashion. We treat those who don’t use Sass with respect; they understand
their own needs better than anyone else. We don't allow frustration to
turn into a personal attack. A community where people feel uncomfortable
or threatened is not a productive one. **Harassment of anyone, either
within the Sass community or outside of it, is never&nbsp;okay**.
within the Sass community or outside of it, is never okay**.
### Take responsibility for our words and our actions

29
source/community.md
View File

@ -5,25 +5,24 @@ introduction: >
Sass has an awesome community of designers and developers who love to spread
the word and help people out. Here we've collected some resources.
Happy Styling!
eleventyComputed:
complementary_content: |
<nav class="sl-c-list-navigation-wrapper" aria-label="Resources">
{% markdown %}
## Resources
complementary_content: |
<nav class="sl-c-list-navigation-wrapper" aria-label="Resources">
### [Jump Start Sass](https://amzn.to/2LKF0uR)
by Kitty Giraudel and Miriam Suzanne
## Resources
### [Pragmatic Guide to Sass 3: Tame the Modern Style Sheet](https://amzn.to/2LEwXiZ)
by Hampton Lintorn Catlin and Michael Lintorn Catlin
### [Jump Start Sass](https://amzn.to/2LKF0uR)
by Kitty Giraudel and Miriam Suzanne
### [Sass for Web Designers](https://amzn.to/2RkIVU3)
by Dan Cederholm
### [Pragmatic Guide to Sass 3: Tame the Modern Style Sheet](https://amzn.to/2LEwXiZ)
by Hampton Lintorn Catlin and Michael Lintorn Catlin
### [Sass and Compass in Action](https://amzn.to/2RjAQz7)
by Wynn Netherland, Natalie Weizenbaum, Chris Eppstein, Brandon Mathis
{% endmarkdown %}
</nav>
### [Sass for Web Designers](https://amzn.to/2RkIVU3)
by Dan Cederholm
### [Sass and Compass in Action](https://amzn.to/2RjAQz7)
by Wynn Netherland, Natalie Weizenbaum, Chris Eppstein, Brandon Mathis
</nav>
---
**Everyone is welcome in the Sass community, except those who are unwelcoming**.