From 519c8ee814daf7325188ed3e88573703f34cfb59 Mon Sep 17 00:00:00 2001 From: David Chamberlain Date: Thu, 13 Feb 2025 19:55:31 -0500 Subject: [PATCH 1/3] Migrate shared scss to minima/_common Signed-off-by: David Chamberlain --- README.md | 1 + _sass/minima.scss | 44 +-------------------------------------- _sass/minima/_common.scss | 42 +++++++++++++++++++++++++++++++++++++ 3 files changed, 44 insertions(+), 43 deletions(-) create mode 100644 _sass/minima/_common.scss 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..230efa3d5b 100644 --- a/_sass/minima.scss +++ b/_sass/minima.scss @@ -1,50 +1,8 @@ @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/common", "minima/base", "minima/layout", "minima/syntax-highlighting" diff --git a/_sass/minima/_common.scss b/_sass/minima/_common.scss new file mode 100644 index 0000000000..fc99073c13 --- /dev/null +++ b/_sass/minima/_common.scss @@ -0,0 +1,42 @@ +// 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; +} From 20741901c6c423ea6fe5d01aa53efe85538bb46f Mon Sep 17 00:00:00 2001 From: David Chamberlain Date: Thu, 13 Feb 2025 19:55:31 -0500 Subject: [PATCH 2/3] Address Sass '@import' deprecation warnings Deprecation warnings: - Deprecation Warning [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0. More info and automated migrator: https://sass-lang.com/d/import Migrate to use of '@use', '@forward', and '@include' instead Signed-off-by: David Chamberlain --- _sass/minima.scss | 9 +++------ _sass/minima/_base.scss | 4 ++++ _sass/minima/_common.scss | 2 ++ _sass/minima/_layout.scss | 5 +++++ _sass/minima/_syntax-highlighting.scss | 4 ++++ assets/main.scss | 2 +- 6 files changed, 19 insertions(+), 7 deletions(-) diff --git a/_sass/minima.scss b/_sass/minima.scss index 230efa3d5b..2ee10cbd03 100644 --- a/_sass/minima.scss +++ b/_sass/minima.scss @@ -1,9 +1,6 @@ @charset "utf-8"; // Import partials. -@import - "minima/common", - "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 index fc99073c13..a60d960f2e 100644 --- a/_sass/minima/_common.scss +++ b/_sass/minima/_common.scss @@ -1,3 +1,5 @@ +@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; 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"; From fc4ab9807d640a4fbb3edcb56b8e0d1657fdbd72 Mon Sep 17 00:00:00 2001 From: David Chamberlain Date: Thu, 13 Feb 2025 18:40:48 -0500 Subject: [PATCH 3/3] Address Sass global function deprecation warnings Deprecation warnings: - Deprecation Warning [global-builtin]: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0. Use color.adjust instead. - Deprecation Warning [color-functions]: lighten() is deprecated. - Deprecation Warning [color-functions]: darken() is deprecated. Use 'color.adjust' instead to preserve existing behavior Signed-off-by: David Chamberlain --- _sass/minima/_base.scss | 14 ++++++++------ _sass/minima/_common.scss | 6 ++++-- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/_sass/minima/_base.scss b/_sass/minima/_base.scss index 3517e30f61..2a39f769ab 100644 --- a/_sass/minima/_base.scss +++ b/_sass/minima/_base.scss @@ -1,5 +1,7 @@ @charset "utf-8"; +@use "sass:color"; + @use "common" as *; /** @@ -111,7 +113,7 @@ a { text-decoration: none; &:visited { - color: darken($brand-color, 15%); + color: color.adjust($brand-color, $lightness: -15%); } &:hover { @@ -236,21 +238,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: ($spacing-unit * 0.3333333333) ($spacing-unit * 0.5); } 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 index a60d960f2e..19f63c44c9 100644 --- a/_sass/minima/_common.scss +++ b/_sass/minima/_common.scss @@ -1,5 +1,7 @@ @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; @@ -15,8 +17,8 @@ $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; +$grey-color-light: color.adjust($grey-color, $lightness: 40%) !default; +$grey-color-dark: color.adjust($grey-color, $lightness: -25%) !default; $table-text-align: left !default;