andrew/blog
andrew
/
blog
mirror of https://github.com/andrewgioia/blog.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Creates the about page, adds a new base page template and moves the posts to their own, new picture shortcode, improvements to thoughts section, updates to header

This commit is contained in:
Andrew Gioia 2020-08-17 20:59:27 -04:00
parent 27b2fa3ca8
commit d393aeb694
19 changed files with 559 additions and 255 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/scss/_dark.scss
View File

@ -22,7 +22,7 @@
#toc {
background: rgba(0,0,0,.75);
&::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d6d7df' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%0A%3E%3Cline x1='8' y1='6' x2='21' y2='6' /%3E%3Cline x1='8' y1='12' x2='21' y2='12' /%3E%3Cline x1='8' y1='18' x2='21' y2='18' /%3E%3Cline x1='3' y1='6' x2='3.01' y2='6' /%3E%3Cline x1='3' y1='12' x2='3.01' y2='12' /%3E%3Cline x1='3' y1='18' x2='3.01' y2='18' /%3E%3C/svg%3E%0A");
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235a6371' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%0A%3E%3Cline x1='8' y1='6' x2='21' y2='6' /%3E%3Cline x1='8' y1='12' x2='21' y2='12' /%3E%3Cline x1='8' y1='18' x2='21' y2='18' /%3E%3Cline x1='3' y1='6' x2='3.01' y2='6' /%3E%3Cline x1='3' y1='12' x2='3.01' y2='12' /%3E%3Cline x1='3' y1='18' x2='3.01' y2='18' /%3E%3C/svg%3E%0A");
}
}
}

5
assets/scss/_media.scss
View File

@ -26,6 +26,11 @@
}
@media only screen and (max-width: $screen-tablet) {
header {
nav {
display: none;
}
}
main {
align-self: stretch;
overflow-x: hidden; // safety for negative figure margin below

1
assets/scss/_variables.scss
View File

@ -20,6 +20,7 @@ $font-family-title: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica
$font-size-base: 18px;
$blue-lt: #29baff;
$blue-md: #0069ff;
$sky-md: #29baff;
$screen-narrow: 414px;
$screen-mobile: 640px;
$screen-tablet: 768px;

504
assets/scss/main.scss
View File

@ -16,6 +16,7 @@
--text-color: #{$navy-md};
--text-color-accent: #{$navy-dk};
--text-color-subdued: #{$tan-md};
--text-color-take: #{$sky-md};
--text-color-title: #{$purple-md};
--text-color-h3: #{$teal-md};
--screen-mobile: #{$screen-mobile};
@ -46,6 +47,8 @@ body {
header {
align-self: stretch;
border-top: 1vmax solid var(--border-subdued);
display: flex;
justify-content: space-between;
padding: 5vmin 6vmin 0;
h1 {
@ -64,6 +67,19 @@ header {
}
}
}
nav {
a {
color: var(--text-color);
display: inline-block;
font-size: max(1.5vmax, 1rem);
font-weight: 700;
margin-top: 0.25rem;
&:not(:first-child) {
margin-left: max(2.5vmax, 1rem);
}
}
}
}
main {
@ -72,18 +88,209 @@ main {
padding: max(5vmin, 2rem) 6vmin;
position: relative;
// content titles
aside {
margin: 0 7.5vmin max(2vmax, 1rem);
text-align: center;
img#banner {
display: none; // only showing this on phones
margin: 0 -6vmin 10vmin;
width: calc(100% + 12vmin);
}
h1 {
color: var(--text-color-title);
font-family: $font-family-title;
font-size: max(3.75vmax, 2rem);
font-weight: 800;
letter-spacing: -0.075rem;
line-height: 1.15;
}
time {
font-size: max(1.5vmax, 1rem);
font-weight: 900;
text-transform: uppercase;
}
&.paginate { // full width for the arrows
display: flex;
flex-direction: row;
margin: 0 0 max(2vmax, 1rem);
#next,
#previous {
flex-grow: 0;
padding-top: 2vmax;
width: 7.5vmax;
svg {
border-radius: 100rem;
}
&:hover svg {
background-color: var(--text-color-subdued);
stroke: var(--text-color);
}
}
#next {
text-align: right;
svg {
padding: 0.2vmax 0 .2vmax 0.4vmax;
}
}
#previous {
text-align: left;
svg {
padding: 0.2vmax 0.4vmax .2vmax 0;
}
}
#meta {
flex-grow: 1;
}
}
}
// content body
article {
align-items: center;
display: flex;
flex-direction: column;
h2 { // section titles, outset width
color: var(--text-color-accent);
font-size: max(2.25vmax, 1.5rem);
font-weight: 800;
letter-spacing: -0.05rem;
margin: 2vmax 10vmin 1vmax;
text-align: center;
text-transform: uppercase;
}
h3 { // subsection headers, body width
color: var(--text-color-h3);
font-size: max(2vmax, 1.375rem);
margin: 2vmax 10vmin 1vmax;
text-align: center;
}
h4 { // highlighted sections, left aligned and bigger
font-size: max(1.75vmax, 1.25rem);
font-weight: 500;
font-weight: 800;
line-height: max(2.5vmax, 1.75rem);
margin: max(1vmax, 0.75rem) 0;
width: min(50vmax, 100%)
}
// skinny elements
p,
ul,
h3,
section,
blockquote {
width: min(50vmax, 100%);
}
// lists
ul,
ol {
margin: max(1vmax, 0.75rem) 0;
padding: 0;
li {
margin-left: max(3vmax, 1rem);
padding: 0 0 max(2vmax, 1rem) max(1vmax, 0.5rem);
p:first-child { // each li's first p needs reduced top margin
margin-top: max(0.5vmax, 0.5rem)
}
&:first-child p:first-child { // the first item's first p gets none
margin-top: 0;
}
p:last-child { // every last para needs it's bottom margin removed too
margin-bottom: 0;
}
}
}
ul {
// default font-size on lists should be same as paragraphs
li {
font-size: max(1.375vmax, 1rem);
line-height: max(2vmax, 1.5rem);
&:last-child {
padding-bottom: 0;
}
}
}
section {
// for lists inside <sections>, like FNs, we'll make it a little smaller
ol li,
ol li p {
font-size: max(1.125vmax, 0.85rem);
line-height: max(1.5vmax, 1.375rem);
}
}
// post images
figure {
margin: 2vmax 0;
max-width: 80vw;
picture,
img {
border-radius: 1rem;
width: 100%;
}
}
// captions below post images
figcaption {
font-size: max(1.25vmax, 0.9rem);
font-style: italic;
padding: 1vmax 0;
text-align: center;
}
}
// home page
&#home {
padding-top: max(10vmin, 2rem);
width: 80%;
}
// article page
// full post pages
&#post {
align-items: center;
flex-direction: column;
}
// short takes pages
&#thought {
align-items: center;
flex-direction: column;
max-width: var(--screen-full);
h1 {
color: var(--text-color-take);
font-size: max(2.5vmax, 2rem); // slightly smaller
}
article {
align-items: center;
//background-color: var(--background-accent);
border-radius: max(2vmax, 1rem);
display: flex;
flex-direction: column;
//padding: 2vmax 4vmax;
width: min(50vmax, 100%);
}
}
// list pages
&#list {
align-items: center;
@ -129,173 +336,45 @@ main {
}
}
}
}
// post titles
aside {
margin: 0 7.5vmin max(2vmax, 1rem);
text-align: center;
// paragraphs
p {
font-size: max(1.375vmax, 1rem);
line-height: max(2vmax, 1.5rem);
margin: max(1vmax, 0.75rem) 0;
img#banner {
display: none; // only showing this on phones
margin: 0 -6vmin 10vmin;
width: calc(100% + 12vmin);
}
&.big { // larger highlight and intro paragraphs
font-size: max(1.75vmax, 1.25rem);
font-weight: 500;
line-height: max(2.5vmax, 1.75rem);
h1 {
color: var(--text-color-title);
font-family: $font-family-title;
font-size: max(3.75vmax, 2rem);
> strong {
font-weight: 800;
letter-spacing: -0.075rem;
line-height: 1.1;
}
time {
font-size: max(1.5vmax, 1rem);
font-weight: 900;
text-transform: uppercase;
}
}
&.swqm { // starts with a quotation mark
text-indent: min(-0.55vmax, -0.4rem);
}
}
// post content
article {
align-items: center;
display: flex;
flex-direction: column;
// blockquotes
blockquote {
margin: max(1vmax, 0.75rem) 0;
h2 { // section titles, outset width
color: var(--text-color-accent);
font-size: max(2.25vmax, 1.5rem);
font-weight: 800;
letter-spacing: -0.05rem;
margin: 2vmax 10vmin 1vmax;
text-align: center;
text-transform: uppercase;
p {
border-left: 1vmax solid var(--border-accent);
padding-left: 2vmax;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding: max(1vmax, 0.75rem) 0 max(1vmax, 0.75rem) 2vmax;
width: auto !important;
&:first-child {
padding-top: 0;
}
h3 { // subsection headers, body width
color: var(--text-color-h3);
font-size: max(2vmax, 1.375rem);
margin: 2vmax 10vmin 1vmax;
text-align: center;
}
h4 { // highlighted sections, left aligned and bigger
font-size: max(1.75vmax, 1.25rem);
font-weight: 500;
font-weight: 800;
line-height: max(2.5vmax, 1.75rem);
margin: max(1vmax, 0.75rem) 0;
width: min(50vmax, 100%)
}
// skinny elements
p,
ul,
h3,
section,
blockquote {
width: min(50vmax, 100%);
}
// paragraphs
p {
font-size: max(1.375vmax, 1rem);
line-height: max(2vmax, 1.5rem);
margin: max(1vmax, 0.75rem) 0;
&.big { // larger highlight and intro paragraphs
font-size: max(1.75vmax, 1.25rem);
font-weight: 500;
line-height: max(2.5vmax, 1.75rem);
> strong {
font-weight: 800;
}
}
&.swqm { // starts with a quotation mark
text-indent: min(-0.55vmax, -0.4rem);
}
}
// lists
ul,
ol {
margin: max(1vmax, 0.75rem) 0;
padding: 0;
li {
margin-left: max(3vmax, 1rem);
padding: 0 0 max(2vmax, 1rem) max(1vmax, 0.5rem);
p:first-child { // each li's first p needs reduced top margin
margin-top: max(0.5vmax, 0.5rem)
}
&:first-child p:first-child { // the first item's first p gets none
margin-top: 0;
}
p:last-child { // every last para needs it's bottom margin removed too
margin-bottom: 0;
}
}
}
ul {
// default font-size on lists should be same as paragraphs
li {
font-size: max(1.375vmax, 1rem);
line-height: max(2vmax, 1.5rem);
&:last-child {
padding-bottom: 0;
}
}
}
section {
// for lists inside <sections>, like FNs, we'll make it a little smaller
ol li,
ol li p {
font-size: max(1.125vmax, 0.85rem);
line-height: max(1.5vmax, 1.375rem);
}
}
// blockquotes
blockquote {
margin: max(1vmax, 0.75rem) 0;
p {
border-left: 1vmax solid var(--border-accent);
padding-left: 2vmax;
margin-top: 0;
margin-bottom: 0;
padding: max(1vmax, 0.75rem) 0 max(1vmax, 0.75rem) 2vmax;
width: auto;
&:first-child {
padding-top: 0;
}
&:last-child {
padding-bottom: 0;
}
}
}
// post images
figure {
margin: 1vmax 0;
max-width: 80vw;
picture,
img {
width: 100%;
}
}
// captions below post images
figcaption {
font-size: max(1.25vmax, 0.9rem);
font-style: italic;
padding: 1vmax 0 2vmax;
text-align: center;
&:last-child {
padding-bottom: 0;
}
}
}
@ -304,48 +383,47 @@ main {
footer {
display: flex;
flex-direction: column;
padding: max(5vmin, 2rem) 6vmin;
margin: max(5vmin, 2rem) 6vmin;
position: relative;
max-width: calc(100% - 12vmin);
width: 100%;
&.border {
border-top: max(0.25vmax, 0.25rem) solid var(--border-accent);
&::before {
align-items: center;
background: var(--background);
border-radius: 100%;
color: var(--border-accent);
content: $icon-barracuda;
display: flex;
font-family: 'andrew';
font-size: max(3vmax, 2.5rem);
height: max(5vmax, 4rem);
justify-content: center;
left: 50%;
margin-left: min(-2.5vmax, -2rem);
position: absolute;
text-align: center;
top: min(-2.5vmax, -2rem);
width: max(5vmax, 4rem);
}
}
// bottom content, should be footer
section {
&#author {
align-self: stretch;
display: flex;
justify-content: center;
margin-top: 5vmax;
position: relative;
align-self: stretch;
display: flex;
justify-content: center;
margin-top: 5vmax;
position: relative;
span {
margin-left: 0.5vmax;
}
&.border {
border-top: max(0.25vmax, 0.25rem) solid var(--border-accent);
padding-top: 5vmax;
&::before {
align-items: center;
background: var(--background);
border-radius: 100%;
color: var(--border-accent);
content: $icon-barracuda;
display: flex;
font-family: 'andrew';
font-size: max(3vmax, 2.5rem);
height: max(5vmax, 4rem);
justify-content: center;
left: 50%;
margin-left: min(-2.5vmax, -2rem);
position: absolute;
text-align: center;
top: min(-2.5vmax, -2rem);
width: max(5vmax, 4rem);
}
}
span {
margin-left: 0.5vmax;
}
}
}
@ -374,22 +452,22 @@ a[href^="#fn:"]:after{ content: ']' }
width: 35vw;
&::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23032140' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%0A%3E%3Cline x1='8' y1='6' x2='21' y2='6' /%3E%3Cline x1='8' y1='12' x2='21' y2='12' /%3E%3Cline x1='8' y1='18' x2='21' y2='18' /%3E%3Cline x1='3' y1='6' x2='3.01' y2='6' /%3E%3Cline x1='3' y1='12' x2='3.01' y2='12' /%3E%3Cline x1='3' y1='18' x2='3.01' y2='18' /%3E%3C/svg%3E%0A");
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23bbb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%0A%3E%3Cline x1='8' y1='6' x2='21' y2='6' /%3E%3Cline x1='8' y1='12' x2='21' y2='12' /%3E%3Cline x1='8' y1='18' x2='21' y2='18' /%3E%3Cline x1='3' y1='6' x2='3.01' y2='6' /%3E%3Cline x1='3' y1='12' x2='3.01' y2='12' /%3E%3Cline x1='3' y1='18' x2='3.01' y2='18' /%3E%3C/svg%3E%0A");
background-size: 75% 75%;
background-position: 0 50%;
background-repeat: no-repeat;
bottom: max(5vmin, 2rem);
content: '';
cursor: pointer;
display: block;
height: 5vmax;
left: -7.5vmax;
height: 4vmax;
left: -12vmin;
position: absolute;
top: 2.5vmax;
transition-property: opacity, left;
transition-duration: 400ms;
transition-timing-function: ease-in-out;
transition-delay: 250ms;
width: 7.5vmax;
width: 12vmin;
}
&:hover,
@ -475,7 +553,7 @@ b {
&#top {
display: block;
align-self: flex-end;
margin: 3vmax;
margin: 5vmin 10vmin 3vmin 0;
&:hover {
border: none;
@ -483,14 +561,12 @@ b {
}
}
// paragraph links
// specific link effects
p a:hover {
border-bottom: 2px solid var(--link-color);
}
// specific link effects
header h1 a.back::after {
-webkit-transform: translateY(-0.5rem) translateX(min(-1.75vmax, -1.25rem));
header h1 a.arrow.back::after {
-webkit-transform: translateY(-0.5rem) translateX(min(-2vmax, -1.25rem));
-moz-transform: translateY(-0.5rem) translateX(min(-1.75vmax, -1.25rem));
transform: translateY(-0.5rem) translateX(min(-1.75vmax, -1.25rem));
}
@ -554,6 +630,26 @@ ul {
}
}
}
&.clean {
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: start;
list-style-type: none;
margin: 1vmax 0 0;
padding: 0;
li a {
color: var(--text-color);
font-size: max(1.25vmax, 1rem);
margin: 0 0.5vmax;
&:hover {
color: var(--text-color-accent);
}
}
}
}
// horizontal rules

3
config/_default/config.yaml
View File

@ -1,4 +1,5 @@
enableEmoji: true
enableGitInfo: true
footnoteReturnLinkContents: "↑" # doesn't work with goldmark yet
languageCode: en-us
log: true
@ -30,6 +31,6 @@ params:
title: Andrew Gioia | Blog
AuthorName: Andrew Gioia
GitHubUser: andrewgioia
Subtitle: /posts
Subtitle: blog
title: Andrew Gioia
verboseLog: true

4
content/_index.md
View File

@ -0,0 +1,4 @@
---
title: Home
base: blog
---

27
content/about.md Normal file
View File

@ -0,0 +1,27 @@
---
title: About me and this blog
base: about
---
<p class="big"><strong>Welcome!</strong> My name is <a href="https://andrewgioia.com">Andrew Gioia</a> and this website is my effort to write more&mdash;my shorter thoughts and longer form articles on a lot of the things I'm really interested in and care deeply about.</p>
{{< picture
source="https://media.gioia.cloud/blog/photos/peartree.sm.min.jpg"
alt="Daniel sitting under the pear tree"
title="Daniel sitting under the pear tree" >}}
**A bit about me:** I grew up outside Philadelphia, Pennsylvania, and moved across the state to Pittsburgh in 2017 with my wife, Beth, our young son, Daniel, and our dog, Maggie. We live in a really old home in the Pittsburgh suburbs with a beautiful bank barn, and we try to spend as much time as possible outside or working on our house.
I've worked remotely for eight years at [TeachBoost](https://teachboost.com), an edtech company I co-founded in 2012, and it'll hopefully be the only job I'll ever have! I like to tinker with home networking and automation, ferment things, and read/watch science fiction.
### What I hope to do with this blog
While I started privately journaling when Daniel was born and have been able to keep that up, I haven't written anything publicly for over a decade. **There's a _huge_ difference between writing for myself and writing for others**, with the later forcing me to really think through my opinions or beliefs.
I think that the process of writing _why_ I feel a certain way has huge personal benefits, even if no one reads it. I think the Internet needs personal self-hosted blogs more than ever, and I want to help federated content grow. I also hope that publishing can help contribute in some small way to public discourse or to communities I participate in.
Topics I hope to write about include the [Internet](/tags/internet), [free speech](/tags/free-speech), clean air, simple living, home networking, web technologies, fatherhood and [parenting](/tags/parenting), fermentation, home DIY, science fiction, Midwest emo revival, and Magic: the Gathering.
### Getting in touch
You can email me anytime at hi [at] andrewgioia [dot] com, or find me on Mastodon [@andrew@gioia.social](https://gioia.social/@andrew)! You get 100 bonus points if you use Mastodon and help me justify the server costs 😜.

2
content/posts/20-07-09-facebook.md
View File

@ -2,7 +2,7 @@
title: Boycott Facebook, but not because it supports free speech
linkTitle: Boycott Facebook, but not for its free speech
author: Andrew Gioia
slug: "facebook"
slug: facebook
date: 2020-07-09
publishdate: 2020-07-14
banner: post-cover.png

22
content/posts/20-08-11-mozilla.md
View File

@ -2,7 +2,7 @@
title: Mozilla's failures and a path to profitability
linkTitle: Mozilla's failures and a path to profitability
author: Andrew Gioia
slug: "mozilla"
slug: mozilla
date: 2020-08-14
publishdate: 2020-08-14
banner: post-cover.png
@ -53,20 +53,12 @@ I was _excited_ to switch away from Firefox in 2009 when Google Chrome became a
* **Incognito Mode was very useful.** Safari had apparently had this for years but I wasn't on a Mac then and Safari wasn't popular for a lot of other reasons on Windows. While very basic, Incognito windows were my first foray into Internet privacy and became an easy way to load a fresh copy of a website.
<figure>
<picture>
<source
srcset="firefox-chrome-2009@dark.png"
media="(prefers-color-scheme: dark)">
<img src="firefox-chrome-2009@light.png"
alt="Firefox and Chrome in 2009"
title="Firefox 3 and Google Chrome 0.2.149 on Windows XP in late 2008."
class="outset">
</picture>
<figcaption>
Firefox 3 and Google Chrome 0.2.149 on Windows XP in late 2008.
</figcaption>
</figure>
{{< picture
source="firefox-chrome-2009@light.png"
dark="firefox-chrome-2009@dark.png"
alt="Firefox and Chrome in 2009"
title="Firefox 3 and Google Chrome 0.2.149 on Windows XP in late 2008."
caption="Firefox 3 and Google Chrome 0.2.149 on Windows XP in late 2008." >}}
Firefox was without question the best browser through the early 2000s and it pushed the web forward in countless ways, often in stark contrast to Microsoft. [Firefox 3 earlier in the year was incredible](https://www.cnet.com/reviews/firefox-3-review/) and set single day download records, but the browser experience was slow and updates felt incremental and not "revolutionary."

2
content/posts/20-10-01-renovation.md
View File

@ -1,7 +1,7 @@
---
title: Things I wish I knew before undertaking a large home renovation
linkTitle: Things I wish I knew before undertaking a large home renovation
slug: "renovation"
slug: renovation
date: 2020-10-01
draft: true
---

33
content/thoughts/20-08-16-encouragement.md Normal file
View File

@ -0,0 +1,33 @@
---
title: Toddlers naturally love to help, and we need to encourage it endlessly
author: Andrew Gioia
slug: encouragement
date: 2020-08-16
publishdate: 2020-08-16
description: Something
tags:
- Parenting
- Toddlers
---
<p class="big">One of the bigger surprises with toddlerhood for me has been just how <strong>the drive is to help and be a part of the team</strong>.</p>
About 2 years ago we saw this _surge_ in helping as soon as Daniel was mobile and able to say basic things. I had fortunately read a bit about this in a [parenting book](https://www.themontessorinotebook.com/the-montessori-toddler/) a few months prior and we've (thankfully) always made it a point to route the help towards _actually_ helping out in some way, even if it took 10x longer or was just some tiny part, and to always encourage it.
Not just makework to feel like he was helping, but things like carrying Maggie's food to her bowl by himself or (slowly) taking the cans of soda from my hand and putting them into our fridge rack. Daniel's drive to help has only gotten stronger as he's gotten older and it's something I foster and cherish every day.
It's probably because of this that I was particularly primed for a conversation I overhead at Target this weekend. There was an obviously stressed mom with her 3-4 year old son standing up in the cart, _eager_ to start grabbing items and scanning them at the self-checkout.
**Four times she unintentionally whittled away at his enthusiasm to help**, no doubt on her way to destroying it completely within the next year:
> Can you please let me do this **so you don’t keep screwing it up**?
>
> I know you want to help but _you’re_ not on any kind of timeframe here and I’d like to get out of this store sometime today!
>
> _[A clerk clerk walks over and says “aww it looks like you have a big helper today!”]_ Ohhh yes he’s a helper alright... he likes to scan every item twice too. Big big help... 🙄
>
> _[Another woman asks if it was his first time helping mom, and he says yes.]_ Oh it’s not your first time doing it **you liar**, ha ha
This small boy&mdash;still eager and enthusiastic to help his mom, no doubt after thousands of these types of interactions&mdash;is having this wonderful, natural gift ripped away from him. It's also no wonder why some older kids go on to do and say the same things to smaller kids.
One of the greatest things we can do as parents is often just **getting out of the way of our kids' natural innocence and good nature**.

3
content/thoughts/_index.md Normal file
View File

@ -0,0 +1,3 @@
---
title: Takes
---

31
layouts/_default/list.html
View File

@ -1,9 +1,26 @@
{{ define "main" }}
<h1>Posts</h1>
{{ range .Pages }}
<article>
<h2>{{ .Title }}</h2>
{{ .Content }}
</article>
{{ end }}
<main id="list">
<h1>
{{ cond (ne .Type "page") .Type "Posts" }}
</h1>
{{ range .Pages }}
<section>
<h2>
<a href="{{ .RelPermalink }}" class="wa link">
<span>{{ .Title }}</span>
<b class="arrow"></b>
</a>
</h2>
<h3>
Written by {{ .Params.author }} on {{ .PublishDate.Format "January 1, 2006" }}
&nbsp;&middot;&nbsp;
{{ .ReadingTime }} minute read
</h3>
<p>
{{ .Summary }}
</p>
</section>
{{ end }}
</main>
{{ end }}

27
layouts/_default/single.html
View File

@ -12,35 +12,16 @@
<h1>
{{ .Title }}
</h1>
<time>
{{ .PublishDate.Format "January 2, 2006" }}
</time>
</aside>
<article>
{{ .Content }}
</article>
</main>
<footer id="byline">
<section id="author" class="border">
<i class="icon icon-feather"></i>&nbsp;
<span>Written by {{ .Params.author }}</span>
<span>on {{ .PublishDate.Format "January 2, 2006" }}.</span>
</section>
{{ with (.Params.tags) }}
<ul id="tags" class="tags">
{{ range . }}
<li>
<a href="{{ "tags/" | absURL }}{{ . | urlize }}">{{ . }}</a>
</li>
{{ end }}
</ul>
{{ end }}
<a id="top" class="arrow back" href="#">To the top!</a>
<footer class="border">
<section class="border">
Last edited {{ .Lastmod }}
</section>
</footer>
<div id="toc">
{{ .TableOfContents }}
</div>
{{ end }}

2
layouts/index.html
View File

@ -4,7 +4,7 @@
{{.Content}}
</div>
<ul class="list">
{{ range .Site.RegularPages }}
{{ range where .Site.RegularPages "Section" "posts" }}
<li>
<div>
<a href="{{ .Permalink }}" class="wa link">

7
layouts/partials/header.html
View File

@ -5,8 +5,13 @@
<span class="name">/tags</span><!--
--><span class="slug">/{{ .Data.Term }}</span>
{{ else }}
<span class="name">{{ .Site.Params.Subtitle }}</span><!--
<span class="name">/{{ cond (ne .Type "page") .Type .Params.base }}</span><!--
--><span class="slug">{{ with .Params.slug }}/{{ . }}{{ end }}</span>
{{ end }}
</h1>
<nav>
<a href="/posts" class="arrow">Posts</a>
<a href="/thoughts" class="arrow">Thoughts</a>
<a href="/about" class="arrow">About</a>
</nav>
</header>

46
layouts/posts/single.html Normal file
View File

@ -0,0 +1,46 @@
{{ define "title" }}
{{ .Title }} &ndash; {{ .Site.Title }}
{{ end }}
{{ define "main" }}
<main id="post" aria-role="main">
<aside>
{{ with (.Params.banner) }}
<img src="{{ . }}" id="banner">
{{ end }}
<h1>
{{ .Title }}
</h1>
<time>
{{ .PublishDate.Format "January 2, 2006" }}
</time>
</aside>
<article>
{{ .Content }}
</article>
</main>
<footer id="byline" class="border">
<section>
<i class="icon icon-feather"></i>&nbsp;
<span>Written by {{ .Params.author }}</span>
<span>on {{ .PublishDate.Format "January 2, 2006" }}.</span>
</section>
{{ with (.Params.tags) }}
<ul id="tags" class="tags">
{{ range . }}
<li>
<a href="{{ "tags/" | absURL }}{{ . | urlize }}">{{ . }}</a>
</li>
{{ end }}
</ul>
{{ end }}
<a id="top" class="arrow back" href="#">To the top!</a>
</footer>
<div id="toc">
{{ .TableOfContents }}
</div>
{{ end }}

18
layouts/shortcodes/picture.html Normal file
View File

@ -0,0 +1,18 @@
<figure>
<picture>
{{ with .Get "dark" }}
<source
srcset="{{ . }}"
media="(prefers-color-scheme: dark)">
{{ end }}
<img src='{{ .Get "source" }}'
alt='{{ with .Get "alt" }}{{ . }}{{ end }}'
title='{{ with .Get "title" }}{{ . }}{{ end }}'
class="outset">
</picture>
{{ with .Get "caption" }}
<figcaption>
{{ . }}
</figcaption>
{{ end }}
</figure>

75
layouts/thoughts/single.html Normal file
View File

@ -0,0 +1,75 @@
{{ define "title" }}
{{ .Title }} &ndash; {{ .Site.Title }}
{{ end }}
{{ define "main" }}
<main id="thought" aria-role="main">
{{ with .Paginator }}
<aside class="paginate">
{{ if .HasPrev }}
<a href="{{ .Prev }}" id="previous">
<svg xmlns="http://www.w3.org/2000/svg" width="max(5vmax, 4rem)" height="max(5vmax, 4rem)" viewBox="0 0 24 24" fill="none" stroke="var(--text-color-subdued)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="15 18 9 12 15 6" />
</svg>
</a>
{{ end }}
<div id="meta">
<h1>
{{ .Title }}
</h1>
<time>
{{ .PublishDate.Format "January 2, 2006" }} &nbsp;
</time>
{{ with (.Params.tags) }}
<ul id="tags" class="clean">
{{ range . }}
<li>
<a href="{{ "tags/" | absURL }}{{ . | urlize }}">#{{ . }}</a>
</li>
{{ end }}
</ul>
{{ end }}
</div>
{{ if .HasNext }}
<a href="#" id="next">
<svg xmlns="http://www.w3.org/2000/svg" width="max(5vmax, 4rem)" height="max(5vmax, 4rem)" viewBox="0 0 24 24" fill="none" stroke="var(--text-color-subdued)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="9 18 15 12 9 6" />
</svg>
</a>
{{ end }}
</aside>
{{ else }}
<aside>
<div id="meta">
<h1>
{{ .Title }}
</h1>
<time>
{{ .PublishDate.Format "January 2, 2006" }} &nbsp;
</time>
{{ with (.Params.tags) }}
<ul id="tags" class="clean">
{{ range . }}
<li>
<a href="{{ "tags/" | absURL }}{{ . | urlize }}">#{{ . }}</a>
</li>
{{ end }}
</ul>
{{ end }}
</div>
</aside>
{{ end }}
<article>
{{ .Content }}
</article>
</main>
{{ end }}