Website_Jastrow.me/src/scss/main.scss

/*----------------------------------------*\
    Schwerkraftlabor.de | @Gehirnfussel
\*----------------------------------------*/

/*      Imports
--------------------------*/

@import 'defaults';
@import 'normalize';
@import 'mixins';
@import 'icomoon';

/*  Content
--------------------------*/

$linkcolor: #5c1075;
$bodycolor: #1e1e1e;
$font_body: Hind, sans-serif;
$font_h: Merriweather Sans, sans-serif;

body {
    color: $bodycolor;
    font-size: 13pt;
    @include font-smoothing(on);
    margin: 0 auto;
    font-family: $font_body;
}
h1, h2, h3 {
    font-family: $font_h;
    text-rendering: optimizeLegibility;
    font-weight: 700;
    line-height: 1.2;
}
h1 {
    font-size: 2em;
    word-break: break-all;
}
h2 {
    font-size: 1.5em;
}
p {
    line-height: 1.7;
    word-break: break-word;
    margin: 1em 0;
}
a {
    text-decoration: none;
}
blockquote {
    font-size: 13pt;
    line-height: 1.7em;
    margin: 0 0 0 1.3em;
    width: 590px;
    padding: 0.5em 0.7em 0.5em 0.7em;
    border: 1px solid #cbb7d1;
    border-left: 5px #cbb7d1 solid;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    background-image: linear-gradient(to bottom, #f3f3f3 0%, #fff 10%);
}
ul {
    li {
        margin: 0.3em 0em 0.3em 0.5em;
        list-style-position: inside;
        list-style-type: square;
        font-size: 1em;

        p {
            padding-left: 1em;
        }
    }
}

/*  Header
--------------------------*/

header {
    text-align: center;
}
header img {
    margin: 0.5em;
    height: 230px;
}
header p {
    font-size: 14pt;
    font-weight: 500;
}
.icon-lab {
    color: #44840b;
}

.contact {
    padding: 0;
    font-size: 16pt;
}
.contact > li {
    display: inline-block;
    list-style: none;
    margin: 0 0.4em;
    padding: 0;
}
.contact > li a {
    color: lighten(#7d6b85, 20%);
    transition: 0.35s ease;
}
.contact > li a:hover {
    color: $linkcolor;
}

hr {
    max-width: 626px;
    border: none;
    border-bottom: 1px solid #e0e0e0;
    margin: 2em auto;
}

/*  Content
--------------------------*/

article {
    margin: 0 auto;
    width: 626px;
}
article .meta {
    color: #444;
    font-size: 0.9em;
}
article .end {
    font-size: 1em;
    color: #43194f;
}
article h1 {
    margin: 0;
    font-size: 1.5em;
    margin-bottom: 0.3em;
}
article img {
    border-radius: 6px;
}
article p:first-of-type {
    margin-top: 0.3em;
}
article p:first-of-type::first-letter {
    font-size: 1.35em;
    text-transform: uppercase;
}
article a {
    color: $linkcolor;
    text-decoration: none;
    font-weight: 500;
    padding: 0;
}
article a:focus, article a:hover, article a:active {
    text-decoration: none;
    background-image: -webkit-gradient(linear,  left top,  left bottom,  color-stop(50%,  #fff),  color-stop(50%,  #666));
    background-image: -webkit-linear-gradient(top,  #fff 50%,  #666 50%);
    background-image: linear-gradient(to bottom,  #fff 50%,  #666 50%);
    background-repeat: repeat-x;
    -webkit-background-size: 2px 2px;
    background-size: 2px 2px;
    background-position: 0 1.1em;
}
article a:active {
    position: relative;
    top: 1px;
}

article a[href^="http"]:not([href*="level42.us"]):not([href*="youtube.com"])::after {
    color: #444;
    font-family: icomoon, sans-serif;
    font-weight: 400;
    content: '\e602';
    margin: 0 0.05em 0 0.25em;
}
article a[href$="pdf"]::after {
    font-weight: 400;
    font-family: icomoon, sans-serif;
    content: '\e60d';
    margin: 0 0.05em 0 0.25em;
}
article a[href$="zip"]::after, article a[href$="rar"]::after, article a[href$="gz"]::after, article a[href$="7z"]::after {
    font-weight: 400;
    font-family: icomoon, sans-serif;
    content: '\e60e';
    margin: 0 0.05em 0 0.25em;
}
article a[href^="mailto:"]::after {
    font-weight: 400;
    font-family: icomoon, sans-serif;
    content: '\e603';
    margin: 0 0.05em 0 0.25em;
}

.video {
    padding-top: 25px;
}
.video + a[href*="youtube.com"] {
    color: #a51515;
    font-size: 12pt;
    font-weight: 400;
    line-height: 2;
}
.video + a[href*="youtube.com"]::before {
    font-family: icomoon, sans-serif;
    content: "\e600";
    margin-right: 0.25em;
}



/*  Footer
--------------------------*/




/*  Responsive Stuff & Media Queries
--------------------------*/

@media screen and (max-width: 650px) {
    html {
        margin: 0;
    }
    hr {
        margin: 1em auto;
    }
    article, article blockquote, article img {
        width: 100%;
    }
    article img {
        border-radius: 0;
    }
    article p, article h1, article .meta, article a[href*="youtube.com"] {
        margin-left: 8px;
        margin-right: 8px;
    }
    article blockquote {
        width: 97%;
        margin: 0.5em 0.5em 0.5em 0;
        padding: 0.5em 0.7em 0.5em 0.7em;
        border: 1px solid #cbb7d1;
        border-left: 5px #cbb7d1 solid;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
        background-image: linear-gradient(to bottom, #f3f3f3 0%, #fff 10%);
    }
}

@media print {
    a[href]::after {
        content: " (" attr(href) ")";
    }
}