path: root/resources/css-cv.org

# -*- 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