feat: Make page occupy middle of screen

perf: Add contain directive to scrolling header
2025-10-20 09:36:04 -05:00 · 2025-10-20 08:01:46 -05:00
3 changed files with 46 additions and 24 deletions
--- a/assets/styles/millironx.css
+++ b/assets/styles/millironx.css
@ -203,6 +203,19 @@ body {
  flex-direction: column;
  min-height: 98vh;
  margin: 0 8px;
+  align-items: center;
+}
+
+.container {
+  max-width: min(60rem, 100vw - 2rem);
+}
+
+.footer-inner {
+  width: min(60rem, 100vw - 2rem);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-shrink: 0;
 }

 a {
@ -295,14 +308,14 @@ figure:has(blockquote) > figcaption {
 }

 footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
  background-color: var(--container-background);
  margin: 0 0 -1em -1em;
  width: calc(100% - 1em);
  padding: 0.25em 1.25em;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-shrink: 0;
+  font-size: smaller;
 }

 form {
--- a/assets/styles/scrolling-header.css
+++ b/assets/styles/scrolling-header.css
@ -18,6 +18,8 @@
      animation: sticky-header linear forwards;
      animation-timeline: scroll();
      animation-range: 0 30vh;
+
+      contain: content;
    }

    @keyframes blurry-header {
@ -60,6 +62,7 @@

    main section {
      margin: 0 0.25em;
+      contain: content;
    }
  } /* end @supports */
 } /* end @media */
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@ -37,6 +37,7 @@


  <body>
+    <div class="container">
      <header>
        <object data="{{ $millironx.Permalink }}">
          <img src="{{ $millironx.Permalink }}" alt="Milliron X" />
@ -47,9 +48,12 @@
        {{ partial "sidebar" . }}
        <main>{{ block "main" . }}{{ .Content }}{{ end }}</main>
      </div>
+    </div>
    <footer>
      {{ $brandedbull := resources.Get "graphics/brandedbull.svg" }}
      {{ $brandedbullsmall := $brandedbull | resources.Minify }}
+      <div class="container">
+        <div class="footer-inner">
          <img src="{{ $brandedbullsmall.Permalink }}" height="95rem" />

          <p>
@ -62,6 +66,8 @@
            <br />
            Built with <a href="https://gohugo.io">Hugo</a> v{{ hugo.Version }}
          </p>
+        </div>
+      </div>
    </footer>

    {{ with .Params.validation }}{{- partial "form-validation.html" -}}{{ end }}
Author	SHA1	Message	Date
Thomas A. Christensen II	2fe579bcc7	feat: Make page occupy middle of screen All checks were successful ci/woodpecker/push/woodpecker Pipeline was successful Details	2025-10-20 09:36:04 -05:00
Thomas A. Christensen II	a85c956e12	perf: Add `contain` directive to scrolling header	2025-10-20 08:01:46 -05:00