diff options
| -rw-r--r-- | resources/css-cv.org | 422 | ||||
| -rw-r--r-- | resources/css-global.org (renamed from resources/css.org) | 126 |
2 files changed, 497 insertions, 51 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 diff --git a/resources/css.org b/resources/css-global.org index 1441781..62292ba 100644 --- a/resources/css.org +++ b/resources/css-global.org @@ -5,12 +5,12 @@ #+AUTHOR: Marius Peter #+DATE: <2022-01-30 Sun> #+OPTIONS: toc:nil -#+PROPERTY: header-args :tangle mlnp.css +#+PROPERTY: header-args :tangle global.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 +#+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: <link rel="stylesheet" type="text/css" href="mlnp.css" /> +#+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 @@ -22,7 +22,7 @@ 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 +of this document contains a placeholder section for test purposes. #+end_abstract @@ -58,6 +58,7 @@ These styles apply across the entire website, to every element. background: linear-gradient(0deg, skyblue 10%, aliceblue 30%); background-attachment: fixed; margin: 0; + overflow-x: hidden; } #+END_SRC @@ -266,17 +267,18 @@ version. 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: 60%; + width: 80%; margin: auto; } - #+END_SRC @@ -310,6 +312,15 @@ the main ~#content~ section, except for the title and topnav sections. #+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 @@ -317,12 +328,40 @@ 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 @@ -357,26 +396,6 @@ vertical extremity. #+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 @@ -637,7 +656,6 @@ These styles apply to screens narrower than 500px. <<narrow-topnav-links>> <<narrow-topnav-menu-toggle>> <<narrow-topnav-shadow>> - <<narrow-content>> } #+END_SRC @@ -676,18 +694,6 @@ On narrow screens, the hamburger menu also becomes visible. #+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 @@ -725,9 +731,12 @@ Toggle appearance of the navigation menu. #+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'' area, this is more ergonomic for mobile users. This +larger ``quit menu'' clickable area, this is more ergonomic for mobile +users. #+NAME: narrow-topnav-shadow #+BEGIN_SRC css :tangle no @@ -752,19 +761,34 @@ larger ``quit'' area, this is more ergonomic for mobile users. This #+END_SRC -*** Narrow content +*** Clickable hamburger and shadow -I'm gonna test the footnotes.[fn:1] +Both the hamburger menu and the shadow cast when the menu is unfolded +should appear clickable to the user. -#+NAME: narrow-content -#+BEGIN_SRC css :tangle no - #content > :not(.title, #topnav) { width: 90%; } - #outline-container-main-content { - flex-direction: column; +#+BEGIN_SRC css + #hamburger, #shadow { + cursor: pointer; } #+END_SRC -* Footnotes +* Narrow content + +This section specifies how the entire content appears, as a function +of screen width. -[fn:1] This footnote is just to test footnote appearance. +#+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 |