More Sass conversion

.gitignore

@@ -1,4 +1,5 @@
 public/*
+resources/_gen/*
 themes/base16*
 
 commit-msg.txt

.gitlab-ci.yml

@@ -1,5 +1,6 @@
 # All available Hugo versions are listed here: https://gitlab.com/pages/hugo/container_registry
-image: registry.gitlab.com/pages/hugo:latest
+# image: registry.gitlab.com/pages/hugo:latest
+image: registry.gitlab.com/pages/hugo:0.53
 
 variables:
   GIT_SUBMODULE_STRATEGY: recursive

assets/sass/main.scss

@@ -33,10 +33,16 @@ body {
 }
 
 .container {
-  max-width: 52em;
+  max-width: $max-page-width;
   margin-left: auto;
   margin-right: auto;
 
+  .copyright {
+    #{a-tags} {
+      color: #747369;
+    }
+  }
+
   @media (max-width: $max-page-width) {
     width: 100%;
   }
@@ -52,27 +58,32 @@ div {
   }
 }
 
-@mixin side-padding($n) {
+@mixin side-padding-rem($n) {
   padding-left: $n * 1rem;
   padding-right: $n * 1rem;
 }
 
-@mixin vert-padding($n) {
+@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(8);
+  @include side-padding-rem(8);
-  @include vert-padding(1);
+  @include vert-padding-rem(1);
   /* min-height: 50%; */
   /* min-height: 30em; */
 
   @media (max-width: $max-page-width) {
-    @include side-padding(2);
+    @include side-padding-rem(2);
   }
 }
 
@@ -90,18 +101,13 @@ article {
   }
 }
 
-// TODO: converted up to here
-
 header {
   margin-top: 1.5rem;
   margin-bottom: 1rem;
-}
 
-@media (max-width: 52em) {
+  @media (max-width: $max-page-width) {
-  header {
     margin-top: 0;
-    padding-left: 2rem;
+    @include side-padding-rem(2);
-    padding-right: 2rem;
   }
 }
 
@@ -114,30 +120,29 @@ footer {
   bottom: 0;
   position: absolute;
   width: 100%;
-}
 
-@media (max-width: 52em) {
+  .container {
-  footer {
+    background-color: #393939;
+    max-width: 62em;
+    @include auto-center();
+    height: 1.8em;
+  }
+
+  @media (max-width: $max-page-width) {
     margin-top: 0;
     margin-bottom: 0;
   }
 }
 
-footer .container {
-  background-color: #393939;
-  max-width: 62em;
-  margin-left: auto;
-  margin-right: auto;
-  height: 1.8em;
-}
-
 /* Typography */
 
-h1, h2, h3, h4, h5, h6 {
+@for $i from 1 to 6 {
-  font-weight: bold;
+  h#{$i} {
-  line-height: 1.25;
+    font-weight: bold;
-  margin-top: 1em;
+    line-height: 1.25;
-  margin-bottom: .5em;
+    margin-top: 1em;
+    margin-bottom: .5em;
+  }
 }
 
 p {
@@ -159,53 +164,61 @@ pre, code {
 
 /* Header Layout */
 
-header a.path,a.path:visited {
+header {
-  color: #6699cc;
+  a {
-}
+    .path .path:visited {
+      color: #6699cc;
+    }
+  }
 
-header span.caret {
+  span {
-  color: #f2f0ec;
+    caret {
+      color: #f2f0ec;
+    }
+  }
 }
 
 /* Footer Layout */
 
-footer a,a:visited {
+$a-tags: 'a, a:active, a:visited';
-  color: #747369;
-  /* text-decoration: none; */
-}
 
-.container.copyright a,a:visited {
+footer {
-  color: #747369;
+  #{$a-tags} {
-  /* text-decoration: none; */
+    color: #747369;
+  }
 }
 
 /* 404 Page Layout */
 
-.page-not-found h1 {
+.page-not-found {
-  text-align: center;
+  h1 {
-  font-size: 5em;
+    text-align: center;
-}
+    font-size: 5em;
+  }
 
-.page-not-found h2 {
+  h2 {
-  text-align: center;
+    text-align: center;
-  font-size: 3em;
-  color: #a09f93;
-  margin-bottom: 4rem;
-}
-
-@media (max-width: 52em) {
-  .page-not-found h1 {
     font-size: 3em;
+    color: #a09f93;
+    margin-bottom: 4rem;
   }
 
-  .page-not-found h2 {
+  @media (max-width: $max-page-width) {
-    font-size: 2em;
+    h1 {
+      font-size: 3em;
+    }
+
+    h2 {
+      font-size: 2em;
+    }
   }
 }
 
+// TODO: converted up to here
+
 /* Homepage Layout */
 
-@media (max-width: 52em) {
+@media (max-width: $max-page-width) {
   .homepage {
     margin-bottom: 2rem;
   }
@@ -220,7 +233,7 @@ h1.site-title {
   margin-bottom: 0.2em;
 }
 
-@media (max-width: 52em) {
+@media (max-width: $max-page-width) {
   h1.site-title {
     font-size: 3em;
   }
@@ -231,7 +244,7 @@ h1.site-title {
   color: #ffcc66;
 }
 
-@media (max-width: 52em) {
+@media (max-width: $max-page-width) {
   .homepage h1.headline {
     padding-left: 2rem;
     padding-right: 2rem;
@@ -319,7 +332,7 @@ article.single .meta .val, article.single .meta .val a {
   color: #cc99cc;
 }
 
-@media (max-width: 52em) {
+@media (max-width: $max-page-width) {
   article.single .meta {
     padding-left: 2rem;
     padding-right: 2rem;
@@ -332,7 +345,7 @@ article.single h1.headline {
   color: #ffcc66;
 }
 
-@media (max-width: 52em) {
+@media (max-width: $max-page-width) {
   article.single h1.headline {
     padding-left: 2rem;
     padding-right: 2rem;
@@ -344,7 +357,7 @@ article.single section.body {
   padding-bottom: 3rem;
 }
 
-@media (max-width: 52em) {
+@media (max-width: $max-page-width) {
   article.single section.body {
     padding-top: 2rem;
     padding-bottom: 1rem;
@@ -394,7 +407,7 @@ article.single figure, article.single div.highlight {
   background-color: #393939;
 }
 
-@media (max-width: 52em) {
+@media (max-width: $max-page-width) {
   article.single figure, article.single div.highlight {
     width: 100%;
     margin-left: 0;

config.toml

@@ -1,5 +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,6 +1,13 @@
-- refactor single/list into baseof
+# Large
-- i3-like nav. bar
+- loop through URL sections
-  - symbols
+- rewrite CSS in Sass
-  - blog
+  - push to base16 repo
-  - about?
+- resume
-  - work
+  - printable version
+- add CSS grid layout
+- credits
+ 
+# Tiny
+- click on name for base URL
+- tux icon
+ 

layouts/partials/header.html

@@ -14,8 +14,10 @@
 <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700" type="text/css"> -->
 <link rel='stylesheet' href='//cdn.jsdelivr.net/npm/hack-font@3.3.0/build/web/hack-subset.css'>
 <!-- <link rel="stylesheet" href="https://meyerweb.com/eric/tools/css/reset/reset.css" type="text/css" media="all" /> -->
-<link rel="stylesheet" href="{{ "css/style.css" | relURL }}" type="text/css">
+<!-- <link rel="stylesheet" href="{{ "css/style.css" | relURL }}" type="text/css"> -->
-<link rel="alternate" href="{{ "index.xml" | relURL }}" type="application/rss+xml" title="{{ .Site.Title }}">
+{{ $main_sass := resources.Get "sass/main.scss" }}
+{{ $main_style := $main_sass | resources.ToCSS }}
+<link rel="stylesheet" href="{{ $main_style.Permalink }}" type="text/css">
 <!-- <title>
   {{ $isHomePage := eq .Title .Site.Title }}
   {{ .Title }}
@@ -24,7 +26,7 @@
   {{ end }}</title> -->
 <title>
   ~{{ .Page.RelPermalink }} · {{ .Site.Title }}
-  </title>
+</title>
 </head>
 <body>