feat: refresh styling
This commit is contained in:
parent
a5b3e0adec
commit
7962506084
11 changed files with 78 additions and 60 deletions
|
@ -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.
BIN
assets/fonts/FiraSans-Bold.ttf
Executable file
BIN
assets/fonts/FiraSans-Bold.ttf
Executable file
Binary file not shown.
BIN
assets/fonts/FiraSans-Italic.ttf
Executable file
BIN
assets/fonts/FiraSans-Italic.ttf
Executable file
Binary file not shown.
BIN
assets/fonts/FiraSans-Light.ttf
Executable file
BIN
assets/fonts/FiraSans-Light.ttf
Executable file
Binary file not shown.
BIN
assets/fonts/FiraSans-Regular.ttf
Executable file
BIN
assets/fonts/FiraSans-Regular.ttf
Executable file
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading…
Reference in a new issue