// Fonts

@font-face {
    font-family: 'aileronblack';
    src: url('./fonts/Aileron-Black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

// sqrt(phi)
$ratio: 1.27201964951;

// Font sizes
$base-font-size: 0.9rem;
$small-font-size: $base-font-size / $ratio;
$h3-font-size: $base-font-size * $ratio;
$h2-font-size: $h3-font-size * $ratio;
$h1-font-size: $h2-font-size * $ratio;
$header-font-size: $h1-font-size * $ratio;

$content-padding: 1rem;


$c0: #ffff;
$c1: #050505;
$c2: #f5f5f5;
$c3: #e77a14;
$c4: #4535d4;
$c5: #666666;

// Light theme
$background-color: $c0;
$text-color: $c1;
$light-text-color: $c5;
$border-color: $c1;
$code-color: $c1;
$pre-color: $c1;
$pre-bg-color: $c2;
$accent-color: $c4;
$accent-bg-color: $c2;


$header-font: "aileronblack", sans-serif;
$text-font: -apple-system, BlinkMacSystemFont, Roboto, Noto, Arial, Helvetica, sans-serif;
$mono-font: Consolas, Menlo, Monaco, monospace;

@media (prefers-color-scheme: dark) {
    // TODO: add variables for dark theme

    img,
    video {
        opacity: 0.9;
    }
}

html {
    font-family: $text-font;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: $text-color;
    background: $background-color;
    font-size: 1.15rem;
    line-height: 1.5;
    display: grid;
    grid-template-columns: min(45rem, 90%) 1fr;
}

body>* {
    grid-column: 1;
}

.content {
    padding-top: $content-padding;
    margin-left: 2rem;
}

// Header

body > #preamble {
    grid-column: 1 / -1;
}

body > #preamble > header {
    border-bottom: 1px solid $border-color;
    text-align: left;
    padding: 0.5rem 0.5rem 0.5rem 2rem;
    width: 100%;
    box-sizing: border-box;

    a {
        text-decoration: none;
        color: $text-color;
    }

    h1 {
        font-size: $header-font-size;
    }
}

// Footer

body > #postamble > footer {
    font-size: $base-font-size;
    margin-top: 4rem;
    padding: 0.5rem 0rem 0.5rem 0rem;
    margin-left: 2rem;
    color: $light-text-color;
    border-top: 1px solid $border-color;
    display: flex;

    p {
        display: inline;
    }

    .date {
        margin-left: auto;
    }
}


// Typography

h1 {
    font-size: $h1-font-size;
}

h2 {
    font-size: $h2-font-size;
    margin-top: 3rem;
}

h3 {
    font-size: $h3-font-size;
    margin-top: 3rem;
}

h1,
h2,
h3 {
    line-height: 1.1;
}

// Links

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

a:hover {
    text-decoration: none;
}

// Tables

table {
    border-collapse: collapse;
    width: 100%;
    margin: 1.5rem 0;
}

td,
th {
    border: 1px solid $border-color;
    text-align: left;
    padding: 0.5rem;
}

th {
    background: $accent-bg-color;
    font-weight: bold;
}

tr:nth-child(even) {
    background: $accent-bg-color;
}

table caption {
    font-weight: bold;
    margin-bottom: 0.5rem;
}

// Content

.content img,
.content video {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

// Figures

.figure {
    margin-bottom: 3rem;
}

// Quotes

blockquote {
    padding: 0.4rem 0.8rem;
    border-left: 0.35rem solid $accent-color;
    font-style: italic;
}

cite {
    color: $light-text-color;
    font-style: normal;
}

// Code

code,
pre,
pre span,
samp {
    font-family: $mono-font;
    color: $code-color;
}

pre {
    padding: 0.5rem 0.9rem;
    max-width: 100%;
    overflow: auto;
    color: $pre-color;
    background: $pre-bg-color;
    border: 1px solid $border-color;
    border-radius: 2px;
}

pre code {
    color: $pre-color;
    background: none;
    margin: 0;
    padding: 0;
}

nix-shell -p sass --run 'sass stylesheet.scss static/stylesheet.css'