diff --git a/public/css/style.css b/public/css/style.css index a82fc38..553f9ab 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -17,10 +17,20 @@ */ :root { - --bg-color: #0c0700; - --fg-color: #fff8f0; - --accent-color-0: #ec57bc; - --accent-color-1: #f7be00; + --dark-theme-bg: #0c0700; + --dark-theme-text: #fff8f0; + --dark-theme-accent: #ec57bc; + --dark-theme-accent-hover: #f7be00; + + --light-theme-bg: #fff8f0; + --light-theme-text: #0c0700; + --light-theme-accent: #dc3a23; + --light-theme-accent-hover: #4997ce; + + --bg: var(--dark-theme-bg); + --text: var(--dark-theme-text); + --accent: var(--dark-theme-accent); + --accent-hover: var(--dark-theme-accent-hover); } *, @@ -41,15 +51,27 @@ p { body { margin: 0 auto; min-height: 100vh; - background-color: var(--bg-color); - color: var(--fg-color); + background-color: var(--bg); + color: var(--text); font-family: monospace; font-size: 1.25rem; line-height: 2.4; } -main { +body > header { + border-bottom: 0.0625rem solid var(--accent); + margin-bottom: 0.1875rem; +} + +body > main { padding-top: 1.5rem; + border-top: 0.0625rem solid var(--accent); + border-bottom: 0.0625rem solid var(--accent); +} + +body > footer { + border-top: 0.0625rem solid var(--accent); + margin-top: 0.1875rem; } dl, @@ -74,18 +96,15 @@ h2 { line-height: 1.2; } -a { - color: var(--accent-color-0); -} - +a, a:link, a:visited { - color: var(--accent-color-0); + color: var(--accent); } a:hover, a:active { - color: var(--accent-color-1); + color: var(--accent-hover); } dt { @@ -102,16 +121,12 @@ dd { width: 60rem; } -.border-bottom { - border-bottom: 1px solid; -} - .border-top { - border-top: 1px solid; + border-top: 0.0625rem solid var(--accent); } -.border-accent { - border-color: var(--accent-color-0); +.border-bottom { + border-bottom: 0.0625rem solid var(--accent); } .text-center { @@ -123,27 +138,15 @@ dd { line-height: 3; } -.bg-color { - background-color: var(--bg-color); +.main-nav { + gap: 0 1rem; } -.fg-color { - color: var(--fg-color); -} - -.fg-accent { - color: var(--accent-color-0); -} - -.main-nav-link { +.main-nav > a { font-weight: bold; text-decoration: none; } -.main-nav-link-gap { - gap: 0 1rem; -} - /* 0.5rem padding compensates the unused 1rem gap at the end. */ .gallery { align-items: center; @@ -151,15 +154,22 @@ dd { padding: 0 0.5rem; } -.gallery-image { +.gallery > a > img, +.gallery > a:link > img, +.gallery > a:visited > img { max-height: 24rem; max-width: 14rem; height: 100%; width: 100%; + + outline-offset: 0.1875rem; + outline: 0.0625rem solid; + outline-color: var(--accent); } -.media-image { - max-width: 100%; +.gallery > a:hover > img, +.gallery > a:active > img { + outline-color: var(--accent-hover); } .flex-c-horizontal { diff --git a/templates/gallery.html.ep b/templates/gallery.html.ep index 4fa3cb2..a2f0733 100644 --- a/templates/gallery.html.ep +++ b/templates/gallery.html.ep @@ -3,7 +3,7 @@
% for my $m (@$media) { <%= link_to $m->{media_src} => begin %> - <%= image $m->{media_src}, class => "gallery-image" %> + <%= image $m->{media_src} %> <% end %> % }
diff --git a/templates/layouts/main.html.ep b/templates/layouts/main.html.ep index c55d018..2db1e1f 100644 --- a/templates/layouts/main.html.ep +++ b/templates/layouts/main.html.ep @@ -8,18 +8,18 @@
-
-
+

<%= title %>

-
<%= content %>
+
<%= content %>
<% if (defined $pager) { %>
-