feat: refresh styling
This commit is contained in:
parent
a5b3e0adec
commit
7962506084
|
@ -1,10 +1,11 @@
|
||||||
# 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
|
||||||
```
|
```
|
||||||
$ git clone --recursive https://svs.ankaa.uberspace.de/sterzy/sterzycom.git
|
$ git clone --recursive https://svs.ankaa.uberspace.de/sterzy/sterzycom.git
|
||||||
$ mkdir site/config site/accounts thumbs content assets/avatars
|
$ 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;
|
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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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.
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