mark2web/website/project-files/css/main.css
Sebastian Frank b9c4553577
All checks were successful
continuous-integration/drone/push Build is passing
fixed website blog
2019-03-24 14:51:40 +01:00

309 lines
8.4 KiB
CSS
Executable File

@charset "utf-8";
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/font-awesome/fontawesome-webfont.eot?v=4.5.0');
src: url('../fonts/font-awesome/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/font-awesome/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/font-awesome/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/font-awesome/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/font-awesome/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
/*--------------------------------------------------------------
# Reset
--------------------------------------------------------------*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, div
{margin:0; padding:0; border:0; outline:0;}
mark {background:none;}
article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section
{display:block;}
nav ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}
a {margin:0; padding:0; text-decoration:none;}
hr { display:block; height:1px; border:0; border:none; padding:0;}
input, select {vertical-align:middle;}
input, select, textarea {-webkit-appearance: none; border-radius: 0;}
.clear {clear:both; margin: 0; padding:0;}
img {
line-height:0;
max-width: 100%;
}
/*--------------------------------------------------------------
# General Settings
--------------------------------------------------------------*/
html,body {
font-family: 'Open Sans', sans-serif;
font-size:17px;
line-height:1.4;
color:#333;
background:#FFF;
}
.clear {clear:both;}
.section_padding {padding:80px 0px;}
@media(max-width:768px){
.section_padding {padding:60px 0px;}
}
@media(max-width:500px){
.section_padding {padding:30px 0px;}
}
/*--------------------------------------------------------------
# Typo
--------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6, .button {font-family: 'Open Sans', sans-serif; font-weight:700; line-height: 1.2;}
p {margin-bottom:20px;}
h1 {display: block; font-size: 32px; margin-bottom:20px; text-align:left; color:#333; text-transform:uppercase;}
h2 {display: block; font-size: 28px; margin-bottom:20px; text-transform:uppercase;}
h3 {display: block; font-size: 24px; margin-bottom:20px;}
h4 {display: block; font-size: 20px; margin-bottom:20px;}
h5 {display: block; font-size: 17px; margin-bottom:20px;}
strong {font-weight:700;}
mark {color:#464645;}
a {text-decoration:none; color:#b5c50f;}
a:hover {color:#d4543a;}
hr {height:1px; background:none; border-bottom:dotted 1px #666; margin-bottom:20px;}
/* Button */
.btn {
padding:8px 15px;
background:#464645;
border: 1px solid #fff;
color:#FFF;
transition:all 0.3s;
text-transform:none;
display:inline-block;
margin-top:20px;
}
.btn:hover {background:#b5c50f; color:#464645;}
.center_btn { width:100%; text-align:center; }
/* White Color */
.white_color {color:#FFF;}
.white_color h1, .white_color h2, .white_color h3, .white_color h5, .white_color h5, .white_color h6 {color:#FFF;}
.white_color .underline:after {background:#FFF;}
.white_color p {color:#FFF;}
/* Center Text */
.center_text {text-align:center;}
.center_text h1 {text-align:center;}
.center_text p {text-align:center;}
.center_text ul {margin:20px auto; width:300px; text-align:left;}
/* Fullheight Container */
.fullheight {
position:relative;
display:flex;
align-items:center;
justify-content:center;
}
@media(max-width:768px){
html,body {font-size:15px;}
}
@media(max-width:450px){
}
/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
input, textarea, select {
width:100%;
display:block;
height:45px;
padding:0px 10px;
color:#333;
background:#FFF;
border:solid 1px #CCC;
outline:none;
font-size:15px;
transition:all 0.3s;
-webkit-transition:all 0.3s;
-moz-transition:all 0.3s;
font-family: 'PT Sans', sans-serif;
margin-bottom:10px;
}
input:focus, textarea:focus, select:focus {background:#FFF; border-color:#464645;}
input[type="submit"] {
display:inline-block;
text-align:center;
padding:20px 30px;
background:#b5c50f;
color:#FFF;
transition:all 0.3s;
text-transform:uppercase;
font-size:17px;
height:auto;
width:auto;
font-family: 'Oswald', sans-serif;
cursor:pointer;
border:none;
margin-top:10px;
}
input[type="submit"]:hover {background:#464645; color:#FFF;}
textarea {height:auto; padding:10px;}
label {font-weight:600;}
.form {max-width:800px; margin:60px auto 30px auto;}
.form .row {margin:0px -5px;}
.form .column {padding:0px 5px;}
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {height:80px;}
#header .logo {height:70%; max-width:400px;}
#header .logo img {height:100%;}
#header .container {
height:100%;
display:flex;
display:-webkit-flex;
align-items:center;
justify-content:space-between;
}
@media(min-width:768px) {
#header {
position:absolute;
top:50px;
left:0px;
right:0px;
height:auto;
z-index:300;
background:none;
}
#header .logo {height:70%; max-width:100px;}
#header .logo img {height:auto; width:100%;}
}
/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
.contentfirst {
background:#464645;
}
.maincontent {
position:relative;
background:#FFF;
}
.white_section {
background:rgba(255,255,255,0.8);
}
.boxen .col-sm-6 {padding:15px;}
.box {
height:100%;
background:#b1b1b1;
color:#FFF;
padding:30px;
}
.box h3 {color:#333;}
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
padding:60px 0px 80px 0px;
background:#b1b1b1;
color:#FFF;
font-size:15px;
}
#footer h3 {font-size:15px; font-weight:600; text-transform:uppercase; margin-bottom:30px;}
#footer .footmenu {
margin:0;
padding:0;
list-style-type:none;
}
#footer .footmenu li {border-bottom:solid 1px #CCC;}
#footer .footmenu li a {display:block; color:#FFF; padding:10px 0px; transition:all 0.3s;}
#footer .footmenu li a:hover {color:#464645;}
.footer_info {background:#a4a4a4; padding:15px 0px; font-size:13px; color:#FFF; text-align:center;}
/*--------------------------------------------------------------
# GoogleMap
--------------------------------------------------------------*/
#googlemap {height:400px; width:100%; position:relative;}
#googlemap iframe {height:100%; width:100%;}
/*--------------------------------------------------------------
# Scrolltop
--------------------------------------------------------------*/
.scrolltop {
position:fixed;
bottom:50px;
right:50px;
z-index:1000;
width:50px; height:50px;
background:#2e2e2e;
cursor:pointer;
text-align:center;
padding-top:9px;
display:none;
transition:all 0.3s;
border-radius:100%;
}
.scrolltop .fa {color:#FFF; font-size:30px;}
.scrolltop:hover {background:#b5c50f;}
@media (max-width: 1024px) {
.scrolltop {bottom:20px; right:20px;}
}
.contentfirst ol, .contentfirst ul, .maincontent ol, .maincontent ul {
margin-bottom: 20px;
padding-left: 30px;
}
pre {
margin: -5px;
padding: 5px;
border-radius: 5px;
margin-bottom: 25px;
white-space: pre-wrap;
}
code.language-mermaid {
visibility: hidden;
}
code.language-mermaid svg {
margin-left: auto;
margin-right: auto;
display: block;
}
.datum {
background-color: #2e2e2e;
padding: 5px;
font-size: 0.5em;
border-radius: 5px;
display:inline-block;
color: #fff;
}
.versionBadge {
text-align: right;
color: #444;
font-size: 10px;
padding: 3px;
background: #ddd;
border: #444 solid 1px;
border-radius: 5px;
}
.blogEntry {
margin-bottom: 50px;
}