/*

Welcome to my handcrafted CSS!

You'll notice the formatting is a bit unusual,
but this is how I like it!

*/

/* Sizes */

:root
  { --scaling-factor: 1.2
  ; --base-size: 1.1rem
  ; --size-1:  calc(var(--base-size) * pow(var(--scaling-factor), 1))
  ; --size-2:  calc(var(--base-size) * pow(var(--scaling-factor), 2))
  ; --size-3:  calc(var(--base-size) * pow(var(--scaling-factor), 3))
  ; --size-4:  calc(var(--base-size) * pow(var(--scaling-factor), 4))
  ; --size-m1: calc(var(--base-size) * pow(var(--scaling-factor), -1))
  ; --size-m2: calc(var(--base-size) * pow(var(--scaling-factor), -2))
    }

/* Colors by theme preference */

@media (prefers-color-scheme: light) {
:root
  { --bg-color: #FFFFFF
  ; --link-color: #5E72A3
  ; --link-hover-color: #768ECC
  ; --font-color: #000000
  ; --box-color: #A9C1FF
  ; --rule-color: #808080
  ; --code-color: #F2F2F2
    }
}

@media (prefers-color-scheme: dark) {
:root
  { --bg-color: #1E1E1E
  /* The color for links isn't any random color.
     See https://johncarlosbaez.wordpress.com/2022/01/16/the-color-of-infinite-temperature

     The rest of colors (except black/white) were derived from this one.
  */
  ; --link-color: #94B1FF
  ; --link-hover-color: #BACDFF
  ; --font-color: #DFDFDF
  ; --box-color: #3C4968
  ; --rule-color: #808080
  ; --code-color: #111111
    }
}

/* Defaults */

* { box-sizing: border-box; margin: 0 }

* + *
  { margin-block-start: var(--size-1)
    }

/* Body */

body
  { margin: 0
  ; padding: var(--size-2)
  ; min-height: 100dvh
  ; max-width: 92ch
  ; display: flex
  ; flex-direction: column
  ; justify-content: space-between
  ; background-color: var(--bg-color)
  ; margin-left: auto
  ; margin-right: auto
    }

/* Font color */

a, p, h1, h2, h3, li, pre, label, input
  { color: var(--font-color) }

/* Font sizes */

a, p, li, input { font-size: var(--base-size) }
pre { font-size: var(--size-m1) }

h3 { font-size: var(--size-1) }
h2 { font-size: var(--size-2) }
h1 { font-size: var(--size-3) }

/* Links */

a:link, a:visited
  { text-decoration: none
  ; color: var(--link-color)
    }

a:hover
  { color: var(--link-hover-color)
    }

/* a:link[href^="https://"]::after { content: " ⎋" } */

/* Header */

header
  { display: block
    }

/* Home link */

a.home-link
  { font-size: var(--size-3)
  ; display: block
  ; text-align: center
  ; color: var(--font-color)
    }

/* Navigators */

nav
  { display: flex
  ; justify-content: space-between
    }

nav > a { margin-block-start: 0 }

/* Main */

main
  { flex-grow: 1
    }

/* Horizontal rules */

hr
  { border-top-style: none
  ; border-bottom-style: dashed
  ; border-bottom-color: var(--rule-color)
    }

/* Lists */

ul, ol
  { padding-left: var(--size-4)
    }

/* Inputs */

input[type=text], input[type=email]
  { background-color: var(--bg-color)
    }

input[type=submit]
  { background-color: var(--box-color)
    }

/* Blog entries */

div.blog-entries > div
  { border-left-style: solid
  ; border-left-color: var(--font-color)
  ; border-left-width: 1px
  ; padding-left: var(--base-size)
    }

article img
  { max-width: 100%
  ; margin-left: auto
  ; margin-right: auto
    }

div.blog-entry-meta
  { padding-left: 2ch
  ; border-left-style: solid
  ; border-left-width: 2px
  ; border-left-color: var(--rule-color)
    }

/* Paragraphs */

p { text-align: justify
  ; line-height: var(--size-3)
    }

p > * { margin-block-start: 0 }

/* Math */

span.math * { margin-block-start: 0 }

/* Blog tags */

span.tag
  { margin-left: 0.2em
  ; margin-right: 0.2em
  ; padding-top: 0.2em
  ; padding-bottom: 0.2em
  ; padding-left: 0.4em
  ; padding-right: 0.4em
  ; background-color: var(--box-color)
  ; border-radius: 5%
    }

/* Forms */

form > *
  { display: block
  ; width: 100%
    }

input { padding: 10px }

/* Code */

p code
  { background-color: var(--code-color)
  ; padding-left: 0.3em
  ; padding-right: 0.3em
  ; border-radius: 0.2em
    }

pre
  { background-color: var(--code-color)
  ; padding: 1em
  ; border-radius: 0.5em
  ; overflow-x: scroll
    }

/* Haskell code */

code.language-haskell .st  { color: #FF4122 } /* Strings */
code.language-haskell .it  { color: #DB5DBA } /* Integers */
code.language-haskell .cr  { font-weight: bold } /* Constructors */
code.language-haskell .sy  { color: gray } /* Symbols */
code.language-haskell .kw  { font-weight: bold; color: #5698FF } /* Keywords */

/* Tables */

table
  { width: 100%
  ; border-collapse: collapse
    }

th, td
  { color: var(--font-color)
  ; font-size: var(--size-m1)
  ; text-align: right
  ; vertical-align: center
  ; padding: var(--size-m2)
    }

th:first-child, td:first-child
  { text-align: left
    }

table a
  { font-size: var(--size-m1)
    }