CSS reorg.

1 files changed, 422 insertions, 0 deletions

diff --git a/resources/css-cv.org b/resources/css-cv.org
new file mode 100644
index 0000000..c6e279b
--- /dev/null
+++ b/resources/css-cv.org
@@ -0,0 +1,422 @@
+# -*- mode: org; -*-
+
+#+TITLE: CV CSS file
+#+SUBTITLE: CV and resumé styling informations.
+#+AUTHOR: Marius Peter
+#+DATE: <2022-09-24 Sat>
+#+OPTIONS: toc:nil
+#+PROPERTY: header-args :tangle cv.css
+
+#+DESCRIPTION: Styling information for my CV and resumé.
+#+KEYWORDS: org-mode emacs blendux mlnp literate programming cv resume
+
+#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="global.css" />
+#+HTML_HEAD: <link rel="icon" type="image/png" href="resources/favicon.png"/>
+#+INCLUDE: topnav.html export html
+
+#+TOC: headlines 2
+
+
+#+begin_abstract
+This page describes styling information for my CV and resumé.
+#+end_abstract
+
+
+* First level heading
+SCHEDULED: <2022-02-18 Fri> DEADLINE: <2022-02-18 Fri>
+
+** Second level heading
+<2022-02-18 Fri>
+
+*** Third level heading
+<2022-02-18 Fri 12:48>
+
+**** Fourth level heading. This is styled like a list item by default.
+
+- Itemized list.
+- This is the second item.
+- This third item makes this list respect the [[https://en.wikipedia.org/wiki/Rule_of_three_(writing)][rule of three]].
+
+| Category | Value           |
+|----------+-----------------|
+|        1 | A first value.  |
+|        2 | A second value. |
+|        3 | A third value!  |
+
+
+* Global definitions
+
+#+BEGIN_SRC css
+  body {
+      margin: 0;
+  }
+#+END_SRC
+
+
+** Colors
+
+Declaring individual one-liner color rules enables efficient searching
+for the relevant properties.
+
+
+*** Variables
+
+These colors variables can be accessed anywhere in the rest of the stylesheet.
+
+#+NAME: colors
+#+BEGIN_SRC css
+  :root {
+      --main: dodgerblue;
+      --accent: royalblue;
+  }
+#+END_SRC
+
+
+*** Background
+
+We assign colors to the page element backgrounds.
+
+#+BEGIN_SRC css
+  body { background: black; }
+  #content { background: white; }
+  .outline-2 { background: linear-gradient(90deg, powderblue, white 350px); }
+  h2 { background: inherit; } 	/* This is the most elegant solution for wide + narrow screens. */
+  h3:hover { background: dodgerblue; }
+  .outline-3 { background: white; }
+  /* .timestamp { background: var(--main); } */
+  /* .title { background: var(--main); } */
+  /* #topnav { background: var(--main); } */
+  /* .button { background: var(--accent); } */
+  /* #topnav #hamburger { background: var(--accent); } */
+  /* #topnav #hamburger:hover { background: white; } */
+  /* #topnav #hamburger:hover .line { background: var(--main); } */
+  /* #topnav .button:hover { background: white; } */
+  /* #shadow { background: black; } */
+  /* thead { background: var(--main); } */
+  /* #topnav ul a:hover { background: white; } */
+  /* #org-div-home-and-up { background: var(--main); } */
+  /* #org-div-home-and-up a:hover { background: white; } */
+  /* #postamble { background: var(--main); } */
+  /* #outline-container-main-content .outline-3 { background: white; } */
+#+END_SRC
+
+
+*** Foreground
+
+#+NAME: foreground
+#+BEGIN_SRC css
+  h3:hover { color: white; }
+  /* .timestamp { color: white; } */
+  /* .title { color: white; } */
+  /* .subtitle { color: lightgray; } */
+  /* .button { color: white; } */
+  /* #topnav #hamburger { color: white; } */
+  /* #topnav #hamburger:hover { color: var(--accent); } */
+  /* #topnav .button:hover { color: var(--accent); } */
+  /* #topnav ul a { color: white; } */
+  /* #topnav ul a:hover { color: var(--accent); } */
+  /* #org-div-home-and-up, */
+  /* #org-div-home-and-up a { color: white; } */
+  /* #org-div-home-and-up a:hover { color: var(--accent); } */
+  /* #postamble { color: white; } */
+  /* thead { color: white; } */
+#+END_SRC
+
+
+** Typefaces
+
+In the following section, we specify the fonts used across the
+website. We use the following fonts for the [[https://en.wikipedia.org/wiki/Latin_script][Latin script]]:
+
+- Public Sans :: A modern, smart sans serif font created by the
+  [[https://public-sans.digital.gov/][USWDS]]. I use it for body text.
+- Jost :: A modern geometric sans serif font by [[https://indestructibletype.com/Jost.html][indestructible
+  type*]]. I use it for page title and subtitle.
+- Hack :: A monospace typeface designed for source code. I love its
+  legible characters and wide coverage, I use it frequently as a
+  terminal font. Available at [[https://sourcefoundry.org/hack/][sourcefoundry]].
+- Monoisome :: An alternative monospace typeface with great support
+  for ligatures and icons. Get it from [[https://larsenwork.com/monoid/][larsenwork]].
+
+
+We use the following fonts for other scripts:
+
+- Cairo :: A simple, sans-serif typeface for Arabic script.
+- Jost :: This font has good support for Cyrillic script.
+
+
+*** Sans
+
+#+NAME: faces-sans
+#+BEGIN_SRC css
+  @font-face {
+      font-family: "Public Sans";
+      src: url("fonts/PublicSans-Regular.otf");
+  }
+  @font-face {
+      font-family: "Jost";
+      src: url("fonts/Jost-Regular.ttf");
+  }
+#+END_SRC
+
+
+*** Serif
+
+#+NAME: faces-serif
+#+BEGIN_SRC css
+  /* None for now! */
+#+END_SRC
+
+
+*** Monospace
+
+#+NAME: faces-monospace
+#+BEGIN_SRC css
+  @font-face {
+      font-family: "Hack";
+      src: url("fonts/Hack-Regular.ttf");
+  }
+  @font-face {
+      font-family: "Monoisome";
+      src: url("fonts/Monoisome-Regular.ttf");
+  }
+#+END_SRC
+
+
+*** Assigning fonts to elements
+
+We apply the previously defined font faces to the page elements.
+
+#+NAME: fonts
+#+BEGIN_SRC css
+  #content { font-family: "Public Sans", sans-serif; }
+  .title,
+  h1, h2,
+  h3 { font-family: "Jost", sans-serif; }
+  pre,
+  code, .src,
+  .timestamp, #explainer { font-family: "Hack", monospace; }
+  /* pre { font-size: 0.8em; line-height: 1em; } */
+#+END_SRC
+
+
+*** Font sizes
+
+#+NAME: font-sizes
+#+BEGIN_SRC css
+  body {
+      font-size: 11pt;
+  }
+  .title {
+      font-size: 24pt;
+  }
+  .subtitle {
+      font-size: 16pt;
+  }
+  h2 {
+      font-size: 16pt;
+  }
+  h3 {
+      font-size: 14pt;
+  }
+#+END_SRC
+
+
+* Main content
+
+** All content
+
+The following rules concerns all the content displayed on the page.
+
+#+BEGIN_SRC css
+  #content {
+      max-width: 210mm;
+      min-width: 150mm;
+      /* height: 297mm; */
+      margin: auto;
+      padding: 2cm;
+  }
+#+END_SRC
+
+The following rule concerns all children (not /all/ descendants!) of
+the main ~#content~ section, except for the title and topnav sections.
+
+#+BEGIN_SRC css
+  .abstract, .outline-2 {
+      line-height: 1.2em;
+  }
+#+END_SRC
+
+
+** Title and subtitle
+
+#+BEGIN_SRC css
+  .title {
+      margin-top: 0;
+      margin-bottom: 0;
+      text-align: center;
+  }
+#+END_SRC
+
+
+** Table of Contents
+
+#+begin_src css
+  #table-of-contents {
+      text-align: center;
+  }
+  #table-of-contents h2 {
+  }
+  #table-of-contents ul {
+      list-style-type: none;
+  }
+
+#+end_src
+
+
+** Abstract
+
+#+BEGIN_SRC css
+  .abstract {
+      font-style: italic;
+      text-align: justify;
+      max-width: 26em;
+      margin: auto;
+  }
+#+END_SRC
+
+
+** Image
+
+#+begin_src css
+  .figure {
+      width: 128px;
+      margin: auto;
+  }
+  img {
+      width: 128px;
+      border-radius: 64px;      
+  }
+#+end_src
+
+
+** Actions
+
+Actions are only displayed in the web version (cf. [[Printing]] for
+inhibition).
+
+#+BEGIN_SRC css
+  .actions {
+      display: flex;
+      flex-wrap: wrap;
+      margin: 1em 0;
+      gap: 1em;
+  }
+#+END_SRC
+
+
+** Main sections
+
+#+BEGIN_SRC css
+  .outline-2 {
+      display: grid;
+      grid-template-columns: 10em auto;
+  }
+  h2 {
+      position: sticky;
+      top: 0;
+      max-height: 3em;
+      margin: 0;
+      padding: 1rem;
+  }
+  .outline-text-2 {
+      display: none;
+  }
+#+END_SRC
+
+
+** Subsections
+
+#+BEGIN_SRC css
+  .outline-3 {
+      grid-column: 2;
+      margin: 1rem;
+  }
+  h3 {
+      padding: 1rem;
+      margin: 0;
+  }
+  h3:hover {
+      cursor: pointer;
+  }
+  .outline-text-3 {
+      /* display: none; */
+      padding: 0 1rem;
+  }
+#+END_SRC
+
+
+** Timestamps
+
+<2022-02-14 Mon>--<2022-02-21 Mon>
+
+#+BEGIN_SRC css
+  .timestamp {
+      display: inline-block;
+      padding: 0 0.2em;
+      border-radius: 8px;
+      white-space: nowrap;
+  }
+#+END_SRC
+
+
+** Preformatted text
+
+#+begin_src css
+  pre {
+      overflow-x: scroll;
+  }
+#+end_src
+
+
+* Narrow screens
+
+#+begin_src css
+  @media only screen and (max-width: 750px) {
+      #content {
+          min-width: unset;
+          padding: 0.5cm;
+      }
+      .outline-2 {
+          display: flex;
+          flex-direction: column;
+      }
+  }
+#+end_src
+
+
+* Printing
+
+The following styling information ensures that the printed version of
+the web page renders as accurately as possible on printed media. I am
+targeting A4 sheet dimensions.
+
+#+BEGIN_SRC css
+  @page {
+      size: A4 portrait;
+      margin: 2cm;
+  }
+  @media print {
+      body {
+          padding: 0;
+          background: none;
+      }
+      #content {
+          padding: 0;		/* When printed, padding is controlled by @page margin */
+          width: 100%;
+      }
+      .actions {
+          display: none;
+      }
+  }
+#+END_SRC