website/_sass/_layout.scss

269 lines
4.1 KiB
SCSS
Raw Normal View History

2019-08-13 15:16:48 +02:00
/**
* Site header
*/
.site-header {
background: #faf9f5;
border-top: 5px solid $title-color;
border-bottom: 1px solid $grey-color-light;
min-height: 56px;
// Positioning context for the mobile navigation icon
position: relative;
}
.site-title {
font-family: "Raleway", sans-serif;
font-size: 32px;
font-weight: 300;
line-height: 56px;
margin-bottom: 0;
&,
&:visited {
color: $title-color;
}
}
/**
* Site footer
*/
.site-footer {
min-height: 300px;
border-top: 1px solid $grey-color-light;
padding: $spacing-unit 0;
text-align: center;
color: #FFF;
line-height: 1.3;
}
.footer-heading {
font-size: 18px;
margin-bottom: $spacing-unit / 2;
}
ul.social-buttons {
margin-bottom:0
}
ul.social-buttons li a {
font-size:20px;
line-height:40px;
display:block;
width:40px;
height:40px;
transition:all .3s;
color: #222;
border-radius:100%;
outline:0;
background-color:#FFF;
}
ul.social-buttons li a:active,ul.social-buttons li a:focus,ul.social-buttons li a:hover {
background-color:#4087c7
}
/**
* Page content
*/
.page-content {
padding: $spacing-unit 0;
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
}
.page-heading {
font-size: 20px;
}
.post-list {
margin-left: 0;
list-style: none;
}
.post-meta {
color: $grey-color;
}
.post-link {
display: block;
font-family: "Raleway", sans-serif;
@include media-query($on-palm) {
font-size: 1.1em;
}
}
/**
* Posts
*/
.post-header {
margin-bottom: $spacing-unit;
}
.post-title {
color: $grey-color;
font-family: "Raleway", sans-serif;
font-size: 42px;
letter-spacing: -1px;
line-height: 1;
@include media-query($on-laptop) {
font-size: 36px;
}
}
.post-content {
margin-bottom: $spacing-unit;
h2 {
font-size: 32px;
@include media-query($on-laptop) {
font-size: 28px;
}
}
h3 {
font-size: 26px;
@include media-query($on-laptop) {
font-size: 22px;
}
}
h4 {
font-size: 20px;
@include media-query($on-laptop) {
font-size: 18px;
}
}
}
#post-nav {
display: block;
.next,
.previous {
float: left;
margin: 1rem 0;
width: 50%;
span:before,
span:after {
border: solid transparent 4px;
content: "";
display: inline-block;
height: 0;
margin: 0 0.5rem;
top: 0.8em;
width: 0;
}
}
.previous {
span:before {
border-left: 0;
border-right-color: $grey-color;
}
}
.next {
text-align: right;
span:after {
border-left-color: $grey-color;
border-right: 0;
}
}
@include media-query($on-palm) {
padding: initial;
.next,
.previous {
text-align: center;
width: 100%;
}
}
span {
color: $brand-color;
display: block;
font-family: Montserrat;
font-size: 0.75rem;
font-style: normal;
letter-spacing: 1px;
text-transform: uppercase;
}
a {
color: $grey-color;
font-style: italic;
}
}
/**
* Index
*/
.home {
h1 {
color: $brand-color;
display: block;
font-family: "Raleway", sans-serif;
font-size: 44px;
text-align: center;
@include media-query($on-laptop) {
font-size: 36px;
}
}
}
/**
* Error pages
*/
.error {
text-align: center;
}
/**
* Bootstrap Override
*/
@media (min-width:1200px) {
.container {
max-width:960px;
}
}
.card {
line-height: 1.5;
}
.card td.img {
width: 220px;
background-size: cover;
background-repeat: no-repeat;
}
.btn-secondary {
background-color:#009fe3;
border-color:#009fe3;
}
.btn-secondary:hover {
background-color:#007aae;
border-color:#007aae;
}