From 1ef9ba17fb909efb363cce7bebe5f2b9dbbd2d60 Mon Sep 17 00:00:00 2001 From: Andrew Gioia Date: Thu, 30 Apr 2026 13:39:47 -0400 Subject: [PATCH] More cleanups with sizing and spacing and alignment, footer updates --- assets/css/site.css | 455 +++++++++++++++++++++-------------- layouts/_default/baseof.html | 5 +- layouts/partials/footer.html | 19 +- 3 files changed, 301 insertions(+), 178 deletions(-) diff --git a/assets/css/site.css b/assets/css/site.css index 07e9b57..ee3e0b2 100644 --- a/assets/css/site.css +++ b/assets/css/site.css @@ -31,7 +31,7 @@ --font-serif: "Source Serif", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif; --column-width: min(72rem, calc(100% - 3rem)); - --content-width: min(48rem, calc(100% - 3rem)); + --content-width: min(44rem, calc(100% - 3rem)); --article-grid: 1fr; --article-gap: 2rem; --article-top: 0; @@ -42,7 +42,7 @@ } html { - font-size: 15px; + font-size: 16px; background: var(--bg); } @@ -205,23 +205,48 @@ body { display: flex; flex-direction: column; font-size: 0.875rem; - gap: 2rem; line-height: 1.4; padding: 2rem 1.5rem; justify-content: center; section { display: grid; - grid-template-columns: var(--article-grid); - gap: var(--article-gap); - justify-content: center; + justify-content: left; + width: 100%; } - #footnotes ul { - grid-column-start: 2; - list-style: none; - margin: 0 0 0 -1.5rem; - padding: 0; + big { + color: var(--white); + font-size: 1.5rem; + font-weight: bold; + margin-bottom: 1rem; + + span { + color: var(--faded); + font-weight: 400; + padding-left: 0.25rem; + } + } + + #end + { + .text p:first-child { + margin-top: 0.65rem; + } + + .icon { + margin-right: 0.25rem; + position: relative; + top: 3px; + } + } + + #footnotes + { + ul { + list-style: none; + padding: 0; + } li { display: grid; @@ -232,20 +257,19 @@ body { margin-top: -3px; } } - } - #end { - padding-bottom: 2rem; - - .text { - grid-column-start: 2; + big { + order: 1; + padding-top: 2rem; } } - big { - color: var(--white); - font-size: 1.5rem; - font-weight: bold; + menu { + display: flex; + flex-direction: row; + gap: 1rem; + list-style: none; + padding-left: 0; } } } @@ -441,98 +465,6 @@ main { } } -/* list content */ - -section#studies { - background: var(--black); - display: grid; - justify-items: center; - padding: 5rem 0 3rem; - - h1 { - border-bottom: 0.25rem solid var(--white); - color: #fff; - max-width: var(--column-width); - padding-bottom: 1rem; - width: var(--column-width); - - + p { - color: var(--white); - padding-right: 1rem; - margin-bottom: 0; - max-width: var(--column-width); - } - } - - article { - background-color: var(--blue); - background-image: var(--card-bg); - background-position: bottom -16rem right -1rem; /* mobile position */ - background-repeat: no-repeat; - background-size: 50% auto; /* mobile size */ - border: none; - color: #fff; - transition: transform 150ms ease-in, background-position 150ms ease-in; - - &:first-of-type { - margin-top: 3rem; - } - - > a { - color: inherit; - display: block; - height: 100%; - padding: 1.5rem; - text-decoration: none; - width: 100%; - } - - h2 { - font-size: 2rem; - padding-top: 0; - text-shadow: none; - font-weight: 700; - } - - p:first-of-type { - color: #fff; - font-size: 1.35rem; - font-weight: 500; - line-height: 1.4; - margin: 0 0 0.5rem; - text-shadow: none; - } - - &:hover { - background-position: bottom -15.5 right -1rem; - transform: translateY(-0.5rem); - } - - div { - display: flex; - flex-direction: column; - gap: 1rem; - padding-top: 1rem; - - > figure { - margin: 0; - - .icon { - color: color-mix(in srgb, var(--icon-color), #fff 50%); - width: 1.25rem; - height: 1.25rem; - } - - figcaption { - font-size: 0.875rem; - font-weight: 700; - text-transform: uppercase; - } - } - } - } -} - /* table of contents */ nav { align-self: start; @@ -608,10 +540,10 @@ nav { align-items: center; display: inline-flex; flex: 0 0 auto; - height: 1em; + height: 1rem; justify-content: center; line-height: 1; - width: 1em; + width: 1rem; } .icon svg { @@ -778,6 +710,8 @@ span[color="yellow"] { /** * specific page handling */ + +/* homepage */ body#default { main > header { @@ -841,7 +775,113 @@ body#default clip-path: polygon(100% 0, 100% 100%, 0 100%); } } + + > footer { + background: var(--bg); + color: var(--black); + + big { + color: var(--black); + } + } } + +/* list content */ +section#studies { + background: var(--black); + display: grid; + justify-items: center; + padding: 5rem 0; + + h1 { + border-bottom: 0.25rem solid var(--white); + color: #fff; + max-width: var(--column-width); + padding-bottom: 1rem; + width: var(--column-width); + + + p { + color: var(--white); + padding-right: 1rem; + margin-bottom: 0; + max-width: var(--column-width); + } + } + + article { + background-color: var(--blue); + background-image: var(--card-bg); + background-position: bottom -16rem right -1rem; /* mobile position */ + background-repeat: no-repeat; + background-size: auto 30rem; /* mobile size */ + border: none; + color: #fff; + transition: transform 150ms ease-in, background-position 150ms ease-in; + + &:first-of-type { + margin-top: 3rem; + } + + > a { + color: inherit; + display: block; + height: 100%; + padding: 2rem 1.5rem 2.5rem; + text-decoration: none; + width: 100%; + } + + h2 { + font-size: 2rem; + padding-top: 0; + text-shadow: none; + font-weight: 700; + } + + p:first-of-type { + color: #fff; + font-size: 1.35rem; + font-weight: 500; + line-height: 1.4; + margin: 0 0 0.5rem; + text-shadow: none; + + + p { + display: none; + } + } + + &:hover { + background-position: bottom -15.5 right -1rem; + transform: translateY(-0.5rem); + } + + div { + display: flex; + flex-direction: column; + gap: 1rem; + padding-top: 1rem; + + > figure { + margin: 0; + + .icon { + color: color-mix(in srgb, var(--icon-color), #fff 50%); + width: 1.25rem; + height: 1.25rem; + } + + figcaption { + font-size: 0.875rem; + font-weight: 700; + text-transform: uppercase; + } + } + } + } +} + +/* legacy case study */ body#legacy { main > header { @@ -901,10 +941,6 @@ body#legacy /* tablets */ @media (min-width: 640px) { - html { - font-size: 16px; - } - body > header { padding: 0 2rem; @@ -956,6 +992,20 @@ body#legacy } } + section#studies + { + article + { + > a { + padding: 2rem 1.5rem; + } + + p:first-of-type + p { + display: block; + } + } + } + .tablet-show { display: block; } @@ -965,7 +1015,7 @@ body#legacy } /* landscape tablets */ -@media (min-width: 800px) +@media (min-width: 768px) { section#studies { @@ -1007,6 +1057,35 @@ body#legacy max-width: 75%; } + body > footer + { + #end { + grid-template-columns: var(--article-grid); + gap: var(--article-gap); + padding-bottom: 1rem; + + .text { + grid-column-start: 2; + } + } + + #footnotes { + grid-template-columns: var(--article-grid); + gap: var(--article-gap); + padding-bottom: 1rem; + + ul { + grid-column-start: 2; + margin: 0.5rem 0 0 -1.5rem; + } + + big { + order: 0; + padding-top: 0; + } + } + } + main > header { > hgroup { .lede { @@ -1044,77 +1123,90 @@ body#legacy } } - body#default main + body#default { - > header { - padding: 0 1.5rem; + main + { + > header { + padding: 0 1.5rem; - hgroup { - padding: 10dvh 0 0; - } + hgroup { + padding: 10dvh 0 0; + } - #semicircle { - bottom: 57dvh; - height: 12dvh; - border-radius: 12dvh 12dvh 0 0; - width: 24dvh; - left: auto; - right: -1dvw; + #semicircle { + bottom: 57dvh; + height: 12dvh; + border-radius: 12dvh 12dvh 0 0; + width: 24dvh; + left: auto; + right: -1dvw; - &:hover { - transform: rotate(6deg) translateY(0.125dvh); + &:hover { + transform: rotate(6deg) translateY(0.125dvh); - + #square { - transform: rotate(6deg) translateY(0.25dvh) translateX(0.5dvw); + + #square { + transform: rotate(6deg) translateY(0.25dvh) translateX(0.5dvw); + } } } - } - #square { - bottom: 45dvh; - height: 12dvh; - width: 12dvh; - left: auto; - right: 2dvw; + #square { + bottom: 45dvh; + height: 12dvh; + width: 12dvh; + left: auto; + right: 2dvw; - &:has(+ #circle:hover) { - transform: translateX(-0.25dvw); + &:has(+ #circle:hover) { + transform: translateX(-0.25dvw); + } + } + + #circle { + height: 15dvh; + left: auto; + bottom: 30dvh; + right: 3dvw; + width: 15dvh; + } + + #rectangle { + height: 5dvh; + left: auto; + width: 36dvw; + right: -16dvw; + bottom: 25dvh; + + &:hover { + transform: rotate(-6deg) translateY(-0.125dvh); + } + } + + #triangle { + height: 25dvh; + right: 6dvw; + width: 25dvh; } } - #circle { - height: 15dvh; - left: auto; - bottom: 30dvh; - right: 3dvw; - width: 15dvh; - } + section#studies { + padding-left: 1.5rem; + padding-right: 1.5rem; - #rectangle { - height: 5dvh; - left: auto; - width: 36dvw; - right: -16dvw; - bottom: 25dvh; - - &:hover { - transform: rotate(-6deg) translateY(-0.125dvh); + article h2 { + font-size: 2.5rem; } } - - #triangle { - height: 25dvh; - right: 6dvw; - width: 25dvh; - } } - section#studies { - padding-left: 1.5rem; - padding-right: 1.5rem; + > footer { + padding-left: 3rem; + padding-right: 3rem; - article h2 { - font-size: 2.5rem; + section { + grid-template-columns: 12rem 1fr; + justify-content: center; } } } @@ -1124,7 +1216,9 @@ body#legacy @media (min-width: 1280px) { :root { - --article-grid: 16rem var(--content-width) 8rem; + --content-width: min(48rem, calc(100% - 3rem)); + --column-width: min(68rem, calc(100% - 3rem)); + --article-grid: 16rem var(--content-width) 4rem; --article-gap: 0; --article-top: 3rem; } @@ -1139,12 +1233,25 @@ body#legacy padding-top: 6rem; } } + + body#default + { + > footer { + padding-left: 0; + padding-right: 0; + + section { + grid-template-columns: var(--article-grid); + } + } + } } /* displays */ @media (min-width: 1440px) { :root { + --column-width: min(72rem, calc(100% - 3rem)); --article-grid: 16rem var(--content-width) 8rem; --article-top: 4rem; } diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index c885128..44bc5d3 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -31,13 +31,14 @@
{{- if and .IsPage (eq .Section "studies") -}} - + Case study {{ end }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index c26d026..b160516 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -28,7 +28,22 @@
{{ if eq (len $footnotes) 0 }}Ag{{ end }}
-

This is the design portfolio for Andrew Gioia, co-founder of TeachBoost and current Staff Designer at SchoolStatus.

-
{{ partial "icon.html" (dict "name" "cc") }} 2026 BY-NC-ND. Please share this responsibly.
+

+ Product design portfolio for Andrew Gioia, co-founder of TeachBoost and current Principal Designer at SchoolStatus. +

+ +
  • + Case studies +
    • +
  • + Get in touch +
    • +
  • + GitHub +
    • +     +

    + {{ partial "icon.html" (dict "name" "cc") }} 2026 BY-NC-ND. Please share this responsibly. +

    \ No newline at end of file