From acb0c1788976af1601ac300b9206e1c898a29d5b Mon Sep 17 00:00:00 2001
From: Andreas Deininger <andreas@deininger.net>
Date: Sat, 07 Jun 2025 12:57:26 +0000
Subject: [PATCH] chore: migrate libsass to dartsass (#562)
---
assets/scss/main.scss | 59 ++---
assets/scss/partials/components/_archive.scss | 18 +
assets/scss/partials/components/_optionswitch.scss | 27 +-
assets/scss/partials/components/_navbarburger.scss | 9
assets/scss/partials/vendors/_tableofcontents.scss | 4
assets/scss/partials/components/_sidebar.scss | 17 +
assets/scss/partials/components/_alert.scss | 12
assets/scss/partials/_base.scss | 5
assets/scss/partials/components/_post.scss | 68 +++---
assets/scss/partials/vendors/_table.scss | 6
assets/scss/partials/layout/_body.scss | 8
assets/scss/partials/components/_footer.scss | 6
assets/scss/partials/components/_category.scss | 15
assets/scss/partials/components/_tag.scss | 11
assets/scss/partials/components/_wrapper.scss | 30 +-
assets/scss/partials/layout/_header.scss | 15
assets/scss/modules/_color_theme.scss | 53 ++--
assets/scss/partials/_hugo.scss | 23 +-
assets/scss/partials/components/_pagination.scss | 6
assets/scss/partials/vendors/_mediumzoom.scss | 6
assets/scss/partials/components/_notice.scss | 26 +-
assets/scss/partials/vendors/_contactform.scss | 15
assets/scss/modules/_config.scss | 6
assets/scss/partials/components/_portfolio.scss | 51 ++--
.github/workflows/update-resources.yml | 4
assets/scss/partials/layout/_nav.scss | 27 +-
layouts/partials/head.html | 2
netlify.toml | 14 +
28 files changed, 308 insertions(+), 235 deletions(-)
diff --git a/.github/workflows/update-resources.yml b/.github/workflows/update-resources.yml
index f8ad551..e1404a8 100644
--- a/.github/workflows/update-resources.yml
+++ b/.github/workflows/update-resources.yml
@@ -11,6 +11,8 @@
steps:
- name: checkout
uses: actions/checkout@v4
+ - name: install dart sass
+ run: sudo snap install dart-sass --edge
- name: setup hugo
uses: peaceiris/actions-hugo@v3
with:
@@ -19,7 +21,7 @@
- name: setup node
uses: actions/setup-node@v4
with:
- node-version: 22
+ node-version: 24
- name: install
run: |
npm ci
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index f33d27d..777928d 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -1,30 +1,29 @@
-@import 'hugo:vars';
-@import './modules/variables';
-@import './modules/config';
-@import './modules/color_theme';
-@import './partials/hugo';
-@import './partials/base';
-@import './partials/layout/html';
-@import './partials/layout/body';
-@import './partials/layout/header';
-@import './partials/layout/nav';
-@import './partials/components/animated';
-@import './partials/components/category';
-@import './partials/components/tag';
-@import './partials/components/wrapper';
-@import './partials/components/sidebar';
-@import './partials/components/footer';
-@import './partials/components/pagination';
-@import './partials/components/navbarburger';
-@import './partials/components/comment';
-@import './partials/components/optionswitch';
-@import './partials/components/post';
-@import './partials/components/alert';
-@import './partials/components/portfolio';
-@import './partials/components/page404';
-@import './partials/components/archive';
-@import './partials/components/notice';
-@import './partials/vendors/mediumzoom';
-@import './partials/vendors/contactform';
-@import './partials/vendors/tableofcontents';
-@import './partials/vendors/table';
+@use 'modules/variables' as *;
+@use 'modules/config';
+@use 'modules/color_theme';
+@use 'partials/hugo';
+@use 'partials/base';
+@use 'partials/layout/html';
+@use 'partials/layout/body';
+@use 'partials/layout/header';
+@use 'partials/layout/nav';
+@use 'partials/components/animated';
+@use 'partials/components/category';
+@use 'partials/components/tag';
+@use 'partials/components/wrapper';
+@use 'partials/components/sidebar';
+@use 'partials/components/footer';
+@use 'partials/components/pagination';
+@use 'partials/components/navbarburger';
+@use 'partials/components/comment';
+@use 'partials/components/optionswitch';
+@use 'partials/components/post';
+@use 'partials/components/alert';
+@use 'partials/components/portfolio';
+@use 'partials/components/page404';
+@use 'partials/components/archive';
+@use 'partials/components/notice';
+@use 'partials/vendors/mediumzoom';
+@use 'partials/vendors/contactform';
+@use 'partials/vendors/tableofcontents';
+@use 'partials/vendors/table';
diff --git a/assets/scss/modules/_color_theme.scss b/assets/scss/modules/_color_theme.scss
index 155a74c..68a0994 100644
--- a/assets/scss/modules/_color_theme.scss
+++ b/assets/scss/modules/_color_theme.scss
@@ -1,29 +1,32 @@
+@use 'modules/variables' as var;
+@use "sass:map";
+
$themes: (
light: (
- accent: $accent--lightmode,
- primary: $primary--lightmode,
- primary-light: $primary-light--lightmode,
- primary-lighter: $primary-lighter--lightmode,
- info: $info,
- shadow: $shadow--lightmode,
- border: 1px solid $primary-lighter--lightmode,
- alert: $warning,
- success: $success,
- warning: $warning,
- danger: $danger,
+ accent: var.$accent--lightmode,
+ primary: var.$primary--lightmode,
+ primary-light: var.$primary-light--lightmode,
+ primary-lighter: var.$primary-lighter--lightmode,
+ info: var.$info,
+ shadow: var.$shadow--lightmode,
+ border: 1px solid var.$primary-lighter--lightmode,
+ alert: var.$warning,
+ success: var.$success,
+ warning: var.$warning,
+ danger: var.$danger,
),
dark: (
- accent: $accent--darkmode,
- primary: $primary--darkmode,
- primary-light: $primary-light--darkmode,
- primary-lighter: $primary-lighter--darkmode,
- info: $info,
- shadow: $shadow--darkmode,
- border: 1px solid $primary-lighter--darkmode,
- alert: $warning,
- success: $success,
- warning: $warning,
- danger: $danger,
+ accent: var.$accent--darkmode,
+ primary: var.$primary--darkmode,
+ primary-light: var.$primary-light--darkmode,
+ primary-lighter: var.$primary-lighter--darkmode,
+ info: var.$info,
+ shadow: var.$shadow--darkmode,
+ border: 1px solid var.$primary-lighter--darkmode,
+ alert: var.$warning,
+ success: var.$success,
+ warning: var.$warning,
+ danger: var.$danger,
),
);
@@ -33,8 +36,8 @@
@each $theme, $map in $themes {
.theme--#{$theme} & {
@each $key, $submap in $map {
- $value: map-get(map-get($themes, $theme), '#{$key}');
- $theme-map: map-merge(
+ $value: map.get(map.get($themes, $theme), '#{$key}');
+ $theme-map: map.merge(
$theme-map,
(
$key: $value,
@@ -48,5 +51,5 @@
}
@function t($key) {
- @return map-get($theme-map, $key);
+ @return map.get($theme-map, $key);
}
diff --git a/assets/scss/modules/_config.scss b/assets/scss/modules/_config.scss
index 2202333..a866a31 100644
--- a/assets/scss/modules/_config.scss
+++ b/assets/scss/modules/_config.scss
@@ -1,3 +1,5 @@
+@use 'hugo:vars' as hugo;
+
@mixin desktop {
@media screen and (min-width: 961px) {
@content;
@@ -17,13 +19,13 @@
}
@mixin ltr {
- @if $text-direction == ltr {
+ @if hugo.$text-direction == ltr {
@content;
}
}
@mixin rtl {
- @if $text-direction == rtl {
+ @if hugo.$text-direction == rtl {
@content;
}
}
diff --git a/assets/scss/partials/_base.scss b/assets/scss/partials/_base.scss
index dfabf0c..9164197 100644
--- a/assets/scss/partials/_base.scss
+++ b/assets/scss/partials/_base.scss
@@ -1,3 +1,4 @@
+@use 'modules/config' as conf;
@charset "UTF-8";
* {
@@ -5,12 +6,12 @@
}
body {
- @include ltr {
+ @include conf.ltr {
font-family: 'PingHei', 'PingFang SC', 'Helvetica Neue', 'Work Sans', 'Hiragino Sans GB', sans-serif;
font-size: 1.6rem;
}
- @include rtl {
+ @include conf.rtl {
font-family: 'Tajawal', sans-serif;
font-size: 1.5rem;
}
diff --git a/assets/scss/partials/_hugo.scss b/assets/scss/partials/_hugo.scss
index d46923d..1ae511c 100644
--- a/assets/scss/partials/_hugo.scss
+++ b/assets/scss/partials/_hugo.scss
@@ -1,13 +1,16 @@
+@use 'modules/color_theme' as color;
+@use 'modules/config' as conf;
+
a {
text-decoration: none;
- @include themed() {
- color: t('primary');
+ @include color.themed() {
+ color: color.t('primary');
}
&:hover {
- @include themed() {
- color: t('info');
+ @include color.themed() {
+ color: color.t('info');
}
}
}
@@ -15,15 +18,15 @@
blockquote {
padding: 0 1em;
- @include themed() {
- color: t('primary');
+ @include color.themed() {
+ color: color.t('primary');
- @include ltr {
- border-left: t('border');
+ @include conf.ltr {
+ border-left: color.t('border');
}
- @include rtl {
- border-right: t('border');
+ @include conf.rtl {
+ border-right: color.t('border');
}
}
}
diff --git a/assets/scss/partials/components/_alert.scss b/assets/scss/partials/components/_alert.scss
index 5612969..2c47f70 100644
--- a/assets/scss/partials/components/_alert.scss
+++ b/assets/scss/partials/components/_alert.scss
@@ -1,3 +1,5 @@
+@use 'modules/color_theme' as color;
+
.alert {
padding: 1rem;
border-style: solid;
@@ -5,8 +7,8 @@
border-width: 2px;
margin-top: 1rem;
- @include themed() {
- border-color: t('alert');
+ @include color.themed() {
+ border-color: color.t('alert');
}
&__indicator {
@@ -19,9 +21,9 @@
font-weight: 800;
margin-right: 0.75rem;
- @include themed() {
- color: t('accent');
- background-color: t('alert');
+ @include color.themed() {
+ color: color.t('accent');
+ background-color: color.t('alert');
}
}
}
diff --git a/assets/scss/partials/components/_archive.scss b/assets/scss/partials/components/_archive.scss
index 7a58f63..bc269bb 100644
--- a/assets/scss/partials/components/_archive.scss
+++ b/assets/scss/partials/components/_archive.scss
@@ -1,3 +1,5 @@
+@use 'modules/color_theme' as color;
+
.archive {
margin: 30px;
@@ -6,8 +8,8 @@
font-weight: 600;
line-height: 2.2em;
- @include themed() {
- color: t('primary');
+ @include color.themed() {
+ color: color.t('primary');
}
}
@@ -24,8 +26,8 @@
&-date {
text-align: right;
- @include themed() {
- color: t('primary-light');
+ @include color.themed() {
+ color: color.t('primary-light');
}
}
@@ -33,12 +35,12 @@
display: inline-block;
flex: 0.96;
- @include themed() {
- color: t('primary');
+ @include color.themed() {
+ color: color.t('primary');
}
&:hover {
- @include themed() {
- color: t('info');
+ @include color.themed() {
+ color: color.t('info');
}
}
}
diff --git a/assets/scss/partials/components/_category.scss b/assets/scss/partials/components/_category.scss
index 6ac891f..05d58ad 100644
--- a/assets/scss/partials/components/_category.scss
+++ b/assets/scss/partials/components/_category.scss
@@ -1,20 +1,23 @@
+@use 'modules/color_theme' as color;
+@use 'modules/config' as conf;
+
.category {
padding: 4px 6px;
border-radius: 2px;
display: inline-block;
font-size: 1.4rem;
- @include themed() {
- border: t('border');
- background-color: t('primary-lighter');
- color: t('primary') !important;
+ @include color.themed() {
+ border: color.t('border');
+ background-color: color.t('primary-lighter');
+ color: color.t('primary') !important;
}
- @include ltr {
+ @include conf.ltr {
margin: 5px 8px 5px 0;
}
- @include rtl {
+ @include conf.rtl {
margin: 5px 0 5px 8px;
}
}
diff --git a/assets/scss/partials/components/_footer.scss b/assets/scss/partials/components/_footer.scss
index a0ecb34..3eac477 100644
--- a/assets/scss/partials/components/_footer.scss
+++ b/assets/scss/partials/components/_footer.scss
@@ -1,3 +1,5 @@
+@use 'modules/config' as conf;
+
.footer {
$font-size-footer: 1.4rem;
@@ -32,13 +34,13 @@
&__sidebar {
display: none;
- @include desktop {
+ @include conf.desktop {
display: inline-block;
}
}
&__base {
- @include desktop {
+ @include conf.desktop {
display: none;
}
}
diff --git a/assets/scss/partials/components/_navbarburger.scss b/assets/scss/partials/components/_navbarburger.scss
index e3542d1..2c3e0ca 100644
--- a/assets/scss/partials/components/_navbarburger.scss
+++ b/assets/scss/partials/components/_navbarburger.scss
@@ -1,3 +1,6 @@
+@use 'modules/color_theme' as color;
+@use 'modules/config' as conf;
+
.navbar-burger {
cursor: pointer;
display: block;
@@ -17,8 +20,8 @@
transition-timing-function: ease-out;
width: 16px;
- @include themed() {
- background-color: t('primary');
+ @include color.themed() {
+ background-color: color.t('primary');
}
&:nth-child(1) {
@@ -34,7 +37,7 @@
}
}
- @include desktop {
+ @include conf.desktop {
display: none;
}
}
diff --git a/assets/scss/partials/components/_notice.scss b/assets/scss/partials/components/_notice.scss
index 17765e1..f41f9b4 100644
--- a/assets/scss/partials/components/_notice.scss
+++ b/assets/scss/partials/components/_notice.scss
@@ -1,40 +1,44 @@
+@use 'sass:color' as color;
+@use 'modules/color_theme' as colorTheme;
+@use 'modules/variables' as var;
+
.notice {
display: flex;
flex-direction: column;
- @include themed() {
- background-color: mix(t('info'), t('accent'), 40%);
+ @include colorTheme.themed() {
+ background-color: color.mix(colorTheme.t('info'), colorTheme.t('accent'), 40%);
}
&--update {
- @include themed() {
- background-color: mix(t('success'), t('accent'), 40%);
+ @include colorTheme.themed() {
+ background-color: color.mix(colorTheme.t('success'), colorTheme.t('accent'), 40%);
}
}
&--warning {
- @include themed() {
- background-color: mix(t('danger'), t('accent'), 40%);
+ @include colorTheme.themed() {
+ background-color: color.mix(colorTheme.t('danger'), colorTheme.t('accent'), 40%);
}
}
&__title {
- background-color: t('info');
+ background-color: colorTheme.t('info');
align-self: flex-end;
font-weight: 300;
letter-spacing: 0.025em;
padding: 0.2rem 0.5rem 0.2rem 0.5rem;
- @include themed() {
- color: t('accent');
+ @include colorTheme.themed() {
+ color: colorTheme.t('accent');
}
&--update {
- background-color: t('success');
+ background-color: colorTheme.t('success');
}
&--warning {
- background-color: t('danger');
+ background-color: colorTheme.t('danger');
}
}
diff --git a/assets/scss/partials/components/_optionswitch.scss b/assets/scss/partials/components/_optionswitch.scss
index faf4d92..3866ae9 100644
--- a/assets/scss/partials/components/_optionswitch.scss
+++ b/assets/scss/partials/components/_optionswitch.scss
@@ -1,3 +1,6 @@
+@use 'modules/color_theme' as color;
+@use 'modules/config' as conf;
+
.optionswitch {
position: relative;
@@ -12,14 +15,14 @@
padding: 0;
position: relative;
- @include desktop {
+ @include conf.desktop {
border-radius: 5px;
position: absolute;
top: 32px;
- @include themed() {
- background: t('primary-lighter');
- box-shadow: t('shadow');
+ @include color.themed() {
+ background: color.t('primary-lighter');
+ box-shadow: color.t('shadow');
}
}
@@ -32,11 +35,11 @@
white-space: nowrap;
padding-top: 24px;
- @include themed() {
- color: t('primary');
+ @include color.themed() {
+ color: color.t('primary');
}
- @include desktop {
+ @include conf.desktop {
padding: 12px;
}
}
@@ -55,10 +58,10 @@
transform: rotate(45deg) translateY(0px) translatex(10px);
width: 14px;
- @include themed() {
- background: t('primary-lighter');
- box-shadow: t('shadow');
- border-color: t('primary-lighter');
+ @include color.themed() {
+ background: color.t('primary-lighter');
+ box-shadow: color.t('shadow');
+ border-color: color.t('primary-lighter');
}
}
}
@@ -71,7 +74,7 @@
}
&__triangle {
- @include desktop {
+ @include conf.desktop {
display: block;
}
}
diff --git a/assets/scss/partials/components/_pagination.scss b/assets/scss/partials/components/_pagination.scss
index 9b113b5..cedec80 100644
--- a/assets/scss/partials/components/_pagination.scss
+++ b/assets/scss/partials/components/_pagination.scss
@@ -1,3 +1,5 @@
+@use 'modules/color_theme' as color;
+
.pagination {
margin: 30px;
padding: 0px 0 56px 0;
@@ -15,8 +17,8 @@
line-height: 1;
text-decoration: none;
- @include themed() {
- color: t('primary');
+ @include color.themed() {
+ color: color.t('primary');
}
}
}
diff --git a/assets/scss/partials/components/_portfolio.scss b/assets/scss/partials/components/_portfolio.scss
index 8d1ca15..dbf5943 100644
--- a/assets/scss/partials/components/_portfolio.scss
+++ b/assets/scss/partials/components/_portfolio.scss
@@ -1,3 +1,6 @@
+@use 'modules/color_theme' as color;
+@use 'modules/config' as conf;
+
.portfolio {
position: relative;
padding-left: 0px;
@@ -5,7 +8,7 @@
padding-bottom: 0px;
padding-top: 48px;
- @include desktop {
+ @include conf.desktop {
padding: 48px;
}
@@ -19,9 +22,9 @@
background: transparent;
border-radius: 0.5em;
- @include desktop {
- @include themed() {
- border: t('border');
+ @include conf.desktop {
+ @include color.themed() {
+ border: color.t('border');
}
}
}
@@ -36,7 +39,7 @@
&__image {
max-width: 100%;
min-width: 100%;
- box-shadow: t('shadow');
+ box-shadow: color.t('shadow');
overflow: hidden;
transition: box-shadow 0.3s ease;
object-fit: cover;
@@ -58,11 +61,11 @@
padding: 32px 32px 0px 32px;
max-width: inherit;
- @include themed() {
- background-color: t('accent');
+ @include color.themed() {
+ background-color: color.t('accent');
}
- @include desktop {
+ @include conf.desktop {
width: 60%;
object-fit: contain;
max-width: none;
@@ -72,14 +75,14 @@
}
&--left {
- @include desktop {
+ @include conf.desktop {
margin-right: auto;
margin-left: 0;
}
}
&--right {
- @include desktop {
+ @include conf.desktop {
margin-right: 0;
margin-left: auto;
}
@@ -91,16 +94,16 @@
padding: 32px;
position: relative;
- @include themed() {
- background-color: t('accent');
+ @include color.themed() {
+ background-color: color.t('accent');
}
- @include desktop {
+ @include conf.desktop {
padding: 48px;
border-radius: 0.5em;
- @include themed() {
- box-shadow: t('shadow');
+ @include color.themed() {
+ box-shadow: color.t('shadow');
}
}
@@ -108,13 +111,13 @@
&--right {
margin-top: -24px;
- @include themed() {
- border-bottom: t('border');
+ @include color.themed() {
+ border-bottom: color.t('border');
}
- @include desktop {
- @include themed() {
- background: t('primary-lighter');
+ @include conf.desktop {
+ @include color.themed() {
+ background: color.t('primary-lighter');
}
border-bottom: 0px;
width: 60%;
@@ -123,7 +126,7 @@
}
&--right {
- @include desktop {
+ @include conf.desktop {
margin-left: auto;
}
}
@@ -158,9 +161,9 @@
border-radius: 999em;
padding: 10px;
- @include themed() {
- border: 1px solid t('primary-light');
- color: t('info');
+ @include color.themed() {
+ border: 1px solid color.t('primary-light');
+ color: color.t('info');
}
&:hover {
diff --git a/assets/scss/partials/components/_post.scss b/assets/scss/partials/components/_post.scss
index 065926a..f2d1e32 100644
--- a/assets/scss/partials/components/_post.scss
+++ b/assets/scss/partials/components/_post.scss
@@ -1,8 +1,12 @@
+@use 'modules/color_theme' as color;
+@use 'modules/config' as conf;
+@use 'modules/variables' as var;
+
.post {
margin: 30px;
- @include themed() {
- background-color: t('accent');
+ @include color.themed() {
+ background-color: color.t('accent');
}
&__meta {
@@ -17,22 +21,22 @@
}
&-icon {
- @include ltr {
+ @include conf.ltr {
margin-right: 2px;
}
- @include rtl {
+ @include conf.rtl {
margin-left: 2px;
}
}
&-text {
&:not(:last-child) {
- @include ltr {
+ @include conf.ltr {
margin-right: 4px;
}
- @include rtl {
+ @include conf.rtl {
margin-left: 4px;
}
}
@@ -41,7 +45,7 @@
&__thumbnail {
width: 100%;
- height: $thumbnail-height;
+ height: var.$thumbnail-height;
object-fit: cover;
display: block;
@@ -52,24 +56,24 @@
overflow: hidden;
transition: box-shadow 0.3s ease;
- @include themed() {
- box-shadow: t('shadow');
+ @include color.themed() {
+ box-shadow: color.t('shadow');
}
}
}
&__content {
a {
- @include themed() {
- color: t('info');
+ @include color.themed() {
+ color: color.t('info');
}
}
.chroma {
- @include themed() {
- background-color: t('primary-lighter');
+ @include color.themed() {
+ background-color: color.t('primary-lighter');
display: block;
- border-bottom: 1px solid t('primary-lighter');
+ border-bottom: 1px solid color.t('primary-lighter');
}
}
@@ -81,8 +85,8 @@
padding: 5px;
overflow-x: auto;
- @include themed() {
- background-color: t('primary-lighter');
+ @include color.themed() {
+ background-color: color.t('primary-lighter');
}
}
@@ -96,8 +100,8 @@
a {
font-size: $font-size-h1;
- @include themed() {
- color: t('primary');
+ @include color.themed() {
+ color: color.t('primary');
}
}
}
@@ -113,8 +117,8 @@
a {
font-size: $font-size-h2;
- @include themed() {
- color: t('primary');
+ @include color.themed() {
+ color: color.t('primary');
}
}
}
@@ -130,8 +134,8 @@
a {
font-size: $font-size-h3;
- @include themed() {
- color: t('primary');
+ @include color.themed() {
+ color: color.t('primary');
}
}
}
@@ -173,15 +177,15 @@
}
&.right {
- @include desktop {
+ @include conf.desktop {
max-width: 50%;
- @include ltr {
+ @include conf.ltr {
float: right;
margin: 0 0 0 1.5em;
}
- @include rtl {
+ @include conf.rtl {
float: left;
margin: 0 1.5em 0 0;
}
@@ -189,15 +193,15 @@
}
&.left {
- @include desktop {
+ @include conf.desktop {
max-width: 50%;
- @include ltr {
+ @include conf.ltr {
float: left;
margin-right: 1.5em;
}
- @include rtl {
+ @include conf.rtl {
float: right;
margin-left: 1.5em;
}
@@ -209,19 +213,19 @@
&__footer {
padding: 12px 0;
- @include themed() {
- border-bottom: t('border');
+ @include color.themed() {
+ border-bottom: color.t('border');
}
&-date {
font-size: 1.4rem;
- @include ltr {
+ @include conf.ltr {
margin-right: 10px;
margin-left: 5px;
}
- @include rtl {
+ @include conf.rtl {
margin-left: 10px;
margin-right: 5px;
}
diff --git a/assets/scss/partials/components/_sidebar.scss b/assets/scss/partials/components/_sidebar.scss
index e23379e..5d48474 100644
--- a/assets/scss/partials/components/_sidebar.scss
+++ b/assets/scss/partials/components/_sidebar.scss
@@ -1,7 +1,10 @@
+@use 'modules/color_theme' as color;
+@use 'modules/config' as conf;
+
.sidebar {
margin-top: 40px;
- @include desktop {
+ @include conf.desktop {
z-index: 2;
position: fixed;
height: 100%;
@@ -10,21 +13,21 @@
display: flex;
flex-direction: column;
- @include themed() {
- @include ltr {
+ @include color.themed() {
+ @include conf.ltr {
margin-right: 4px;
- border-right: t('border');
+ border-right: color.t('border');
}
- @include rtl {
+ @include conf.rtl {
margin-left: 4px;
- border-left: t('border');
+ border-left: color.t('border');
}
}
}
&__content {
- @include desktop {
+ @include conf.desktop {
display: flex;
flex-direction: column;
flex-grow: 1;
diff --git a/assets/scss/partials/components/_tag.scss b/assets/scss/partials/components/_tag.scss
index 5f02e5b..770b2f7 100644
--- a/assets/scss/partials/components/_tag.scss
+++ b/assets/scss/partials/components/_tag.scss
@@ -1,16 +1,19 @@
+@use 'modules/color_theme' as color;
+@use 'modules/config' as conf;
+
.tag {
display: inline-block;
font-size: 1.4rem;
- @include themed() {
- color: t('primary-light');
+ @include color.themed() {
+ color: color.t('primary-light');
}
- @include ltr {
+ @include conf.ltr {
margin: 5px 8px 5px 0;
}
- @include rtl {
+ @include conf.rtl {
margin: 5px 0 5px 8px;
}
diff --git a/assets/scss/partials/components/_wrapper.scss b/assets/scss/partials/components/_wrapper.scss
index 76aba41..6a24f8c 100644
--- a/assets/scss/partials/components/_wrapper.scss
+++ b/assets/scss/partials/components/_wrapper.scss
@@ -1,36 +1,40 @@
+@use 'hugo:vars' as hugo;
+@use 'modules/config' as conf;
+@use 'modules/variables' as var;
+
.wrapper {
display: flex;
flex-direction: column;
- @include desktop {
+ @include conf.desktop {
flex-direction: row;
}
- @include widescreen {
+ @include conf.widescreen {
justify-content: center;
}
&__main {
width: 100%;
- @include desktop {
- width: $content-ratio;
+ @include conf.desktop {
+ width: hugo.$content-ratio;
}
- @include widescreen {
- width: $content-ratio-wide;
+ @include conf.widescreen {
+ width: hugo.$content-ratio-wide;
}
&--fullscreen {
margin-top: 20px;
- @include desktop {
+ @include conf.desktop {
width: 100%;
margin-top: 0px;
}
- @include widescreen {
- width: $body-max-width;
+ @include conf.widescreen {
+ width: var.$body-max-width;
}
}
}
@@ -39,13 +43,13 @@
width: 100%;
padding: 16px 0;
- @include desktop {
- width: $sidebar_ratio;
+ @include conf.desktop {
+ width: hugo.$sidebar_ratio;
padding: 0;
}
- @include widescreen {
- width: $sidebar_ratio_wide;
+ @include conf.widescreen {
+ width: hugo.$sidebar_ratio_wide;
}
&--hidden {
diff --git a/assets/scss/partials/layout/_body.scss b/assets/scss/partials/layout/_body.scss
index ae07333..c8ca469 100644
--- a/assets/scss/partials/layout/_body.scss
+++ b/assets/scss/partials/layout/_body.scss
@@ -1,9 +1,11 @@
+@use 'modules/color_theme' as color;
+
.body {
width: 100%;
margin: 0 auto;
// work around to style body
- @include themed() {
- color: t('primary');
- background-color: t('accent');
+ @include color.themed() {
+ color: color.t('primary');
+ background-color: color.t('accent');
}
}
diff --git a/assets/scss/partials/layout/_header.scss b/assets/scss/partials/layout/_header.scss
index 3a6520e..4a08176 100644
--- a/assets/scss/partials/layout/_header.scss
+++ b/assets/scss/partials/layout/_header.scss
@@ -1,21 +1,24 @@
+@use 'modules/color_theme' as color;
+@use 'modules/config' as conf;
+
.header {
- @include themed() {
- background-color: t('accent');
+ @include color.themed() {
+ background-color: color.t('accent');
}
width: 100%;
position: fixed;
z-index: 1;
top: 0;
- @include desktop {
+ @include conf.desktop {
position: sticky;
- @include themed() {
- border-bottom: t('border');
+ @include color.themed() {
+ border-bottom: color.t('border');
}
}
- @include print {
+ @include conf.print {
display: none;
}
}
diff --git a/assets/scss/partials/layout/_nav.scss b/assets/scss/partials/layout/_nav.scss
index 8a8bee3..d22e448 100644
--- a/assets/scss/partials/layout/_nav.scss
+++ b/assets/scss/partials/layout/_nav.scss
@@ -1,9 +1,12 @@
+@use 'modules/color_theme' as color;
+@use 'modules/config' as conf;
+
.nav {
$py-desktop: 24px;
display: none;
- @include desktop {
+ @include conf.desktop {
display: flex;
justify-content: space-between;
align-items: center;
@@ -16,16 +19,16 @@
padding: 0;
width: 100%;
- @include themed() {
- background-color: t('primary-lighter');
+ @include color.themed() {
+ background-color: color.t('primary-lighter');
}
- @include desktop {
+ @include conf.desktop {
display: flex;
padding: $py-desktop 30px;
- @include themed() {
- background-color: t('accent');
+ @include color.themed() {
+ background-color: color.t('accent');
}
&--end {
@@ -40,15 +43,15 @@
text-align: center;
white-space: nowrap;
- @include desktop {
+ @include conf.desktop {
padding-top: 0;
padding-bottom: 0;
&:not(:last-child) {
- @include ltr {
+ @include conf.ltr {
padding-right: 20px;
}
- @include rtl {
+ @include conf.rtl {
padding-left: 20px;
}
}
@@ -60,9 +63,9 @@
&--active {
padding-bottom: $py-desktop;
- @include desktop {
- @include themed() {
- border-bottom: 1px solid t('primary');
+ @include conf.desktop {
+ @include color.themed() {
+ border-bottom: 1px solid color.t('primary');
}
}
}
diff --git a/assets/scss/partials/vendors/_contactform.scss b/assets/scss/partials/vendors/_contactform.scss
index 988d89a..89aa24a 100644
--- a/assets/scss/partials/vendors/_contactform.scss
+++ b/assets/scss/partials/vendors/_contactform.scss
@@ -1,4 +1,5 @@
/* (CONTACT) FORM */
+@use 'modules/color_theme' as color;
.contact-form {
margin-top: 30px;
@@ -12,19 +13,19 @@
list-style: none;
}
.form-style ul li {
- @include themed() {
- background-color: t('accent');
- color: t('primary');
+ @include color.themed() {
+ background-color: color.t('accent');
+ color: color.t('primary');
}
display: block;
margin-bottom: 10px;
min-height: 35px;
}
.form-style ul li .field-style {
- @include themed() {
- border: t('border');
- background-color: t('accent');
- color: t('primary');
+ @include color.themed() {
+ border: color.t('border');
+ background-color: color.t('accent');
+ color: color.t('primary');
}
box-sizing: border-box;
-webkit-box-sizing: border-box;
diff --git a/assets/scss/partials/vendors/_mediumzoom.scss b/assets/scss/partials/vendors/_mediumzoom.scss
index 527e5c4..993eac8 100644
--- a/assets/scss/partials/vendors/_mediumzoom.scss
+++ b/assets/scss/partials/vendors/_mediumzoom.scss
@@ -1,6 +1,8 @@
+@use 'modules/color_theme' as color;
+
.medium-zoom-overlay {
- @include themed() {
- background: t('accent');
+ @include color.themed() {
+ background: color.t('accent');
}
position: fixed;
top: 0;
diff --git a/assets/scss/partials/vendors/_table.scss b/assets/scss/partials/vendors/_table.scss
index 82a0730..0209efe 100644
--- a/assets/scss/partials/vendors/_table.scss
+++ b/assets/scss/partials/vendors/_table.scss
@@ -1,3 +1,5 @@
+@use 'modules/color_theme' as color;
+
table {
display: table;
width: 80%;
@@ -12,7 +14,7 @@
td {
display: table-cell;
padding: 8px;
- @include themed() {
- border: t('border');
+ @include color.themed() {
+ border: color.t('border');
}
}
diff --git a/assets/scss/partials/vendors/_tableofcontents.scss b/assets/scss/partials/vendors/_tableofcontents.scss
index 7785c55..5b7be67 100644
--- a/assets/scss/partials/vendors/_tableofcontents.scss
+++ b/assets/scss/partials/vendors/_tableofcontents.scss
@@ -1,3 +1,5 @@
+@use 'modules/variables' as var;
+
#TableOfContents {
display: block;
background: transparent;
@@ -15,7 +17,7 @@
#TableOfContents li a {
display: inherit;
- color: $info;
+ color: var.$info;
}
#TableOfContents li a:hover {
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 0d4d3de..6622bc0 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -47,7 +47,7 @@
"sidebar_ratio_wide" (printf "%f%%" (mul 0.8 (mul (sub 1.0 $contentRatio) 100)))
-}}
{{ $options := dict
- "transpiler" "libsass"
+ "transpiler" "dartsass"
"vars" $vars
"targetPath" (printf "css/anatole%s.css" (cond (eq site.Language.LanguageDirection "") "" (printf ".%s" site.Language.LanguageDirection)))
-}}
diff --git a/netlify.toml b/netlify.toml
index 88f3cb1..8732c45 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -1,9 +1,19 @@
[build]
publish = "exampleSite/public"
- command = "cd exampleSite && hugo --gc --minify --themesDir ../.."
-
+ command = """\
+ curl -LJO https://github.com/sass/dart-sass/releases/download/${DART_SASS_VERSION}/dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz && \
+ tar -xf dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz && \
+ rm dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz && \
+ export PATH=/opt/build/repo/dart-sass:$PATH && \
+ cd exampleSite && \
+ hugo --gc --minify --themesDir ../.. \
+ """
+
[build.environment]
HUGO_VERSION = "0.147.5"
+ DART_SASS_VERSION = "1.89.0"
+ NODE_VERSION = "24"
+ GO_VERSION = "1.24.3"
HUGO_ENV = "production"
HUGO_THEME = "repo"
HUGO_BASEURL = "https://anatole-demo.netlify.app"
--
Gitblit v1.10.0