feat: refresh styling
This commit is contained in:
parent
a5b3e0adec
commit
7962506084
|
@ -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.
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading…
Reference in New Issue