Global CSS file
Site-wide styling informations.

Table of Contents

This page describes the entire website's styling information. After experimenting with flexbox and grid layouts, I decided to go with a plain linear document flow. This maximizes design legibility and the accessibility of affordances. The beginning of this document contains a placeholder section to test

1. First level heading

1.1. Second level heading

<2022-02-18 Fri>

1.1.1. Third level heading

<2022-02-18 Fri 12:48>

  1. 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 rule of three.
    Category Value
    1 A first value.
    2 A second value.
    3 A third value!

2. Global definitions

<2022-02-11 Fri>

These styles apply across the entire website, to every element. 

body {
    background: linear-gradient(0deg, skyblue 10%, aliceblue 30%);
    background-attachment: fixed;
    margin: 0;
}

2.1. Colors

Declaring individual one-liner color rules enables efficient searching for the relevant properties.

2.1.1. Variables

These colors variables can be accessed anywhere in the rest of the stylesheet. 

:root {
    --main: dodgerblue;
    --accent: royalblue;
}

2.1.2. Background

We assign colors to the page element backgrounds. 

.todo { background: tomato; }
.done { background: forestgreen; }
.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; }

2.1.3. Foreground

.todo, .done { 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; }

2.2. Typefaces

In the following section, we specify the fonts used across the website. We use the following fonts for the Latin script:

Public Sans
A modern, smart sans serif font created by the USWDS. I use it for body text.
Jost
A modern geometric sans serif font by 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 sourcefoundry.
Monoisome
An alternative monospace typeface with great support for ligatures and icons. Get it from 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.

2.2.1. Sans

@font-face {
    font-family: "Public Sans";
    src: url("fonts/PublicSans-Regular.otf");
}
@font-face {
    font-family: "Jost";
    src: url("fonts/Jost-Regular.ttf");
}
@font-face {
    font-family: "Cairo";
    src: url("fonts/Cairo-Regular.ttf");
}
@font-face {
    font-family: "Amiri";
    src: url("fonts/Amiri-Regular.ttf");
}

2.2.2. Serif

/* None for now! */

2.2.3. Monospace

@font-face {
    font-family: "Hack";
    src: url("fonts/Hack-Regular.ttf");
}
@font-face {
    font-family: "Monoisome";
    src: url("fonts/Monoisome-Regular.ttf");
}

2.2.4. Assigning fonts to elements

We apply the previously defined font faces to the page elements. 

#content { font-family: "Public Sans", sans-serif; }
.title,
h1, h2,
h3, h4,
#org-div-home-and-up,
#topnav { font-family: "Jost", sans-serif; }
pre,
code, .src,
.timestamp,
#postamble { font-family: "Hack", monospace; }
pre { font-size: 0.8em; line-height: 1em; }

2.3. TODO Tab-select styling

Tab-selected content must appear with a wide, contrasted border. This is an accessiblity concern. 

a:focus {
    border: 0.2em solid aquamarine;
}

3. Homepage

Certains homepage sections are styled uniquely, for visual impact. 

#main-content, #text-main-content {
    display: none;
}
#outline-container-main-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 1em;
    gap: 1em;
}
#outline-container-main-content .outline-3 {
    max-width: 12em;
    padding: 0 1em;
    border-radius: 8px;
    border: 3px solid var(--main);
}

4. TODO Main content

The following rules concerns all the content displayed on the page. Most notably, we hide the mobile navigation buttons, which are hidden to the left and right of the top navigation bar on the desktop version. 

#content {
    max-width: 100%;		/* This was set to 60em in Emacs 28.1 */
}
p { text-align: justify; }

The following rule concerns all children (not all descendants!) of the main #content section, except for the title and topnav sections. 

#content > :not(.title, #topnav) {
    line-height: 1.5em;
    width: 60%;
    margin: auto;
}

4.1. `Home' and `Up' links

#org-div-home-and-up {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 0.5em;
    font-size: large;
}
#org-div-home-and-up a {
    text-decoration: none;
    padding: 0.5em;
    font-family: "Jost", sans-serif;
}

4.2. Title and subtitle

.title {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

4.3. Table of contents

The table of contents exported to HTML from Org mode takes the form of an unordered list. We suppress bullet points that would otherwise appear before each entry. 

#table-of-contents ul {
    list-style-type: none;
}

4.4. Tables

Tables are susceptible to becoming very wide and tall. I choose to make big tables fit in a predetermined footprint so as not to disrupt document flow. This ensures we can scroll to the following section without having to scroll the entire table.

Using the block display property has the additional benefit of displaying a black border around the table; this provides an additional visual cue that we have reached the table's horizontal or vertical extremity. 

.big-table {
    display: block;
    max-height: 20em;
    max-width: 100%;
    overflow: auto;
    scrollbar-width: thin;
}
table caption {
    margin: 0.5em;
    /* background: steelblue; */
}

4.5. Images

.figure img { max-width: 100%; min-width: 30%; }

4.5.1. TODO Homepage images

This whole section not necessarily needed.

  1. Hero images
    /* .figure { style max-width: 100%; min-width: 30%; } */
  2. Main card images
    /* #outline-container-main-content .outline-3 img { */
/*     max-height: 10em; */
/* } */

4.6. Workflow states

Here, we define styling for TODO, DONE and other workflow state keywords. 

.todo, .done {
    /* line-height: 1em; */
    font-weight: bold;
    padding: 0 0.2em;
    border-radius: 4px;
    display: inline-block;
}

4.7. Timestamps

<2022-02-14 Mon>–<2022-02-21 Mon> 

.timestamp {
    display: inline-block;
    padding: 0 0.2em;
    border-radius: 8px;
    white-space: nowrap;
}

4.8. Anchor links

Because of the sticky header, we require all content that can be jumped to on the page to appear at an offset below this header. 

h1, h2,
h3, h4,
h5, h6,
#table-of-contents,
table { scroll-margin-top: 4rem; }

4.9. Postamble

#postamble {
    width: 18em;
    margin: 1em auto;
    padding: 1em;
    border-radius: 8px;
}

5. Responsive top navigation bar

On wide screens, the top navigation bar contains links to the other top-level website pages. On narrow screens, it contains buttons that act as shortcuts to the website's home, the page's table of contents, and links to the other top-level website pages which are accessible via a hamburger menu. 

#topnav {
    z-index: 100;
    position: sticky;
    top: 0;
}

5.1. Components

In this section, we define the appearance of the components contained inside the top navigation bar.

5.1.1. Hamburger menu

As of 2022, hamburger menus are still a contentious topic among UX designers. It was previously celebrated by mobile designers for its compact appearance and now universally recognizable function, however, studies by Google show increased user engagement with interfaces displaying the possible links or actions as tabs at the bottom of the interface. I like hamburgers and wanted to challenge my CSS design skills, so I went with this menu implementation.

In the website's mobile version, the hamburger menu will capture the top-level navigation links to declutter the top navigation bar.

  1. Suppressing the menu checkbox

    The checkbox used to toggle the menu is never displayed. We use the #hamburger and #shadow labels to toggle the menu instead. 

    #menu-toggle { display: none; }
  2. Design

    The hamburger menu is comprised of three div elements with class .line stacked on top of each other, with IDs #one, #two, and #three respectively. 

    #topnav #hamburger {
    position: absolute;
    right: 0;
    margin: 0.5em;
    padding: 0.5em;
    height: 1.5em;
    width: 1.5em;
    border-radius: 8px;
}
#topnav #hamburger .line {
    position: relative;
    height: 0.2em;
    width: 100%;
    margin: 0.2em auto;
    background: white;
    border-radius: 2px;
}
  3. Animation

    Our juicy hamburger should transform into a cross when activated, and regain its meaty appearance when deactivated. Modern CSS engines are powerful enough to animate individual icon components, enabling richer visuals effects and enhanced affordance cues.

    1. Hamburger
      #menu-toggle:not(:checked) ~ #hamburger #one {
    transform: translateY(0) rotate(0);
    transition: transform 0.2s;
}
#menu-toggle:not(:checked) ~ #hamburger #two {
    transition: opacity 0.2s;
    opacity: 1;
}
#menu-toggle:not(:checked) ~ #hamburger #three {
    transform: translateY(0) rotate(0);
    transition: transform 0.2s;
}
    2. Cross
      #menu-toggle:checked ~ #hamburger #one {
    transform: translateY(0.4em) rotate(-45deg);
    transition: transform 0.2s;
}
#menu-toggle:checked ~ #hamburger #two {
    transition: opacity 0.2s;
    opacity: 0;
}
#menu-toggle:checked ~ #hamburger #three {
    transform: translateY(-0.4em) rotate(45deg);
    transition: transform 0.2s;
}

5.1.2. Navigation buttons

These buttons appear in the website's narrow version. They present useful shorcuts to the user, namely links to the homepage and to the current page's table of contents. 

#buttons {
    position: absolute;
    margin: 0.5em;
    padding: 0.5em 0;
}
.button {
    text-decoration: none;
    border-radius: 0 8px 8px 0;
    padding: 0.5em;
}

5.2. Wide screens

5.2.1. Top navigation links—wide

On wide screens, top-level links appears as a banner right under the page title. 

#topnav ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: relative;
    list-style-type: none;
    padding: 0.5em;
    margin: 0;
}
#topnav ul a {
    padding: 0.5em;
    text-decoration: none;
}

5.2.2. Hide navigation buttons

When the top navigation bar is wide, the navigation buttons are hidden from the viewport. 

#buttons {
    transform: translateX(-200%);
}

5.2.3. Hide hamburger menu

The hamburger menu is tucked out of sight, to the right of the viewport. 

#hamburger {
    transform: translateX(200%);
}

5.3. Narrow screens

These styles apply to screens narrower than 500px. 

@media all and (max-width: 500px) {
    <<narrow-topnav>>
    <<narrow-buttons>>
    <<narrow-hamburger>>
    <<narrow-topnav-links>>
    <<narrow-topnav-menu-toggle>>
    <<narrow-topnav-shadow>>
    <<narrow-content>>
}

5.3.1. Top navigation bar

#topnav { height: 3.5em; }

5.3.2. Navigation buttons

On narrow screens, the navigation buttons become visible. 

#topnav #buttons {
    transform: translateX(0);
    transition: transform 1s;
}

5.3.3. Hamburger icon

On narrow screens, the hamburger menu also becomes visible. 

#topnav #hamburger {
    transform: translateX(0);
    transition: transform 1s;
}

5.3.4. Clickable menu labels

Both the hamburger menu and the shadow cast when the menu is unfolded should appear clickable to the user. 

#hamburger, #shadow {
    cursor: pointer;
}

5.3.5. TODO Top navigation links—narrow

The navigation links contained in the top banner are stacked into a column, their visibility can be toggled thanks to the #hamburger label. 

#topnav ul {
    position: absolute;
    flex-direction: column;
    background: var(--main);
    height: calc(100vh - 3.5em);
    top: 3.5em;
    padding: 0 0.5em;
    justify-content: normal;
    overflow: auto;
}
#topnav ul a { display: block; }

Toggle appearance of the navigation menu. 

#menu-toggle:not(:checked) ~ ul {
    transition: transform 0.5s;
    transform: translateX(-100%);
}
#menu-toggle:checked ~ ul {
    transition: transform 0.5s;
    transform: translateX(0);
}

When the navigation menu is open, the area of the interface not covered by the navigation links should be obscured. This affords a larger ``quit'' area, this is more ergonomic for mobile users. This 

#shadow {
    display: block;
    position: absolute;
    height: calc(100vh - 3.5em);
    top: 3.5em;
    right: 0;
    width: 100%;
}
#topnav #menu-toggle:not(:checked) ~ #shadow {
    transition: opacity 0.5s;
    visibility: hidden;
    opacity: 0;
}
#topnav #menu-toggle:checked ~ #shadow {
    transition: opacity 0.5s;
    visibility: visible;
    opacity: 0.5;
}

5.3.6. Narrow content

I'm gonna test the footnotes.1 

#content > :not(.title, #topnav) { width: 90%; }
#outline-container-main-content {
    flex-direction: column;
}

Footnotes:

1

This footnote is just to test footnote appearance.

Date: 2022-01-30 Sun 00:00

Author: Marius Peter

Created: 2022-07-24 Sun 14:36

Validate