diff --git a/Shakefile.hs b/Shakefile.hs index b1fb34e..9e15316 100644 --- a/Shakefile.hs +++ b/Shakefile.hs @@ -32,12 +32,24 @@ import qualified Text.Pandoc.Readers as Readers import qualified Text.Pandoc.Writers as Writers main :: IO () -main = do - let - shOpts = shakeOptions { shakeVerbosity = Chatty - , shakeLintInside = ["\\"] - } - shakeArgs shOpts buildRules +main = shakeArgs shOpts buildRules + where + shOpts = + shakeOptions + { shakeVerbosity = Chatty + , shakeLintInside = ["\\"] + } + +-- Configuration +-- Should probably go in a Reader Monad + +siteDir :: FilePath +siteDir = "_site" + +optimDir :: FilePath +optimDir = "_optim" + +-- BlogPost data structure (a bit of duplication because the metas are in Pandoc) data BlogPost = BlogPost { postTitle :: T.Text @@ -66,73 +78,39 @@ getBlogpostFromMetas path pandoc@(Pandoc meta _) = do sortByPostDate :: [BlogPost] -> [BlogPost] sortByPostDate = - sortBy (\a b -> compare (Down (postDate a)) (Down (postDate b))) + sortBy (\b a -> compare (Down (postDate a)) (Down (postDate b))) buildRules :: Rules () buildRules = do - let siteDir = "_site" - optimDir = "_optim" - build = () siteDir - phony "clean" $ do - putInfo "Cleaning files in _site and _optim" - removeFilesAfter siteDir ["//*"] - removeFilesAfter optimDir ["//*"] - getPost <- newCache $ \path -> do - fileContent <- readFile' path - eitherResult <- liftIO $ Pandoc.runIO $ Readers.readOrg - def - (T.pack fileContent) - case eitherResult of - Left _ -> fail "BAD" - Right pandoc -> getBlogpostFromMetas path pandoc - getPosts <- - newCache - $ \() -> mapM getPost =<< getDirectoryFiles - "" - ["src/posts//*.org"] - let -- hsDeps = return ["AsciiArt.hs", "Index.hs", "Rot13.hs"] - cssDeps = map (siteDir ) - <$> getDirectoryFiles "" ["src/css/*.css"] + let build = () siteDir + cleanRule + getPost <- mkGetPost + getPosts <- mkGetPosts getPost + let cssDeps = map (siteDir ) <$> getDirectoryFiles "" ["src/css/*.css"] build "index.html" %> \out -> do - -- hs <- hsDeps css <- cssDeps posts <- getPosts () - need $ css <> map postUrl posts - -- <> [build "atom.xml"] - let titles = map postTitle posts - writeFile' out (mconcat (map T.unpack titles)) + need $ css <> map postUrl (sortByPostDate posts) + let titles = T.unpack $ T.intercalate "\n" $ map postTitle posts + writeFile' out titles + -- build "//*.html" %> \out -> do + -- css <- cssDeps + -- let orgfile = dropDirectory1 out + -- post <- getPost orgfile build "src/css/*.css" %> \out -> copyFile' (dropDirectory1 out) out +cleanRule :: Rules () +cleanRule = + phony "clean" $ do + putInfo "Cleaning files in _site and _optim" + forM_ [siteDir,optimDir] $ flip removeFilesAfter ["//*"] --- "_site//*.html" %> buildPost --- buildPosts --- allPosts <- buildPosts --- buildIndex allPosts --- buildFeed allPosts --- copyStaticFiles +mkGetPost = newCache $ \path -> do + fileContent <- readFile' path + eitherResult <- liftIO $ Pandoc.runIO $ Readers.readOrg def (T.pack fileContent) + case eitherResult of + Left _ -> fail "BAD" + Right pandoc -> getBlogpostFromMetas path pandoc --- data Post = Post { postTitle :: T.Text --- , postAuthor :: T.Text --- , postDate :: T.Text --- } --- --- defaultReaderOpts t = --- def { readerExtensions = getDefaultExtensions t --- , readerStandalone = True } --- --- orgToHTML :: T.Text -> PandocPure T.Text --- orgToHTML txt = Readers.readOrg (defaultReaderOpts "org") txt --- >>= Writers.writeHtml5String def --- --- -- | Load a post, process metadata, write it to output, then return the post object --- -- Detects changes to either post content or template --- buildPost :: FilePath -> Action () --- buildPost out = do --- let org = "src/" <> (dropDirectory1 $ out -<.> "org") --- liftIO . putStrLn $ "Rebuilding post: " <> out --- postContent <- readFile' org --- -- load post content and metadata as JSON blob --- let pandocReturn = Pandoc.runPure $ orgToHTML . T.pack $ postContent --- case pandocReturn of --- Left _ -> putError "BAD" --- Right outData -> writeFile' out (T.unpack outData) +mkGetPosts getPost = + newCache $ \() -> mapM getPost =<< getDirectoryFiles "" ["src/posts//*.org"] diff --git a/_optim/.gitignore b/_optim/.gitignore deleted file mode 100644 index d6b7ef3..0000000 --- a/_optim/.gitignore +++ /dev/null @@ -1,2 +0,0 @@ -* -!.gitignore diff --git a/_site/.gitignore b/_site/.gitignore deleted file mode 100644 index d6b7ef3..0000000 --- a/_site/.gitignore +++ /dev/null @@ -1,2 +0,0 @@ -* -!.gitignore diff --git a/_site/index.html b/_site/index.html index a508e26..255da53 100644 --- a/_site/index.html +++ b/_site/index.html @@ -1,84 +1,13 @@ -

-

I'm a functional programmer, working remotely for Cisco.
I work in Clojure and use Haskell/Purescript during the weekends.

- - - - - - - - - - - - -
email Yann Esposito <yann@esposito.host>
gpgCB420F8005F1A662
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
self-hostedweb
programsgitea.esy.fungithub/yogsototh
bookmarksespial.esy.funpinboard/u:yogsototh
microblogespial.esy.funtwitter/@yogsototh
keybase. . . . . . . .yogsototh
lobste.rs. . . . . . . ./u/yogsototh
reddit. . . . . . . ./u/yogsototh
stack overflow. . . . . . . .yogsototh
-

That website was created with the following constraints in mind by order of priority:

-
    -
  1. Respect Privacy; no tracker of any sort (no ads, no google analytics, no referrer for all external links, etc…)

    2. -
  2. Almost javascript free; no js at all except for a single exception, pages containing Math formulæ are displayed using mathjax.

    3. -
  3. Accessibility; should be easy to read on a text browser so people with disabilities could easily consume it.

    4. -
  4. RSS; you should be able to get informed when I add a new blog post.

    5. -
  5. Frugal; try to minimize the resources needed to visit my website; no javascript, no web-font, not too much CSS magic, not much images or really compressed one.
    6. -
-

If you are interested about technical details behind this website, take a look here.

\ No newline at end of file +New Blog +Troll 2 +Autoload Script by project +How I Internet +RSS Generation +Modern IRC +Catalina iTerm Theme switch +Further Blog Engine change +Optimize the size of no js websites +Learn Haskell Now! +Add links to code block during orgmode export +Solaryzed: A Generalisation of Solarized +How to choose your tools \ No newline at end of file diff --git a/_site/src/css/colors.css b/_site/src/css/colors.css new file mode 100644 index 0000000..2d3edf5 --- /dev/null +++ b/_site/src/css/colors.css @@ -0,0 +1,139 @@ +/* COLORS */ + +/* colortheme switch */ +body>input { display: none; } +#labels > .content { margin: 0 auto; text-align: center; } +label { font-weight: 700; } +label:hover { cursor: pointer; } +#logo { text-align: center; } +body { margin:0; padding: 0; border: 0; max-width: none;} +#content,.content,#preamble,#postamble { + max-width: 80ch; + overflow: hidden; + margin: 0 auto; +} +figure img { width: 100%; } +.footdef > sup { vertical-align: top; font-size: medium; } +.footdef > sup > a { padding: 0.5em; } +.footpara { display: inline; } +footer { margin: 3em 0; padding: 1em 0; border-top: solid 1px; border-bottom: solid 1px; line-height: 1em; } +#postamble td { border-bottom: none; } +nav { text-align: center; padding: 2em 0; } + + +:root { + --b03: #2E3440; + --b02: #3B4252; + /* not used because light mode is has more contrast + --b01: #656b74; + */ + --b00: #727781; + --b0: #989ea8; + --b1: #b0bac7; + --b2: #ECEFF4; + --b3: #fff; + --y: #c18600; + --o: #d84100; + --r: #e62729; + --m: #ec0085; + --v: #6c71c4; + --b: #0095ff; + --c: #00b0a3; + --g: #879a00; + + /* default light */ + --bg: var(--b3); + --rbg: var(--b2); + --fg0: var(--b0); + --fg: var(--b02); + --rfg: #000; + --hl: var(--o); +} + +/* light checked */ +input#l:checked ~ div { + --bg: var(--b3); + --rbg: var(--b2); + --fg0: var(--b0); + --fg: var(--b02); + --rfg: #000; + --hl: var(--o); +} +input#l:checked ~ div img { + filter: none; +} + +/* dark checked */ +input#d:checked ~ div { + --bg: hsl(210,20%,2%); + --rbg: var(--b03); + --fg: var(--b1); + --fg0: var(--b00); + --rfg: var(--b2); + --hl: var(--y); +} +input#d:checked ~ div img { + filter: brightness(0.5) saturate(0.5); +} + +/* dark preferred */ +@media (prefers-color-scheme: dark) +{ + :root { + --bg: black; + --rbg: var(--b03); + --fg: var(--b1); + --fg0: var(--b00); + --rfg: var(--b2); + --hl: var(--y); + } + img { filter: brightness(0.5) saturate(0.5); } +} +body, body > div { + background: var(--bg); + color: var(--fg); +} +a,a:visited { color: var(--hl); } + +/* ---- SYNTAX HIGHLIGHTING ---- */ +.org-rainbow-delimiters-depth-1, .org-rainbow-delimiters-depth-9, +.org-css-selector, .org-nix-attribute, .org-builtin, +.IN_REVIEW { + color:var(--c); +} + +.org-rainbow-delimiters-depth-2, .org-nix-builtin, .org-variable-name, +.org-haskell-definition, .org-haskell-operator, .org-function-name, .org-diff-changed { + color:var(--b); +} + +.org-rainbow-delimiters-depth-3, .HOLD, .WAITING { + color:var(--v); +} + +.org-rainbow-delimiters-depth-4, .org-diff-hunk-header, .org-sh-quoted-exec, +.CANCELED { + color:var(--m); +} +.org-rainbow-delimiters-depth-5, .org-diff-removed, .TODO { + color:var(--r); +} +.org-rainbow-delimiters-depth-6, .org-haskell-constructor { + color:var(--o); +} +.org-rainbow-delimiters-depth-7, .org-type, .org-constant, .org-diff-header, +.org-haskell-keyword, .org-haskell-type, .IN_PROGRESS { + color:var(--y); +} +.org-rainbow-delimiters-depth-8, .org-sh-heredoc, .org-diff-added, .org-string, +.org-doc, .org-keyword, .DONE { + color:var(--g); +} + +.org-highlight-numbers-number, .org-highlight-number-number, +.org-diff-none, .org-preprocessor, .org-comment-delimiter, .org-comment, +.org-outshine-level-1, .org-outshine-level-2, .org-outshine-level-3, +.org-outshine-level-4, .org-outshine-level-5, .org-outshine-level-6, +.org-outshine-level-7, .org-outshine-level-8, .org-outshine-level-9 { + color:var(--fg0); +} diff --git a/_site/src/css/latex.css b/_site/src/css/latex.css new file mode 100644 index 0000000..5a1bc41 --- /dev/null +++ b/_site/src/css/latex.css @@ -0,0 +1,379 @@ +/*! + * LaTeX.css (https://latex.now.sh/) + * + * Source: https://github.com/vincentdoerig/latex-css + * Licensed under MIT (https://github.com/vincentdoerig/latex-css/blob/master/LICENSE) +*/ + +@font-face { + font-family: 'Latin Modern'; + font-style: normal; + font-weight: normal; + font-display: swap; + src: url('./fonts/LM-regular.woff2') format('woff2'), + url('./fonts/LM-regular.woff') format('woff'), + url('./fonts/LM-regular.ttf') format('truetype'); +} + +@font-face { + font-family: 'Latin Modern'; + font-style: italic; + font-weight: normal; + font-display: swap; + src: url('./fonts/LM-italic.woff2') format('woff2'), + url('./fonts/LM-italic.woff') format('woff'), + url('./fonts/LM-italic.ttf') format('truetype'); +} + +@font-face { + font-family: 'Latin Modern'; + font-style: normal; + font-weight: bold; + font-display: swap; + src: url('./fonts/LM-bold.woff2') format('woff2'), + url('./fonts/LM-bold.woff') format('woff'), + url('./fonts/LM-bold.ttf') format('truetype'); +} + +@font-face { + font-family: 'Latin Modern'; + font-style: italic; + font-weight: bold; + font-display: swap; + src: url('./fonts/LM-bold-italic.woff2') format('woff2'), + url('./fonts/LM-bold-italic.woff') format('woff'), + url('./fonts/LM-bold-italic.ttf') format('truetype'); +} + +/* Box sizing rules */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Remove default margin */ +body, +h1, +h2, +h3, +h4, +p, +ul[class], +ol[class], +li, +figure, +figcaption, +dl, +dd { + margin: 0; +} + +/* Make default font-size 1rem and add smooth scrolling to anchors */ +html { + font-size: 1rem; + scroll-behavior: smooth; +} + +body { + font-family: 'Latin Modern', Georgia, Cambria, 'Times New Roman', Times, serif; + line-height: 1.8; + + max-width: 80ch; + min-height: 100vh; + overflow-x: hidden; + margin: 0 auto; + padding: 2rem 1.25rem; + + counter-reset: theorem; + counter-reset: definition; + + color: hsl(0, 5%, 10%); + background-color: hsl(210, 20%, 98%); + + text-rendering: optimizeLegibility; +} + +/* Justify and hyphenate all paragraphs */ +p { + text-align: justify; + hyphens: auto; + -webkit-hyphens: auto; + -moz-hyphens: auto; + margin-top: 1rem; +} + +/* A elements that don't have a class get default styles */ +a:not([class]) { + text-decoration-skip-ink: auto; +} + +/* Make links red */ +a, +a:visited { + color: #a00; +} + +/* Make images easier to work with */ +img { + max-width: 100%; + display: block; +} + +/* Inherit fonts for inputs and buttons */ +input, +button, +textarea, +select { + font: inherit; +} + +/* Prevent textarea from overflowing */ +textarea { + width: 100%; +} + +/* Natural flow and rhythm in articles by default */ +article > * + * { + margin-top: 1em; +} + +/* Styles for inline code or code snippets */ +code, +pre, +kbd { + font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', + monospace; + font-size: 85%; +} +pre { + padding: 1rem 1.4rem; + max-width: 100%; + overflow: auto; + border: 1px solid hsl(210, 15%, 49%); + border-radius: 4px; + background: hsl(210, 40%, 96%); +} +pre code { + font-size: 95%; + position: relative; +} +kbd { + background: hsl(210, 5%, 100%); + border: 1px solid hsl(210, 5%, 70%); + border-radius: 2px; + padding: 2px 4px; + font-size: 75%; +} + +/* Make table 100% width, add borders between rows */ +table { + border-collapse: collapse; + border-spacing: 0; + width: 100%; + max-width: 100%; +} +th, +td { + text-align: left; + padding: 0.5rem; +} +td { + border-bottom: 1px solid hsl(0, 0%, 85%); +} +thead th { + border-bottom: 2px solid hsl(0, 0%, 70%); +} +tfoot th { + border-top: 2px solid hsl(0, 0%, 70%); +} + +/* Center align the title */ +h1:first-child { + text-align: center; +} + +/* Nested ordered list for ToC */ +nav ol { + counter-reset: item; + padding-left: 2rem; +} +nav li { + display: block; +} +nav li:before { + content: counters(item, '.') ' '; + counter-increment: item; + padding-right: 0.85rem; +} + +/* Center definitions (most useful for display equations) */ +dl dd { + text-align: center; +} + +/* Theorem */ +.theorem { + counter-increment: theorem; + display: block; + margin: 12px 0; + font-style: italic; +} +.theorem::before { + content: 'Theorem ' counter(theorem) '. '; + font-weight: bold; + font-style: normal; +} + +/* Lemma */ +.lemma { + counter-increment: theorem; + display: block; + margin: 12px 0; + font-style: italic; +} +.lemma::before { + content: 'Lemma ' counter(theorem) '. '; + font-weight: bold; + font-style: normal; +} + +/* Proof */ +.proof { + display: block; + margin: 12px 0; + font-style: normal; + position: relative; +} +.proof::before { + content: 'Proof. ' attr(title); + font-style: italic; +} +.proof:after { + content: '◾️'; + position: absolute; + right: -12px; + bottom: -2px; +} + +/* Definition */ +.definition { + counter-increment: definition; + display: block; + margin: 12px 0; + font-style: normal; +} +.definition::before { + content: 'Definition ' counter(definition) '. '; + font-weight: bold; + font-style: normal; +} + +/* Center align author name, use small caps and add vertical spacing */ +.author { + margin: 0.85rem 0; + font-variant-caps: small-caps; + text-align: center; +} + +/* Make footnote text smaller and left align it (looks bad with long URLs) */ +.footnotes p { + text-align: left; + line-height: 1.5; + font-size: 85%; + margin-bottom: 0.4rem; +} +.footnotes { + border-top: 1px solid hsl(0, 0%, 39%); +} + +/* Center title and paragraph */ +.abstract, +.abstract p { + text-align: center; +} +.abstract { + margin: 2.25rem 0; +} + +/* Format the LaTeX symbol correctly (a higher up, e lower) */ +.latex span:nth-child(1) { + text-transform: uppercase; + font-size: 0.75em; + vertical-align: 0.25em; + margin-left: -0.36em; + margin-right: -0.15em; + line-height: 1ex; +} + +.latex span:nth-child(2) { + text-transform: uppercase; + vertical-align: -0.5ex; + margin-left: -0.1667em; + margin-right: -0.125em; + line-height: 1ex; +} + +/* Heading typography */ +h1 { + font-size: 2.5rem; + line-height: 3.25rem; + margin-bottom: 1.625rem; +} + +h2 { + font-size: 1.7rem; + line-height: 2rem; + margin-top: 3rem; +} + +h3 { + font-size: 1.4rem; + margin-top: 2.5rem; +} + +h4 { + font-size: 1.2rem; + margin-top: 2rem; +} + +h5 { + font-size: 1rem; + margin-top: 1.8rem; +} + +h6 { + font-size: 1rem; + font-style: italic; + font-weight: normal; + margin-top: 2.5rem; +} + +h3, +h4, +h5, +h6 { + line-height: 1.625rem; +} + +h1 + h2 { + margin-top: 1.625rem; +} + +h2 + h3, +h3 + h4, +h4 + h5 { + margin-top: 0.8rem; +} + +h5 + h6 { + margin-top: -0.8rem; +} + +h2, +h3, +h4, +h5, +h6 { + margin-bottom: 0.8rem; +} diff --git a/_site/src/css/mk.css b/_site/src/css/mk.css new file mode 100644 index 0000000..cec9502 --- /dev/null +++ b/_site/src/css/mk.css @@ -0,0 +1,139 @@ +/* COLORS */ + +/* colortheme switch */ +body>input { display: none; } +#labels > .content { margin: 0 auto; text-align: center; } +label { font-weight: 700; } +label:hover { cursor: pointer; } +#logo { text-align: center; } +body { margin:0; padding: 0; border: 0; max-width: none;} +#content,.content,#preamble,#postamble { + max-width: 80ch; + overflow-x: hidden; + margin: 0 auto; +} +figure img { width: 100%; } +.footdef > sup { vertical-align: top; font-size: medium; } +.footdef > sup > a { padding: 0.5em; } +.footpara { display: inline; } +footer { margin: 3em 0; padding: 1em 0; border-top: solid 1px; border-bottom: solid 1px; line-height: 1em; } +#postamble td { border-bottom: none; } +nav { text-align: center; padding: 2em 0; } + + +:root { + --b03: #2E3440; + --b02: #3B4252; + /* not used because light mode is has more contrast + --b01: #656b74; + */ + --b00: #727781; + --b0: #989ea8; + --b1: #b0bac7; + --b2: #ECEFF4; + --b3: #fff; + --y: #c18600; + --o: #d84100; + --r: #e62729; + --m: #ec0085; + --v: #6c71c4; + --b: #0095ff; + --c: #00b0a3; + --g: #879a00; + + /* default light */ + --bg: var(--b3); + --rbg: var(--b2); + --fg0: var(--b0); + --fg: var(--b02); + --rfg: #000; + --hl: var(--o); +} + +/* light checked */ +input#l:checked ~ div { + --bg: var(--b3); + --rbg: var(--b2); + --fg0: var(--b0); + --fg: var(--b02); + --rfg: #000; + --hl: var(--o); +} +input#l:checked ~ div img { + filter: none; +} + +/* dark checked */ +input#d:checked ~ div { + --bg: hsl(210,20%,2%); + --rbg: var(--b03); + --fg: var(--b1); + --fg0: var(--b00); + --rfg: var(--b2); + --hl: var(--y); +} +input#d:checked ~ div img { + filter: brightness(0.5) saturate(0.5); +} + +/* dark preferred */ +@media (prefers-color-scheme: dark) +{ + :root { + --bg: black; + --rbg: var(--b03); + --fg: var(--b1); + --fg0: var(--b00); + --rfg: var(--b2); + --hl: var(--y); + } + img { filter: brightness(0.5) saturate(0.5); } +} +body, body > div { + background: var(--bg); + color: var(--fg); +} +a,a:visited { color: var(--hl); } + +/* ---- SYNTAX HIGHLIGHTING ---- */ +.org-rainbow-delimiters-depth-1, .org-rainbow-delimiters-depth-9, +.org-css-selector, .org-nix-attribute, .org-builtin, +.IN_REVIEW { + color:var(--c); +} + +.org-rainbow-delimiters-depth-2, .org-nix-builtin, .org-variable-name, +.org-haskell-definition, .org-haskell-operator, .org-function-name, .org-diff-changed { + color:var(--b); +} + +.org-rainbow-delimiters-depth-3, .HOLD, .WAITING { + color:var(--v); +} + +.org-rainbow-delimiters-depth-4, .org-diff-hunk-header, .org-sh-quoted-exec, +.CANCELED { + color:var(--m); +} +.org-rainbow-delimiters-depth-5, .org-diff-removed, .TODO { + color:var(--r); +} +.org-rainbow-delimiters-depth-6, .org-haskell-constructor { + color:var(--o); +} +.org-rainbow-delimiters-depth-7, .org-type, .org-constant, .org-diff-header, +.org-haskell-keyword, .org-haskell-type, .IN_PROGRESS { + color:var(--y); +} +.org-rainbow-delimiters-depth-8, .org-sh-heredoc, .org-diff-added, .org-string, +.org-doc, .org-keyword, .DONE { + color:var(--g); +} + +.org-highlight-numbers-number, .org-highlight-number-number, +.org-diff-none, .org-preprocessor, .org-comment-delimiter, .org-comment, +.org-outshine-level-1, .org-outshine-level-2, .org-outshine-level-3, +.org-outshine-level-4, .org-outshine-level-5, .org-outshine-level-6, +.org-outshine-level-7, .org-outshine-level-8, .org-outshine-level-9 { + color:var(--fg0); +} diff --git a/_site/src/css/slides.css b/_site/src/css/slides.css new file mode 100644 index 0000000..a272261 --- /dev/null +++ b/_site/src/css/slides.css @@ -0,0 +1,20 @@ +.outline-4 { + margin: 1em 0; + padding: 1em; + border: solid; + min-height: 21em; + display: block; +} +.outline-3 > h3, +.outline-2 > h2 { + border: solid; + padding: 10em 1em; + margin: 1em 0; + text-align: center; +} +#content,.content { + max-width: 53em !important; +} +#preamble { + margin-bottom: 2em; +} diff --git a/_site/src/css/y.css b/_site/src/css/y.css new file mode 100644 index 0000000..edcd680 --- /dev/null +++ b/_site/src/css/y.css @@ -0,0 +1,600 @@ +/* Fonts if you need them +@font-face { + font-family: 'CMU Serif'; + font-style: normal; + font-weight: normal; + font-display: swap; + src: url('./fonts/cmunrm.woff2') format('woff2'), + url('./fonts/cmunrm.woff') format('woff'), + url('./fonts/cmunrm.ttf') format('truetype'); +} + +@font-face { + font-family: 'CMU Serif'; + font-style: italic; + font-weight: normal; + font-display: swap; + src: url('./fonts/cmunti.woff2') format('woff2'), + url('./fonts/cmunti.woff') format('woff'), + url('./fonts/cmunti.ttf') format('truetype'); +} + +@font-face { + font-family: 'CMU Serif'; + font-style: normal; + font-weight: bold; + font-display: swap; + src: url('./fonts/cmunbx.woff2') format('woff2'), + url('./fonts/cmunbx.woff') format('woff'), + url('./fonts/cmunbx.ttf') format('truetype'); +} + +@font-face { + font-family: 'CMU Serif'; + font-style: italic; + font-weight: bold; + font-display: swap; + src: url('./fonts/cmunbi.woff2') format('woff2'), + url('./fonts/cmunbi.woff') format('woff'), + url('./fonts/cmunbi.ttf') format('truetype'); +} + +@font-face { + font-family: 'CMU Typewriter'; + font-style: normal; + font-weight: normal; + font-display: swap; + src: url('./fonts/cmuntt.woff2') format('woff2'), + url('./fonts/cmuntt.woff') format('woff'), + url('./fonts/cmuntt.ttf') format('truetype'); +} + +@font-face { + font-family: 'CMU Typewriter'; + font-style: italic; + font-weight: normal; + font-display: swap; + src: url('./fonts/cmunit.woff2') format('woff2'), + url('./fonts/cmunit.woff') format('woff'); + url('./fonts/cmunit.ttf') format('truetype'); +} + +@font-face { + font-family: 'CMU Typewriter'; + font-style: normal; + font-weight: bold; + font-display: swap; + src: url('./fonts/cmuntb.woff2') format('woff2'), + url('./fonts/cmuntb.woff') format('woff'), + url('./fonts/cmuntb.ttf') format('truetype'); +} + +@font-face { + font-family: 'CMU Typewriter'; + font-style: italic; + font-weight: bold; + font-display: swap; + src: url('./fonts/cmuntx.woff2') format('woff2'), + url('./fonts/cmuntx.woff') format('woff'), + url('./fonts/cmuntx.ttf') format('truetype'); +} + +*/ + +/* Box sizing rules */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Remove default margin */ +body, +h1, +h2, +h3, +h4, +p, +ul[class], +ol[class], +li, +figcaption, +dl, +dd { + margin: 0; +} +figure { margin: 1em 0; } + +/* Make default font-size 1rem and add smooth scrolling to anchors */ +html { + font-size: 1rem; + scroll-behavior: smooth; +} + +body { + font-family: "American Typewriter", Georgia, serif; + line-height: 1.5; + + max-width: 60ch; + min-height: 100vh; + overflow-x: hidden; + margin: 0 auto; + padding: 2rem 1.25rem; + + counter-reset: theorem; + counter-reset: definition; + + color: hsl(0, 5%, 10%); + background-color: hsl(218, 20%, 98%); + + text-rendering: optimizeLegibility; +} + +/* Justify and hyphenate all paragraphs */ +p { + text-align: justify; + hyphens: auto; + -webkit-hyphens: auto; + -moz-hyphens: auto; + margin-top: 1rem; +} + +/* A elements that don't have a class get default styles */ +a:not([class]) { + text-decoration-skip-ink: auto; +} + +/* Make images easier to work with */ +img { + max-width: 100%; + display: block; +} + +/* Inherit fonts for inputs and buttons */ +input, +button, +textarea, +select { + font: inherit; +} + +/* Prevent textarea from overflowing */ +textarea { + width: 100%; +} + +/* Natural flow and rhythm in articles by default */ +article > * + * { + margin-top: 1em; +} + +/* Styles for inline code or code snippets */ +code, +pre, +kbd { + font-family: Courier, monospace; +} +pre { + padding: 1rem; + max-width: 100%; + overflow: auto; + border: 1px solid hsl(218, 15%, 49%); + border-radius: 4px; + background: hsl(218, 40%, 96%); + font-size: 85%; +} +pre code { + font-size: 95%; + position: relative; +} +kbd { + background: hsl(218, 5%, 100%); + border: 1px solid hsl(218, 5%, 70%); + border-radius: 2px; + padding: 2px 4px; + font-size: 75%; +} + +/* Make table 100% width, add borders between rows */ +table { + border-collapse: collapse; + border-spacing: 0; + width: 100%; + max-width: 100%; +} +th, +td { + text-align: left; + padding: 0.5rem; +} +td { + border-bottom: 1px solid hsl(0, 0%, 85%); +} +thead th { + border-bottom: 2px solid hsl(0, 0%, 70%); +} +tfoot th { + border-top: 2px solid hsl(0, 0%, 70%); +} + +/* Center align the title */ +h1:first-child { + text-align: center; +} + +/* Nested ordered list for ToC */ +nav ol { + counter-reset: item; + padding-left: 2rem; +} +nav li { + display: block; +} + +/* Center definitions (most useful for display equations) */ +dl dt { font-weight: 700; } +dl dd { + padding-left: 3rem; +} + +/* Theorem */ +.theorem { + counter-increment: theorem; + display: block; + margin: 12px 0; + font-style: italic; +} +.theorem::before { + content: 'Theorem ' counter(theorem) '. '; + font-weight: bold; + font-style: normal; +} + +/* Lemma */ +.lemma { + counter-increment: theorem; + display: block; + margin: 12px 0; + font-style: italic; +} +.lemma::before { + content: 'Lemma ' counter(theorem) '. '; + font-weight: bold; + font-style: normal; +} + +/* Proof */ +.proof { + display: block; + margin: 12px 0; + font-style: normal; + position: relative; +} +.proof::before { + content: 'Proof. ' attr(title); + font-style: italic; +} +.proof:after { + content: '◾️'; + position: absolute; + right: -12px; + bottom: -2px; +} + +/* Definition */ +.definition { + counter-increment: definition; + display: block; + margin: 12px 0; + font-style: normal; +} +.definition::before { + content: 'Definition ' counter(definition) '. '; + font-weight: bold; + font-style: normal; +} + +/* Center align author name, use small caps and add vertical spacing */ +.author { + margin: 0.85rem 0; + font-variant-caps: small-caps; + text-align: center; +} + +/* Make footnote text smaller and left align it (looks bad with long URLs) */ +.footref { display: inline-block; padding: 0 3px; } +.footnotes p { + text-align: left; + line-height: 1.5; + font-size: 85%; + margin-bottom: 0.4rem; +} +.footnotes { + border-top: 1px solid hsl(0, 0%, 39%); +} + +/* Center title and paragraph */ +.abstract, +.abstract p { + text-align: center; +} +.abstract { + margin: 2.25rem 0; +} + +/* Format the LaTeX symbol correctly (a higher up, e lower) */ +.latex span:nth-child(1) { + text-transform: uppercase; + font-size: 0.75em; + vertical-align: 0.25em; + margin-left: -0.36em; + margin-right: -0.15em; + line-height: 1ex; +} + +.latex span:nth-child(2) { + text-transform: uppercase; + vertical-align: -0.5ex; + margin-left: -0.1667em; + margin-right: -0.125em; + line-height: 1ex; +} + +/* Heading typography */ +h1 { + font-size: 2.5rem; + line-height: 3.25rem; + margin-bottom: 1.625rem; +} + +h2 { + font-size: 1.7rem; + line-height: 2rem; + margin-top: 3rem; +} + +h3 { + font-size: 1.4rem; + margin-top: 2.5rem; +} + +h4 { + font-size: 1.2rem; + margin-top: 2rem; +} + +h5 { + font-size: 1rem; + margin-top: 1.8rem; +} + +h6 { + font-size: 1rem; + font-style: italic; + font-weight: normal; + margin-top: 2.5rem; +} + +h3, +h4, +h5, +h6 { + line-height: 1.625rem; +} + +h1 + h2 { + margin-top: 1.625rem; +} + +h2 + h3, +h3 + h4, +h4 + h5 { + margin-top: 0.8rem; +} + +h5 + h6 { + margin-top: -0.8rem; +} + +h2, +h3, +h4, +h5, +h6 { + margin-bottom: 0.8rem; +} +/* COLORS */ + +/* colortheme switch */ +body>input { display: none; } +#labels > .content { margin: 0 auto; text-align: center; } +label { font-weight: 700; } +label:hover { cursor: pointer; } +label ~ pre { margin-top: 0; } +.org-src-container { margin: 1rem 0; } +#logo { text-align: center; } +body { margin:0; padding: 0; border: 0; max-width: none;} +#preamble, #postamble { text-align: center; } +#content,.content,#preamble,#postamble { + max-width: 60ch; + overflow: hidden; + margin: 0 auto; +} +figure img { width: 100%; } +.footdef > sup { vertical-align: top; font-size: medium; } +.footdef > sup > a { padding: 0.5em; } +.footpara { display: inline; } +footer { margin: 3em 0; + padding: 1em 0; + border-top: solid 1px; + border-bottom: solid 1px; + line-height: 1em; + font-size: 0.85em; + } +td { border-bottom: none; padding: .2rem; } +table { margin-top: 1rem; } +nav { text-align: center; padding: 2em 0; } +pre { line-height: 1em; } + +:root { + --b03: #2E3440; + --b02: #3B4252; + /* not used because light mode is has more contrast + --b01: #656b74; + */ + --b00: #727781; + --b0: #989ea8; + --b1: #b0bac7; + --b2: #ECEFF4; + --b3: #fff; + --y: #c18600; + --o: #d84100; + --r: #e62729; + --m: #ec0085; + --v: #6c71c4; + --b: #0095ff; + --c: #00b0a3; + --g: #879a00; + + /* default light */ + --bg: var(--b3); + --rbg: var(--b2); + --fg0: var(--b0); + --fg: var(--b02); + --rfg: #000; + --hl: var(--r); +} + +/* dark preferred */ +@media (prefers-color-scheme: dark) +{ + :root { + --bg: hsl(218,20%,16%); + --rbg: var(--b03); + --fg: var(--b0); + --fg0: var(--b00); + --rfg: var(--b2); + --hl: var(--g); + --y: #ae8c51; + --o: #a9654a; + --r: #af6255; + --m: #ae5e7d; + --v: #6774b2; + --b: #3f8cc3; + --c: #15a198; + --g: #939452; + } + img { filter: brightness(0.7) saturate(0.5); } + pre { + background: hsl(218,20%,18%); + border-color: hsl(218,15%,23%); + } +} + +/* light checked */ +input#l:checked ~ div { + --bg: var(--b3); + --rbg: var(--b2); + --fg0: var(--b0); + --fg: var(--b02); + --rfg: #000; + --hl: var(--o); + --y: #c18600; + --o: #d84100; + --r: #e62729; + --m: #ec0085; + --v: #6c71c4; + --b: #0095ff; + --c: #00b0a3; + --g: #879a00; +} +input#l:checked ~ div img { + filter: none; +} +input#l:checked ~ div pre { + border: 1px solid hsl(218, 15%, 49%); + background: hsl(218, 40%, 96%); +} + +/* dark checked */ +input#d:checked ~ div { + --bg: hsl(218,20%,16%); + --rbg: var(--b03); + --fg: var(--b0); + --fg0: var(--b00); + --rfg: var(--b2); + --hl: var(--g); + --y: #ae8c51; + --o: #a9654a; + --r: #af6255; + --m: #ae5e7d; + --v: #6774b2; + --b: #3f8cc3; + --c: #15a198; + --g: #939452; +} +input#d:checked ~ div img { + filter: brightness(0.7) saturate(0.5); +} +input#d:checked ~ div pre { + background: hsl(218,20%,18%); + border-color: hsl(218,15%,23%); +} + +/* ---- */ +::selection { + background: var(--m); + color: hsl(218,40%,96%); + text-decoration: hsl(218,40%,96%); +} + +body, body > div { + background: var(--bg); + color: var(--fg); +} +a,a:visited { color: var(--hl); } + +/* ---- SYNTAX HIGHLIGHTING ---- */ +#table-of-contents { text-align: left; } +.org-rainbow-delimiters-depth-1, .org-rainbow-delimiters-depth-9, +.org-css-selector, .org-builtin, +.IN_REVIEW { + color:var(--c); +} + +.org-rainbow-delimiters-depth-2, .org-nix-builtin, .org-variable-name, +.org-haskell-definition, .org-haskell-operator, .org-function-name, .org-diff-changed, +.org-nix-attribute, .org-nxml-element-local-name { + color:var(--b); +} + +.org-rainbow-delimiters-depth-3, .HOLD, .WAITING { + color:var(--v); +} + +.org-rainbow-delimiters-depth-4, .org-diff-hunk-header, .org-sh-quoted-exec, +.CANCELED { + color:var(--m); +} +.org-rainbow-delimiters-depth-5, .org-diff-removed, .TODO { + color:var(--r); +} +.org-rainbow-delimiters-depth-6, .org-haskell-constructor { + color:var(--o); +} +.org-rainbow-delimiters-depth-7, .org-type, .org-constant, .org-diff-header, +.org-haskell-keyword, .org-haskell-type, .IN_PROGRESS { + color:var(--y); +} +.org-rainbow-delimiters-depth-8, .org-sh-heredoc, .org-diff-added, .org-string, +.org-doc, .org-keyword, .DONE { + color:var(--g); +} + +.org-highlight-numbers-number, .org-highlight-number-number, +.org-diff-none, .org-preprocessor, .org-comment-delimiter, .org-comment, +.org-outshine-level-1, .org-outshine-level-2, .org-outshine-level-3, +.org-outshine-level-4, .org-outshine-level-5, .org-outshine-level-6, +.org-outshine-level-7, .org-outshine-level-8, .org-outshine-level-9 { + color:var(--fg0); +}