Compare commits

...

2 commits

Author SHA1 Message Date
2fe579bcc7
feat: Make page occupy middle of screen
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
2025-10-20 09:36:04 -05:00
a85c956e12
perf: Add contain directive to scrolling header 2025-10-20 08:01:46 -05:00
3 changed files with 46 additions and 24 deletions

View file

@ -203,6 +203,19 @@ body {
flex-direction: column; flex-direction: column;
min-height: 98vh; min-height: 98vh;
margin: 0 8px; 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 { a {
@ -295,14 +308,14 @@ figure:has(blockquote) > figcaption {
} }
footer { footer {
display: flex;
flex-direction: column;
align-items: center;
background-color: var(--container-background); background-color: var(--container-background);
margin: 0 0 -1em -1em; margin: 0 0 -1em -1em;
width: calc(100% - 1em); width: calc(100% - 1em);
padding: 0.25em 1.25em; padding: 0.25em 1.25em;
display: flex; font-size: smaller;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
} }
form { form {

View file

@ -18,6 +18,8 @@
animation: sticky-header linear forwards; animation: sticky-header linear forwards;
animation-timeline: scroll(); animation-timeline: scroll();
animation-range: 0 30vh; animation-range: 0 30vh;
contain: content;
} }
@keyframes blurry-header { @keyframes blurry-header {
@ -60,6 +62,7 @@
main section { main section {
margin: 0 0.25em; margin: 0 0.25em;
contain: content;
} }
} /* end @supports */ } /* end @supports */
} /* end @media */ } /* end @media */

View file

@ -37,31 +37,37 @@
<body> <body>
<header> <div class="container">
<object data="{{ $millironx.Permalink }}"> <header>
<img src="{{ $millironx.Permalink }}" alt="Milliron X" /> <object data="{{ $millironx.Permalink }}">
</object> <img src="{{ $millironx.Permalink }}" alt="Milliron X" />
<h1 class="font-small-caps">Milliron X</h1> </object>
</header> <h1 class="font-small-caps">Milliron X</h1>
<div class="row" id="content"> </header>
{{ partial "sidebar" . }} <div class="row" id="content">
<main>{{ block "main" . }}{{ .Content }}{{ end }}</main> {{ partial "sidebar" . }}
<main>{{ block "main" . }}{{ .Content }}{{ end }}</main>
</div>
</div> </div>
<footer> <footer>
{{ $brandedbull := resources.Get "graphics/brandedbull.svg" }} {{ $brandedbull := resources.Get "graphics/brandedbull.svg" }}
{{ $brandedbullsmall := $brandedbull | resources.Minify }} {{ $brandedbullsmall := $brandedbull | resources.Minify }}
<img src="{{ $brandedbullsmall.Permalink }}" height="95rem" /> <div class="container">
<div class="footer-inner">
<img src="{{ $brandedbullsmall.Permalink }}" height="95rem" />
<p> <p>
&copy; {{ now | time.Format "2006" }} Thomas A. Christensen II &copy; {{ now | time.Format "2006" }} Thomas A. Christensen II
<br /> <br />
Licensed Licensed
<a rel="license" href="http://creativecommons.org/licenses/by/4.0/" <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"
>CC-BY 4.0</a >CC-BY 4.0</a
> >
<br /> <br />
Built with <a href="https://gohugo.io">Hugo</a> v{{ hugo.Version }} Built with <a href="https://gohugo.io">Hugo</a> v{{ hugo.Version }}
</p> </p>
</div>
</div>
</footer> </footer>
{{ with .Params.validation }}{{- partial "form-validation.html" -}}{{ end }} {{ with .Params.validation }}{{- partial "form-validation.html" -}}{{ end }}