redesign everything

theme/eule/static/css/main.css

@@ -5,6 +5,11 @@
 /* === Imports === */
 /* @import url("filename"); */
 
+@font-face{
+    font-family: montserrat;
+    src: url(montserrat.ttf);
+}
+
 /* === global, default and reset styles === */
 
 a, abbr, address, b, body, blockquote, caption, cite, code, dd, del, dfn, div, dl, dt, em,
@@ -23,6 +28,7 @@ html {
     color: #000;
     line-height: 1.6;
     font-size: 14px;
+    font-family: montserrat;
 }
 
 header, main, footer {
@@ -72,18 +78,16 @@ em, i, dfn {
 
 a {
     text-decoration: none;
-    color: #439;
+    color: #c90;
 }
-a:hover {
-    color: #65b;
-}
-a:visited, a:focus {
-    color: #328;
+a:hover,
+a:focus {
+    color: #960;
 }
 
 hr {
     margin: 1.5em 0;
-    color: #439;
+    color: #c90;
 }
 
 :focus {
@@ -115,29 +119,24 @@ table {
 /* === basic layout === */
 
 body {
-    background: #b9d;
+    display: flex;
+    flex-flow: column;
 }
 
 body > * {
-    max-width: 80%;
+    width: 80%;
     background: #fff;
     margin: 0 auto;
-    border-left: 4px #439 solid;
-    border-right: 4px #439 solid;
     /*box-shadow: 0px 0px 25px #dd44cc33;*/
     padding: 20px;
+    flex: 1;
 }
 
 body > *:first-child {
-    border-top: 4px #439 solid;
-}
-
-body > *:last-child {
-    border-top: 4px #439 solid;
 }
 
 body > header {
-    background-image: url("../images/logo_purple.png");
+    background-image: url("../images/logo.png");
     background-repeat: no-repeat;
     background-size: contain;
     margin-top: 20px;
@@ -145,7 +144,7 @@ body > header {
 }
 
 body > header > * {
-    padding-left: 140px;
+    padding-left: 180px;
 }
 
 body > nav {
@@ -153,15 +152,16 @@ body > nav {
     top: 0;
     padding: 0 20px;
     color: #fff;
-    background-color: #439;
+    background-color: #c90;
     border-bottom: 2px #fff solid;
     /* todo: add pseudeelements to fix corner of border */
 }
 
 body > footer {
     margin-bottom: 20px;
-    background-color: #439;
+    background-color: #c90;
     color: #fff;
+    font-weight: bold;
 }
 
 /* === Header === */
@@ -169,17 +169,16 @@ body > footer {
 body > header h1 {
     font-size: 3.5em;
     font-weight: bold;
-    /*
-    text-shadow: 1px 1px 3px #fe6;
-    */
+    text-shadow: 1px 1px 4px #c90;
+    color: #fff;
 }
 
 body > header h2 {
-    color: #439;
+    color: #c90;
     font-size: 2em;
     font-weight: bold;
     /*
-    text-shadow: 1px 1px 3px #fe6;
+    text-shadow: 1px 1px 3px #c90;
     */
 }
 
@@ -192,7 +191,7 @@ body > nav ul  {
     white-space: nowrap;
     list-style: none;
     margin: 0 20px -2px;
-    background-color: #439;
+    background-color: #c90;
 }
 
 body > nav ul li {
@@ -210,7 +209,6 @@ body > nav ul li a {
     border-right: #fff 1px solid;
     border-bottom: none;
     color: inherit;
-    /* background-color: #333; */
     font-weight: bold;
 }
 
@@ -223,17 +221,19 @@ body > nav ul li:last-child a {
     border-right: #fff 2px solid;
 }
 
+/*
 body > nav ul li a:visited {
     color: #fff;
 }
+*/
 
 body > nav ul li a:hover,
 body > nav ul li a:active,
 body > nav ul li a:focus {
     color: #fff;
-    background-color: #64b;
-    border-color: #cbd;
-    box-shadow: 0 0 5px #cbd;
+    background-color: #960;
+    /*border-color: #c90;*/
+    box-shadow: 0 0 5px #c90;
 }
 
 /* --- hamburger menu --- */
@@ -246,13 +246,13 @@ body > nav ul li a:focus {
     display: none;
     height: 35px;
     width: 35px;
-    color: #fe6;
+    color: #fff;
     font-weight: bold;
-    background-color: #339;
+    background-color: #c90;
     border-radius: 5px;
     text-align: center;
     line-height: 2.5;
-    border: 2px solid #fe6;
+    border: 2px solid #fff;
 }
 
 /* === main content === */
@@ -290,7 +290,7 @@ article hr {
 /* === footer === */
 
 body > footer a,
-body > footer a:visited,
+/*body > footer a:visited,*/
 body > footer a:active {
     color: #fff;
     text-decoration: underline;
@@ -299,7 +299,7 @@ body > footer a:active {
 body > footer a:hover,
 body > footer a:focus {
     color: #fff;
-    text-shadow: 1px 1px 2px #cbd;
+    text-shadow: 1px 1px 2px #000;
 }
 
 /* === responsive foo === */
@@ -315,7 +315,7 @@ body > footer a:focus {
     body > header {
         margin-top: 0;
         height: auto;
-        background-image: url("../images/logo.png");
+        /*background-image: url("../images/logo.png");*/
         background-size: cover;
         background-position: center;
         background-color: #66f;
@@ -323,6 +323,13 @@ body > footer a:focus {
         padding-top: 5px;
         padding-bottom: 5px;
     }
+    body > header > * {
+        padding-left: unset;
+        text-align: center;
+    }
+    body > header > h2 {
+        text-shadow: 1px 1px 3px #fff;
+    }
 
     body > nav ul {
         flex-direction: column;
@@ -331,7 +338,7 @@ body > footer a:focus {
     body > nav ul li a {
         border-radius: 0;
         border-bottom-style: solid;
-        border-size: 2px; /* geht nicht wie ich will */
+        border-size: 2px;
     }
     body > nav ul li:first-child a {
         border-top-left-radius: 10px;