sterzycom/assets/css/main.css

572 lines
9.1 KiB
CSS
Raw Normal View History

2015-11-29 20:38:31 +01:00
/* Font Import */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: url(../fonts/Montserrat-Regular.ttf);
}
@font-face {
font-family: 'Oxygen';
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);
}
/* Global Reset */
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 0;
position: relative;
z-index: 10;
}
/* Omnipresent */
html {
background-color: #fff;
font-family: "Oxygen", sans-serif;
font-size: 14pt;
color: #222;
-moz-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
text-rendering: optimizelegibility;
}
html, body{
z-index: -99999;
width: 100%;
}
.preload a , .preload .menu li, .preload a .notesf h1, .preload a .projectsf h1 {
-webkit-transition: none !important;
transition: none !important;
}
/* Pics */
img {
display: block;
margin: 30px -2.6%;
max-width: 105.2%;
}
iframe {
width: 105.6% !important;
margin: 30px -2.6%;
display: block;
}
/* Links */
a {
color: #222;
text-decoration: none;
-webkit-transition: color .3s, background .3s, border .3s;
transition: color .3s, background .3s, border .3s;
}
a:hover {
color: #0567fa;
}
p a, .tagslocal a, .feed, .text a {
border-bottom: 2px solid #ddd;
}
p a:hover, .tagslocal a:hover, .feed:hover, .text a:hover {
border-bottom: 2px solid #222;
}
/* Additional */
p, .description p:last-child {
margin-bottom: 40px;
}
.articles article:last-child,
.articles article p:last-child,
p:last-child,
blockquote:last-child {
margin-bottom: 0px;
}
pre {
margin: 30px -2.6%;
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%;
font-weight: 400;
max-width: 102.6%;
}
.video {
margin: 30px -2.6%;
max-width: 105.2%;
display: block;
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video iframe,
.video object,
.video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.text li {
line-height: 1.7em;
}
/* Headlines */
h1 {
font-family: "Montserrat", serif;
font-weight: 400;
font-size: 26pt;
border: none !important;
margin-bottom: 20px;
}
h2 {
font-family: "Oxygen", serif;
font-weight: 200;
font-size: 18pt;
margin-bottom: 20px;
}
h3 {
font-family: "Montserrat", serif;
font-weight: 400;
font-size: 18pt;
margin-bottom: 20px;
}
h4 {
font-family: "Montserrat", serif;
font-weight: 400;
font-style: italic;
font-size: 17pt;
color: #888;
margin-bottom: 20px;
}
h5 {
font-family: "Oxygen", serif;
font-weight: 200;
font-style: italic;
color: #777;
font-size: 16pt;
margin-bottom: 20px;
}
/* Header */
.header {
width: 100%;
height: 450px;
background-image: url(../img/bg.jpg);
background-size: cover;
background-position: center center;
z-index: 0 !important;
position: fixed;
top: 0;
background-color: #ddd;
}
.header .shader {
padding: 2.5% 0 0 0;
background-color: rgba(0,0,0,0.3);
height: 100%;
width: 100%;
}
.header .description {
max-width: 1000px;
margin: 10px auto 0 auto;
padding: 2.5% 2.5% 0;
color: #fff;
font-size: 14pt;
}
.header .description a {
color: #fff;
border-color: #999;
}
.header .description a:hover {
color: #0567fa;
border-color: #fff;
}
/* Navigation */
.navigation {
margin: 0px auto ;
color: #fff;
max-width: 1000px;
padding: 0 0 40px;
}
.navigation .active li{
background-color: #0567fa;
}
.menu {
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
}
.menu li {
border: none;
display: inline-block;
width: 50%;
text-align: center;
padding: 1% 0;
-webkit-transition: color .3s, background .3s, border .3s;
transition: color .3s, background .3s, border .3s;
}
.menu li, .menu a{
background-color: transparent;
color: #fff;
}
.menu li:hover {
background-color: #0567fa;
}
/* Main */
main {
width: 100% !important;
background-color: #fff;
display: block;
}
.mainwrapper {
max-width: 1000px;
margin: 450px auto 0;
padding: 2.5% 2.5% 0 2.5%;
background-color: #fff;
}
/* Home */
.bp {
width: 50%;
display: inline-block;
padding: 0 0 0 20px;
background-color: #fff;
float: right;
}
.bp.left{
border-right: 2px solid #ddd;
padding: 0 20px 0 0;
float: none;
}
.notesf, .projectsf {
width: 100%;
height: 200px;
padding: 22% 0;
margin: 0 0 10px 0;
border-radius: 5px;
text-shadow: 0px 0px 2px rgba(0, 0, 0, 1);
background-size: cover;
}
.notesf h1, .projectsf h1{
margin: auto;
text-align: center;
}
.notesf {
background-image: url(../img/notes.jpg);
}
.projectsf {
background-image: url(../img/projects.png);
background-position: center center;
}
a .notesf h1, a .projectsf h1{
color: #fff;
-webkit-transition: color .3s, background .3s, border .3s;
transition: color .3s, background .3s, border .3s;
}
a .notesf h1:hover, a .projectsf h1:hover{
color: #056bfa;
}
/* Blog/Notes */
.articleinfo {
margin-bottom: 30px;
font-weight: 200;
}
.articles, .tagcloud {
display: inline-block;
width: 70%;
border-right: 2px solid #ddd;
}
.articles article {
padding: 0 30px 0 0;
margin-bottom: 70px;
}
.articles article img,
.articles article pre,
.articles article blockquote,
.articles article .video,
.articles article iframe {
max-width: 102.6%;
margin-right: 0;
}
.text p,
article p {
text-align: justify;
text-indent: 30px;
}
.tagcloud {
width: 29%;
float: right;
padding-left: 20px;
margin-top: 5px;
line-height: 2.2em;
border: none;
}
.tagcloud li {
display: inline-block;
}
.tagcloud li a {
border: 2px solid;
padding: 5px 8px;
border-radius: 20px;
font-size: 12pt;
}
/* Pagination */
nav.pagination {
width: 100%;
padding: 0 2,5%;
margin: 40px auto 0;
background-color: #fff;
overflow: hidden;
text-align: center;
}
.pagination .prev {
float: left;
}
.pagination .next {
float: right;
}
.pagination a {
border: 2px solid #ddd;
border-radius: 20px;
padding: 5px 10px;
}
.pagination a:hover {
border: 2px solid #333;
}
/* Footer */
footer {
width: 100%;
background-color: #fff;
padding: 30px 0.5% 0;
margin: 0 auto 40px;
}
.footerwrapper {
max-width: 1000px;
margin: auto;
border-top: 2px solid #ddd;
background-color: #fff;
padding: 2.5%;
overflow: auto;
}
.footerinfo, .copyright {
width: 33%;
padding: 0 2.5% 0 0;
display: inline-block;
float: left;
}
.footerinfo {
float: none;
}
/* Logo Transformation */
#holders {
width: 130px;
height: 130px;
border-radius: 130px;
margin: 0px auto 0px auto;
position: relative;
background-color: #fff;
}
.pulses {
width: 130px;
height: 130px;
position: relative;
background-color: transparent;
background-image: url(../img/icons/logo.svg);
background-size: 80px;
background-repeat: no-repeat;
background-position: center center;
border: 7px solid #eee;
-webkit-border-radius: 130px;
-moz-border-radius: 130px;
border-radius: 130px;
z-index: 10;
}
.dots {
height: 130px;
width: 130px;
position: absolute;
top: 0px;
left: 0px;
opacity: 0;
background: transparent;
border: 10px solid #ccc;
-webkit-border-radius: 130px;
-moz-border-radius: 130px;
-ms-border-radius: 130px;
border-radius: 130px;
-webkit-animation: pulses 3s ease-out;
-moz-animation: pulses 3s ease-out;
-ms-animation: pulses 3s ease-out;
animation: pulses 3s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
z-index: auto;
}
@-moz-keyframes pulses {
0% {
-moz-transform: scale(0);
opacity: 0.0;
}
25% {
-moz-transform: scale(0);
opacity: 0.1;
}
50% {
-moz-transform: scale(0.1);
opacity: 0.3;
}
75% {
-moz-transform: scale(0.5);
opacity: 0.5;
}
100% {
-moz-transform: scale(1);
opacity: 0.0;
}
}
@-webkit-keyframes "pulses" {
0% {
-webkit-transform: scale(0);
opacity: 0.0;
}
25% {
-webkit-transform: scale(0);
opacity: 0.1;
}
50% {
-webkit-transform: scale(0.1);
opacity: 0.3;
}
75% {
-webkit-transform: scale(0.5);
opacity: 0.5;
}
100% {
-webkit-transform: scale(1);
opacity: 0.0;
}
}
@-ms-keyframes "pulses" {
0% {
-ms-transform: scale(0);
opacity: 0.0;
}
25% {
-ms-transform: scale(0);
opacity: 0.1;
}
50% {
-ms-transform: scale(0.1);
opacity: 0.3;
}
75% {
-ms-transform: scale(0.5);
opacity: 0.5;
}
100% {
-ms-transform: scale(1);
opacity: 0.0;
}
}
@keyframes "pulses" {
0% {
transform: scale(0);
opacity: 0.0;
}
25% {
transform: scale(0);
opacity: 0.1;
}
50% {
transform: scale(0.1);
opacity: 0.3;
}
75% {
transform: scale(0.5);
opacity: 0.5;
}
100% {
transform: scale(1);
opacity: 0.0;
}
}