Media queries

src/project/static/css/style.css

@@ -27,19 +27,26 @@ p, h1, h2, h3, h4, h5, h6 {
 :root {
   /* Colors */
   --light : #fff;
-  --light-dust : #fefefe;
+  --light-dust : #fcfcfc;
   --dust : #f1f1f1;
   --dark-dust : #bfbfbf;
   --twilight : #404040;
-  --dark : #323232;
+  --dark : #2a2a2a;
   --custard : #f0dcac;
   --splash : #4b3aba;
 
   /* Sizes */
   --space : 12px;
-  --double-space : calc(--space * 2);
+  --double-space : calc(var(--space) * 2);
-  --half-space : calc(--space / 2);
+  --half-space : calc(var(--space) / 2);
-  --quarter-space : calc(--space / 4);
+  --quarter-space : calc(var(--space) / 4);
+  --outer-space : var(--double-space);
+}
+
+@media (min-width: 1380px) {
+  :root {
+    --outer-space : 15%;
+  }
 }
 
 body {
@@ -52,7 +59,7 @@ body {
 
 header {
   display : flex;
-  padding : 12px 24px;
+  padding : var(--double-space) var(--outer-space);
   background : var(--light);
   justify-content : space-between;
   align-items : center;
@@ -62,23 +69,28 @@ header > h1 {
   font-size : 1.44em;
 }
 
-header > div.logout {
+header > a.logout {
-  padding : 6px;
+  padding : 6px 12px;
+  border-radius : 6px;
+  background : var(--twilight);
+  text-decoration : none;
+  color : var(--dust);
 }
 
-header > div.logout a {
+header > a.logout:hover {
-  padding : 6px;
+  background : var(--splash);
+  color : var(--light);
 }
 
 aside {
-  padding : 24px 24px;
+  padding : var(--double-space) var(--outer-space);
   background : var(--light);
 }
 
 aside > div {
   background : var(--dust);
-  padding : 24px;
+  padding : var(--double-space);
-  border-radius : 6px;
+  border-radius : var(--quarter-space);
   overflow : hidden;
 }
 
@@ -92,7 +104,7 @@ aside > div > figure {
   height : 100px;
   border : 1px solid var(--dark-dust);
   float : left;
-  margin-right : 24px;
+  margin-right : var(--double-space);
 }
 
 aside > div > dl {
@@ -102,7 +114,7 @@ aside > div > dl {
 aside > div > dl > dt {
   float : left;
   clear : left;
-  margin : 0 24px 0 0;
+  margin : 0 var(--double-space) 0 0;
   width : 180px;
   font-weight : bold;
 }
@@ -111,11 +123,10 @@ nav {
   display : block;
   border-bottom : 1px solid var(--dark-dust);
   background : var(--light);
-  padding : 0 12px;
 }
 
 nav ol {
-  margin : 0;
+  margin: 0 calc(var(--outer-space));
   padding : 0;
   list-style-type : none;
   overflow : hidden;
@@ -129,12 +140,16 @@ nav ol li {
 
 nav > ol > li > a {
   display : block;
-  padding : 6px 6px 3px 6px;
+  padding : var(--half-space) var(--half-space) var(--quarter-space);
-  margin : 0 12px;
+  margin : 0 var(--space);
-  cursor : pointer;
+  border-bottom : var(--half-space) solid transparent;
-  border-bottom : 4px solid transparent;
   text-decoration : none;
   color : var(--dark);
+  cursor : pointer;
+}
+
+nav > ol > li:first-child > a {
+  margin-left : 0;
 }
 
 nav ol li a:hover {
@@ -148,29 +163,29 @@ nav ol li a.current {
 }
 
 article {
-  padding : 24px;
+  padding : var(--double-space) var(--outer-space);
 }
 
 article > div {
   background : var(--dust);
-  padding : 24px;
+  padding : var(--double-space);
-  margin-bottom : 24px;
+  margin-bottom : var(--double-space);
 }
 
 div.view-list > h2 {
-  margin : 0 0 24px 0;
+  margin : 0 0 var(--double-space) 0;
 }
 
 div.services {
   display : flex;
   justify-content : space-between;
-  gap : 24px;
+  gap : var(--double-space);
   flex-wrap: wrap;
 }
 
 div.services > div {
   background : var(--light);
-  padding : 24px;
+  padding : var(--double-space);
   border-radius : 6px;
   flex : 240px;
   max-width : 420px;
@@ -187,7 +202,7 @@ div.services > div:hover {
 */
 
 div.services > div > div.description {
-  margin-bottom : 24px;
+  margin-bottom : var(--double-space);
 }
 
 div.services > div > a,
@@ -196,10 +211,11 @@ button {
   background : var(--splash);
   padding : 6px 12px;
   border-radius : 3px;
-  opacity : 0.8;
+  opacity : 0.9;
   cursor : pointer;
   text-align : center;
   border : 0;
+  font-weight : bold;
 }
 
 
@@ -209,7 +225,7 @@ button:hover {
 }
 
 form > div {
-  margin : 0 0 24px;  
+  margin : 0 0 var(--double-space);  
 }
 
 form > div >label {
@@ -221,7 +237,7 @@ form > div > input[type="text"] {
   border : 1px solid var(--twilight);
   border-radius : 3px;
   padding : 6px 12px;
-  background : var(--dust);
+  background : var(--light-dust);
   width : 100%;
 }
 

src/project/templates/base.html

@@ -13,7 +13,7 @@
     <body>
         <header>
             <h1> data.coop membersystem </h1>
-            <a href="/logout">Log out</a>
+            <a class="logout" href="/logout">Log out</a>
         </header
         <main>
             <aside>