Dark mode!

diff --git a/static/css/pgcac.css b/static/css/pgcac.css
index c1334bae020bfab48376faa88b24c5034926d886..cfdcb05ed8b380a12f07624eb4b9b99454f757ee 100644 (file)
--- a/static/css/pgcac.css
+++ b/static/css/pgcac.css
@@ -2,41 +2,64 @@
 @import url('https://fonts.googleapis.com/css?family=Open+Sans');
 @import url('https://fonts.googleapis.com/css?family=Maven+Pro');
 
+/** STANDARD COLOR DEFINITIONS (complete list) **/
+:root {
+  --a-fg-color: #336791;
+  --body-bg-color: #fff;
+  --body-fg-color: #515151;
+  --h-fg-color: #515151;
+  --navbar-bg-color: inherit;
+  --navbar-fg-color: inherit;
+  --navbar-sdw-color: rgba(0,0,0,0.2);
+}
+
+/** DARK COLOR (overrides only) **/
+@media (prefers-color-scheme: dark) {
+  :root {
+    --body-bg-color: #212121;
+    --body-fg-color: #f3f5f9;
+    --h-fg-color: #2b6da3;
+    --navbar-bg-color: #212121;
+    --navbar-fg-color: #f3f5f9;
+  }
+}
+
 body {
+  background-color: var(--body-bg-color);
   padding-top: 4rem;
-
   font-family: 'Open Sans', sans-serif;
   font-weight: 400;
-  color: #515151;
+  color: var(--body-fg-color);
   font-size: 11.5pt;
 }
 
 h1, h2, h3, h4, h5, h6 {
-    font-family: 'Maven Pro', sans-serif;
-    font-weight: 700;
-    text-transform: uppercase;
-    color: #515151;
-    margin-top: 0.5em;
+  font-family: 'Maven Pro', sans-serif;
+  font-weight: 700;
+  color: var(--h-fg-color);
+  margin-top: 0.5em;
 }
 
 a {
-    color: #336791;
-    font-weight: 600;
-    text-decoration: none;
-    -moz-transition: color .2s ease-in-out;
-    -webkit-transition: color .2s ease-in-out;
-    -ms-transition: color .2s ease-in-out;
-    transition: color .2s ease-in-out;
+  color: var(--a-fg-color);
+  font-weight: 600;
+  text-decoration: none;
+  -moz-transition: color .2s ease-in-out;
+  -webkit-transition: color .2s ease-in-out;
+  -ms-transition: color .2s ease-in-out;
+  transition: color .2s ease-in-out;
 }
 
 .navbar {
-  box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
+  box-shadow: 0px 3px 15px var(--navbar-sdw-color);
+  background-color: var(--navbar-bg-color) !important;
+  color: var(--navbar-fg-color) !important;
 }
 
 .navbar img.logo {
-    height: 2rem;
-    margin-left: 0;
-    margin-bottom: 0;
+  height: 2rem;
+  margin-left: 0;
+  margin-bottom: 0;
 }
 
 #footer {
@@ -44,8 +67,3 @@ a {
   padding: 5em 0 2em 0;
   display: block;
 }
-
-h2 a, h3 a {
-    text-decoration: none;
-    color: #515151;
-}

diff --git a/templates/pages/index.html b/templates/pages/index.html
index f3da20fe1fd992b98438332a8797e43ff8b2461a..7041e58bfde0924fe84da98d81c73f41be884234 100644 (file)
--- a/templates/pages/index.html
+++ b/templates/pages/index.html
@@ -55,7 +55,7 @@ href="https://www.postgresql.org/">PostgreSQL Project</a>.
 
     <div>
       <h2>Infringing Trademark Registrations Invalidated by Spanish Court</h2>
-      <h3>23 June 2022</h3>
+      <h5>23 June 2022</h5>
 
       <p>In 2020, the PostgreSQL Core Team was made aware of trademarks
         registered in Spain and the European Union for <strong>POSTGRESQL</strong>
@@ -106,7 +106,7 @@ href="https://www.postgresql.org/">PostgreSQL Project</a>.
       </p>
 
       <h2>Board members confirmed</h2>
-      <h3>1 May 2022</h3>
+      <h5>1 May 2022</h5>
 
       <p>Following an AGM and board meeting held during a video conference, the
         PostgreSQL Community Association of Canada's board has been re-confirmed
@@ -123,7 +123,7 @@ href="https://www.postgresql.org/">PostgreSQL Project</a>.
 
   <div>
     <h2>Board positions updated</h2>
-    <h3>3 December 2020</h3>
+    <h5>3 December 2020</h5>
 
     <p>Following the passing of our friend and colleague Chris Browne, the Board
       have voted to update the positions of various board members. The updated