1
0
Fork 0
web-jbeyerstedt/assets/css/main.css

288 lines
5.6 KiB
CSS

/* STYLE for jannikbeyerstedt.de
* generic styles
*
* main font: Alegreya Sans
* headings: Crimson Text
* Logo: Boon
*/
body {
margin: 0;
font-family: 'Alegreya Sans', "Verdana", "Arial", sans-serif;
min-width: 300px;
overflow-x: hidden; }
div.site-wrap {
background-color: #fff; }
h1, h2, h3, h4 {
margin-bottom: 18px;
margin-top: 1em;
font-family: 'Crimson Text', serif; }
main h1:first-child, main div.container:first-child {
margin-top: 0; }
h5 {
margin-bottom: 8px; }
h6 {
margin-bottom: 5px; }
p {
margin-top: 0;
line-height: 1.5em; }
a {
color: #2dac01; }
a:active, a:hover, a:focus {
color: #207901; }
main p a {
text-decoration: underline; }
main p a:visited {
color: #999999; }
blockquote {
font-size: 1.4em;
border-left: 4px solid #dddddd;
padding: 0 15px;
color: #777777; }
blockquote > :first-child {
margin-top: 0; }
blockquote > :last-child {
margin-bottom: 0; }
code {
padding: 0 5px;
white-space: nowrap;
border: 1px solid #eaeaea;
background-color: #f8f8f8;
border-radius: 3px; }
pre {
background-color: #f8f8f8;
border: 1px solid #cccccc;
font-size: 14px;
line-height: 19px;
overflow: auto;
padding: 6px 10px;
border-radius: 3px; }
pre code {
margin: 0;
padding: 0;
white-space: pre;
border: none;
background: transparent; }
main div.container {
margin-top: 10px; }
@media (min-width: 992px) {
main div.container {
max-width: 940px; } }
header img {
width: 75px;
height: 75px;
margin: 4px 0;
float: left; }
.nav-trigger {
display: none; }
nav {
box-sizing: border-box; }
nav ul.nav {
margin: 0;
padding-left: 0; }
nav ul.nav a {
text-decoration: none;
color: inherit; }
nav ul.nav li {
list-style-type: none; }
nav ul.nav a:hover, nav ul.nav a:focus {
text-decoration: none; }
@media (min-width: 576px) {
nav {
float: right; }
nav ul.nav a {
float: left;
text-align: center;
font-size: 18px;
font-weight: 300;
margin: 30px 7px 1px; }
nav ul.nav a:hover, nav ul.nav a:focus, nav ul.nav a.active {
border-bottom: 1px solid #2dac01; }
nav ul.nav a.section {
font-weight: 500; } }
@media (min-width: 768px) {
nav ul.nav a {
margin: 30px 9px 1px; } }
nav.mobile {
width: 200px;
height: 100%;
position: fixed;
right: -200px;
z-index: 0; }
.site-wrap {
position: relative;
left: 0;
z-index: 1; }
@media (max-width: 575px) {
label[for="nav-trigger"] {
position: absolute;
right: 15px;
top: 24px;
z-index: 2;
padding: 0.5rem 0.75rem;
font-size: 1.25rem;
line-height: 1;
font-family: inherit;
font-weight: 300;
color: #373a3c;
background-color: #fff; }
nav.mobile {
background-color: #424242; }
nav.mobile ul.mobileNav {
color: #fff;
padding: 1rem 1rem;
padding-top: 28px; }
nav.mobile ul.mobileNav li {
margin-bottom: 0.4em; }
nav.mobile ul.mobileNav li a {
font-size: 20px;
font-weight: 300; }
nav.mobile ul.mobileNav li a.active {
color: #2dac01;
font-weight: 700; }
nav.mobile ul.mobileNav ul > li {
margin-bottom: 0.2em; }
.nav-trigger:checked + label {
right: 215px; }
.nav-trigger:checked ~ .site-wrap {
left: -200px;
box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.5); }
.nav-trigger:checked ~ nav.mobile {
right: 0; }
.nav-trigger + label, nav.mobile {
transition: right 0.2s;
-webkit-transition: right 0.2s;
-moz-transition: right 0.2s;
-o-transition: right 0.2s; }
.site-wrap {
transition: left 0.2s;
-webkit-transition: left 0.2s;
-moz-transition: left 0.2s;
-o-transition: left 0.2s; } }
footer {
margin-top: 25px;
padding-top: 15px;
padding-bottom: 10px;
height: 70px;
min-width: inherit;
background-color: #bebebe;
color: #000; }
footer p {
margin-bottom: 0; }
@media (max-width: 575px) {
footer {
text-align: center; }
footer p {
margin-bottom: 10px; } }
footer i.fa {
color: #000;
font-size: 1.4rem;
padding-right: 0.2em; }
footer a > svg {
height: 1.4rem;
width: 1.4rem;
position: relative;
top: 0.18rem; }
footer a > svg image {
height: 1.4rem;
width: 1.4rem; }
footer img {
height: 1.4rem;
padding-right: 0.2em; }
@media (max-width: 575px) {
footer {
height: 175px; } }
/* space footer at bottom of page */
@media (min-width: 576px) {
main {
min-height: calc(100vh - 83px - 70px - 25px); } }
@media (max-width: 575px) {
main {
min-height: calc(100vh - 83px - 25px); } }
/*
* HELPERS
*/
.right {
text-align: right; }
.center {
text-align: center; }
@media (max-width: 575px) {
.col-xxs-12.right, .col-xxs-12.center {
text-align: inherit; } }
/* to break down col-xs */
.visible-xxs {
display: none !important; }
@media (max-width: 575px) {
.col-xxs-12 {
float: none;
width: 100%;
position: relative;
left: 0;
right: 0;
min-height: 1px;
padding-right: 15px;
padding-left: 15px; }
.hidden-xxs {
display: none !important; }
.visible-xxs {
display: block !important; } }
/*
* KIRBYTAGS
*/
.html5player {
width: 100%;
height: auto;
background-color: black; }
div.video-container {
position: relative;
width: 100%;
height: auto;
max-width: 100%;
padding-bottom: 53%;
padding-top: 30px;
overflow: hidden; }
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.columns ul {
padding-left: 25px; }
/*# sourceMappingURL=main.css.map */