From 58593eece4098098ed0a14dc0967e6715eac38a5 Mon Sep 17 00:00:00 2001 From: Tony Garnock-Jones Date: Wed, 31 Mar 2021 11:18:29 +0200 Subject: [PATCH] Another restyle --- _config.yml | 3 +- _includes/common_footer | 6 -- _includes/common_header | 5 -- _includes/common_html_headers | 15 ----- _includes/common_nav | 10 --- _layouts/skeleton.html | 35 +++++++++- style.css | 123 +++++++++++++++++++--------------- 7 files changed, 102 insertions(+), 95 deletions(-) delete mode 100644 _includes/common_footer delete mode 100644 _includes/common_header delete mode 100644 _includes/common_html_headers delete mode 100644 _includes/common_nav diff --git a/_config.yml b/_config.yml index 0a2d242..8d58b97 100644 --- a/_config.yml +++ b/_config.yml @@ -5,7 +5,8 @@ defaults: values: layout: page -title: "Dataspace-Oriented Programming" +title: "Dataspaces" +subtitle: "and Conversational Concurrency" # syn·di·cate # a language for interactive programs" diff --git a/_includes/common_footer b/_includes/common_footer deleted file mode 100644 index afc0238..0000000 --- a/_includes/common_footer +++ /dev/null @@ -1,6 +0,0 @@ - - diff --git a/_includes/common_header b/_includes/common_header deleted file mode 100644 index 517d760..0000000 --- a/_includes/common_header +++ /dev/null @@ -1,5 +0,0 @@ - -
-

{{ site.title }} {{ site.subtitle }}

- {% include common_nav %} -
diff --git a/_includes/common_html_headers b/_includes/common_html_headers deleted file mode 100644 index 72054fe..0000000 --- a/_includes/common_html_headers +++ /dev/null @@ -1,15 +0,0 @@ - - - - -{% for sheet in page.stylesheets %} - -{% endfor %} - - - - - -{% if page.feed %} - -{% endif %} diff --git a/_includes/common_nav b/_includes/common_nav deleted file mode 100644 index e840a3b..0000000 --- a/_includes/common_nav +++ /dev/null @@ -1,10 +0,0 @@ - - diff --git a/_layouts/skeleton.html b/_layouts/skeleton.html index 624aa16..3d16feb 100644 --- a/_layouts/skeleton.html +++ b/_layouts/skeleton.html @@ -1,14 +1,43 @@ - {% include common_html_headers %} + {% if page.title %}{{ page.title }}—{% else %}{% endif %}{{ site.title }} + + + {% for sheet in page.stylesheets %} + + {% endfor %} + + + {% if page.feed %} + + {% endif %} - {% include common_header %} +
+
+
+

{{ site.title }} {{ site.subtitle }}

+ +
+
+
{{ content }}
- {% include common_footer %} + diff --git a/style.css b/style.css index 8cfce56..a150445 100644 --- a/style.css +++ b/style.css @@ -1,42 +1,57 @@ --- layout: -display-font: '"Libre Barcode 39 Text"' +display-font: '"Bebas Neue"' nav-font: '"Inconsolata Regular"' -heading-font: '"Inconsolata Regular"' +heading-font: '"IBM Plex Serif"' heading-font-small: '"IBM Plex Mono"' +skinny-header-margin: "1rem" body-font: '"IBM Plex Sans"' body-margin: "2rem" +body-lhs-margin: "10rem" +body-lhs-inset: "8rem" code-font: '"IBM Plex Mono"' --- @import 'font-definitions.css'; +html, body, * { box-sizing: border-box; } + html { margin: 0; padding: 0; font-size: 14pt; } -html, body, * { box-sizing: border-box; } - body { font-family: {{ page.body-font }}; font-weight: 300; - margin: 0 {{ page.body-margin }}; + margin: 0; padding: 0; background: white; } +main { + max-width: 960px; + clear: both; + margin: {{ page.body-margin }}; +} + pre { font-size: 0.9rem; } +*:target { + background: yellow; +} + h1, h2, h3, h4, h5, h6 { - font-weight: normal; + font-family: {{ page.heading-font }}; + font-style: italic; + font-weight: bold; clear: both; } @@ -49,26 +64,6 @@ h1 { font-size: 1.56rem; } h2 { font-size: 1.25rem; } h3, h4, h5, h6 { font-size: 1rem; } -h3, h4, h5, h6 { - text-transform: uppercase; - font-family: {{ page.heading-font-small }}; - font-style: italic; - font-weight: 500; - margin: 2rem 0 0 0; -} -h3 { text-decoration: underline; font-weight: 600; } - -main h1, main h2 { - font-family: {{ page.heading-font }}; - text-transform: uppercase; - letter-spacing: 0.33em; - margin-top: 2rem; - border-left: solid magenta 1rem; - padding-left: 0.5rem; - margin-left: -1.5rem; - border-bottom: solid magenta 0.26em; -} - pre, code { font-family: {{ page.code-font }}; } @@ -78,45 +73,52 @@ h1 code, h2 code, h3 code, h4 code, h5 code, h6 code { } header { - margin: 0 -{{ page.body-margin }}; + display: flex; + margin-top: 0; + margin-bottom: 0; + border-bottom: solid black 0.25rem; +} + +header .outer-wrapper { + border-left: solid magenta {{ page.skinny-header-margin }}; +} + +header .inner-wrapper { + padding: 0 {{ page.skinny-header-margin }}; } header h1 { - background: black; - color: white; font-family: {{ page.display-font }}; - font-size: 3.75rem; - color: yellow; - margin: 0; - padding: 0; + font-style: normal; + font-weight: normal; + font-size: 4rem; + margin-top: 1rem; + margin-bottom: 1rem; line-height: 1; - border-bottom: solid magenta 0.125rem; } -nav { - font-family: {{ page.nav-font }}; - text-transform: uppercase; - letter-spacing: 0.33em; +header h1 span { + display: inline-block; +} + +header h1 span.subtitle { + font-size: 2rem; } nav > ul { display: flex; flex-direction: row; flex-wrap: wrap; - align-items: flex-start; - justify-content: flex-end; padding: 0; margin: 0; - background: black; - color: white; + margin-bottom: 0.5rem; } nav > ul > li { display: block; - width: auto; - padding-left: 0.33em; - margin: 0 0 0 1rem; - border-bottom: solid cyan 0.25rem; + margin: 0; + padding: 0; + margin-right: 1rem; } nav a { @@ -124,16 +126,12 @@ nav a { color: inherit; } -main, footer { - max-width: 960px; - margin: 0 auto; - clear: both; -} - footer { + border-top: solid black 0.25rem; + padding: 0 {{ page.skinny-header-margin }}; clear: both; margin-top: 2rem; - font-size: 0.9rem; + font-size: 0.5rem; text-align: right; } @@ -146,9 +144,24 @@ img { font-size: 16pt; } - nav > ul { + header { + margin: 0; + margin-right: {{ page.body-margin }}; + } + + header .outer-wrapper { + display: flex; + width: 100%; + margin: 0; + min-height: {{ page.body-lhs-inset }}; + border-left: solid magenta {{ page.body-lhs-inset }}; + align-items: flex-end; + } + + header .inner-wrapper { + width: 100%; + padding-left: {{ page.body-margin }}; flex-direction: row; - align-items: flex-start; } .rightfloat { float: right; margin-left: 1rem; margin-bottom: 1rem; }