nindwen.blue

my home page
git clone https://git.nindwen.blue/nindwen.blue.git
README | Files | Log | Refs

notes.scss (3534B)



//line-height: 24pt
$faint: #bbb;
$front: #333333;
$back: #fefefe;
$accent: #66006f;
$font-stack: 'Helvetica', 'Arial', 'sans-serif';

body {
    background: $back;
}

#content, header, footer {
    max-width: 33em;
    margin: auto;
    font-size: 14pt;
    font-family: $font-stack;
    line-height: 1.5em;
    color: $front;
     
    img {
        text-align: center;
        border-radius: 10px;
        box-shadow: 1px 1px 20px $front;
        max-width: 90%;
    }

    figcaption {
        text-align: center;
        font-style: italic;
        color: grey;
        font-size: 80%;
    }

    b {
        color: $accent;
    }

    p {
        line-height: 1.5;
        margin-top: 1.5em;
        margin-bottom: 1.5em;

        a, a:hover, a:visited {
            color: $accent;
        }
    }

    @media only screen and (max-width: 640px) {
        padding-left: 10px;
        padding-right: 10px;
        font-size: 12pt;
    }
}

header {
    margin-bottom: 60px;
    margin-top: 10px;
    color: $faint;

    a, a:visited {
        text-decoration: none;
        color: $front;
    }
    a.breadcrumb {
        color: $accent;
    }

    .date {
        float: right;
        @media only screen and (max-width: 640px) {
            float: none;
            display: block;
        }
    }
    @media only screen and (max-width: 640px) {
        margin-bottom: 20px;
        margin-top: 0px;
    }
}

footer {
    border-top: 1px solid $faint;
    text-align: center;
    color: $faint;
    font-size: 90%;

    a, a:visited {
        color: $faint;
    }

}

h1 {
    border-bottom: 1px solid $faint;
    font-size: 150%;
    line-height: 1.3333;
    margin-top: 1.3333;
    margin-bottom: 1.3333;
}

h2, h3, h4, h5 {
    font-size: 120%;
    line-height: 1.66666;
    margin-top: 1.66666;
    margin-bottom: 1.66666;
}

h1:before {
    content: '# ';
    color: $accent;
}

h2:before {
    content: '## ';
    color: $accent;
}

h3:before {
    content: '### ';
    color: $faint;
}

div.sourceCode {
    background: $front;
    color: $back;
    border-radius: 5px;
    padding: 10px;
    margin: 10px;
    font-size: 80%;
    box-shadow: 1px 1px 10px $front;

    a, a:visited {
    }
}

blockquote {
    font-style: italic;
    border-left: solid $accent 4px;
    padding-left: 20px;
    color: grey;

    cite {
        display: block;
        padding-left: 1em;
        font-style: italic;
        font-size: 80%;
    }
}

ul {
    padding: 50px;
    border: 1px solid $accent;
    border-radius: 10px;

    a {
        text-decoration: none;
    }

    li {
        list-style-type: square;
        margin-bottom: 5px;
    }

    .date {
        color: $faint;
        float: right;

        @media only screen and (max-width: 640px) {
            font-size:90%;
            display: block;
            float: none;
            margin-bottom: 20px;
        }
    }
    .title {
        padding-right: 30px;
        color: $front;
        text-decoration: underline;
        text-decoration-color: $accent;
    }

    @media only screen and (max-width: 640px) {
        padding: 20px;
    }
}

hr {
    border: 0; 
    height: 2px; 
    background-image: linear-gradient(to left, $back, $accent, $back);
    background-image: -webkit-linear-gradient(to left, $back, $accent, $back);
    background-image: -moz-linear-gradient(to left, $back, $accent, $back);
    background-image: -ms-linear-gradient(to left, $back, $accent, $back);
    background-image: -o-linear-gradient(to left, $back, $accent, $back); 
}