website/_site/css/main.css

607 lines
12 KiB
CSS
Raw Normal View History

2019-08-14 16:22:22 +02:00
@font-face {
font-family: libretto-icons;
src: asset_url(libretto-icons/libretto-icons.eot);
/* IE9 Compat Modes */
src: asset_url(libretto-icons/libretto-icons.woff) format("woff"), asset_url(libretto-icons/libretto-icons.ttf) format("truetype"), asset_url(libretto-icons/libretto-icons.svg#font_name) format("svg");
/* Legacy iOS */ }
/**
* Reset some basic elements
*/
body, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, hr,
dl, dd, ol, ul, figure {
margin: 0;
padding: 0; }
/**
* Basic styling
*/
body {
font: 400 17px/2 "Raleway", sans-serif, Baskerville, "Book Antiqua", Georgia, Times, serif;
color: #363431;
background-color: #f2f1ed;
-webkit-text-size-adjust: 100%;
-webkit-font-feature-settings: "kern" 1;
-moz-font-feature-settings: "kern" 1;
-o-font-feature-settings: "kern" 1;
font-feature-settings: "kern" 1;
font-kerning: normal; }
/**
* Set `margin-bottom` to maintain vertical rhythm
*/
h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
ul, ol, dl, figure,
.highlight {
margin-bottom: 15px; }
/**
* Articles
*/
article {
background: #faf9f5;
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.05);
margin-bottom: 30px;
padding: 3em 3em 1em; }
@media screen and (max-width: 600px) {
article {
padding: 1em 1em 0.3em; } }
@media screen and (max-width: 600px) {
article > .entry-content {
font-size: 80%; } }
article > .entry-content:first-letter {
color: #b7b1a9;
display: inline-block;
float: left;
font-family: "Raleway", sans-serif;
font-size: 121px;
font-style: normal;
font-weight: 700;
line-height: 70px;
margin: 6px 10px 0 -5px; }
@media screen and (max-width: 600px) {
article > .entry-content:first-letter {
font-size: 70px;
line-height: 30px; } }
article > .entry-content:first-line {
color: #787065;
font-family: "Raleway", sans-serif;
font-size: 1em;
font-style: normal !important;
font-weight: bold;
letter-spacing: 2px; }
.post-header {
margin-bottom: 2rem;
text-align: center; }
.post-header:before {
background: #faf9f5;
border: 1px solid #d9d6d0;
border-radius: 50%;
box-shadow: 0 0 0 4px #faf9f5;
color: #a09a92;
display: inline-block;
font-family: libretto-icons;
font-size: 21px;
line-height: 21px;
margin: 1rem auto 2rem;
text-shadow: none;
padding: 4px 10px 10px 10px; }
.post-header > div {
color: #a09a92;
font-size: 17px;
font-style: italic; }
@media screen and (max-width: 600px) {
.post-header > div {
font-size: 14.875px; } }
.post-header > div:before {
color: #d9d6d0;
display: inline-block;
font-family: libretto-icons;
font-size: 24px;
margin: 0 0.25rem;
text-shadow: none;
vertical-align: -6px; }
.post-header > div:after {
color: #d9d6d0;
display: inline-block;
font-family: libretto-icons;
font-size: 24px;
margin: 0 0.25rem;
text-shadow: none;
vertical-align: -6px; }
.post-list .post-header:before {
background: #eae9e6;
border-color: #faf9f5;
box-shadow: 0 0 0 4px #eae9e6; }
/**
* Images
*/
img {
max-width: 100%;
vertical-align: middle; }
.cover {
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
min-height: 100vh; }
/**
* Figures
*/
figure {
background: #fff;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.025);
padding: 0.5em; }
figure > img {
display: block; }
figcaption {
color: #a09a92;
font-size: 16px;
font-style: italic;
line-height: 1.2;
margin: 1em 0.5em 0.5em;
text-align: center; }
/**
* Lists
*/
ul, ol {
margin-left: 30px; }
li > ul,
li > ol {
margin-bottom: 0; }
/**
* Headings
*/
h1, h2, h3, h4, h5, h6 {
line-height: initial;
font-weight: 400; }
h5 {
font-size: 1.25rem; }
/**
* Links
*/
a {
color: #f39200;
text-decoration: none; }
a:hover {
color: #da8300;
text-decoration: none; }
/**
* Blockquotes
*/
blockquote {
color: #a09a92;
border-left: 4px solid #e7e6e4;
padding-left: 15px;
font-size: 18px;
letter-spacing: -1px;
font-style: italic; }
blockquote > :last-child {
margin-bottom: 0; }
/**
* Code formatting
*/
pre,
code {
font-size: 15px;
border: 1px solid #e7e6e4;
border-radius: 3px;
background-color: #eef; }
code {
padding: 1px 5px; }
pre {
padding: 8px 12px;
overflow-x: auto; }
pre > code {
border: 0;
padding-right: 0;
padding-left: 0; }
/**
* Clearfix
*/
/**
* Icons
*/
.icon > svg {
display: inline-block;
width: 16px;
height: 16px;
vertical-align: middle; }
.icon > svg path {
fill: #a09a92; }
/**
* Site header
*/
.site-header {
background: #faf9f5;
border-top: 5px solid #009fe3;
border-bottom: 1px solid #e7e6e4;
min-height: 56px;
position: relative; }
.site-title {
font-family: "Raleway", sans-serif;
font-size: 32px;
font-weight: 300;
line-height: 40px;
margin-bottom: 0; }
.site-title, .site-title:visited {
color: #009fe3; }
/**
* Site footer
*/
.site-footer {
min-height: 300px;
border-top: 1px solid #e7e6e4;
padding: 30px 0;
text-align: center;
color: #FFF;
line-height: 1.3; }
.footer-heading {
font-size: 18px;
margin-bottom: 15px; }
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
*/
aside.aside {
padding: 100px 0; }
.page-content {
padding: 30px 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: #a09a92; }
.post-link {
display: block;
font-family: "Raleway", sans-serif; }
@media screen and (max-width: 600px) {
.post-link {
font-size: 1.1em; } }
/**
* Posts
*/
.post-header {
margin-bottom: 30px; }
.post-title {
color: #a09a92;
font-family: "Raleway", sans-serif;
font-size: 42px;
letter-spacing: -1px;
line-height: 1; }
@media screen and (max-width: 800px) {
.post-title {
font-size: 36px; } }
.post-content {
margin-bottom: 30px; }
.post-content h2 {
font-size: 32px; }
@media screen and (max-width: 800px) {
.post-content h2 {
font-size: 28px; } }
.post-content h3 {
font-size: 26px; }
@media screen and (max-width: 800px) {
.post-content h3 {
font-size: 22px; } }
.post-content h4 {
font-size: 20px; }
@media screen and (max-width: 800px) {
.post-content h4 {
font-size: 18px; } }
#post-nav {
display: block; }
#post-nav .next,
#post-nav .previous {
float: left;
margin: 1rem 0;
width: 50%; }
#post-nav .next span:before,
#post-nav .next span:after,
#post-nav .previous span:before,
#post-nav .previous span:after {
border: solid transparent 4px;
content: "";
display: inline-block;
height: 0;
margin: 0 0.5rem;
top: 0.8em;
width: 0; }
#post-nav .previous span:before {
border-left: 0;
border-right-color: #a09a92; }
#post-nav .next {
text-align: right; }
#post-nav .next span:after {
border-left-color: #a09a92;
border-right: 0; }
@media screen and (max-width: 600px) {
#post-nav {
padding: initial; }
#post-nav .next,
#post-nav .previous {
text-align: center;
width: 100%; } }
#post-nav span {
color: #f39200;
display: block;
font-family: Montserrat;
font-size: 0.75rem;
font-style: normal;
letter-spacing: 1px;
text-transform: uppercase; }
#post-nav a {
color: #a09a92;
font-style: italic; }
/**
* Index
*/
.home h1 {
color: #f39200;
display: block;
font-family: "Raleway", sans-serif;
font-size: 44px;
text-align: center; }
@media screen and (max-width: 800px) {
.home h1 {
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; }
.btn-outline-primary {
border-color: #f39200;
color: #f39200; }
.btn-outline-primary:hover {
background-color: #f39200;
border-color: #f39200; }
.btn-primary {
background-color: #f39200;
border-color: #f39200; }
.btn-primary:hover {
background-color: #f37700;
border-color: #f37700; }
.bg-primary {
background-color: #f39200 !important; }
.text-primary {
color: #f39200; }
@media (max-width: 1199.98px) {
.card-columns {
column-count: 2; } }
@media (max-width: 991.98px) {
.card-columns {
column-count: 1; } }
.min-height-100 {
min-height: 100vh; }
.content-bottom {
background-color: rgba(0, 0, 0, 0.65);
bottom: 0;
width: 100%;
padding: 100px 15px 100px; }
/**
* Syntax highlighting styles
*/
.highlight {
background: #fff; }
.highlighter-rouge .highlight {
background: #eef; }
.highlight .c {
color: #998;
font-style: italic; }
.highlight .err {
color: #a61717;
background-color: #e3d2d2; }
.highlight .k {
font-weight: bold; }
.highlight .o {
font-weight: bold; }
.highlight .cm {
color: #998;
font-style: italic; }
.highlight .cp {
color: #999;
font-weight: bold; }
.highlight .c1 {
color: #998;
font-style: italic; }
.highlight .cs {
color: #999;
font-weight: bold;
font-style: italic; }
.highlight .gd {
color: #000;
background-color: #fdd; }
.highlight .gd .x {
color: #000;
background-color: #faa; }
.highlight .ge {
font-style: italic; }
.highlight .gr {
color: #a00; }
.highlight .gh {
color: #999; }
.highlight .gi {
color: #000;
background-color: #dfd; }
.highlight .gi .x {
color: #000;
background-color: #afa; }
.highlight .go {
color: #888; }
.highlight .gp {
color: #555; }
.highlight .gs {
font-weight: bold; }
.highlight .gu {
color: #aaa; }
.highlight .gt {
color: #a00; }
.highlight .kc {
font-weight: bold; }
.highlight .kd {
font-weight: bold; }
.highlight .kp {
font-weight: bold; }
.highlight .kr {
font-weight: bold; }
.highlight .kt {
color: #458;
font-weight: bold; }
.highlight .m {
color: #099; }
.highlight .s {
color: #d14; }
.highlight .na {
color: #008080; }
.highlight .nb {
color: #0086B3; }
.highlight .nc {
color: #458;
font-weight: bold; }
.highlight .no {
color: #008080; }
.highlight .ni {
color: #800080; }
.highlight .ne {
color: #900;
font-weight: bold; }
.highlight .nf {
color: #900;
font-weight: bold; }
.highlight .nn {
color: #555; }
.highlight .nt {
color: #000080; }
.highlight .nv {
color: #008080; }
.highlight .ow {
font-weight: bold; }
.highlight .w {
color: #bbb; }
.highlight .mf {
color: #099; }
.highlight .mh {
color: #099; }
.highlight .mi {
color: #099; }
.highlight .mo {
color: #099; }
.highlight .sb {
color: #d14; }
.highlight .sc {
color: #d14; }
.highlight .sd {
color: #d14; }
.highlight .s2 {
color: #d14; }
.highlight .se {
color: #d14; }
.highlight .sh {
color: #d14; }
.highlight .si {
color: #d14; }
.highlight .sx {
color: #d14; }
.highlight .sr {
color: #009926; }
.highlight .s1 {
color: #d14; }
.highlight .ss {
color: #990073; }
.highlight .bp {
color: #999; }
.highlight .vc {
color: #008080; }
.highlight .vg {
color: #008080; }
.highlight .vi {
color: #008080; }
.highlight .il {
color: #099; }