From 289861febd79d3e8436b9bd88a244a59bb87eb16 Mon Sep 17 00:00:00 2001 From: Mark Goho <mgoho@cisco.com> Date: Sun, 14 Jan 2024 11:06:42 -0500 Subject: [PATCH] better layout --- hugo/assets/styles.scss | 68 ++++++++++++++++++++++++++++--- hugo/layouts/_default/baseof.html | 6 +-- hugo/layouts/index.html | 3 -- hugo/layouts/partials/head.html | 8 ++++ hugo/layouts/partials/header.html | 35 +++++++++++++++- 5 files changed, 108 insertions(+), 12 deletions(-) diff --git a/hugo/assets/styles.scss b/hugo/assets/styles.scss index 194786d..d179489 100644 --- a/hugo/assets/styles.scss +++ b/hugo/assets/styles.scss @@ -2,6 +2,7 @@ @import url('https://unpkg.com/open-props/normalize.min.css'); @import url('https://unpkg.com/open-props/colors-oklch.min.css'); @import url('https://unpkg.com/open-props/oklch-hues.min.css'); +@import url('https://unpkg.com/open-props/gray-oklch.min.css'); @media (dynamic-range: high) { /* does this browser understand display-p3? */ @@ -12,11 +13,68 @@ } } -body { - background-image: url('/images/christmas-spirit-day.avif'); - background-size: contain; +:where(html) { + --font-sans: Prompt, sans-serif; } + // body { -// background-image: linear-gradient(to bottom, var(--color-2), var(--color-8)), -// url('/images/christmas-spirit-day.avif'); +// background-image: url('/images/christmas-spirit-day.avif'); +// background-size: contain; +// } + +body { + --content-width: 70ch; + display: grid; + grid-template-columns: 1fr var(--content-width) 1fr; +} + +// body * { +// outline: 1px solid red; // } + +h1, +h2 { + font-weight: var(--font-weight-8); +} + +.logo-letter { + fill: var(--color-12); +} + +.logo-gray { + --gray-hue: var(--hue-indigo); + --gray-chroma: 0.02; +} + +.header, +.main, +.footer { + display: grid; + grid-column: 1 / -1; + grid-template-columns: subgrid; +} + +.header { + background-color: var(--color-12); + padding: var(--size-fluid-5) 0; + + .content-container { + grid-column: 2; + display: flex; + align-items: center; + gap: var(--size-fluid-3); + } + + .gloria-deo-logo { + max-inline-size: 10rem; + } + + .title, + .subtitle { + color: var(--gray-4); + } +} + +.main > * { + grid-column: 2 / 3; +} diff --git a/hugo/layouts/_default/baseof.html b/hugo/layouts/_default/baseof.html index 0fd181c..59f303b 100644 --- a/hugo/layouts/_default/baseof.html +++ b/hugo/layouts/_default/baseof.html @@ -8,17 +8,17 @@ </head> <body> - <header> + <header class="header"> {{ block "header" . }} {{ partial "header.html" . }} {{ end }} </header> - <main> + <main class="main"> {{ block "main" . }}{{ end }} </main> - <footer> + <footer class="footer"> {{ block "footer" . }} {{ partial "footer.html" . }} {{ end }} diff --git a/hugo/layouts/index.html b/hugo/layouts/index.html index 376c250..24d5093 100644 --- a/hugo/layouts/index.html +++ b/hugo/layouts/index.html @@ -1,7 +1,4 @@ {{ define "main" }} - <div class="hero-image"></div> - <h1>Gloria Deo Classical Cooperative</h1> - <div>A Scholé Community</div> <p> Holding fast to the Word of God in a time of relativistic values, the Gloria Deo Classical Homeschool Cooperative seeks to demonstrate the priorities diff --git a/hugo/layouts/partials/head.html b/hugo/layouts/partials/head.html index b856bae..4809960 100644 --- a/hugo/layouts/partials/head.html +++ b/hugo/layouts/partials/head.html @@ -7,6 +7,14 @@ {{ partial "meta.html" . }} {{ end }} + +<link rel="preconnect" href="https://fonts.googleapis.com" /> +<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> +<link + href="https://fonts.googleapis.com/css2?family=Prompt:wght@400;500;800&display=swap" + rel="stylesheet" +/> + {{ $options := (dict "targetPath" "style.css" "outputStyle" "compressed" ) }} {{ $style := resources.Get "styles.scss" | resources.ToCSS $options | resources.Fingerprint }} <link rel="stylesheet" href="{{ $style.RelPermalink }}" /> diff --git a/hugo/layouts/partials/header.html b/hugo/layouts/partials/header.html index 68cf7aa..973a81c 100644 --- a/hugo/layouts/partials/header.html +++ b/hugo/layouts/partials/header.html @@ -1 +1,34 @@ -<nav class="navbar"></nav> +<div class="content-container"> + <svg + class="gloria-deo-logo" + width="886" + height="886" + viewBox="0 0 886 886" + fill="none" + xmlns="http://www.w3.org/2000/svg" + > + <circle + class="logo-gray" + cx="443" + cy="443.081" + r="442.703" + fill="var(--gray-4)" + /> + <path + class="logo-letter" + fill-rule="evenodd" + clip-rule="evenodd" + d="M350.243 626.486H398.73V398.811H352.351V352.432H537.865C613.757 352.432 681.216 430.432 681.216 510.541C681.216 601.189 603.216 672.865 537.865 672.865H350.243L350.243 626.486ZM445.108 398.811V626.486C445.108 626.486 461.973 626.486 521 626.486C580.027 626.486 634.838 571.676 634.838 510.541C634.838 449.405 580.027 398.811 529.432 398.811C478.838 398.811 445.108 398.811 445.108 398.811Z" + /> + <path + class="logo-letter logo-gray" + d="M537.907 314.162H543.907V308.162V215.405V209.405H537.907H358.717C320.885 209.405 281.991 228.806 252.419 259.463C222.789 290.181 202.029 332.682 200.935 379.698C198.74 474.086 279.811 541.756 358.551 543.944L358.634 543.946H358.717H537.907H543.907V537.946V352.432V346.432H537.907H352.393H346.393V352.432V398.811V404.811H352.393H485.528V485.568H371.366C346.725 485.568 319.116 474.158 297.629 454.946C276.195 435.781 261.42 409.377 261.42 379.838C261.42 350.115 275.306 322.609 295.975 302.443C316.684 282.239 343.703 269.892 369.258 269.892H485.528V308.162V314.162H491.528H537.907Z" + stroke="var(--gray-4)" + stroke-width="12" + /> + </svg> + <div class="title-container"> + <h1 class="title">Gloria Deo Classical Cooperative</h1> + <div class="subtitle">A Scholé Community</div> + </div> +</div>