Permalink
Browse files

Use Jekyll native Sass/SCSS preprocessor

- Move .scss files to default `_sass` folder
- Configure Sass/SCSS in `_config.yml`
- Run .scss files through Autoprefixer
- Remove unnecessary npm scripts for building CSS
- Close #333
  • Loading branch information...
1 parent b6be3aa commit 4cc9fcb40a528752e49e3872e3be57007fcfba8d @mmistakes mmistakes committed Aug 8, 2016
Showing with 127 additions and 85 deletions.
  1. +6 −0 _config.yml
  2. +9 −0 {assets/_scss → _sass}/_animations.scss
  3. +3 −3 {assets/_scss → _sass}/_archive.scss
  4. +10 −4 {assets/_scss → _sass}/_base.scss
  5. +3 −4 {assets/_scss → _sass}/_buttons.scss
  6. +4 −2 {assets/_scss → _sass}/_footer.scss
  7. 0 {assets/_scss → _sass}/_forms.scss
  8. +4 −2 {assets/_scss → _sass}/_masthead.scss
  9. +20 −17 {assets/_scss → _sass}/_mixins.scss
  10. +12 −5 {assets/_scss → _sass}/_navigation.scss
  11. +7 −7 {assets/_scss → _sass}/_notices.scss
  12. +13 −7 {assets/_scss → _sass}/_page.scss
  13. 0 {assets/_scss → _sass}/_print.scss
  14. +18 −13 {assets/_scss → _sass}/_reset.scss
  15. +1 −0 {assets/_scss → _sass}/_sidebar.scss
  16. 0 {assets/_scss → _sass}/_syntax.scss
  17. 0 {assets/_scss → _sass}/_tables.scss
  18. +13 −7 {assets/_scss → _sass}/_utilities.scss
  19. 0 {assets/_scss → _sass}/_variables.scss
  20. 0 {assets/_scss → _sass}/vendor/breakpoint/_breakpoint.scss
  21. 0 {assets/_scss → _sass}/vendor/breakpoint/_context.scss
  22. 0 {assets/_scss → _sass}/vendor/breakpoint/_helpers.scss
  23. 0 {assets/_scss → _sass}/vendor/breakpoint/_legacy-settings.scss
  24. 0 {assets/_scss → _sass}/vendor/breakpoint/_no-query.scss
  25. 0 {assets/_scss → _sass}/vendor/breakpoint/_parsers.scss
  26. 0 {assets/_scss → _sass}/vendor/breakpoint/_respond-to.scss
  27. 0 {assets/_scss → _sass}/vendor/breakpoint/_settings.scss
  28. 0 {assets/_scss → _sass}/vendor/breakpoint/parsers/_double.scss
  29. 0 {assets/_scss → _sass}/vendor/breakpoint/parsers/_query.scss
  30. 0 {assets/_scss → _sass}/vendor/breakpoint/parsers/_resolution.scss
  31. 0 {assets/_scss → _sass}/vendor/breakpoint/parsers/_single.scss
  32. 0 {assets/_scss → _sass}/vendor/breakpoint/parsers/_triple.scss
  33. 0 {assets/_scss → _sass}/vendor/breakpoint/parsers/double/_default-pair.scss
  34. 0 {assets/_scss → _sass}/vendor/breakpoint/parsers/double/_default.scss
  35. 0 {assets/_scss → _sass}/vendor/breakpoint/parsers/double/_double-string.scss
  36. 0 {assets/_scss → _sass}/vendor/breakpoint/parsers/resolution/_resolution.scss
  37. 0 {assets/_scss → _sass}/vendor/breakpoint/parsers/single/_default.scss
  38. 0 {assets/_scss → _sass}/vendor/breakpoint/parsers/triple/_default.scss
  39. 0 {assets/_scss → _sass}/vendor/font-awesome/_animated.scss
  40. 0 {assets/_scss → _sass}/vendor/font-awesome/_bordered-pulled.scss
  41. 0 {assets/_scss → _sass}/vendor/font-awesome/_core.scss
  42. 0 {assets/_scss → _sass}/vendor/font-awesome/_fixed-width.scss
  43. 0 {assets/_scss → _sass}/vendor/font-awesome/_font-awesome.scss
  44. 0 {assets/_scss → _sass}/vendor/font-awesome/_icons.scss
  45. 0 {assets/_scss → _sass}/vendor/font-awesome/_larger.scss
  46. 0 {assets/_scss → _sass}/vendor/font-awesome/_list.scss
  47. 0 {assets/_scss → _sass}/vendor/font-awesome/_mixins.scss
  48. 0 {assets/_scss → _sass}/vendor/font-awesome/_path.scss
  49. 0 {assets/_scss → _sass}/vendor/font-awesome/_rotated-flipped.scss
  50. 0 {assets/_scss → _sass}/vendor/font-awesome/_screen-reader.scss
  51. 0 {assets/_scss → _sass}/vendor/font-awesome/_stacked.scss
  52. 0 {assets/_scss → _sass}/vendor/font-awesome/_variables.scss
  53. 0 {assets/_scss → _sass}/vendor/magnific-popup/_magnific-popup.scss
  54. 0 {assets/_scss → _sass}/vendor/magnific-popup/_settings.scss
  55. 0 {assets/_scss → _sass}/vendor/susy/_su.scss
  56. 0 {assets/_scss → _sass}/vendor/susy/_susy.scss
  57. 0 {assets/_scss → _sass}/vendor/susy/_susyone.scss
  58. 0 {assets/_scss → _sass}/vendor/susy/susy/_su.scss
  59. 0 {assets/_scss → _sass}/vendor/susy/susy/language/_susy.scss
  60. 0 {assets/_scss → _sass}/vendor/susy/susy/language/_susyone.scss
  61. 0 {assets/_scss → _sass}/vendor/susy/susy/language/susy/_background.scss
  62. 0 {assets/_scss → _sass}/vendor/susy/susy/language/susy/_bleed.scss
  63. 0 {assets/_scss → _sass}/vendor/susy/susy/language/susy/_box-sizing.scss
  64. 0 {assets/_scss → _sass}/vendor/susy/susy/language/susy/_breakpoint-plugin.scss
  65. 0 {assets/_scss → _sass}/vendor/susy/susy/language/susy/_container.scss
  66. 0 {assets/_scss → _sass}/vendor/susy/susy/language/susy/_context.scss
  67. 0 {assets/_scss → _sass}/vendor/susy/susy/language/susy/_gallery.scss
  68. 0 {assets/_scss → _sass}/vendor/susy/susy/language/susy/_grids.scss
  69. 0 {assets/_scss → _sass}/vendor/susy/susy/language/susy/_gutters.scss
  70. 0 {assets/_scss → _sass}/vendor/susy/susy/language/susy/_isolate.scss
  71. 0 {assets/_scss → _sass}/vendor/susy/susy/language/susy/_margins.scss
  72. 0 {assets/_scss → _sass}/vendor/susy/susy/language/susy/_padding.scss
  73. 0 {assets/_scss → _sass}/vendor/susy/susy/language/susy/_rows.scss
  74. 0 {assets/_scss → _sass}/vendor/susy/susy/language/susy/_settings.scss
  75. 0 {assets/_scss → _sass}/vendor/susy/susy/language/susy/_span.scss
  76. 0 {assets/_scss → _sass}/vendor/susy/susy/language/susy/_validation.scss
  77. 0 {assets/_scss → _sass}/vendor/susy/susy/language/susyone/_background.scss
  78. 0 {assets/_scss → _sass}/vendor/susy/susy/language/susyone/_functions.scss
  79. 0 {assets/_scss → _sass}/vendor/susy/susy/language/susyone/_grid.scss
  80. 0 {assets/_scss → _sass}/vendor/susy/susy/language/susyone/_isolation.scss
  81. 0 {assets/_scss → _sass}/vendor/susy/susy/language/susyone/_margin.scss
  82. 0 {assets/_scss → _sass}/vendor/susy/susy/language/susyone/_media.scss
  83. 0 {assets/_scss → _sass}/vendor/susy/susy/language/susyone/_padding.scss
  84. 0 {assets/_scss → _sass}/vendor/susy/susy/language/susyone/_settings.scss
  85. 0 {assets/_scss → _sass}/vendor/susy/susy/output/_float.scss
  86. 0 {assets/_scss → _sass}/vendor/susy/susy/output/_shared.scss
  87. 0 {assets/_scss → _sass}/vendor/susy/susy/output/_support.scss
  88. 0 {assets/_scss → _sass}/vendor/susy/susy/output/float/_container.scss
  89. 0 {assets/_scss → _sass}/vendor/susy/susy/output/float/_end.scss
  90. 0 {assets/_scss → _sass}/vendor/susy/susy/output/float/_isolate.scss
  91. 0 {assets/_scss → _sass}/vendor/susy/susy/output/float/_span.scss
  92. 0 {assets/_scss → _sass}/vendor/susy/susy/output/shared/_background.scss
  93. 0 {assets/_scss → _sass}/vendor/susy/susy/output/shared/_container.scss
  94. 0 {assets/_scss → _sass}/vendor/susy/susy/output/shared/_direction.scss
  95. 0 {assets/_scss → _sass}/vendor/susy/susy/output/shared/_inspect.scss
  96. 0 {assets/_scss → _sass}/vendor/susy/susy/output/shared/_margins.scss
  97. 0 {assets/_scss → _sass}/vendor/susy/susy/output/shared/_output.scss
  98. 0 {assets/_scss → _sass}/vendor/susy/susy/output/shared/_padding.scss
  99. 0 {assets/_scss → _sass}/vendor/susy/susy/output/support/_background.scss
  100. 0 {assets/_scss → _sass}/vendor/susy/susy/output/support/_box-sizing.scss
  101. 0 {assets/_scss → _sass}/vendor/susy/susy/output/support/_clearfix.scss
  102. 0 {assets/_scss → _sass}/vendor/susy/susy/output/support/_prefix.scss
  103. 0 {assets/_scss → _sass}/vendor/susy/susy/output/support/_rem.scss
  104. 0 {assets/_scss → _sass}/vendor/susy/susy/output/support/_support.scss
  105. 0 {assets/_scss → _sass}/vendor/susy/susy/su/_grid.scss
  106. 0 {assets/_scss → _sass}/vendor/susy/susy/su/_settings.scss
  107. 0 {assets/_scss → _sass}/vendor/susy/susy/su/_utilities.scss
  108. 0 {assets/_scss → _sass}/vendor/susy/susy/su/_validation.scss
  109. +0 −4 assets/css/main.css
  110. +3 −0 assets/{_scss → css}/main.scss
  111. +1 −10 package.json
View
@@ -145,6 +145,12 @@ kramdown:
enable_coderay: false
+# Sass/SCSS
+sass:
+ sass_dir: _sass
+ style: compressed # http://sass-lang.com/documentation/file.SASS_REFERENCE.html#output_style
+
+
# Outputting
permalink: /:categories/:title/
paginate: 5 # amount of posts to show
@@ -2,6 +2,15 @@
ANIMATIONS
========================================================================== */
+@-webkit-keyframes intro {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+
@keyframes intro {
0% {
opacity: 0;
@@ -41,7 +41,7 @@
}
}
-// remove border
+/* remove border*/
.page__content {
.archive__item-title {
@@ -129,8 +129,8 @@
}
@include breakpoint($medium) {
- margin-left: 0; // reset before mixin does its thing
- margin-right: 0; // reset before mixin does its thing
+ margin-left: 0; /* reset before mixin does its thing*/
+ margin-right: 0; /* reset before mixin does its thing*/
@include gallery(2.5 of 10);
.archive__item-teaser {
@@ -129,7 +129,7 @@ tt, code, kbd, samp, pre {
}
pre {
- overflow-x: auto; // add scrollbars to wide code blocks
+ overflow-x: auto; /* add scrollbars to wide code blocks*/
}
p > code,
@@ -147,7 +147,7 @@ td > code {
&:before, &:after {
letter-spacing: -0.2em;
- content: "\00a0"; // non-breaking space
+ content: "\00a0"; /* non-breaking space*/
}
}
@@ -179,9 +179,12 @@ li ol {
/* Figures and images */
figure {
+ display: -webkit-box;
display: flex;
- justify-content: space-between;
- align-items: flex-start;
+ -webkit-box-pack: justify;
+ justify-content: space-between;
+ -webkit-box-align: start;
+ align-items: flex-start;
flex-wrap: wrap;
margin: 2em 0;
@@ -194,6 +197,7 @@ figure {
img {
width: 100%;
border-radius: $border-radius;
+ -webkit-transition: $global-transition;
transition: $global-transition;
}
@@ -240,6 +244,7 @@ figcaption {
color: inherit;
text-decoration: none;
border-bottom: 1px solid $light-gray;
+ -webkit-transition: $global-transition;
transition: $global-transition;
&:hover {
@@ -305,5 +310,6 @@ nav {
========================================================================== */
b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a, tr, td, form button, input[type="submit"], .btn, .highlight, .archive__item-teaser {
+ -webkit-transition: $global-transition;
transition: $global-transition;
}
@@ -31,7 +31,7 @@
}
.icon + .hidden {
- margin-left: -0.5em; // override for hidden text
+ margin-left: -0.5em; /* override for hidden text*/
}
/* fills width of parent container */
@@ -49,7 +49,7 @@
&--inverse {
color: $gray !important;
- border: 1px solid $light-gray !important; // override
+ border: 1px solid $light-gray !important; /* override*/
background-color: #fff;
&:hover {
@@ -61,7 +61,7 @@
/* light outline */
&--light-outline {
- border: 1px solid #fff !important; // override
+ border: 1px solid #fff !important; /* override*/
background-color: transparent;
}
@@ -111,7 +111,6 @@
pointer-events: none;
cursor: not-allowed;
filter: alpha(opacity=65);
- -webkit-box-shadow: none;
box-shadow: none;
opacity: 0.65;
}
@@ -14,8 +14,10 @@
/* sticky footer fix end */
margin-top: 3em;
color: mix(#fff, $gray, 25%);
- animation: intro 0.3s both;
- animation-delay: 0.45s;
+ -webkit-animation: intro 0.3s both;
+ animation: intro 0.3s both;
+ -webkit-animation-delay: 0.45s;
+ animation-delay: 0.45s;
background-color: $lighter-gray;
border-top: 1px solid $light-gray;
File renamed without changes.
@@ -5,8 +5,10 @@
.masthead {
position: relative;
border-bottom: 1px solid $border-color;
- animation: intro 0.3s both;
- animation-delay: 0.15s;
+ -webkit-animation: intro 0.3s both;
+ animation: intro 0.3s both;
+ -webkit-animation-delay: 0.15s;
+ animation-delay: 0.15s;
z-index: 20;
&__inner-wrap {
@@ -3,9 +3,9 @@
========================================================================== */
%tab-focus {
- // Default
+ /* Default*/
outline: thin dotted $warning-color;
- // Webkit
+ /* Webkit*/
outline: 5px auto $warning-color;
outline-offset: -2px;
}
@@ -23,21 +23,24 @@
Bourbon clearfix
========================================================================== */
-// Provides an easy way to include a clearfix for containing floats.
-//
-// @link http://cssmojo.com/latest_new_clearfix_so_far/
-//
-// @example scss - Usage
-// .element {
-// @include clearfix;
-// }
-//
-// @example css - CSS Output
-// .element::after {
-// clear: both;
-// content: "";
-// display: table;
-// }
+/*
+ * Provides an easy way to include a clearfix for containing floats.
+ * link http://cssmojo.com/latest_new_clearfix_so_far/
+ *
+ * example scss - Usage
+ *
+ * .element {
+ * @include clearfix;
+ * }
+ *
+ * example css - CSS Output
+ *
+ * .element::after {
+ * clear: both;
+ * content: "";
+ * display: table;
+ * }
+*/
@mixin clearfix {
clear: both;
@@ -14,8 +14,10 @@
padding-left: 2em;
padding-right: 2em;
font-family: $sans-serif;
- animation: intro 0.3s both;
- animation-delay: 0.30s;
+ -webkit-animation: intro 0.3s both;
+ animation: intro 0.3s both;
+ -webkit-animation-delay: 0.30s;
+ animation-delay: 0.30s;
@include breakpoint($large) {
padding-left: 1em;
@@ -232,12 +234,17 @@
height: 4px;
background: mix(#fff, $primary-color, 50%);
width: 100%;
+ -webkit-transition: $global-transition;
transition: $global-transition;
- transform: scaleX(0); // hide
+ -webkit-transform: scaleX(0);
+ -ms-transform: scaleX(0);
+ transform: scaleX(0); /* hide*/
}
&:hover:before {
- transform: scaleX(1); // reveal
+ -webkit-transform: scaleX(1);
+ -ms-transform: scaleX(1);
+ transform: scaleX(1); /* reveal*/
}
}
}
@@ -414,7 +421,7 @@
font-weight: normal;
}
- // hide sub sub links on small screens
+ /* hide sub sub links on small screens*/
li > ul li {
display: none;
@@ -11,34 +11,34 @@
*/
@mixin notice($notice-color) {
- margin: 2em 0 !important; // override
+ margin: 2em 0 !important; /* override*/
padding: 1em;
font-family: $global-font-family;
font-size: $type-size-6 !important;
- text-indent: initial; // override
+ text-indent: initial; /* override*/
background-color: mix(#fff, $notice-color, 90%);
border-radius: $border-radius;
box-shadow: 0 1px 1px rgba($notice-color, 0.25);
h4 {
- margin-top: 0 !important; // override
+ margin-top: 0 !important; /* override*/
margin-bottom: 0.75em;
}
@at-root .page__content #{&} h4 {
- // using at-root to override .page-content h4 font size
+ /* using at-root to override .page-content h4 font size*/
margin-bottom: 0;
font-size: 1em;
}
p {
&:last-child {
- margin-bottom: 0 !important; // override
+ margin-bottom: 0 !important; /* override*/
}
}
h4 + p {
- // remove space above paragraphs that appear directly after notice headline
+ /* remove space above paragraphs that appear directly after notice headline*/
margin-top: 0;
padding-top: 0;
}
@@ -57,7 +57,7 @@
ul {
&:last-child {
- margin-bottom: 0; // override
+ margin-bottom: 0; /* override*/
}
}
}
@@ -8,8 +8,10 @@
margin-top: 2em;
padding-left: 1em;
padding-right: 1em;
- animation: intro 0.3s both;
- animation-delay: 0.35s;
+ -webkit-animation: intro 0.3s both;
+ animation: intro 0.3s both;
+ -webkit-animation-delay: 0.35s;
+ animation-delay: 0.35s;
@include breakpoint($x-large) {
max-width: $x-large;
@@ -63,7 +65,7 @@
p {
margin: 0 0 $indent-var;
- // sibling indentation
+ /* sibling indentation*/
@if $paragraph-indent == true {
& + p {
text-indent: $indent-var;
@@ -111,8 +113,10 @@
position: relative;
margin-bottom: 2em;
@include clearfix;
- animation: intro 0.3s both;
- animation-delay: 0.25s;
+ -webkit-animation: intro 0.3s both;
+ animation: intro 0.3s both;
+ -webkit-animation-delay: 0.25s;
+ animation-delay: 0.25s;
&--overlay {
position: relative;
@@ -122,8 +126,10 @@
background-size: cover;
background-repeat: no-repeat;
background-position: center;
- animation: intro 0.3s both;
- animation-delay: 0.25s;
+ -webkit-animation: intro 0.3s both;
+ animation: intro 0.3s both;
+ -webkit-animation-delay: 0.25s;
+ animation-delay: 0.25s;
a {
color: #fff;
File renamed without changes.
Oops, something went wrong.

0 comments on commit 4cc9fcb

Please sign in to comment.