michael/blog
1
0
Fork 0
Code Issues 2 Pull requests Releases Packages 1 Wiki Activity

Relayout home page

Browse source
This commit is contained in:
Michael Zhang 2022-07-19 03:49:38 -05:00
parent a2367d88db
commit ad3bd9bce1
10 changed files with 264 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

109
assets/sass/_content.scss
View file

@ -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;

125
assets/sass/_grid.scss Normal file
View file

@ -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;
}
}

1
assets/sass/main.scss
View file

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

35
layouts/_default/baseof.html
View file

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

27
layouts/home.html
View file

@ -1,26 +1,9 @@
{{- define "body" -}}
{{- define "content" -}}
<div id="homepageContainer">
<div id="homepage">
<h1 id="title">Michael Zhang</h1>
<h2>Blog</h2>
<div id="about">{{ .Content }}</div>
<h2 id="blog-posts-title"><a href="/posts">Recent Blog Posts &raquo;</a></h2>
<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>
{{ with .GetPage "/posts" }}
{{ partial "post-list" . }}
{{ end }}
{{- end -}}

11
layouts/partials/left-nav.html Normal file
View file

@ -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>

13
content/_index.md → layouts/partials/left-nav.md
View file

@ -1,6 +1,4 @@
+++
layout = "home"
+++
- Matrix: `@michael:mozilla.org`
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

11
layouts/partials/post-list.html
View file

@ -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 }}

4
layouts/posts/single.html
View file

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

BIN
static/self.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 710 KiB