convert custom css to scss

assets/css/main.scss

@@ -0,0 +1,205 @@
+@import "mixins";
+
+.page.about {
+  .content {
+    text-align: center;
+  }
+
+  ul {
+    padding-left: 0;
+    list-style: none;
+  }
+}
+
+.navigation .navigation-title {
+  text-transform: none;
+}
+
+.about .avatar img {
+  width: 14rem;
+  border: 3px solid #044958;
+  padding: 2px;
+  transform: rotate(-2deg);
+  -ms-transform: rotate(-2deg);
+  -moz-transform: rotate(-2deg);
+  -webkit-transform: rotate(-2deg);
+
+  body.colorscheme-dark & {
+    border: 2px solid #002e34;
+    padding: 0;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    border: 2px solid #002e34;
+    padding: 0;
+  }
+}
+
+.content figure {
+  &.svg > img {
+    height: 100%;
+  }
+
+  &.medium > img {
+    max-width: 30em;
+    width: 100%;
+  }
+
+  > figcaption p {
+    margin: 2rem 0;
+    text-align: inherit;
+    font-style: inherit;
+    font-size: inherit;
+  }
+
+  > img {
+    height: auto;
+    width: auto;
+  }
+}
+
+.content figure.icon-inline {
+  display: flex;
+  flex-direction: column;
+
+  @media (max-width: 500px) {
+    &.sm-order-rev > figcaption {
+      order: 1;
+      margin-top: -2rem;
+    }
+
+    &.sm-order-rev > img {
+      order: 2;
+    }
+
+    > img {
+      height: 3.2em;
+    }
+  }
+
+  @media (min-width: 500px) {
+    flex-direction: row;
+    align-items: center;
+
+    > figcaption p {
+      margin: 0 0 0 2rem;
+    }
+
+    &.icon-right > figcaption p {
+      order: 1;
+      margin: 0 2rem 0 0;
+    }
+
+    > img {
+      height: 4em;
+      margin: 0;
+    }
+
+    &.large > img {
+      height: 6em;
+    }
+
+    &.icon-right > img {
+      order: 2;
+    }
+  }
+}
+
+.content figure.icon-inline.flowmm-model-thumb > img {
+  height: auto;
+  width: 100%;
+  max-width: 250px;
+
+  @media (min-width: 500px) {
+    height: 12em;
+    width: auto;
+  }
+}
+
+.oceanwp-icon > img {
+  background-color: #e1f2fa;
+  border-radius: 6px;
+}
+
+.content figure.logo {
+  margin: 3.2rem 0;
+  height: 2.4em;
+
+  > img {
+    height: 100%;
+  }
+}
+
+.content figure.logo.large {
+  height: 7em;
+
+  @media (min-width: 500px) {
+    height: 8em;
+  }
+}
+
+.logo.woocommerce {
+  body.colorscheme-dark & {
+    @include woo-logo-dark;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    @include woo-logo-dark;
+  }
+}
+
+.wp-icon {
+  > img {
+    opacity: 0.7;
+
+    @media (max-width: 500px) {
+      display: none;
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    @include wp-icon-dark;
+  }
+
+  body.colorscheme-dark & {
+    @include wp-icon-dark;
+  }
+}
+
+/* TODO do this properly using a shortcode */
+.cheat-october-list {
+  display: none;
+}
+
+.cheat-october-list + ul {
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-left: 0;
+}
+
+.cheat-october-list + ul > li {
+  list-style: none;
+}
+
+.cheat-october-list + ul > li > p:first-child {
+  position: relative;
+  margin-top: 0;
+  padding-left: 40px;
+}
+
+.cheat-october-list + ul > li > p:not(:first-child) {
+  padding-left: 40px;
+}
+
+.cheat-october-list + ul > li > p:first-child::before {
+  content: "";
+  position: absolute;
+  display: block;
+  top: 0.2em;
+  bottom: 0.2em;
+  left: 0;
+  right: 0;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-image: url(../images/logos/october-icon.png);
+}

assets/css/mixins.scss

@@ -0,0 +1,21 @@
+@mixin wp-icon-dark {
+  > figcaption > p {
+    margin-left: 0;
+  }
+
+  > img {
+    display: none;
+  }
+}
+
+@mixin woo-logo-dark {
+  height: calc(2.4em + 32px);
+
+  > img {
+    background-color: #fafafa;
+    border: solid 16px #fafafa;
+    border-bottom-width: 10px;
+    border-radius: 6px;
+    margin-bottom: 4rem;
+  }
+}

config.toml

@@ -26,7 +26,7 @@ favicon_16 = "/images/favicon-16x16.png"
 hidecredits = true
 
 colorscheme = "auto"
-custom_css = ["/css/custom.css"]
+custom_scss = ["/css/main.scss"]
 
 [[params.social]]
 name = "LinkedIn"

static/css/custom.css

@@ -1,234 +0,0 @@
-.navigation .navigation-title {
-  text-transform: none;
-}
-
-.about .avatar img {
-  width: 14rem;
-  border: 3px solid #044958;
-  padding: 2px;
-  transform: rotate(-2deg);
-  -ms-transform: rotate(-2deg);
-  -moz-transform: rotate(-2deg);
-  -webkit-transform: rotate(-2deg);
-}
-
-body.colorscheme-dark .avatar img {
-  border: 2px solid #002e34;
-  padding: 0;
-}
-
-@media (prefers-color-scheme: dark) {
-  body.colorscheme-auto .avatar img {
-    border: 2px solid #002e34;
-    padding: 0;
-  }
-}
-
-.content figure.svg > img {
-  height: 100%;
-}
-
-.content figure.medium > img {
-  max-width: 30em;
-  width: 100%;
-}
-
-/*
-* icons
-*/
-
-.content figure.icon-inline {
-  display: flex;
-  flex-direction: column;
-}
-
-.content figure.icon-inline > figcaption p {
-  margin: 2rem 0;
-  text-align: inherit;
-  font-style: inherit;
-  font-size: inherit;
-}
-
-.content figure.icon-inline > img {
-  height: auto;
-  width: auto;
-}
-
-@media (max-width: 500px) {
-  .content figure.icon-inline.sm-order-rev > figcaption {
-    order: 1;
-    margin-top: -2rem;
-  }
-
-  .content figure.icon-inline > img {
-    max-width: 6em;
-  }
-
-  .content figure.icon-inline.sm-order-rev > img {
-    order: 2;
-  }
-}
-
-@media (min-width: 500px) {
-  .content figure.icon-inline {
-    flex-direction: row;
-    align-items: center;
-  }
-
-  .content figure.icon-inline > figcaption p {
-    margin: 0 0 0 2rem;
-  }
-
-  .content figure.icon-inline.icon-right > figcaption p {
-    order: 1;
-    margin: 0 2rem 0 0;
-  }
-
-  .content figure.icon-inline > img {
-    height: 4em;
-    margin: 0;
-  }
-
-  .content figure.icon-inline.large > img {
-    height: 6em;
-  }
-
-  .content figure.icon-inline.icon-right > img {
-    order: 2;
-  }
-}
-
-.content figure.icon-inline.flowmm-model-thumb > img {
-  height: auto;
-  width: 100%;
-  max-width: 250px;
-}
-
-@media (min-width: 500px) {
-  .content figure.icon-inline.flowmm-model-thumb > img {
-    height: 12em;
-    width: auto;
-  }
-}
-
-.oceanwp-icon > img {
-  background-color: #e1f2fa;
-  border-radius: 6px;
-}
-
-/*
- * logos
-*/
-
-.content figure.logo {
-  height: 1.6em;
-  margin: 4rem 0;
-}
-
-.content figure.logo.large {
-  height: 7em;
-}
-
-.content figure.logo > img {
-  height: 100%;
-}
-
-@media (min-width: 500px) {
-  .content figure.logo {
-    height: 2.6em;
-  }
-
-  .content figure.logo.large {
-    height: 8em;
-  }
-
-  .content figure.logo.nuxt {
-    height: 1.6em;
-  }
-}
-
-.wp-icon > img {
-  opacity: 0.7;
-}
-
-@media (max-width: 500px) {
-  .content figure.icon-inline.wp-icon > img {
-    display: none;
-  }
-}
-
-/* TODO do this properly using a shortcode */
-.cheat-october-list {
-  display: none;
-}
-
-.cheat-october-list + ul {
-  margin-top: 0;
-  margin-bottom: 0;
-  padding-left: 0;
-}
-
-.cheat-october-list + ul > li {
-  list-style: none;
-}
-
-.cheat-october-list + ul > li > p:first-child {
-  position: relative;
-  margin-top: 0;
-  padding-left: 40px;
-}
-
-.cheat-october-list + ul > li > p:not(:first-child) {
-  padding-left: 40px;
-}
-
-.cheat-october-list + ul > li > p:first-child::before {
-  content: "";
-  position: absolute;
-  display: block;
-  top: 0.2em;
-  bottom: 0.2em;
-  left: 0;
-  right: 0;
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-image: url(../images/logos/october-icon.png);
-}
-
-body.colorscheme-dark .logo.woocommerce > img {
-  background-color: #fafafa;
-  border: solid 16px #fafafa;
-  border-bottom-width: 10px;
-  border-radius: 6px;
-  box-sizing: content-box;
-}
-
-@media (prefers-color-scheme: dark) {
-  .logo.woocommerce > img {
-    background-color: #fafafa;
-    border: solid 16px #fafafa;
-    border-bottom-width: 10px;
-    border-radius: 6px;
-    box-sizing: content-box;
-  }
-}
-
-body.colorscheme-dark .wp-icon > figcaption > p {
-  margin-left: 0;
-}
-
-@media (prefers-color-scheme: dark) {
-  .wp-icon > figcaption > p {
-    margin-left: 0;
-  }
-}
-
-body.colorscheme-dark .wp-icon > img {
-  display: none;
-}
-
-@media (prefers-color-scheme: dark) {
-  .wp-icon > img {
-    display: none;
-  }
-}