feat: refresh styling

This commit is contained in:
Shannon Sterz 2017-08-17 11:39:26 +02:00
parent a5b3e0adec
commit 7962506084
11 changed files with 78 additions and 60 deletions

View file

@ -1,6 +1,7 @@
# Sterzy.com # 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)). 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/). 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 # Installing
``` ```

View file

@ -5,25 +5,34 @@
font-weight: 400; font-weight: 400;
src: url(../fonts/Montserrat-Regular.ttf); src: url(../fonts/Montserrat-Regular.ttf);
} }
@font-face { @font-face {
font-family: 'Oxygen'; font-family: 'Fira Sans';
font-style: normal; font-style: normal;
font-weight: 400; 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 */ /* Global Reset */
* { * {
margin: 0; margin: 0;
@ -39,8 +48,8 @@
/* Omnipresent */ /* Omnipresent */
html { html {
background-color: #fff; background-color: #fff;
font-family: "Oxygen", sans-serif; font-family: "Fira Sans", sans-serif;
font-size: 14pt; font-size: 1.1em;
color: #222; color: #222;
-moz-hyphens: auto; -moz-hyphens: auto;
-webkit-hyphens: auto; -webkit-hyphens: auto;
@ -62,13 +71,13 @@ html, body{
/* Pics */ /* Pics */
img { img {
display: block; display: block;
margin: 30px -2.6%; margin: 0 -2.6% 2rem;
max-width: 105.2%; max-width: 105.2%;
} }
iframe { iframe {
width: 105.6% !important; width: 105.2% !important;
margin: 30px -2.6%; margin: 0 -2.6% 2rem;
display: block; display: block;
} }
@ -93,34 +102,43 @@ p a:hover, .tagslocal a:hover, .feed:hover, .text a:hover {
} }
/* Additional */ /* 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:last-child,
.articles article p:last-child, .articles article p:last-child,
p:last-child, p:last-child,
blockquote:last-child { blockquote:last-child {
margin-bottom: 0px; margin-bottom: 0;
} }
pre { pre {
margin: 30px -2.6%; margin: 0 -2.6% 2rem;
max-width: 105.2%; max-width: 105.2%;
padding: 5%; padding: 5%;
background-color: #f5f5f5; background-color: #f5f5f5;
} }
blockquote { blockquote {
border-left: 5px solid #059cfa; 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; 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 { .video {
margin: 30px -2.6%; margin: 0 -2.6% 2rem;
max-width: 105.2%; max-width: 105.2%;
display: block; display: block;
position: relative; position: relative;
@ -147,51 +165,44 @@ blockquote {
/* Headlines */ /* Headlines */
h1 { h1 {
font-family: "Montserrat", serif; font-family: "Montserrat", serif;
font-weight: 400; font-size: 2em;
font-size: 26pt;
border: none !important; border: none !important;
margin-bottom: 20px; margin-bottom: .5rem;
} }
h2 { 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 { h3 {
font-family: "Montserrat", serif; font-family: "Montserrat", serif;
font-weight: 400; font-size: 1.6em;
font-size: 18pt; margin-bottom: .5rem;
margin-bottom: 20px;
} }
h4 { h4 {
font-family: "Montserrat", serif; font-family: "Montserrat", serif;
font-weight: 400; font-size: 1.2em;
font-style: italic;
font-size: 17pt;
color: #888; color: #888;
margin-bottom: 20px; margin-bottom: .5rem;
} }
h5 { h5 {
font-family: "Oxygen", serif; font-family: "Montserrat", serif;
font-weight: 200;
font-style: italic; font-style: italic;
color: #777; color: #888;
font-size: 16pt; font-size: 1.2em;
margin-bottom: 20px; margin-bottom: .5rem;
} }
/* Header */ /* Header */
.header { .header {
width: 100%; 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; z-index: 0 !important;
position: fixed; position: fixed;
top: 0; top: 0;
@ -228,7 +239,7 @@ h5 {
margin: 0px auto ; margin: 0px auto ;
color: #fff; color: #fff;
max-width: 1000px; max-width: 1000px;
padding: 0 0 40px; padding: 0 0 3rem;
} }
.navigation .active li{ .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, .text p,
article p { article p {
text-align: justify; text-align: justify;
@ -430,10 +447,10 @@ footer {
/* Logo Transformation */ /* Logo Transformation */
#holders { #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; position: relative;
background-color: #fff; background-color: #fff;
} }

View file

@ -1,4 +1,4 @@
@media only screen and (max-width: 700px) { @media (max-width: 700px) {
.bp { .bp {
width: 100%; width: 100%;
padding: 0; padding: 0;
@ -47,7 +47,7 @@
} }
@media only screen and (max-width: 1000px) { @media (max-width: 1000px) {
footer { footer {
width: 100%; 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 { .menu li {
width: 100%; width: 100%;

Binary file not shown.

BIN
assets/fonts/FiraSans-Bold.ttf Executable file

Binary file not shown.

BIN
assets/fonts/FiraSans-Italic.ttf Executable file

Binary file not shown.

BIN
assets/fonts/FiraSans-Light.ttf Executable file

Binary file not shown.

BIN
assets/fonts/FiraSans-Regular.ttf Executable file

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.