Split & convert CSS into 4 SCSS, dont use .button for now

themes/qogir/assets/css/main.css

@@ -1,59 +0,0 @@
-body {
-  padding: 0 0.25rem;
-  margin: auto;
-  max-width: 48rem;
-  color: #e6ebef;
-  background: #32343d;
-  font-family: 'Roboto', 'Ubuntu', sans-serif;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  margin: 0;
-}
-
-a {
-  color: #a9caf1;
-  text-decoration: none;
-}
-a:hover {
-  color: #d5e5f8;
-}
-
-.post-item {
-  padding: 3%;
-  border-radius: 0.25rem;
-  background: #282a33;
-}
-.post-item h2 a {
-  color: #e6ebef;
-}
-.post-item div {
-  /* Make the same value as in post-item's 3% padding.
-   * 100 / 94 = ratio .post-item width / this div width,
-   * 94 = 100% - (3% * 2), where
-   * 3% is the padding in .post-item,
-   * 3 * 2 = padding-left + padding-right = 3% + 3%
-   */
-  margin-top: calc(3% * 100 / (100 - 3 * 2));
-}
-
-a.button {
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
-
-  background: transparent;
-  color: #e6ebef;
-  border: 0.0625rem solid rgba(255, 255, 255, 0.2);
-
-  transition:
-    background-color 0.075s linear,
-    border-color 0.1s linear;
-}
-a.button:hover {
-  background: rgba(255, 255, 255, 0.1);
-  border-color: rgba(255, 255, 255, 0.1);
-}
-a.button:active {
-  background: #5294e2;
-  border-color: #5294e2;
-}

themes/qogir/assets/scss/button.scss

@@ -0,0 +1,22 @@
+a.button {
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+
+  background: transparent;
+  color: $fg;
+  border: 0.0625rem solid $border;
+
+  transition:
+    background-color 0.075s linear,
+    border-color 0.1s linear;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+
+  &:active {
+    background: $bg-selected;
+    border-color: $bg-selected;
+  }
+}

themes/qogir/assets/scss/colors.scss

@@ -0,0 +1,7 @@
+$base: #282a33;
+$bg: #32343d;
+$fg: #e6ebef;
+$link: #a9caf1;
+$link-hover: #d5e5f8;
+$border: rgba(255, 255, 255, 0.2);
+$bg-selected: #5294e2;

themes/qogir/assets/scss/main.scss

@@ -0,0 +1,23 @@
+@import "colors.scss";
+
+body {
+  padding: 0 0.25rem;
+  margin: auto;
+  max-width: 48rem;
+  color: $fg;
+  background: $bg;
+  font-family: 'Roboto', 'Ubuntu', sans-serif;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+}
+
+a {
+  color: $link;
+  text-decoration: none;
+
+  &:hover {
+    color: $link-hover;
+  }
+}

themes/qogir/assets/scss/post-item.scss

@@ -0,0 +1,21 @@
+@import "colors.scss";
+
+.post-item {
+  padding: 3%;
+  border-radius: 0.25rem;
+  background: $base;
+
+  h2 a {
+    color: $fg;
+  }
+
+  div {
+    /* Make the same value as in post-item's 3% padding.
+     * 100 / 94 = ratio .post-item width / this div width,
+     * 94 = 100% - (3% * 2), where
+     * 3% is the padding in .post-item,
+     * 3 * 2 = padding-left + padding-right = 3% + 3%
+     */
+    margin-top: calc(3% * 100 / (100 - 3 * 2));
+  }
+}

themes/qogir/layouts/partials/head.html

@@ -1,5 +1,6 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <title>{{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s | %s" .Title site.Title }}{{ end }}</title>
-{{ partialCached "head/css.html" . }}
+{{ partialCached "head/css.html" (dict "Css" "main") "main" }}
+{{ partialCached "head/css.html" (dict "Css" "post-item") "post-item" }}
 {{ partialCached "head/js.html" . }}

themes/qogir/layouts/partials/head/css.html

@@ -1,4 +1,7 @@
-{{- with resources.Get "css/main.css" }}
+{{- $file_from := printf "scss/%s.scss" .Css }}
+{{- $file_to := printf "css/%s.css" .Css }}
+{{- $options := dict "transpiler" "libsass" "targetPath" $file_to }}
+{{- with resources.Get $file_from | toCSS $options }}
   {{- if eq hugo.Environment "development" }}
     <link rel="stylesheet" href="{{ .RelPermalink }}">
   {{- else }}