Relayout home page

assets/sass/_content.scss

@@ -1,4 +1,4 @@
-@import "home";
+// @import "home";
 
 html {
     min-height: 100vh;
@@ -55,6 +55,86 @@ footer {
     text-align: center;
 }
 
+.flex-wrapper {
+    display: flex;
+    align-items: stretch;
+}
+
+@media screen and (max-width: 520px) {
+    .flex-wrapper {
+        flex-direction: column;
+        .container { padding: 5px 20px; }
+    }
+
+    .side-nav {
+        .side-nav-content {
+            width: 100%;
+            padding: 18px 0;
+            border-bottom: 1px solid #eee;
+            box-shadow: 0 10px 20px -10px #eee;
+
+            .home-link {
+                display: flex;
+                justify-content: space-evenly;
+            }
+            h1 { display: inline; }
+            .portrait {
+                max-height: 80px;
+            }
+            .bio { display: none; }
+        }
+    }
+}
+
+@media screen and (min-width: 520px) {
+    .flex-wrapper {
+        flex-direction: row;
+        .container { padding: 32px 40px 5px 40px; }
+    }
+
+    .side-nav {
+        position: sticky;
+        height: 100%;
+        left: 0;
+        top: 0;
+        // Capital Min to avoid invoking SCSS min
+        max-width: Min(30%, 240px);
+
+        .side-nav-content {
+            padding-top: 32px;
+            padding-right: 32px;
+            border-right: 1px solid #eee;
+            box-shadow: 10px 0 20px -10px #eee;
+
+            .portrait {
+                max-width: 100%;
+            }
+        }
+    }
+}
+
+.side-nav {
+
+    .side-nav-content {
+        .home-link {
+            text-decoration: none;
+        }
+
+        .portrait {
+            border-radius: 100%;
+        }
+
+        .bio {
+            font-size: 0.85rem;
+
+            ul {
+                padding-left: 12px;
+                list-style-type: "\25B8\00A0";
+            }
+        }
+    }
+}
+
 small {
     color: $small-text-color;
 }
@@ -89,15 +169,21 @@ blockquote {
 }
 
 .postlisting-row td {
-    padding-bottom: 20px;
+    padding-bottom: 10px;
+    line-height: 1.0;
 
     .title {
-        font-size: 1.5em;
+        font-size: 1.1em;
+    }
+
+    &.info {
+        color: $smaller-text-color;
+        font-size: 0.75em;
     }
 
     .summary {
         padding-top: 4px;
-        font-size: 0.8em;
+        font-size: 0.64em;
         color: $smaller-text-color;
 
         p {
@@ -172,7 +258,7 @@ table.table {
 }
 
 .post-title {
-    font-size: 3rem;
+    font-size: 2rem;
     font-weight: 500;
     margin-bottom: 0;
 }
@@ -183,7 +269,7 @@ table.table {
     margin-bottom: 6px;
 
     .tag {
-        font-size: 0.9rem;
+        font-size: 0.75rem;
         background-color: $tag-color;
         padding: 2px 7px;
 
@@ -205,6 +291,16 @@ table.table {
 .post-container {
     display: flex;
 
+    flex-direction: column;
+    .toc-drawer {
+        display: block;
+        summary {
+            font-weight: bold;
+        }
+    }
+    .toc-list { display: none; }
+
+    /*
     @media screen and (max-width: 520px) {
         flex-direction: column;
         .toc-drawer { display: block; }
@@ -224,6 +320,7 @@ table.table {
             min-width: 160px;
         }
     }
+    */
 
     .post-content {
         min-width: 1px;

assets/sass/_grid.scss

@@ -0,0 +1,125 @@
+// SIMPLE GRID - SASS/SCSS
+
+@import url(https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic);
+
+html,
+body {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  left: 0;
+  top: 0;
+  font-size: 100%;
+}
+
+// utility
+
+.left {
+  text-align: left;
+}
+
+.right {
+  text-align: right;
+}
+
+.center {
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.justify {
+  text-align: justify;
+}
+
+.hidden-sm {
+  display: none;
+}
+
+// grid
+
+$width: 96%;
+$gutter: 4%;
+$breakpoint-small: 33.75em; // 540px
+$breakpoint-med: 45em; // 720px
+$breakpoint-large: 60em; // 960px
+
+.container {
+  width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+
+  @media only screen and (min-width: $breakpoint-small) {
+    width: 80%;
+  }
+
+  @media only screen and (min-width: $breakpoint-large) {
+    width: 75%;
+    max-width: 60rem;
+  }
+}
+
+.row {
+  position: relative;
+  width: 100%;
+}
+
+.row [class^="col"] {
+  float: left;
+  margin: 0.5rem 2%;
+  min-height: 0.125rem;
+}
+
+.row::after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.col-1,
+.col-2,
+.col-3,
+.col-4,
+.col-5,
+.col-6,
+.col-7,
+.col-8,
+.col-9,
+.col-10,
+.col-11,
+.col-12 {
+  width: $width;
+}
+
+.col-1-sm { width:($width / 12) - ($gutter * 11 / 12); }
+.col-2-sm { width: ($width / 6) - ($gutter * 10 / 12); }
+.col-3-sm { width: ($width / 4) - ($gutter * 9 / 12); }
+.col-4-sm { width: ($width / 3) - ($gutter * 8 / 12); }
+.col-5-sm { width: ($width / (12 / 5)) - ($gutter * 7 / 12); }
+.col-6-sm { width: ($width / 2) - ($gutter * 6 / 12); }
+.col-7-sm { width: ($width / (12 / 7)) - ($gutter * 5 / 12); }
+.col-8-sm { width: ($width / (12 / 8)) - ($gutter * 4 / 12); }
+.col-9-sm { width: ($width / (12 / 9)) - ($gutter * 3 / 12); }
+.col-10-sm { width: ($width / (12 / 10)) - ($gutter * 2 / 12); }
+.col-11-sm { width: ($width / (12 / 11)) - ($gutter * 1 / 12); }
+.col-12-sm { width: $width; }
+
+@media only screen and (min-width: $breakpoint-med) {
+  .col-1 { width:($width / 12) - ($gutter * 11 / 12); }
+  .col-2 { width: ($width / 6) - ($gutter * 10 / 12); }
+  .col-3 { width: ($width / 4) - ($gutter * 9 / 12); }
+  .col-4 { width: ($width / 3) - ($gutter * 8 / 12); }
+  .col-5 { width: ($width / (12 / 5)) - ($gutter * 7 / 12); }
+  .col-6 { width: ($width / 2) - ($gutter * 6 / 12); }
+  .col-7 { width: ($width / (12 / 7)) - ($gutter * 5 / 12); }
+  .col-8 { width: ($width / (12 / 8)) - ($gutter * 4 / 12); }
+  .col-9 { width: ($width / (12 / 9)) - ($gutter * 3 / 12); }
+  .col-10 { width: ($width / (12 / 10)) - ($gutter * 2 / 12); }
+  .col-11 { width: ($width / (12 / 11)) - ($gutter * 1 / 12); }
+  .col-12 { width: $width; }
+
+  .hidden-sm {
+    display: block;
+  }
+}

assets/sass/main.scss

@@ -1,3 +1,4 @@
+@import "grid";
 @import "agda";
 @import "mixins";
 @import "fonts";

layouts/_default/baseof.html

@@ -14,35 +14,28 @@
 
     <body>
         {{ block "body" . }}
-        <header>
+        <div class="flex-wrapper">
-            <div id="header" class="container">
+            {{ partial "left-nav" . }}
-                <a href="/" id="title" class="title nocolorlink">{{ .Site.Title }}</a>
 
-                <div id="nav">
+            <div class="sep"></div>
-                    {{- range $index, $page := .Site.Home.Pages -}}
-                        {{- if not $page.Params.hidden }}
-                            {{- if ne $index 0 -}}
-                                &nbsp;&middot;&nbsp;
-                            {{- end -}}
 
-                            <a href="{{ .RelPermalink }}" class="link">{{ $page.Title }}</a>
+            <div class="container">
-                        {{- end -}}
+                {{ block "content" . }}{{ end }}
-                    {{- end -}}
-                </div>
             </div>
-        </header>
-
-        <div class="container" style="padding: 5px 40px;">
-            {{ block "content" . }}{{ end }}
         </div>
 
         <footer>
             <p style="margin: 0;">
-                blog code licensed under <a href="https://www.gnu.org/licenses/gpl-3.0.txt" target="_blank">[gpl3]</a>.
+                Blog code licensed under <a
-                post contents licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/legalcode.txt">[cc by-sa 4.0]</a>.
+                    href="https://www.gnu.org/licenses/gpl-3.0.txt"
+                    target="_blank">[GPL-3.0]</a>.
+                Post contents licensed under <a
+                    href="https://creativecommons.org/licenses/by-sa/4.0/legalcode.txt">[CC
+                    BY-SA 4.0]</a>.
                 <br />
-                written by michael zhang.
+                Written by Michael Zhang.
-                <a href="https://git.sr.ht/~mzhang/blog" class="colorlink" target="_blank">[source]</a>.
+                <a href="https://git.sr.ht/~mzhang/blog" class="colorlink"
+                    target="_blank">[Source]</a>.
             </p>
         </footer>
         {{ end }}

layouts/home.html

@@ -1,26 +1,9 @@
-{{- define "body" -}}
+{{- define "content" -}}
 
-<div id="homepageContainer">
+<h2>Blog</h2>
-    <div id="homepage">
-        <h1 id="title">Michael Zhang</h1>
 
-        <div id="about">{{ .Content }}</div>
+{{ with .GetPage "/posts" }}
-
+    {{ partial "post-list" . }}
-        <h2 id="blog-posts-title"><a href="/posts">Recent Blog Posts &raquo;</a></h2>
+{{ end }}
-        <ul id="blog-posts">
-            {{ $posts := where (.GetPage "/posts").Pages "Draft" false }}
-            {{- range first 3 $posts -}}
-            <li><a href="{{ .RelPermalink }}" class="blog-post-link">
-                <span class="blog-post">
-                    <span class="title">{{ .Title }}</span>
-                    <small class="details">
-                        {{ .Date.Format "Mon Jan 02, 2006" }}
-                    </small>
-                </span>
-            </a></li>
-            {{- end -}}
-        </ul>
-    </div>
-</div>
 
 {{- end -}}

layouts/partials/left-nav.html

@@ -0,0 +1,11 @@
+<nav class="side-nav">
+    <div class="side-nav-content">
+        <a href="/" class="home-link">
+            <img class="portrait" src="/self.png" />
+            <h1>Michael Zhang</h1>
+        </a>
+        <div class="bio">
+            {{ os.ReadFile "layouts/partials/left-nav.md" | .RenderString }}
+        </div>
+    </div>
+</nav>

layouts/partials/left-nav.md

@@ -1,6 +1,4 @@
-+++
+- Matrix: `@michael:mozilla.org`
-layout = "home"
-+++
 
 Hi there! I'm an incoming graduate student at the University of Minnesota. I
 currently work as a Software Developer at [AWS][1] (previously at [SIFT][2]). My
@@ -9,12 +7,3 @@ verification, systems security, cryptography, and distributed systems.
 
 [1]: https://aws.amazon.com/
 [2]: https://www.sift.net/
-
-## Contact
-
-- Email: {{% obfuscate %}}inbox@mzhang.io{{% /obfuscate %}}
-- PGP Key: [`925ECC02890D5CDAE26180D4BDA47A31A3C8EE6B`][PGP]
-- IRC: `mzh` on [libera.chat]
-
-[PGP]: https://keybase.io/michaelz/pgp_keys.asc?fingerprint=925ecc02890d5cdae26180d4bda47a31a3c8ee6b
-[libera.chat]: https://libera.chat

layouts/partials/post-list.html

@@ -2,18 +2,13 @@
     {{- range .Pages -}}
         {{ if not .Draft }}
             <tr class="postlisting-row">
+                <td class="info">
+                    {{ .Date.Format "2006 Jan 02" }}
+                </td>
                 <td>
                     <span class="title">
                         <a href="{{ .RelPermalink }}" class="brand-colorlink">{{ .Title }}</a>
                     </span>
-                    <br />
-                    <small>
-                        {{ .ReadingTime }} min read -
-
-                        {{ .Date.Format "Mon Jan 02, 2006" }}
-                    </small>
-
-                    <br />
                 </td>
             </tr>
         {{ end }}

layouts/posts/single.html

@@ -33,9 +33,7 @@
                 {{ .TableOfContents }}
             </details>
         </div>
-        <div class="toc-list">
+        <!-- <div class="toc-list"> {{ .TableOfContents }} </div> -->
-            {{ .TableOfContents }}
-        </div>
     {{ end }}
     <div id="content" class="post-content">{{ .Content }}</div>
 </div>