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

327 lines
5.3 KiB
SCSS

/* STYLE for jannikbeyerstedt.de
* generic styles
*
* main font: Alegreya Sans
* headings: Crimson Text
* Logo: Boon
*/
@import "custom";
@import "variables";
@import "mixins";
@import "mainvariables";
body {
margin: 0;
font-family: 'Alegreya Sans', "Verdana", "Arial", sans-serif;
min-width: 300px;
}
h1, h2, h3, h4 {
margin-bottom: 18px;
margin-top: 1em;
font-family: 'Crimson Text', serif;
}
main h1:first-child {
margin-top: 0.4em;
}
h5 {
margin-bottom: 8px;
}
h6 {
margin-bottom: 5px;
}
p {
margin-top: 0;
line-height: 1.5em;
}
a {
color: $link_color;
&:active, &:hover, &:focus {
color: $link_active;
}
}
main p {
a {
text-decoration: underline;
}
a:visited {
color: $link_visited;
}
}
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;
code {
margin: 0;
padding: 0;
white-space: pre;
border: none;
background: transparent;
}
}
main div.container {
margin-top: 10px;
@include media-breakpoint-up(lg) {
max-width: 940px;
}
}
$header_logoSize: 75px;
header {
img {
width: $header_logoSize;
height: $header_logoSize;
margin: 4px 0;
float: left;
}
}
nav {
box-sizing: border-box;
ul.nav {
margin: 0; // reset
padding-left: 0; // reset
a {
text-decoration: none;
color: inherit;
}
li {
list-style-type: none; // reset
}
a:hover, a:focus {
text-decoration: none; // reset
}
}
}
@include media-breakpoint-up(sm) {
nav {
float: right;
ul.nav {
a {
float: left;
text-align: center;
font-size: 18px;
font-weight: 300;
margin: 30px 9px 1px;
}
a:hover, a:focus, a.active {
border-bottom: 1px solid $color_accent;
}
a.section {
font-weight: 500;
}
}
}
}
@include media-breakpoint-down(xs) {
nav {
button.navbar-toggler {
float: right;
margin-top: 24px;
font-family: inherit;
font-weight: 300;
}
ul.mobileNav {
color: $color_font_inv;
background-color: $color_bg_inv;
padding: 1rem 1rem;
a {
font-size: 20px;
font-weight: 300;
}
a.active {
color: $color_accent;
font-weight: 700;
}
}
}
// ---- from boostrap ----
// @requires animation.scss and collapse.js, util.js
.navbar-toggler {
padding: .5rem .75rem;
font-size: $font-size-lg;
line-height: 1;
background: none;
border: $border-width solid transparent;
@include border-radius($btn-border-radius);
@include hover-focus {
text-decoration: none;
outline: none;
}
}
}
$footer_logoHeight: 1.4rem;
footer {
margin-top: 20px;
padding-top: 20px;
padding-bottom: 20px;
background-color: $footer_color_bg;
color: $color_font;
p {
margin-bottom: 0;
}
@media (max-width: $col_xxs_bp) {
text-align: center;
p {
margin-bottom: 10px;
}
}
i.fa {
color: $color_font;
font-size: $footer_logoHeight;
padding-right: 0.2em;
}
a > svg {
height: $footer_logoHeight;
width: $footer_logoHeight;
position: relative; top: 0.18rem;
image {
height: $footer_logoHeight;
width: $footer_logoHeight;
}
}
img {
height: $footer_logoHeight;
padding-right: 0.2em;
}
}
/* make footer sticky */
$footer_height: 85px;
$footer_height_xs: 175px;
$footer_margin: 30px;
html {
position: relative;
min-height: 100%;
}
@include media-breakpoint-up(sm) {
body {
/* Margin bottom by footer height */
margin-bottom: $footer_height + $footer_margin;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: $footer_height;
}
}
@include media-breakpoint-down(xs) {
body {
/* Margin bottom by footer height */
margin-bottom: $footer_height_xs + $footer_margin;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: $footer_height_xs;
}
}
/*
* HELPERS
*/
.right {
text-align: right;
}
.center {
text-align: center;
}
@media (max-width: $col_xxs_bp) {
.col-xxs-12.right, .col-xxs-12.center {
text-align: inherit;
}
}
/* to break down col-xs */
.visible-xxs {
display: none!important;
}
@media (max-width: $col_xxs_bp) {
.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;
}