diff --git a/_includes/head.html b/_includes/head.html
index c1d85a6..20fe7ba 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -1,10 +1,10 @@
-
+
{%- seo -%}
-
- {%- feed_meta -%}
+
+ {%- feed_meta -%}
diff --git a/_sass/minima.scss b/_sass/minima.scss
index ec70ca8..86cc9c8 100644
--- a/_sass/minima.scss
+++ b/_sass/minima.scss
@@ -1,55 +1,6 @@
@charset "utf-8";
-// Define defaults for each variable.
-$base-font-family: -apple-system,
-BlinkMacSystemFont,
-"Segoe UI",
-Roboto,
-Helvetica,
-Arial,
-sans-serif,
-"Apple Color Emoji",
-"Segoe UI Emoji",
-"Segoe UI Symbol" !default;
-$base-font-size : 16px !default;
-$base-font-weight: 400 !default;
-$small-font-size : $base-font-size * 0.875 !default;
-$base-line-height: 1.5 !default;
-$spacing-unit : 30px !default;
-$text-color : #111 !default;
-$background-color: #fdfdfd !default;
-$brand-color : #2a7ae2 !default;
-$grey-color : #828282 !default;
-$grey-color-light: lighten($grey-color, 40%) !default;
-$grey-color-dark : darken($grey-color, 25%) !default;
-$orange-color : #f66a0a !default;
-$table-text-align: left !default;
-// Width of the content area
-$content-width : 800px !default;
-$on-palm : 600px !default;
-$on-laptop : 800px !default;
-$on-medium : $on-palm !default;
-$on-large : $on-laptop !default;
-// Use media queries like this:
-// @include media-query($on-palm) {
-// .wrapper {
-// padding-right: calc($spacing-unit / 2);
-// padding-left: calc($spacing-unit / 2);
-// }
-// }
-// Notice the following mixin uses max-width, in a deprecated, desktop-first
-// approach, whereas media queries used elsewhere now use min-width.
-@mixin media-query($device) {
- @media screen and (max-width: $device) {
- @content;
- }
-}
-@mixin relative-font-size($ratio) {
- font-size: $base-font-size * $ratio;
-}
-
-// Import partials.
-@import "minima/base",
-"minima/layout",
-"minima/syntax-highlighting",
-"minima/extras";
+@use "minima/base" as *;
+@use "minima/layout" as *;
+@use "minima/syntax-highlighting" as *;
+@use "minima/extras" as *;
diff --git a/_sass/minima/_base.scss b/_sass/minima/_base.scss
index 9c59e21..8925103 100644
--- a/_sass/minima/_base.scss
+++ b/_sass/minima/_base.scss
@@ -1,3 +1,8 @@
+@charset "utf-8";
+
+@use "sass:color";
+@use "common" as *;
+
/**
* Reset some basic elements
*/
@@ -108,7 +113,7 @@ a {
text-decoration: none;
&:visited {
- color: darken($brand-color, 15%);
+ color: color.adjust($brand-color, $lightness: -15%);
}
&:hover {
@@ -234,21 +239,21 @@ table {
margin-bottom: $spacing-unit;
width: 100%;
text-align: $table-text-align;
- color: lighten($text-color, 18%);
+ color: color.adjust($text-color, $lightness: 18%);
border-collapse: collapse;
border: 1px solid $grey-color-light;
tr {
&:nth-child(even) {
- background-color: lighten($grey-color-light, 6%);
+ background-color: color.adjust($grey-color-light, $lightness: 6%);
}
}
th, td {
padding: calc($spacing-unit / 3) calc($spacing-unit / 2);
}
th {
- background-color: lighten($grey-color-light, 3%);
- border: 1px solid darken($grey-color-light, 4%);
- border-bottom-color: darken($grey-color-light, 12%);
+ background-color: color.adjust($grey-color-light, $lightness: 3%);
+ border: 1px solid color.adjust($grey-color-light, $lightness: -4%);
+ border-bottom-color: color.adjust($grey-color-light, $lightness: -12%);
}
td {
border: 1px solid $grey-color-light;
diff --git a/_sass/minima/_common.scss b/_sass/minima/_common.scss
new file mode 100644
index 0000000..a9d10eb
--- /dev/null
+++ b/_sass/minima/_common.scss
@@ -0,0 +1,53 @@
+@charset "utf-8";
+
+@use "sass:color";
+
+// Define defaults for each variable.
+$base-font-family: -apple-system,
+BlinkMacSystemFont,
+"Segoe UI",
+Roboto,
+Helvetica,
+Arial,
+sans-serif,
+"Apple Color Emoji",
+"Segoe UI Emoji",
+"Segoe UI Symbol" !default;
+$base-font-size : 16px !default;
+$base-font-weight: 400 !default;
+$small-font-size : $base-font-size * 0.875 !default;
+$base-line-height: 1.5 !default;
+$spacing-unit : 30px !default;
+$text-color : #111 !default;
+$background-color: #fdfdfd !default;
+$brand-color : #2a7ae2 !default;
+$grey-color : #828282 !default;
+$grey-color-light: color.adjust($grey-color, $lightness: 40%) !default;
+$grey-color-dark : color.adjust($grey-color, $lightness: -25%) !default;
+$orange-color : #f66a0a !default;
+$table-text-align: left !default;
+// Width of the content area
+$content-width : 800px !default;
+$on-palm : 600px !default;
+$on-laptop : 800px !default;
+$on-medium : $on-palm !default;
+$on-large : $on-laptop !default;
+// Use media queries like this:
+// @include media-query($on-palm) {
+// .wrapper {
+// padding-right: calc($spacing-unit / 2);
+// padding-left: calc($spacing-unit / 2);
+// }
+// }
+// Notice the following mixin uses max-width, in a deprecated, desktop-first
+// approach, whereas media queries used elsewhere now use min-width.
+@mixin media-query($device) {
+ @media screen and (max-width: $device) {
+ @content;
+ }
+}
+
+@mixin relative-font-size($ratio) {
+ font-size: $base-font-size * $ratio;
+}
+
diff --git a/_sass/minima/_extras.scss b/_sass/minima/_extras.scss
index 8829a7b..ec99652 100644
--- a/_sass/minima/_extras.scss
+++ b/_sass/minima/_extras.scss
@@ -1,3 +1,7 @@
+@charset "utf-8";
+
+@use "common" as *;
+
.people-box {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, auto));
diff --git a/_sass/minima/_layout.scss b/_sass/minima/_layout.scss
index d224a8c..6c4921d 100644
--- a/_sass/minima/_layout.scss
+++ b/_sass/minima/_layout.scss
@@ -1,3 +1,7 @@
+@charset "utf-8";
+
+@use "common" as *;
+@use "base" as *;
@use "sass:math";
/**
diff --git a/_sass/minima/_syntax-highlighting.scss b/_sass/minima/_syntax-highlighting.scss
index bccdb89..da6851a 100644
--- a/_sass/minima/_syntax-highlighting.scss
+++ b/_sass/minima/_syntax-highlighting.scss
@@ -1,3 +1,8 @@
+@charset "utf-8";
+
+@use "common" as *;
+@use "base" as *;
+
/**
* Syntax highlighting styles
*/
diff --git a/assets/css/style.scss b/assets/main.scss
similarity index 65%
rename from assets/css/style.scss
rename to assets/main.scss
index 9858c37..1498e71 100644
--- a/assets/css/style.scss
+++ b/assets/main.scss
@@ -1,5 +1,5 @@
----
-# Only the main Sass file needs front matter (the dashes are enough)
----
+---
+# Only the main Sass file needs front matter (the dashes are enough)
+---
-@import "minima";
+@forward "minima";