millironx/pages
1
0
Fork 0
Code Issues Pull requests Releases Packages Activity

Compare commits

base: millironx:f08b173cc439ad1775f8f07ddf2c5d99be5ee99c
Branches Tags
millironx:master
millironx:pages
millironx:feat/characters
millironx:indiewebpub
millironx:feat/indiweb
millironx:feat/no-node
millironx:feat/css-cleanup
millironx:feature/woodpecker
millironx:feature/about
millironx:hotfix/postcss
millironx:gh-pages
...
compare: millironx:2fe579bcc7c00781f77ce80e0c3ed6b0eb6234dd
Branches Tags
millironx:pages
millironx:master
millironx:feat/characters
millironx:indiewebpub
millironx:feat/indiweb
millironx:feat/no-node
millironx:feat/css-cleanup
millironx:feature/woodpecker
millironx:feature/about
millironx:hotfix/postcss
millironx:gh-pages

2 commits
f08b173cc4 ... 2fe579bcc7

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
3 changed files with 46 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

21
assets/styles/millironx.css
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 {

3
assets/styles/scrolling-header.css
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 */

6
layouts/_default/baseof.html
View file

@ -37,6 +37,7 @@
<body> <body>
<div class="container">
<header> <header>
<object data="{{ $millironx.Permalink }}"> <object data="{{ $millironx.Permalink }}">
<img src="{{ $millironx.Permalink }}" alt="Milliron X" /> <img src="{{ $millironx.Permalink }}" alt="Milliron X" />
@ -47,9 +48,12 @@
{{ partial "sidebar" . }} {{ partial "sidebar" . }}
<main>{{ block "main" . }}{{ .Content }}{{ end }}</main> <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 }}
<div class="container">
<div class="footer-inner">
<img src="{{ $brandedbullsmall.Permalink }}" height="95rem" /> <img src="{{ $brandedbullsmall.Permalink }}" height="95rem" />
<p> <p>
@ -62,6 +66,8 @@
<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 }}