From 89a787dc87b8e35d1e7af977dbc907a35d09e218 Mon Sep 17 00:00:00 2001 From: Dave Page Date: Tue, 15 Nov 2022 14:57:50 +0000 Subject: [PATCH] Allow users to toggle light/dark mode. While we're at it, use assets.postgresql.org for Bootstrap/jQuery/Fontawesome. --- static/css/pgcac.css | 26 ++++++++++-------- templates/base.html | 65 ++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 74 insertions(+), 17 deletions(-) diff --git a/static/css/pgcac.css b/static/css/pgcac.css index e7f5b63..2017f3b 100644 --- a/static/css/pgcac.css +++ b/static/css/pgcac.css @@ -9,6 +9,7 @@ --body-bg-color: #fff; --body-fg-color: #515151; --h-fg-color: #515151; + --i-fas-fg-color: #336791; --navbar-bg-color: #fff; --navbar-fg-color: inherit; --navbar-sdw-color: rgba(0,0,0,0.2); @@ -16,17 +17,16 @@ } /** DARK COLOR (overrides only) **/ -@media (prefers-color-scheme: dark) { - :root { - --a-fg-color: #699eca; - --a-highlight-fg-color: #50b0f0; - --body-bg-color: #212121; - --body-fg-color: #f3f5f9; - --h-fg-color: #699eca; - --navbar-bg-color: #212121; - --navbar-fg-color: #f3f5f9; - --navbar-toggler-img: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(243, 245, 249, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); - } +[data-theme="dark"] { + --a-fg-color: #699eca; + --a-highlight-fg-color: #50b0f0; + --body-bg-color: #212121; + --body-fg-color: #f3f5f9; + --h-fg-color: #699eca; + --i-fas-fg-color: #699eca; + --navbar-bg-color: #212121; + --navbar-fg-color: #f3f5f9; + --navbar-toggler-img: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(243, 245, 249, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } body { @@ -76,6 +76,10 @@ a:hover, a:active { background-image: var(--navbar-toggler-img) } +i.fas { + color: var(--i-fas-fg-color); +} + #footer { text-align: center; padding: 2em 0 2em 0; diff --git a/templates/base.html b/templates/base.html index 4768b62..8ef2656 100644 --- a/templates/base.html +++ b/templates/base.html @@ -5,13 +5,25 @@ - - + + + {%block title%}{%endblock%} - PostgreSQL Community Association of Canada {%block extrahead%}{%endblock%} + +
@@ -33,6 +45,9 @@
  • Donate
  • Contact
    • +
    @@ -98,10 +113,48 @@ -{%block jquery%} - -{%endblock%} - + + + + + {%block pagescript%} {%endblock%} -- 2.39.5