diff --git a/README.md b/README.md index 0bfd20d88c..dcf6e293f2 100644 --- a/README.md +++ b/README.md @@ -53,6 +53,7 @@ Refers to snippets of code within the `_includes` directory that can be inserted Refers to `.scss` files within the `_sass` directory that define the theme's styles. - `minima.scss` — The core file imported by preprocessed `main.scss`, it defines the variable defaults for the theme and also further imports sass partials to supplement itself. + - `minima/_common.scss` — Common styling and mixins leveraged throughout the minima theme. - `minima/_base.scss` — Resets and defines base styles for various HTML elements. - `minima/_layout.scss` — Defines the visual style for various layouts. - `minima/_syntax-highlighting.scss` — Defines the styles for syntax-highlighting. diff --git a/_sass/minima.scss b/_sass/minima.scss index cb0865b1a2..2ee10cbd03 100644 --- a/_sass/minima.scss +++ b/_sass/minima.scss @@ -1,51 +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; - -$table-text-align: left !default; - -// Width of the content area -$content-width: 800px !default; - -$on-palm: 600px !default; -$on-laptop: 800px !default; - -// Use media queries like this: -// @include media-query($on-palm) { -// .wrapper { -// padding-right: $spacing-unit / 2; -// padding-left: $spacing-unit / 2; -// } -// } -@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" -; +@use "minima/base" as *; +@use "minima/layout" as *; +@use "minima/syntax-highlighting" as *; diff --git a/_sass/minima/_base.scss b/_sass/minima/_base.scss index fd2a0aff1b..3517e30f61 100644 --- a/_sass/minima/_base.scss +++ b/_sass/minima/_base.scss @@ -1,3 +1,7 @@ +@charset "utf-8"; + +@use "common" as *; + /** * Reset some basic elements */ diff --git a/_sass/minima/_common.scss b/_sass/minima/_common.scss new file mode 100644 index 0000000000..a60d960f2e --- /dev/null +++ b/_sass/minima/_common.scss @@ -0,0 +1,44 @@ +@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; + +$table-text-align: left !default; + +// Width of the content area +$content-width: 800px !default; + +$on-palm: 600px !default; +$on-laptop: 800px !default; + +// Use media queries like this: +// @include media-query($on-palm) { +// .wrapper { +// padding-right: $spacing-unit / 2; +// padding-left: $spacing-unit / 2; +// } +// } +@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/_layout.scss b/_sass/minima/_layout.scss index 3e7f132b88..6435a4e806 100644 --- a/_sass/minima/_layout.scss +++ b/_sass/minima/_layout.scss @@ -1,3 +1,8 @@ +@charset "utf-8"; + +@use "common" as *; +@use "base" as *; + /** * Site header */ diff --git a/_sass/minima/_syntax-highlighting.scss b/_sass/minima/_syntax-highlighting.scss index bccdb89953..50ef041f00 100644 --- a/_sass/minima/_syntax-highlighting.scss +++ b/_sass/minima/_syntax-highlighting.scss @@ -1,3 +1,7 @@ +@charset "utf-8"; + +@use "base" as *; + /** * Syntax highlighting styles */ diff --git a/assets/main.scss b/assets/main.scss index c60ebe425a..1498e71dda 100644 --- a/assets/main.scss +++ b/assets/main.scss @@ -2,4 +2,4 @@ # Only the main Sass file needs front matter (the dashes are enough) --- -@import "minima"; +@forward "minima";