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,10 +1,11 @@
# 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
```
$ git clone --recursive https://svs.ankaa.uberspace.de/sterzy/sterzycom.git
$ mkdir site/config site/accounts thumbs content assets/avatars
```
Then [add your license](http://getkirby.com/docs/installation/license-code) and visit yoursite.com/panel.
Then [add your license](http://getkirby.com/docs/installation/license-code) and visit yoursite.com/panel.

View file

@ -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);
}
@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);
src: url(../fonts/FiraSans-Regular.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-size: 14pt;
font-family: "Fira Sans", sans-serif;
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;
margin: 30px -2.6%;
width: 105.2% !important;
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 {
margin-bottom: 40px;
.description p:last-child {
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%;
max-width: 105.2%;
margin: 0 -2.6% 2rem;
max-width: 105.2%;
padding: 5%;
background-color: #f5f5f5;
}
blockquote {
border-left: 5px solid #059cfa;
padding-left: 2.5%;
margin: 30px 0 30px -2.6%;
padding: 2.5%;
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: 26pt;
font-size: 2em;
border: none !important;
margin-bottom: 20px;
margin-bottom: .5rem;
}
h2 {
font-family: "Oxygen", serif;
font-weight: 200;
font-size: 18pt;
margin-bottom: 20px;
font-family: "Montserrat", serif;
font-size: 1.8em;
margin-bottom: .5rem;
}
h3 {
font-family: "Montserrat", serif;
font-weight: 400;
font-size: 18pt;
margin-bottom: 20px;
font-size: 1.6em;
margin-bottom: .5rem;
}
h4 {
font-family: "Montserrat", serif;
font-weight: 400;
font-style: italic;
font-size: 17pt;
font-size: 1.2em;
color: #888;
margin-bottom: 20px;
margin-bottom: .5rem;
}
h5 {
font-family: "Oxygen", serif;
font-weight: 200;
font-family: "Montserrat", serif;
font-style: italic;
color: #777;
font-size: 16pt;
margin-bottom: 20px;
color: #888;
font-size: 1.2em;
margin-bottom: .5rem;
}
/* Header */
.header {
width: 100%;
height: 450px;
background-image: url(../img/bg.jpg);
background-size: cover;
background-position: center center;
background-image: url(../img/bg.jpg);
background-size: cover;
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;
height: 130px;
border-radius: 130px;
margin: 0px auto 0px auto;
width: 130px;
height: 130px;
border-radius: 130px;
margin: 0px auto 0px auto;
position: relative;
background-color: #fff;
}

View file

@ -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%;

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.