feat: refresh styling

README.md

@@ -1,6 +1,7 @@
 # Sterzy.com    
 This is the code for the http://sterzy.com website. It is based on the kirby cms (http://getkirby.com), which has it's own license agreement ([Kirby End User License Agreement](https://github.com/getkirby/starterkit/blob/master/license.md)).
 The rest of the code is under this license: [License](https://svs.ankaa.uberspace.de/sterzy/sterzycom/blob/master/LICENSE "license"), [CC BY 4.0](http://creativecommons.org/licenses/by/4.0/).
+[Fira Sans](https://github.com/mozilla/Fira) is licensed under SIL OFL-1.1 License 
 
 # Installing 
 ```

assets/css/main.css

@@ -5,25 +5,34 @@
   font-weight: 400;
   src: url(../fonts/Montserrat-Regular.ttf);
 }
+
 @font-face {
-  font-family: 'Oxygen';
+  font-family: 'Fira Sans';
   font-style: normal;
   font-weight: 400;
-  src: url(../fonts/Oxygen-Regular.ttf);
+  src: url(../fonts/FiraSans-Regular.ttf);
-}
-@font-face {
-  font-family: 'Oxygen';
-  font-style: normal;
-  font-weight: 600;
-  src: url(../fonts/Oxygen-Bold.ttf);
-}
-@font-face {
-  font-family: 'Oxygen';
-  font-style: normal;
-  font-weight: 200;
-  src: url(../fonts/Oxygen-Light.ttf);
 }
 
+@font-face {
+  font-family: 'Fira Sans';
+  font-style: normal;
+  font-weight: 600;
+  src: url(../fonts/FiraSans-Bold.ttf);
+}
+
+@font-face {
+  font-family: 'Fira Sans';
+  font-style: normal;
+  font-weight: 200;
+  src: url(../fonts/FiraSans-Light.ttf);
+}
+
+@font-face {
+  font-family: 'Fira Sans';
+  font-style: italic;
+  font-weight: 200;
+  src: url(../fonts/FiraSans-Italic.ttf);
+}
 /* Global Reset */
 * {
 	margin: 0;
@@ -39,8 +48,8 @@
 /* Omnipresent */
 html {
 	background-color: #fff;
-	font-family: "Oxygen", sans-serif;
+	font-family: "Fira Sans", sans-serif;
-	font-size: 14pt;
+	font-size: 1.1em;
 	color: #222;
     -moz-hyphens: auto;
     -webkit-hyphens: auto;
@@ -62,13 +71,13 @@ html, body{
 /* Pics */
 img {
     display: block;
-    margin: 30px -2.6%;
+    margin: 0 -2.6% 2rem;
     max-width: 105.2%;
 }
 
 iframe {
-    width: 105.6% !important;
+    width: 105.2% !important;
-    margin: 30px -2.6%;
+    margin: 0 -2.6% 2rem;
     display: block;
 }
 
@@ -93,34 +102,43 @@ p a:hover, .tagslocal a:hover, .feed:hover, .text a:hover {
 }
 
 /* Additional */
-p, .description p:last-child {
+.description p:last-child {
-	margin-bottom: 40px;
+	margin-bottom: 3rem;
 }
 
+p {
+  margin-bottom: 2rem;
+}
 .articles article:last-child,
 .articles article p:last-child, 
 p:last-child, 
 blockquote:last-child {
-	margin-bottom: 0px;
+	margin-bottom: 0;
 }
 
 pre {
-    margin: 30px -2.6%;
+  margin: 0 -2.6% 2rem;
-    max-width: 105.2%;
+  max-width: 105.2%;
 	padding: 5%;
 	background-color: #f5f5f5;
 }
 
 blockquote {
 	border-left: 5px solid #059cfa;
-	padding-left: 2.5%;
+	padding: 2.5%;
-	margin: 30px 0 30px -2.6%;
+	margin: 0 -2.6% 2rem;
 	font-weight: 400;
-	max-width: 102.6%;
+	max-width: 105.2%;
+  background-color: #f5f5f5;
+}
+
+code {
+  background-color: #f5f5f5;
+  font-family: "Source Code Pro", monospace;
 }
 
 .video {
-    margin: 30px -2.6%;
+    margin: 0 -2.6% 2rem;
     max-width: 105.2%;
     display: block;
     position: relative;
@@ -147,51 +165,44 @@ blockquote {
 /* Headlines */
 h1 {
 	font-family: "Montserrat", serif;
-	font-weight: 400;
+	font-size: 2em;
-	font-size: 26pt;
 	border: none !important;
-	margin-bottom: 20px;
+	margin-bottom: .5rem;
 }
 
 h2 {
-	font-family: "Oxygen", serif;
+	font-family: "Montserrat", serif;
-	font-weight: 200;
+	font-size: 1.8em;
-	font-size: 18pt;
+	margin-bottom: .5rem;
-	margin-bottom: 20px;
 }
 
 h3 {
 	font-family: "Montserrat", serif;
-	font-weight: 400;
+	font-size: 1.6em;
-	font-size: 18pt;
+	margin-bottom: .5rem;
-	margin-bottom: 20px;
 }
 
 h4 {
 	font-family: "Montserrat", serif;
-	font-weight: 400;
+	font-size: 1.2em;
-	font-style: italic;
-	font-size: 17pt;
 	color: #888;
-	margin-bottom: 20px;
+	margin-bottom: .5rem;
 }
 
 h5 {
-	font-family: "Oxygen", serif;
+	font-family: "Montserrat", serif;
-	font-weight: 200;
 	font-style: italic;
-	color: #777;
+	color: #888;
-	font-size: 16pt;
+	font-size: 1.2em;
-	margin-bottom: 20px;
+	margin-bottom: .5rem;
 }
 
 /* Header */
 .header {
 	width: 100%;
-	height: 450px;
+  background-image: url(../img/bg.jpg);
-    background-image: url(../img/bg.jpg);
+  background-size: cover;
-    background-size: cover;
+  background-position: center center;
-    background-position: center center;
 	z-index: 0 !important;
 	position: fixed;
 	top: 0;
@@ -228,7 +239,7 @@ h5 {
 	margin: 0px auto ;
 	color: #fff;
 	max-width: 1000px;
-	padding: 0 0 40px;
+	padding: 0 0 3rem;
 }
 
 .navigation .active li{
@@ -348,6 +359,12 @@ a .notesf h1:hover, a .projectsf h1:hover{
 
 }
 
+article ol, 
+article ul {
+  list-style-position: inside;
+  margin: 0 0 2rem;
+}
+
 .text p,
 article p {
     text-align: justify;
@@ -430,10 +447,10 @@ footer {
 
 /* Logo Transformation */
 #holders {
-    width: 130px;
+  width: 130px;
-    height: 130px;
+  height: 130px;
-    border-radius: 130px;
+  border-radius: 130px;
-    margin: 0px auto 0px auto;
+  margin: 0px auto 0px auto;
 	position: relative;
 	background-color: #fff;
 }

assets/css/mobile.css

@@ -1,4 +1,4 @@
-@media only screen and (max-width: 700px) {
+@media (max-width: 700px) {
  	.bp {
 		width: 100%;
 		padding: 0;
@@ -47,7 +47,7 @@
 
 }
 
-@media only screen and (max-width: 1000px) {
+@media (max-width: 1000px) {
 
 	footer {
 		width: 100%;
@@ -55,7 +55,7 @@
 
 }
 
-@media screen and (max-height: 480px), screen and (max-width: 700px) {
+@media (max-height: 480px), (max-width: 700px) {
 	
 	.menu li {
 		width: 100%;