commit 2c41abcd2f2a1e495a6804971821ae09bf179a95 parent 8a71b952ada3abeb5333bc9f7c567edb54dfee54 Author: gracefu <81774659+gracefuu@users.noreply.github.com> Date: Sat, 12 Apr 2025 01:14:00 +0800 Add no cookie footer Diffstat:
| M | layouts/templates/base.shtml | | | 68 | +++++++++++++++++++++++++++++++++++++++++++++++++++++--------------- |
1 file changed, 53 insertions(+), 15 deletions(-)
diff --git a/layouts/templates/base.shtml b/layouts/templates/base.shtml @@ -121,24 +121,32 @@ a:visited:hover { </style> <style> -/* Header styling */ -#nav { +/* Template styling */ +#base-everything { + position: absolute; + padding-block-end: 4em; + width: 100%; + min-height: 100vh; +}; + +#base-nav { max-width: var(--content-width); margin-inline: auto; margin-block-start: 15px; padding-inline: 15px; } -#nav a:not(:hover) { +#base-nav a:not(:hover) { color: #000; text-decoration: none; } -#site-title { +#base-site-title-text { + padding-block-start: 12px; text-align: center; } -#nav-links { +#base-links { display: flex; justify-content: center; flex-wrap: wrap; @@ -146,11 +154,11 @@ a:visited:hover { row-gap: 0px; } -#nav-links>a { - padding-block: .1lh .4lh; +#base-links>a { + padding-block: 3px 12px; } -#nav-rule { +#base-header-rule { margin-inline: 15px; margin-block-end: 1rem; border-block-start: 10px dotted lightpink; @@ -160,32 +168,62 @@ a:visited:hover { margin: auto; margin-block-start: 15px; padding-inline: 15px; - padding-block-end: 15px; max-width: var(--content-width); } + +#base-footer { + position: absolute; + inset-block-end: 0; + inset-inline: 0; + margin-inline: auto; + margin-block-start: auto; + padding-inline: 15px; +} + +#base-footer-rule { + max-width: 25ch; + margin-inline: auto; + border-block-start: 1.5px dotted brown; +} + +#base-no-cookie { + max-width: var(--content-width); + margin-inline: auto; + margin-block-end: 15px; + padding-block-start: .4lh; + padding-inline: 15px; + text-align: center; + color: brown; +} </style> <script defer src="/js/fontfaceobserver.standalone.js"></script> <super> </head> <body id="body"> - <header id="nav-header" class="non-hierarchical"> - <nav id="nav"> - <a id="site-title" href="$site.page('').link()"> - <h2 id="site-title-text" :text="$site.title"></h2> + <div id="base-everything"> + <header id="base-header" class="non-hierarchical"> + <nav id="base-nav"> + <a id="base-site-title" href="$site.page('').link()"> + <h2 id="base-site-title-text" :text="$site.title"></h2> </a> - <div id="nav-links"> + <div id="base-links"> <a href="$site.page('').link()">Home</a> <a href="$site.page('posts').link()">Posts</a> <a href="$site.page('bio').link()">Bio</a> <a href="$site.page('teaching').link()">Teaching</a> </div> </nav> - <hr id="nav-rule"> + <hr id="base-header-rule"> </header> <div id="content"> <super> </div> + <div id="base-footer" class="non-hierarchical"> + <hr id="base-footer-rule"> + <p id="base-no-cookie">This site uses no cookies. ❌🍪</p> + </div> + </div> <script>document.querySelector('body').classList.add('font-loading');</script> </body> </html>