From 2ebd743ce574642b78aa512c7b0ab7230c306f05 Mon Sep 17 00:00:00 2001 From: Eryn Wells Date: Sun, 11 Sep 2022 10:39:06 -0700 Subject: [PATCH] Draw a platter around the home page layout --- content/home.css | 141 ++++++++++++++++-------------------- layouts/_default/index.html | 28 ++++--- static/styles/root.css | 22 ++++-- 3 files changed, 96 insertions(+), 95 deletions(-) diff --git a/content/home.css b/content/home.css index b87ccc9..aef68bc 100644 --- a/content/home.css +++ b/content/home.css @@ -1,35 +1,19 @@ :root { - --lt-blue: rgb(69, 212, 243); - --mid-blue: rgb(26, 169, 239); - --dk-blue: rgb(63, 46, 231); - --purple: rgb(161, 49, 232); - --lilac: rgb(187, 121, 245); - - --font-size-min: 8px; - --font-size-max: 16px; + --animation-left-offset: 6px; + --animation-duration: 0.7s; } -* { box-sizing: border-box; } - -a { - color: var(--mid-blue); - text-decoration: none; -} -a:hover { - text-decoration: underline; - text-underline-offset: 0.12em; -} -a:visited { color: none; } - body { display: flex; + flex-direction: column; font-size: 2rem; - margin: auto; justify-content: center; + margin: auto; } h1 { - font-family: Krungthep, Museo_Slab, Tahoma, sans-serif; + font-size: 5rem; + line-height: 1.3; margin: 0; padding: 0; } @@ -37,33 +21,24 @@ h1 { h1 { font-size: 4.25rem; } } -html { - background-color: #fff; - color: #000; - font-family: Verdana, sans-serif; - font-size: clamp(var(--font-size-min), 2.5vw, var(--font-size-max)); -} -@media (prefers-color-scheme: dark) { - html { - background-color: #000; - color: #fff; - } +main { + margin-block-start: 10vh; } -main { +main .grid { align-items: baseline; display: grid; - grid-template-columns: min-content 3fr; + gap: 0 2rem; + grid-template-columns: min-content fit-content(35%); grid-template-rows: repeat(2, max-content); grid-template-areas: "title blurb" "title nav"; - grid-gap: 2rem; - margin-block-start: 10vh; - max-width: 800px; + padding-inline: 1em; + width: min-content; } @media (max-width: 450px) { - main { + main .grid { grid-template-columns: 1fr; grid-template-rows: repeat(3, max-content); grid-template-areas: @@ -76,16 +51,6 @@ main { } main h1 { - background: - radial-gradient(circle at 20% 70%, var(--purple), transparent 40%), - radial-gradient(circle at 30% 30%, var(--lt-blue), var(--mid-blue) 20%, transparent 80%), - radial-gradient(ellipse at 95% 20%, var(--dk-blue), var(--mid-blue) 70%, transparent 80%), - radial-gradient(circle at 100% 100%, var(--purple), var(--lilac) 100%), - radial-gradient(circle at 45% 100%, var(--lilac), var(--purple) 60%), - radial-gradient(ellipse at 50% 50%, var(--dk-blue), transparent 80%); - background-clip: text; - color: transparent; - grid-area: title; letter-spacing: 0.025em; text-align: end; } @@ -94,41 +59,57 @@ main h1 { } main nav { - align-items: center; - display: flex; - font-size: max(1rem, 75%); - font-variant: small-caps; - grid-area: nav; - height: 100%; - justify-content: center; - letter-spacing: 0.12em; - list-style: none; - text-transform: lowercase; -} - -main nav li { - display: block; - margin-inline-end: 0.5em; -} - -main nav li:first-child::before { - content: ""; -} - -main nav li::before { - content: "•"; - font-size: 60%; - opacity: 80%; - margin-inline-end: 0.5em; + align-items: baseline; } main p { - grid-area: blurb; margin: 0; - padding: 0; } -p { - letter-spacing: 0.025em; - line-height: 1.25; +#title { grid-area: title; } +#content { grid-area: blurb } +#nav { grid-area: nav } + +#title, #content, #nav { overflow: none; } +#title > *, #content > *, #nav > * { position: relative; } + +#title > * { + animation: left-fade-in var(--animation-duration) ease-in-out; +} +#content > *, #nav > * { + animation: right-fade-in var(--animation-duration) ease-in-out; +} + +@keyframes left-fade-in { + from { + opacity: 0%; + left: var(--animation-left-offset); + } + 33% { + opacity: 0%; + left: var(--animation-left-offset); + } + to { + opacity: 100%; + left: 0; + } +} + +@keyframes right-fade-in { + from { + opacity: 0%; + left: calc(-1 * var(--animation-left-offset)); + } + 33% { + opacity: 0%; + left: calc(-1 * var(--animation-left-offset)); + } + to { + opacity: 100%; + left: 0; + } +} + +.platter { + padding: 1.5rem 3rem; } diff --git a/layouts/_default/index.html b/layouts/_default/index.html index 90f9c76..cfcff75 100644 --- a/layouts/_default/index.html +++ b/layouts/_default/index.html @@ -1,12 +1,22 @@ {{ define "main" }} -

{{ .Title }}

-{{ .Content }} -{{ with site.Menus.main }} -{{ $url := $.RelPermalink }} - +
+
+
+

{{ .Title }}

+
+
+ {{ .Content }} +
+ {{ with site.Menus.main }} + {{ $url := $.RelPermalink }} + +
+
{{ end }} {{ end }} diff --git a/static/styles/root.css b/static/styles/root.css index fc7645c..9e4ee2f 100644 --- a/static/styles/root.css +++ b/static/styles/root.css @@ -8,6 +8,13 @@ --background-color: #fff; --foreground-color: #000; + --separator-color: #dfdfdf; + --header-border-color: var(--separator-color); + --footer-border-color: var(--separator-color); + + --box-shadow-color: rgba(230, 230, 230, 0.5); + --header-box-shadow-color: var(--box-shadow-color); + --font-family-body: Verdana, Helvetica, sans-serif; --font-family-heading: Museo_Slab, Tahoma, sans-serif; --font-family-site-heading: /*Krungthep,*/ Museo_Slab, Tahoma, sans-serif; @@ -99,16 +106,12 @@ header.site .grid { display: grid; gap: 0.5em; grid-template-columns: max-content auto max-content; - width: var(--content-width); + max-width: var(--content-width); } header.site .platter { - background: var(--background-color); - border: 1px solid #dfdfdf; - border-radius: 12px; - box-shadow: 4px 5px 5px rgba(230, 230, 230, 0.5); margin: 0 auto; - padding-inline: 3rem; + padding: 1.5rem 3rem; } header.site .grid nav:first-of-type { @@ -189,3 +192,10 @@ footer.site p + p { white-space: nowrap; } } + +.platter { + background: var(--background-color); + border: 1px solid var(--header-border-color); + border-radius: 12px; + box-shadow: 4px 5px 5px var(--header-box-shadow-color); +}