chore: migrate libsass to dartsass (#562)

Andreas Deininger

07.57.2025 acb0c1788976af1601ac300b9206e1c898a29d5b

chore: migrate libsass to dartsass (#562)

 .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

 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';

 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);
}

 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;
  }
}

 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;
  }

 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');
    }
  }
}

 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');
    }
  }
}

 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');
        }
      }
    }

 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;
  }
}

 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;
    }
  }

 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;
  }
}

 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');
    }
  }


 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;
          }
        }

 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');
      }
    }
  }

 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 {

 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;
      }

 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;

 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;
  }


 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 {

 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');
  }
}

 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;
  }
}

 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');
        }
      }
    }

 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;

 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;

 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');
  }
}

 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 {

 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)))
  -}}

 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"