Unverified Commit 4e56412c authored by Felix Schelle's avatar Felix Schelle
Browse files

redesign everything

parent afb0dd9a
Pipeline #160223 passed with stage
in 11 seconds
......@@ -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;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment