better layout

markgoho · Jan 14, 2024 · 289861f · 289861f
1 parent 44ad014
commit 289861f
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>