diff options
| author | Alex Scerba <alex@scerba.org> | 2024-10-27 17:42:53 -0400 |
|---|---|---|
| committer | Alex Scerba <alex@scerba.org> | 2024-10-27 17:42:53 -0400 |
| commit | 552c8f0c4d7a40394eb2a76694982788798b04f7 (patch) | |
| tree | 92fb832689f37a1d3f2f530a6e1432b09762ed01 | |
| parent | 6baa0d760190dcc7478677d4f5b7b5dcea684168 (diff) | |
Add in-page nav for blog sections.
| -rw-r--r-- | html/blog.tmpl.html | 12 | ||||
| -rw-r--r-- | static/style.css | 58 |
2 files changed, 68 insertions, 2 deletions
diff --git a/html/blog.tmpl.html b/html/blog.tmpl.html index 0f36f63..2e586dc 100644 --- a/html/blog.tmpl.html +++ b/html/blog.tmpl.html @@ -3,6 +3,18 @@ {{ define "keywords" }}blog{{end}}
{{ define "main" }}
+ <div>
+ <input type="checkbox" class="side-toggler">
+ <span class="carrot">></span>
+ <div class="in-page-nav-group">
+ <h2 id="pgnv">Page Navigation</h2>
+ <nav class="in-page-nav" aria-labelledby="pgnv">
+ <a href="/blog#">Blog</a>
+ <a href="/blog#archive">Archive</a>
+ <a href="/blog#extended-archive">Extended Archive</a>
+ </nav>
+ </div>
+ </div>
<section>
<div class="main-bg">
<h1>Blog</h1>
diff --git a/static/style.css b/static/style.css index c427bff..6957c25 100644 --- a/static/style.css +++ b/static/style.css @@ -88,7 +88,7 @@ article, #intro { margin-top: 1.75rem;
}
-article h2, .article-h2 {
+article h2, .article-h2, #pgnv {
margin-top: 0;
}
@@ -190,7 +190,7 @@ h2, h3, h4, h5, h6 { }
h3, h4, h5, h6 {
- opacity: 50%;
+ color:rgb(150, 150, 150);
}
p {
@@ -291,6 +291,60 @@ header a, .projects a { border-top: .12rem solid rgb(196, 196, 196);
}
+.in-page-nav-group {
+ position: fixed;
+ bottom: 5rem;
+ left: -100%;
+ padding: 2.5rem 3rem;
+ background-color: white;
+ box-shadow: 0 0 1em 0.4em rgba(154, 154, 154, 0.394);
+}
+
+.in-page-nav {
+ display: flex;
+ flex-direction: column;
+}
+
+.in-page-nav a:not(:last-child) {
+ margin-bottom: .5rem;
+}
+
+.side-toggler {
+ position: fixed;
+ bottom: 1rem;
+ left: 0;
+ display: block;
+ margin: 0;
+ width: 2rem;
+ height: 3rem;
+ opacity: 0;
+ z-index: 4;
+}
+
+.side-toggler:checked + .carrot {
+ transform: scaleX(-1);
+}
+
+.side-toggler:checked ~ .in-page-nav-group {
+ left: 0;
+ transition: all 0.2s ease;
+}
+
+.carrot {
+ display: block;
+ position: fixed;
+ bottom: 1rem;
+ left: 0;
+ z-index: 3;
+ width: 2rem;
+ height: 3rem;
+ padding-top: .6rem;
+ text-align: center;
+ font-weight: bold;
+ background-color: white;
+ box-shadow: 0 0 1em 0.4em rgba(154, 154, 154, 0.394);
+}
+
.footer-logo {
filter: invert(100%);
height: 1rem;
|