@import "base.css";

article h1 { font-size: 24px; }

h1, h2 {
    border-bottom: 1px dotted #d0d0d0;
}

h2 {
    margin-top: 0;
    padding-top: 1em;
}

#projekt li:before {
    font-size: small;
    font-family: monospace;
    opacity: 0.5;
    float: right;
    margin: 4px 0 0 4px;
}

#projekt li.swedish:before {
    content: "sv-SE";
}

#projekt li.english:before {
    content: "en-US";
}

@media screen and (max-width: 680px) {
    #projekt li:before { display: none; }
}

/** Centering */

.outer {
    display: table;
    position: absolute;
    width: 100%;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.inner {
    margin-left: auto;
    margin-right: auto; 
    max-width: 700px;
    padding: 2.5em;
}
.inner > article:first-child > :first-child { margin-top: 0; }
.inner > article:last-child > :last-child { margin-bottom: 0; }
.inner > article:nth-child(even) {
    text-align: right;
    float: right;
}
.inner > article:nth-child(even) li {
    float: right;
    clear: right;
}
.inner > article {
    width: 60%;
    clear: both;
}

/*** Two-column layouts */

.inner > .two-col-article {
    width: 100%;
}
.two-col {
    display: flex;
    flex-flow: row wrap;
    align-items: baseline;
    --spacing: 0.5em;
    margin: 0 calc(var(--spacing) * -2);
}
.two-col > * {
    flex-basis: 50%;
    padding: 0 calc(var(--spacing) * 2);
}

@media screen and (max-width: 600px) {
    .inner > article {
        width: 100%;
    }
    .two-col > * {
        flex-basis: 100%;
    }
}

/** Navigation */

#nav {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -310px;
    z-index: 1;
    padding-top: 1em;
    height: 4em;
    text-transform: lowercase;
}
#nav > a {
    margin-right: 1em;
}

/** State */

/*** Checkbox and label */

label[for="lang-toggle"] {
    display: block;
    text-align: right;
    background: #f0f0f0;
}
label[for="lang-toggle"] span {
    height: 3.8em;
    padding: 1em 1em 0 1.2em;
    display: inline-block;
    font-style: italic;
    font-family: Georgia, serif;
    background: #555;
    color: white;
}
label[for="lang-toggle"] span:hover {
    background: #000;
}

input#lang-toggle {
    position: absolute;
    visibility: hidden;
}

/*** State: Swedish */

input#lang-toggle:not(:checked) ~ * [lang="en"] {
    display: none;
}
input#lang-toggle:not(:checked) ~ label[for="lang-toggle"] span:after {
    content: "this page in english";
}
input#lang-toggle:not(:checked) ~ main #projekt li.swedish:before {
    display: none;
}

/*** State: English */

input#lang-toggle:checked ~ * [lang="sv"] {
    display: none;
}
input#lang-toggle:checked ~ label[for="lang-toggle"] span:after {
    content: "denna sida på svenska";
}
input#lang-toggle:checked ~ label[for="lang-toggle"] {
    background: #111;
}
input#lang-toggle:checked ~ * a {
    color: #868FC3;
    text-decoration-color: #777;
}
input#lang-toggle:checked ~ main {
    background: #222;
    color: #f0f0f0;
}
input#lang-toggle:checked ~ main * {
    border-color: #444;
}
input#lang-toggle:checked ~ main code {
    background: #111;
}
input#lang-toggle:checked ~ main .small-note {
    background: hsl(16, 46%, 36%);
}
input#lang-toggle:checked ~ main #projekt li.english:before {
    display: none;
}

@media screen and (max-width: 710px) {
    #nav {
        left: initial;
        margin-left: 0;
        width: 100%;
        padding-left: 40px;
        background: #f0f0f0;
    }
    input#lang-toggle:checked ~ #nav {
        background: #111;
    }
    label[for="lang-toggle"] {
        text-align: left;
    }
    label[for="lang-toggle"] span {
        padding-left: 40px;
        margin-top: 4em;
        display: block;
    }
}