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

Improves homepage display of thoughts

This commit is contained in:
Andrew Gioia 2020-08-19 15:04:04 -04:00
parent 5a18823795
commit bcfcdf9b47
8 changed files with 223 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
assets/scss/_media.scss
View File

@ -1,5 +1,15 @@
// media queries
@media only screen and (max-width: $screen-display) {
// this is the max-width on content, after this we start using 80% of the width for many things
main#home ul.thoughts {
transform: translateX(-10%);
li:first-child {
margin-left: 10%;
}
}
}
@media only screen and (max-width: $screen-laptop) {
main {
article {
@ -62,21 +72,24 @@
}
}
}
&#list {
// move the numbers to the top
section {
list-style-position: inside;
h2 {
margin-top: 1vmax;
&#home {
ul.posts li {
flex-direction: column;
time {
padding: 1vmax 0 0 0;
}
}
ul.thoughts {
transform: translateX(-6vmin);
li {
&:first-child {
margin-left: 6vmin;
}
a {
width: 33vmax;
}
}
}
}
}
ul.list li {
flex-direction: column;
time {
padding: 1vmax 0 0 0;
}
}
#toc {
@ -94,6 +107,19 @@
padding-bottom: 0.5vmax;
}
}
main#list section {
time {
color: var(--border-accent);
opacity: 1;
right: 1.5rem;
top: 0.85rem;
}
h2 {
border-top: 0.75vmax solid var(--border-accent);
margin-top: 1.5rem;
padding-top: 1.375rem;
}
}
footer section {
flex-direction: column;
}

179
assets/scss/main.scss
View File

@ -84,6 +84,7 @@ header {
main {
display: flex;
flex-direction: column;
max-width: var(--screen-display);
padding: max(5vmin, 2rem) 6vmin;
position: relative;
@ -259,20 +260,109 @@ main {
// home page
&#home {
overflow-x: hidden; // safety for thoughts side scroller
padding-top: max(10vmin, 2rem);
width: 80%;
// main page post list
ul.posts {
display: flex;
flex-direction: column;
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
li {
align-items: stretch;
display: flex;
flex-direction: row;
justify-content: space-between;
padding-bottom: max(2.5vmax, 1.1rem);
div {
flex: 0 1 auto; // don't grow, shrink if needed, auto size onload
font-size: max(2.5vmax, 1.1rem);
font-weight: 600;
}
time {
flex: 0 0 auto; // don't grow, don't shrink. auto size onload
font-size: max(2vmax, 1rem);
font-weight: 900;
padding-top: 0.5vmax;
padding-left: 1vmax;
text-transform: uppercase;
}
}
}
// main page thoughts scroller
ul.thoughts {
list-style: none;
display: flex;
flex-direction: row;
padding: 0.5vmax 0;
margin: 2.5vmax 0;
overflow-x: auto;
transform: translateX(calc(-1 * ((100vw - var(--screen-display)) / 2)));
white-space: nowrap;
width: 100vw;
-webkit-overflow-scrolling: touch;
&::-webkit-scrollbar {
display: none;
}
li {
display: flex;
margin-right: max(2vmax, 1rem);
&:first-child { // push the first one right 1/2 the max column size by default
margin-left: calc((100vw - var(--screen-display)) / 2);
}
a {
background: var(--background-accent);
border-radius: 1rem;
display: flex;
flex-direction: column;
font-size: max(1.5vmax, 1rem);
justify-content: space-between;
padding: max(2vmax, 1rem);
top: 0;
transition: 150ms top ease-in-out;
white-space: normal;
width: 20vmax;
span {
flex-grow: 1;
}
time {
color: var(--text-color);
font-size: max( 1.25vmax, 1rem);
font-weight: 800;
margin-top: max(1.75vmax, 1rem);
text-transform: uppercase;
}
&:hover {
top: -0.5vmax;
}
}
}
}
}
// 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 {
@ -282,11 +372,9 @@ main {
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%);
}
}
@ -294,30 +382,50 @@ main {
// list pages
&#list {
align-items: center;
flex-direction: column;
width: 80%;
h1 {
align-self: center;
font-size: max(3vmax, 2rem);
margin: 1vmax 0 3vmax;
font-size: max(3.75vmax, 2rem);
font-weight: 800;
letter-spacing: -0.075rem;
line-height: 1.15;
margin: 2vmax 0 5vmax;
text-transform: capitalize;
}
section {
display: list-item;
list-style: decimal-leading-zero;
margin-bottom: max(2vmax, 1.5rem);
&::marker {
section {
background: var(--background-accent);
border-radius: max(1.5vmax, 0.5rem);
border-left: max(1.5vmax, 0.5rem) solid var(--text-color-title);
margin-bottom: max(4vmax, 1.5rem);
padding: max(1.5vmax, 1rem) max(3vmax, 1.5rem);
position: relative;
time {
align-items: flex-end;
display: flex;
flex-direction: column;
font-size: max(3.75vmax, 1.75rem);
font-weight: 800;
font-size: max(2vmax, 1.5rem);
letter-spacing: -0.075rem;
line-height: 1.15;
height: 5vmax;
justify-content: center;
opacity: 0.1;
position: absolute;
right: 1vmax;
top: 0;
width: 25vmax;
}
h2 {
font-family: $font-family-title;
font-size: max(2vmax, 1.5rem);
font-size: max(2vmax, 1.75rem);
font-weight: 800;
letter-spacing: -0.05rem;
line-height: 1.1;
margin-top: max(1vmax, 0.75rem);
}
h3 {
@ -328,12 +436,6 @@ main {
font-size: max(1.375vmax, 1rem);
line-height: max(2vmax, 1.5rem);
}
// after the first one, put a top border to divide them
+ section {
border-top: 0.5vmax solid var(--border-subdued);
padding-top: max(2vmax, 1.5rem);
}
}
}
}
@ -578,46 +680,16 @@ header h1 a.arrow.back::after {
transform: translateY(-0.5rem) translateX(min(-1.75vmax, -1.25rem));
}
// non-post lists
// non-content lists
ul {
&.list { // main page post list
display: flex;
flex-direction: column;
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
li {
align-items: stretch;
display: flex;
flex-direction: row;
justify-content: space-between;
padding-bottom: max(2.5vmax, 1.1rem);
div {
flex: 0 1 auto; // don't grow, shrink if needed, auto size onload
font-size: max(2.5vmax, 1.1rem);
font-weight: 600;
}
time {
flex: 0 0 auto; // don't grow, don't shrink. auto size onload
font-size: max(2vmax, 1rem);
font-weight: 900;
padding-top: 0.5vmax;
padding-left: 1vmax;
text-transform: uppercase;
}
}
}
// post and thought tags
&.tags {
align-items: center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
list-style-type: none;
list-style: none;
margin: 4vmax 0 0;
padding: 0;
width: 100%;
@ -637,6 +709,7 @@ ul {
}
}
}
// tags that are just text
&.clean {
display: inline-flex;
flex-direction: row;

2
content/thoughts/20-08-16-encouragement.md
View File

@ -4,7 +4,7 @@ author: Andrew Gioia
slug: encouragement
date: 2020-08-16
publishdate: 2020-08-16
description: Something
description: Something
tags:
- Parenting
- Toddlers

33
content/thoughts/20-08-19-something.md Normal file
View File

@ -0,0 +1,33 @@
---
title: This is a short title
author: Andrew Gioia
slug: something
date: 2020-08-20
publishdate: 2020-08-20
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**.

5
layouts/_default/list.html
View File

@ -6,6 +6,9 @@
{{ range .Pages }}
<section>
<time>
{{ .PublishDate.Format "2006 Jan 2" }}
</time>
<h2>
<a href="{{ .RelPermalink }}" class="wa link">
<span>{{ .Title }}</span>
@ -13,7 +16,7 @@
</a>
</h2>
<h3>
Written by {{ .Params.author }} on {{ .PublishDate.Format "January 1, 2006" }}
Written by {{ .Params.author }} on {{ .PublishDate.Format "January 2, 2006" }}
&nbsp;&middot;&nbsp;
{{ .ReadingTime }} minute read
</h3>

18
layouts/index.html
View File

@ -3,7 +3,7 @@
<div class="intro">
{{.Content}}
</div>
<ul class="list">
<ul class="posts">
{{ range where .Site.RegularPages "Section" "posts" }}
<li>
<div>
@ -18,5 +18,21 @@
</li>
{{ end }}
</ul>
<ul class="thoughts">
{{ range where .Site.RegularPages "Section" "thoughts" }}
<li>
<a href="{{ .Permalink }}" class="wa link">
<span>
{{ .LinkTitle }}
</span>
<time>
{{ .PublishDate.Format "January 2, 2006" }}
</time>
<b class="arrow"></b>
</a>
</li>
{{ end }}
</ul>
</main>
{{ end }}

1
package.json
View File

@ -12,7 +12,6 @@
"sass": "sass --no-source-map assets/scss/main.scss public/css/style.css",
"watch": "sass --no-source-map --watch assets/scss/main.scss public/css/style.css",
"tidy": "tidy -config tidy.conf -mq public/**/*.html",
"tidy-bash": "find . -name '*.html' -type f -print -exec tidy -config ../tidy.conf -mq '{}' \\;",
"copy": "cp -R public/* /var/www/blog.andrewgioia.com/",
"editing": "hugo --environment development --watch=true",
"publish": "hugo && sass --no-source-map assets/scss/main.scss public/css/style.css && cp -R public/* /var/www/blog.andrewgioia.com/"

3
tidy.conf
View File

@ -1,6 +1,9 @@
drop-empty-elements: no
indent: auto
indent-spaces: 2
output-html: yes
show-info: no
show-warnings: no
tidy-mark: no
vertical-space: yes
wrap: 0