Added fold pairs to Sass

assets/sass/main.scss

@@ -1,6 +1,6 @@
 /* Base16 Eighties Colorscheme by Chris Kempson (http://chriskempson.com) */
 
-$max-page-width: 52em;
+//  base colors {{{ // 
 
 $base-red: #f2777a;
 $base-orange: #f99157;
@@ -28,7 +28,40 @@ $base-dark-orange: #d27b53;
 .base0e { color: $base-violet; }
 .base0f { color: $base-dark-orange; }
 
-/* General Page Layout */
+//  }}} base colors // 
+
+//  mixins {{{ // 
+
+$max-page-width: 52em;
+
+@mixin side-padding-rem($n) {
+  padding-left: $n * 1rem;
+  padding-right: $n * 1rem;
+}
+
+@mixin vert-padding-rem($n) {
+  padding-top: $n * 1rem;
+  padding-bottom: $n * 1rem;
+}
+
+@mixin auto-center() {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@mixin article-body() {
+  /* background-color: #e6e6fa; */
+  background-color: #cbbeb5;
+  color: #2d2d2d;
+  @include side-padding-rem(8);
+  @include vert-padding-rem(1);
+  /* min-height: 50%; */
+  /* min-height: 30em; */
+
+  @media (max-width: $max-page-width) {
+    @include side-padding-rem(2);
+  }
+}
 
 @mixin a-color($color) {
   a {
@@ -42,6 +75,10 @@ $base-dark-orange: #d27b53;
   }
 }
 
+//  }}} mixins // 
+
+//  general elements {{{ // 
+
 body {
   margin: 0;
   background-color: #2d2d2d;
@@ -76,35 +113,6 @@ div {
   }
 }
 
-@mixin side-padding-rem($n) {
-  padding-left: $n * 1rem;
-  padding-right: $n * 1rem;
-}
-
-@mixin vert-padding-rem($n) {
-  padding-top: $n * 1rem;
-  padding-bottom: $n * 1rem;
-}
-
-@mixin auto-center() {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-@mixin article-body() {
-  /* background-color: #e6e6fa; */
-  background-color: #cbbeb5;
-  color: #2d2d2d;
-  @include side-padding-rem(8);
-  @include vert-padding-rem(1);
-  /* min-height: 50%; */
-  /* min-height: 30em; */
-
-  @media (max-width: $max-page-width) {
-    @include side-padding-rem(2);
-  }
-}
-
 article {
   .single {
     section {
@@ -180,7 +188,9 @@ pre, code {
   font-size: inherit;
 }
 
-/* Header Layout */
+//  }}} general elements // 
+
+//  header {{{ // 
 
 header {
   a {
@@ -196,13 +206,17 @@ header {
   }
 }
 
-/* Footer Layout */
+//  }}} header // 
+
+//  footer  {{{ // 
 
 footer {
   @include a-color(#747369);
 }
 
-/* 404 Page Layout */
+//  }}} footer  // 
+
+//  404 {{{ // 
 
 .page-not-found {
   h1 {
@@ -228,16 +242,50 @@ footer {
   }
 }
 
-// TODO: converted up to here
+//  }}} 404 // 
 
-/* Homepage Layout */
+//  homepage  {{{ // 
 
-@media (max-width: $max-page-width) {
+.homepage {
-  .homepage {
+  h1 {
+    .headline {
+      font-size: 3em;
+      color: #ffcc66;
+
+      @media (max-width: $max-page-width) {
+          @include side-padding-rem(2);
+      }
+    }
+  }
+
+  @media (max-width: $max-page-width) {
     margin-bottom: 2rem;
   }
 }
 
+/* .homepage section.categories,
+.homepage section.tags {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+.homepage .category,
+.homepage .category a,
+.homepage .tag,
+.homepage .tag a {
+  color: #cc99cc;
+}
+
+.homepage .tag {
+  margin-right: 2em;
+} */
+
+//  }}} homepage  // 
+
+// TODO: converted up to here
+
+//  hero {{{ // 
+
 h1.site-title {
   text-align: center;
   /* font-size: 3.5em; */
@@ -253,39 +301,10 @@ h1.site-title {
   }
 }
 
-.homepage h1.headline {
+.hero-logo img {
-  font-size: 3em;
-  color: #ffcc66;
-}
-
-@media (max-width: $max-page-width) {
-  .homepage h1.headline {
-    padding-left: 2rem;
-    padding-right: 2rem;
-  }
-}
-
-.homepage .hero-logo img {
   width: 100%;
 }
 
-.homepage section.categories,
-.homepage section.tags {
-  padding-left: 2rem;
-  padding-right: 2rem;
-}
-
-.homepage .category,
-.homepage .category a,
-.homepage .tag,
-.homepage .tag a {
-  color: #cc99cc;
-}
-
-.homepage .tag {
-  margin-right: 2em;
-}
-
 .nav-bar {
   margin-left: .5em;
   margin-bottom: 1em;
@@ -297,7 +316,9 @@ h1.site-title {
   text-align: center;
 }
 
-/* Post List Layout */
+//  }}} hero // 
+
+//  article-list {{{ // 
 
 .article-list h1.list-title {
   font-size: 3em;
@@ -331,8 +352,9 @@ h1.site-title {
 
 .article-list article section.summary a { color: #d27b53; }
 
+//  }}} article-list // 
 
-/* Single Post Layout */
+//  article.single {{{ // 
 
 article.single .meta {
   font-size: 0.9em;
@@ -491,7 +513,9 @@ article.single hr {
   border-bottom-color: #a09f93;
 }
 
-/* Pygments template by Jan T. Sott (https://github.com/idleberg) */
+//  }}} article.single // 
+
+//  Pygments  {{{ // 
 
 pre { background: #2d2d2d; color: #f2f0ec }
 
@@ -561,3 +585,5 @@ pre { background: #2d2d2d; color: #f2f0ec }
 .highlight .il { color: #f99157 } /* Literal.Number.Integer.Long */
 
 /*# sourceMappingURL=style.css.map */
+
+//  }}} Pygments  // 

config.toml

@@ -1,6 +1,6 @@
-baseURL = "http://localhost:1313/"
+# baseURL = "http://localhost:1313/"
+baseURL = "https://kevin-mok.gitlab.io/my-site-hugo/"
 # baseURL = "/home/kevin/coding/mf-site/public"
-# baseURL = "https://kevin-mok.gitlab.io/my-site-hugo/"
 languageCode = "en-us"
 title = "Kevin Mok"
 # theme = "base16"

ideas.md

@@ -1,9 +1,9 @@
 # Large
-- loop through URL sections
 - rewrite CSS in Sass
   - push to base16 repo
 - resume
   - printable version
+- loop through URL sections
 - add CSS grid layout
 - credits