diff --git a/assets/scss/_media.scss b/assets/scss/_media.scss index 0f3f6fa..cdddb26 100644 --- a/assets/scss/_media.scss +++ b/assets/scss/_media.scss @@ -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; } diff --git a/assets/scss/main.scss b/assets/scss/main.scss index ac22d01..cabd957 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -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; diff --git a/content/thoughts/20-08-16-encouragement.md b/content/thoughts/20-08-16-encouragement.md index e1d1552..9f7883f 100644 --- a/content/thoughts/20-08-16-encouragement.md +++ b/content/thoughts/20-08-16-encouragement.md @@ -4,7 +4,7 @@ author: Andrew Gioia slug: encouragement date: 2020-08-16 publishdate: 2020-08-16 -description: Something +description: Something tags: - Parenting - Toddlers diff --git a/content/thoughts/20-08-19-something.md b/content/thoughts/20-08-19-something.md new file mode 100644 index 0000000..c0cd60c --- /dev/null +++ b/content/thoughts/20-08-19-something.md @@ -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 +--- + +

One of the bigger surprises with toddlerhood for me has been just how the drive is to help and be a part of the team.

+ +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—still eager and enthusiastic to help his mom, no doubt after thousands of these types of interactions—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**. \ No newline at end of file diff --git a/layouts/_default/list.html b/layouts/_default/list.html index b3f9ef8..bea033c 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -6,6 +6,9 @@ {{ range .Pages }}
+

- Written by {{ .Params.author }} on {{ .PublishDate.Format "January 1, 2006" }} + Written by {{ .Params.author }} on {{ .PublishDate.Format "January 2, 2006" }}  ·  {{ .ReadingTime }} minute read

diff --git a/layouts/index.html b/layouts/index.html index 5dcebe8..c62235b 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -3,7 +3,7 @@
{{.Content}}
-