From cd4efea04c1f310c8bf3e01d38f6876da03bcfe1 Mon Sep 17 00:00:00 2001 From: Marius Peter Date: Sat, 26 Mar 2022 18:59:47 +0100 Subject: Website styles. --- resources/css.org | 256 +++++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 187 insertions(+), 69 deletions(-) (limited to 'resources/css.org') diff --git a/resources/css.org b/resources/css.org index 7a60745..4ca2638 100644 --- a/resources/css.org +++ b/resources/css.org @@ -7,6 +7,7 @@ #+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: #+TOC: headlines 2 @@ -36,11 +37,11 @@ SCHEDULED: <2022-02-18 Fri> DEADLINE: <2022-02-18 Fri> - 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! | +| Category | Value | +|----------+-----------------| +| 1 | A first value. | +| 2 | A second value. | +| 3 | A third value! | * Global definitions @@ -50,7 +51,7 @@ These styles apply across the entire website, to every element. #+BEGIN_SRC css body { - background: linear-gradient(0deg, white 20%, slategray 70%); + background: linear-gradient(0deg, skyblue 10%, aliceblue 30%); background-attachment: fixed; margin: 0; } @@ -70,7 +71,7 @@ These colors variables can be accessed anywhere in the rest of the stylesheet. #+NAME: colors #+BEGIN_SRC css :root { - --topnav: cornflowerblue; + --topnav: dodgerblue; --topnav-menu: royalblue; } #+END_SRC @@ -92,6 +93,12 @@ We assign colors to the page element backgrounds. #topnav #hamburger:hover .line { background: var(--topnav); } #topnav .button:hover { background: white; } #shadow { background: black; } + thead { background: var(--topnav); } + #topnav ul a:hover { background: white; } + #org-div-home-and-up { background: var(--topnav); } + #postamble { background: var(--topnav); } + #outline-container-main-content + .outline-3 { background: var(--topnav); } #+END_SRC @@ -107,16 +114,18 @@ We assign colors to the page element backgrounds. #topnav #hamburger { color: white; } #topnav #hamburger:hover { color: var(--topnav-menu); } #topnav .button:hover { color: var(--topnav-menu); } - #topnav ul a { color: lightgray; } + #topnav ul a { color: white; } + #topnav ul a:hover { color: var(--topnav-menu); } + #org-div-home-and-up { color: white; } + #postamble { color: white; } + thead { color: white; } #+END_SRC -** TODO Fonts +** Typefaces -In the following section, we define fonts used across the website. All -font files are hosted on the server in the [[file:fonts/][fonts]] directory. - -We use the following fonts: +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. @@ -128,9 +137,17 @@ We use the following fonts: - Monoisome :: An alternative monospace typeface with great support for ligatures and icons. Get it from [[https://larsenwork.com/monoid/][larsenwork]]. -#+NAME: font-faces + +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 - /* Sans serif */ @font-face { font-family: "Public Sans"; src: url("fonts/PublicSans-Regular.otf"); @@ -139,16 +156,29 @@ We use the following fonts: font-family: "Jost"; src: url("fonts/Jost-Regular.ttf"); } - /* Serif */ @font-face { - font-family: "Crimson Pro"; - src: url("fonts/CrimsonPro-Regular.ttf"); + font-family: "Cairo"; + src: url("fonts/Cairo-Regular.ttf"); } @font-face { - font-family: "Linux Libertine"; - src: url("fonts/LinLibertine_R.ttf"); + font-family: "Amiri"; + src: url("fonts/Amiri-Regular.ttf"); } - /* Monospace */ +#+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"); @@ -157,33 +187,26 @@ We use the following fonts: font-family: "Monoisome"; src: url("fonts/Monoisome-Regular.ttf"); } - @font-face { - font-family: "Compagnon Medium"; - src: url("fonts/Compagnon-Medium.otf") ; - } - @font-face { - font-family: "Hermit"; - src: url("fonts/Hermit-Regular.otf"); - } - @font-face { - font-family: "Besley"; - src: url("fonts/Besley-Book.ttf"); - } #+END_SRC + +*** Assigning fonts to elements + We apply the previously defined font faces to the page elements. #+NAME: fonts #+BEGIN_SRC css - .title { font-family: "Jost", sans-serif; } #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; } - .src { font-size: 0.8em; line-height: 1.2em; } + pre { font-size: 0.8em; line-height: 1em; } #+END_SRC @@ -199,40 +222,126 @@ is an accessiblity concern. #+END_SRC -** TODO Durations +* 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; + } +#+end_src + + +* Main content -* Title and subtitle +The following rule concerns all the content displayed on the page. + +It 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; + } + p { text-align: justify; } +#+END_SRC + + +** TODO `Home' and `Up' links + +#+BEGIN_SRC css + #org-div-home-and-up {} +#+END_SRC + + +** Title and subtitle #+BEGIN_SRC css .title { margin-top: 0; - padding-top: 0.5em; margin-bottom: 0; - padding-bottom: 0; - position: relative; - z-index: 200; + padding-top: 0.5em; + padding-bottom: 0.5em; } #+END_SRC -* Body text +** Table of contents -The following rules concerns all body text. This means most content on -the page, except for the title section and postamble. +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 - .abstract, - .outline-2, - #table-of-contents, - #list-of-tables { - line-height: 1.5em; - width: 60%; - margin: auto; + #table-of-contents ul { + list-style-type: none; } - p { text-align: justify; } - table { margin: auto; } +#+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 + +I also want table headers to stick to the top of the table. This +serves as a useful reminder of the + +#+BEGIN_SRC css + thead { + position: sticky; + top: 0; + } +#+END_SRC + + +** Images + +#+BEGIN_SRC css +.figure img { max-width: 100%; min-width: 30%; } +#+END_SRC + + +*** TODO Hero images + +#+BEGIN_SRC css + /* .figure { style max-width: 100%; min-width: 30%; } */ #+END_SRC @@ -259,9 +368,9 @@ keywords. #+BEGIN_SRC css .timestamp { display: inline-block; - /* text-align: start; */ padding: 0 0.2em; border-radius: 8px; + white-space: nowrap; } #+END_SRC @@ -276,19 +385,18 @@ jumped to on the page to appear at an offset below this header. h3, h4, h5, h6, #table-of-contents, - table { scroll-margin-top: 4em; } + table { scroll-margin-top: 4rem; } #+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. +** Postamble #+BEGIN_SRC css - #table-of-contents ul { - list-style-type: none; + #postamble { + width: 18em; + margin: 1em auto; + padding: 1em; + border-radius: 8px; } #+END_SRC @@ -348,7 +456,7 @@ The hamburger menu is comprised of three ~div~ elements with class ~#three~ respectively. #+BEGIN_SRC css - #hamburger { + #topnav #hamburger { position: absolute; right: 0; margin: 0.5em; @@ -357,7 +465,7 @@ The hamburger menu is comprised of three ~div~ elements with class width: 1.5em; border-radius: 8px; } - #hamburger .line { + #topnav #hamburger .line { position: relative; height: 0.2em; width: 100%; @@ -453,7 +561,10 @@ page title. padding: 0.5em; margin: 0; } - #topnav ul a { padding: 0.5em; } + #topnav ul a { + padding: 0.5em; + text-decoration: none; + } #+END_SRC @@ -611,10 +722,17 @@ larger ``quit'' area, this is more ergonomic for mobile users. This *** Narrow content +I'm gonna test the footnotes.[fn:1] + #+NAME: narrow-content #+BEGIN_SRC css :tangle no - .abstract, - .outline-2, - #table-of-contents, - #list-of-tables { width: 90%; } + #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