From ecfea6d28309bb3e511f020408c7a3a818f72edc Mon Sep 17 00:00:00 2001 From: Marius Peter Date: Sun, 23 Oct 2022 20:35:03 +0200 Subject: CSS reorg. --- resources/css-cv.org | 422 +++++++++++++++++++++++++ resources/css-global.org | 794 +++++++++++++++++++++++++++++++++++++++++++++++ resources/css.org | 770 --------------------------------------------- 3 files changed, 1216 insertions(+), 770 deletions(-) create mode 100644 resources/css-cv.org create mode 100644 resources/css-global.org delete mode 100644 resources/css.org (limited to 'resources') 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: +#+HTML_HEAD: +#+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 diff --git a/resources/css-global.org b/resources/css-global.org new file mode 100644 index 0000000..62292ba --- /dev/null +++ b/resources/css-global.org @@ -0,0 +1,794 @@ +# -*- mode: org; -*- + +#+TITLE: Global CSS file +#+SUBTITLE: Site-wide styling informations. +#+AUTHOR: Marius Peter +#+DATE: <2022-01-30 Sun> +#+OPTIONS: toc:nil +#+PROPERTY: header-args :tangle global.css + +#+DESCRIPTION: Styling information for the entire following websites: mlnp.fr, wiki.mlnp.fr, blog.mlnp.fr, and apps.mlnp.fr. +#+KEYWORDS: org-mode emacs blendux mlnp wiki blog apps literate programming css + +#+HTML_HEAD: +#+HTML_HEAD: +#+INCLUDE: topnav.html export html + +#+TOC: headlines 2 + + +#+begin_abstract +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 for test purposes. +#+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 +<2022-02-11 Fri> + +These styles apply across the entire website, to every element. + +#+BEGIN_SRC css + body { + background: linear-gradient(0deg, skyblue 10%, aliceblue 30%); + background-attachment: fixed; + margin: 0; + overflow-x: hidden; + } +#+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 + .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; } +#+END_SRC + + +*** Foreground + +#+NAME: foreground +#+BEGIN_SRC css + .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; } +#+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"); + } + @font-face { + font-family: "Cairo"; + src: url("fonts/Cairo-Regular.ttf"); + } + @font-face { + font-family: "Amiri"; + src: url("fonts/Amiri-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, 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; } +#+END_SRC + + +** TODO Tab-select styling + +Tab-selected content must appear with a wide, contrasted border. This +is an accessiblity concern. + +#+BEGIN_SRC css + a:focus { + border: 0.2em solid aquamarine; + } +#+END_SRC + + +* Homepage + +Certains homepage sections are styled uniquely, for visual impact. + +#+begin_src css + #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); + } +#+end_src + + +* 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. + +#+BEGIN_SRC css + #content { + max-width: 100%; /* This was set to 60em in Emacs 28.1 */ + } + p { text-align: justify; } +#+END_SRC + + +** Sections + +The following rule concerns all children (not /all/ descendants!) of +the main ~#content~ section, except for the title and topnav sections. + +#+BEGIN_SRC css + #content > :not(.title, #topnav) { + line-height: 1.5em; + width: 80%; + margin: auto; + } +#+END_SRC + + +** `Home' and `Up' links + +#+BEGIN_SRC css + #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; + } +#+END_SRC + + +** Title and subtitle + +#+BEGIN_SRC css + .title { + margin-top: 0; + margin-bottom: 0; + padding-top: 0.5em; + padding-bottom: 0.5em; + } +#+END_SRC + + +** Abstract + +#+begin_src css + .abstract { + font-style: italic; + } +#+end_src + + +** 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. + +#+BEGIN_SRC css + #table-of-contents h2 { + position: revert; + } + #table-of-contents ul { + list-style-type: none; + } +#+END_SRC + + +** Subsections + +#+begin_src css + .outline-2 { + display: grid; + grid-template-columns: 10em auto; + grid-gap: 1em; + } + h2 { + grid-column: 1; + position: sticky; + top: 4rem; + } +#+end_src + + +** Subsubsections + +#+begin_src css + .outline-3 { + grid-column: 2; + } +#+end_src + + +** 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. + +#+BEGIN_SRC css + .big-table { + display: block; + max-height: 20em; + max-width: 100%; + overflow: auto; + scrollbar-width: thin; + } + table caption { + margin: 0.5em; + /* background: steelblue; */ + } +#+END_SRC + + +** Images + +#+BEGIN_SRC css + .figure img { max-width: 100%; min-width: 30%; } +#+END_SRC + + +** Workflow states + +Here, we define styling for TODO, DONE and other workflow state +keywords. + +#+BEGIN_SRC css + .todo, .done { + /* line-height: 1em; */ + font-weight: bold; + padding: 0 0.2em; + border-radius: 4px; + display: inline-block; + } +#+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 + + +** 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. + +#+BEGIN_SRC css + h1, h2, + h3, h4, + h5, h6, + #table-of-contents, + table { scroll-margin-top: 4rem; } +#+END_SRC + + +** Postamble + +#+BEGIN_SRC css + #postamble { + width: 18em; + margin: 1em auto; + padding: 1em; + border-radius: 8px; + } +#+END_SRC + + +* 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. + +#+NAME: navbar +#+BEGIN_SRC css + #topnav { + z-index: 100; + position: sticky; + top: 0; + } +#+END_SRC + + +** Components + +In this section, we define the appearance of the components contained +inside the top navigation bar. + + +*** 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. + + +**** 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. + +#+BEGIN_SRC css + #menu-toggle { display: none; } +#+END_SRC + + +**** 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. + +#+BEGIN_SRC css + #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; + } +#+END_SRC + + +**** 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. + + +***** Hamburger + +#+BEGIN_SRC css + #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; + } + +#+END_SRC + + +***** Cross + +#+BEGIN_SRC css + #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; + } +#+END_SRC + + + + +*** 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. + +#+BEGIN_SRC css + #buttons { + position: absolute; + margin: 0.5em; + padding: 0.5em 0; + } + .button { + text-decoration: none; + border-radius: 0 8px 8px 0; + padding: 0.5em; + } +#+END_SRC + + +** Wide screens + + +*** Top navigation links---wide + +On wide screens, top-level links appears as a banner right under the +page title. + +#+BEGIN_SRC css + #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; + } +#+END_SRC + + +*** Hide navigation buttons + +When the top navigation bar is wide, the navigation buttons are hidden +from the viewport. + +#+NAME: wide-hidden-buttons +#+BEGIN_SRC css + #buttons { + transform: translateX(-200%); + } +#+END_SRC + + +*** Hide hamburger menu + +The hamburger menu is tucked out of sight, to the right of the +viewport. + +#+BEGIN_SRC css + #hamburger { + transform: translateX(200%); + } +#+END_SRC + + +** Narrow screens + +These styles apply to screens narrower than 500px. + +#+BEGIN_SRC css :noweb no-export + @media all and (max-width: 500px) { + <> + <> + <> + <> + <> + <> + } +#+END_SRC + + +*** Top navigation bar + +#+NAME: narrow-topnav +#+BEGIN_SRC css :tangle no + #topnav { height: 3.5em; } +#+END_SRC + + +*** Navigation buttons + +On narrow screens, the navigation buttons become visible. + +#+NAME: narrow-buttons +#+BEGIN_SRC css :tangle no + #topnav #buttons { + transform: translateX(0); + transition: transform 1s; + } +#+END_SRC + + +*** Hamburger icon + +On narrow screens, the hamburger menu also becomes visible. + +#+NAME: narrow-hamburger +#+BEGIN_SRC css :tangle no + #topnav #hamburger { + transform: translateX(0); + transition: transform 1s; + } +#+END_SRC + + +*** 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. + +#+NAME: narrow-topnav-links +#+BEGIN_SRC css :tangle no + #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; } + +#+END_SRC + +Toggle appearance of the navigation menu. + +#+NAME: narrow-topnav-menu-toggle +#+BEGIN_SRC css :tangle no + #menu-toggle:not(:checked) ~ ul { + transition: transform 0.5s; + transform: translateX(-100%); + } + #menu-toggle:checked ~ ul { + transition: transform 0.5s; + transform: translateX(0); + } +#+END_SRC + + +*** Narrow shadow + +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 menu'' clickable area, this is more ergonomic for mobile +users. + +#+NAME: narrow-topnav-shadow +#+BEGIN_SRC css :tangle no + #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; + } +#+END_SRC + + +*** Clickable hamburger and shadow + +Both the hamburger menu and the shadow cast when the menu is unfolded +should appear clickable to the user. + +#+BEGIN_SRC css + #hamburger, #shadow { + cursor: pointer; + } +#+END_SRC + + +* Narrow content + +This section specifies how the entire content appears, as a function +of screen width. + +#+BEGIN_SRC css + @media all and (max-width: 500px) { + #outline-container-main-content { flex-direction: column; } + } + @media all and (max-width: 1000px) { + #content > :not(.title, #topnav) { width: 90%; } + .outline-2 { + display: revert; + } + h2 { + position: revert; + } + } +#+END_SRC diff --git a/resources/css.org b/resources/css.org deleted file mode 100644 index 1441781..0000000 --- a/resources/css.org +++ /dev/null @@ -1,770 +0,0 @@ -# -*- mode: org; -*- - -#+TITLE: Global CSS file -#+SUBTITLE: Site-wide styling informations. -#+AUTHOR: Marius Peter -#+DATE: <2022-01-30 Sun> -#+OPTIONS: toc:nil -#+PROPERTY: header-args :tangle mlnp.css - -#+DESCRIPTION: Styling information for the entire following websites: mlnp.fr, wiki.mlnp.fr, and blog.mlnp.fr. -#+KEYWORDS: org-mode emacs blendux mlnp literate programming - -#+HTML_HEAD: -#+HTML_HEAD: -#+INCLUDE: topnav.html export html - -#+TOC: headlines 2 - - -#+begin_abstract -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 -#+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 -<2022-02-11 Fri> - -These styles apply across the entire website, to every element. - -#+BEGIN_SRC css - body { - background: linear-gradient(0deg, skyblue 10%, aliceblue 30%); - background-attachment: fixed; - 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 - .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; } -#+END_SRC - - -*** Foreground - -#+NAME: foreground -#+BEGIN_SRC css - .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; } -#+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"); - } - @font-face { - font-family: "Cairo"; - src: url("fonts/Cairo-Regular.ttf"); - } - @font-face { - font-family: "Amiri"; - src: url("fonts/Amiri-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, 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; } -#+END_SRC - - -** TODO Tab-select styling - -Tab-selected content must appear with a wide, contrasted border. This -is an accessiblity concern. - -#+BEGIN_SRC css - a:focus { - border: 0.2em solid aquamarine; - } -#+END_SRC - - -* Homepage - -Certains homepage sections are styled uniquely, for visual impact. - -#+begin_src css - #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); - } -#+end_src - - -* 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. - -#+BEGIN_SRC css - #content { - max-width: 100%; /* This was set to 60em in Emacs 28.1 */ - } - p { text-align: justify; } -#+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 - - #content > :not(.title, #topnav) { - line-height: 1.5em; - width: 60%; - margin: auto; - } - -#+END_SRC - - -** `Home' and `Up' links - -#+BEGIN_SRC css - #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; - } -#+END_SRC - - -** Title and subtitle - -#+BEGIN_SRC css - .title { - margin-top: 0; - margin-bottom: 0; - padding-top: 0.5em; - padding-bottom: 0.5em; - } -#+END_SRC - - -** 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. - -#+BEGIN_SRC css - #table-of-contents ul { - list-style-type: none; - } -#+END_SRC - - -** 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. - -#+BEGIN_SRC css - .big-table { - display: block; - max-height: 20em; - max-width: 100%; - overflow: auto; - scrollbar-width: thin; - } - table caption { - margin: 0.5em; - /* background: steelblue; */ - } -#+END_SRC - - -** Images - -#+BEGIN_SRC css - .figure img { max-width: 100%; min-width: 30%; } -#+END_SRC - - -*** TODO Homepage images - -This whole section not necessarily needed. - -**** Hero images - -#+BEGIN_SRC css - /* .figure { style max-width: 100%; min-width: 30%; } */ -#+END_SRC - - -**** Main card images - -#+BEGIN_SRC css - /* #outline-container-main-content .outline-3 img { */ - /* max-height: 10em; */ - /* } */ -#+END_SRC - - -** Workflow states - -Here, we define styling for TODO, DONE and other workflow state -keywords. - -#+BEGIN_SRC css - .todo, .done { - /* line-height: 1em; */ - font-weight: bold; - padding: 0 0.2em; - border-radius: 4px; - display: inline-block; - } -#+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 - - -** 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. - -#+BEGIN_SRC css - h1, h2, - h3, h4, - h5, h6, - #table-of-contents, - table { scroll-margin-top: 4rem; } -#+END_SRC - - -** Postamble - -#+BEGIN_SRC css - #postamble { - width: 18em; - margin: 1em auto; - padding: 1em; - border-radius: 8px; - } -#+END_SRC - - -* 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. - -#+NAME: navbar -#+BEGIN_SRC css - #topnav { - z-index: 100; - position: sticky; - top: 0; - } -#+END_SRC - - -** Components - -In this section, we define the appearance of the components contained -inside the top navigation bar. - - -*** 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. - - -**** 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. - -#+BEGIN_SRC css - #menu-toggle { display: none; } -#+END_SRC - - -**** 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. - -#+BEGIN_SRC css - #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; - } -#+END_SRC - - -**** 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. - - -***** Hamburger - -#+BEGIN_SRC css - #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; - } - -#+END_SRC - - -***** Cross - -#+BEGIN_SRC css - #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; - } -#+END_SRC - - - - -*** 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. - -#+BEGIN_SRC css - #buttons { - position: absolute; - margin: 0.5em; - padding: 0.5em 0; - } - .button { - text-decoration: none; - border-radius: 0 8px 8px 0; - padding: 0.5em; - } -#+END_SRC - - -** Wide screens - - -*** Top navigation links---wide - -On wide screens, top-level links appears as a banner right under the -page title. - -#+BEGIN_SRC css - #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; - } -#+END_SRC - - -*** Hide navigation buttons - -When the top navigation bar is wide, the navigation buttons are hidden -from the viewport. - -#+NAME: wide-hidden-buttons -#+BEGIN_SRC css - #buttons { - transform: translateX(-200%); - } -#+END_SRC - - -*** Hide hamburger menu - -The hamburger menu is tucked out of sight, to the right of the -viewport. - -#+BEGIN_SRC css - #hamburger { - transform: translateX(200%); - } -#+END_SRC - - -** Narrow screens - -These styles apply to screens narrower than 500px. - -#+BEGIN_SRC css :noweb no-export - @media all and (max-width: 500px) { - <> - <> - <> - <> - <> - <> - <> - } -#+END_SRC - - -*** Top navigation bar - -#+NAME: narrow-topnav -#+BEGIN_SRC css :tangle no - #topnav { height: 3.5em; } -#+END_SRC - - -*** Navigation buttons - -On narrow screens, the navigation buttons become visible. - -#+NAME: narrow-buttons -#+BEGIN_SRC css :tangle no - #topnav #buttons { - transform: translateX(0); - transition: transform 1s; - } -#+END_SRC - - -*** Hamburger icon - -On narrow screens, the hamburger menu also becomes visible. - -#+NAME: narrow-hamburger -#+BEGIN_SRC css :tangle no - #topnav #hamburger { - transform: translateX(0); - transition: transform 1s; - } -#+END_SRC - - -*** Clickable menu labels - -Both the hamburger menu and the shadow cast when the menu is unfolded -should appear clickable to the user. - -#+BEGIN_SRC css - #hamburger, #shadow { - cursor: pointer; - } -#+END_SRC - - -*** 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. - -#+NAME: narrow-topnav-links -#+BEGIN_SRC css :tangle no - #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; } - -#+END_SRC - -Toggle appearance of the navigation menu. - -#+NAME: narrow-topnav-menu-toggle -#+BEGIN_SRC css :tangle no - #menu-toggle:not(:checked) ~ ul { - transition: transform 0.5s; - transform: translateX(-100%); - } - #menu-toggle:checked ~ ul { - transition: transform 0.5s; - transform: translateX(0); - } -#+END_SRC - - -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 - -#+NAME: narrow-topnav-shadow -#+BEGIN_SRC css :tangle no - #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; - } -#+END_SRC - - -*** Narrow content - -I'm gonna test the footnotes.[fn:1] - -#+NAME: narrow-content -#+BEGIN_SRC css :tangle no - #content > :not(.title, #topnav) { width: 90%; } - #outline-container-main-content { - flex-direction: column; - } -#+END_SRC - - -* Footnotes - -[fn:1] This footnote is just to test footnote appearance. -- cgit v1.2.3