diff --git a/src/snek/templates/about.html b/src/snek/templates/about.html index b2b534c..0fc92c2 100644 --- a/src/snek/templates/about.html +++ b/src/snek/templates/about.html @@ -57,20 +57,78 @@ .section ul { list-style: disc inside; } - footer { - text-align: center; - font-size: .9rem; - padding: 2rem 0; - color: #888; + .topnav { + width: 100%; + background: #181818; + box-shadow: 0 2px 8px rgba(0,0,0,0.28); + padding: 0.6rem 0; + margin-bottom: 2rem; + } + .topnav .container { + display: flex; + align-items: center; + justify-content: flex-start; + padding: 0; + } + .topnav a { + color: #7ef; + font-weight: 600; + font-size: 1.05rem; + padding: 0.5rem 1rem; + border-radius: 4px; + margin-right: 0.35rem; + transition: background 0.14s; + text-decoration: none; + display: inline-block; + } + .topnav a:hover, .topnav a.active { + background: #222b; + text-decoration: underline; + } + .topnav .home-link { + display: flex; + align-items: center; + gap: 0.4em; + font-size: 1.1rem; + font-weight: bold; + letter-spacing: 0.02em; + } + .topnav .home-link img { + width: 28px; + height: 28px; + margin: 0 0.1em 0 0; + vertical-align: middle; + border-radius: 5px; + background: #222; } @media (max-width: 480px) { .about-hero h1 { font-size: 2rem; } .about-hero img { width: 48px; height: 48px; } .section { padding: 1rem; } + .topnav .container { + flex-direction: column; + align-items: flex-start; + } + .topnav a { + padding: 0.5rem 0.7rem; + font-size: 1rem; + margin-bottom: 0.15rem; + } + .topnav .home-link img { + width: 22px; height: 22px; + } } +
Snek Logo

About Snek

@@ -134,7 +192,7 @@