From 347e5f59bd761bc9062f6f3406583ff015ebefa7 Mon Sep 17 00:00:00 2001 From: Tony Garnock-Jones Date: Mon, 5 Apr 2021 11:50:38 +0200 Subject: [PATCH] Shuffle CSS around --- _layouts/skeleton.html | 16 ++- .../font-definitions.css | 3 + normalize.css => css/normalize.css | 0 style.css => css/style.css | 135 ++++++++++++++++-- syndicate.png => img/syndicate.png | Bin syndicate.svg => img/syndicate.svg | 0 6 files changed, 137 insertions(+), 17 deletions(-) rename font-definitions.css => css/font-definitions.css (81%) rename normalize.css => css/normalize.css (100%) rename style.css => css/style.css (53%) rename syndicate.png => img/syndicate.png (100%) rename syndicate.svg => img/syndicate.svg (100%) diff --git a/_layouts/skeleton.html b/_layouts/skeleton.html index 86feb3d..7297c2e 100644 --- a/_layouts/skeleton.html +++ b/_layouts/skeleton.html @@ -3,8 +3,8 @@ {% if page.title %}{{ page.title }}—{% else %}{% endif %}{{ site.title }} - - + + {% for sheet in page.stylesheets %} {% endfor %} @@ -25,7 +25,7 @@
  • Docs
  • Demos
  • Installing Syndicate
    • -
  • Github
    • +
  • Github
    • @@ -36,9 +36,13 @@
    diff --git a/font-definitions.css b/css/font-definitions.css similarity index 81% rename from font-definitions.css rename to css/font-definitions.css index 82a168c..49ccb84 100644 --- a/font-definitions.css +++ b/css/font-definitions.css @@ -33,4 +33,7 @@ layout: @font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-style: italic; src: url("/fonts/IBMPlexMono-SemiBoldItalic.ttf"); } @font-face { font-family: "IBM Plex Serif"; font-weight: 300; font-style: normal; src: url("/fonts/IBMPlexSerif-Light.ttf"); } +@font-face { font-family: "IBM Plex Serif"; font-weight: 400; font-style: normal; src: url("/fonts/IBMPlexSerif-Regular.ttf"); } +@font-face { font-family: "IBM Plex Serif"; font-weight: 500; font-style: normal; src: url("/fonts/IBMPlexSerif-Medium.ttf"); } @font-face { font-family: "IBM Plex Serif"; font-weight: 300; font-style: italic; src: url("/fonts/IBMPlexSerif-LightItalic.ttf"); } +@font-face { font-family: "IBM Plex Serif"; font-weight: 500; font-style: italic; src: url("/fonts/IBMPlexSerif-MediumItalic.ttf"); } diff --git a/normalize.css b/css/normalize.css similarity index 100% rename from normalize.css rename to css/normalize.css diff --git a/style.css b/css/style.css similarity index 53% rename from style.css rename to css/style.css index 41ef149..b282b25 100644 --- a/style.css +++ b/css/style.css @@ -1,20 +1,23 @@ --- layout: -display-font: '"Bebas Neue"' +display-font: '"Bebas Neue", sans' nav-font: '"Inconsolata Regular"' -heading-font: '"IBM Plex Serif"' -heading-font-small: '"IBM Plex Mono"' +horizontal-border-width: "0.25rem" + +heading-font: '"IBM Plex Serif", serif' +heading-font-small: '"IBM Plex Mono", monospace' skinny-header-margin: "1rem" -body-font: '"IBM Plex Sans"' +body-font: '"IBM Plex Sans", sans' body-margin: "2rem" +body-lhs: "10rem" body-lhs-inset: "8rem" body-lhs-border: "1rem" body-lhs-border-indent: "7rem" -code-font: '"IBM Plex Mono"' +code-font: '"IBM Plex Mono", monospace' --- @import 'font-definitions.css'; @@ -45,10 +48,93 @@ main { clear: both; } +main ul.boxes { + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: flex-start; + align-items: stretch; + align-content: stretch; + margin: -0.5rem -1.5rem 1rem; + margin-bottom: 1rem; + padding: 0; +} + +main ul.boxes > li { + background: white; + display: flex; + flex-direction: column; + border: solid black; + border-width: {{ page.horizontal-border-width }}; + margin: 0.5rem; + padding: 0 0.75rem; +} + +main ul.boxes > li > * { + margin: 0.5rem 0; +} + +main ul.boxes > li > *.read-more { + display: flex; + align-items: flex-end; + + align-self: flex-end; + flex-grow: 1; +} + +main ul.boxes > li > h1 { + font-family: {{ page.display-font }}; + font-style: normal; + font-weight: normal; + border-bottom: solid black {{ page.horizontal-border-width }}; + background: lightcyan; + margin: 0 -0.75rem; +} + +main ul.boxes > li > h1 > a { + display: block; + padding: 0.25rem 0.75rem 0; +} + +main > hr { + background: white; + height: 0; + border: none; + border-top: solid black 0.125rem; + border-bottom: solid black 0.125rem; + margin: 2rem auto; + width: calc({{ page.body-margin }} + {{ page.body-lhs-border }}); +} + +.logos { + display: flex; + flex-wrap: wrap; + margin-left: -0.25rem; + margin-top: -0.25rem; +} + +.logos > * { + flex-grow: 1; + flex-shrink: 1; + min-width: 64px; + width: auto; + height: auto; + margin-left: 0.25rem; + margin-top: 0.25rem; +} + +.logos3 > * { flex-basis: calc(100% / 3 - 0.25rem); } +.logos2 > * { flex-basis: calc(100% / 2 - 0.25rem); } + pre { font-size: 0.9rem; } +.frontpage_code_examples { + margin: 0 -{{ page.body-margin }}; + padding: 0 {{ page.body-lhs-border }}; +} + *:target { background: yellow; } @@ -56,7 +142,7 @@ pre { h1, h2, h3, h4, h5, h6 { font-family: {{ page.heading-font }}; font-style: italic; - font-weight: bold; + font-weight: 300; clear: both; } @@ -81,7 +167,7 @@ header { display: flex; margin-top: 0; margin-bottom: 0; - border-bottom: solid black 0.25rem; + border-bottom: solid black {{ page.horizontal-border-width }}; } header .outer-wrapper { @@ -133,20 +219,27 @@ nav a { footer { border-top: solid black 0.25rem; - padding: 0 {{ page.skinny-header-margin }}; clear: both; - padding-top: 2rem; font-size: 0.5rem; text-align: right; } +footer .outer-wrapper { + padding: 2rem 0 0.5rem; + border-right: solid cyan {{ page.skinny-header-margin }}; +} + +footer .inner-wrapper { + padding: 0 {{ page.skinny-header-margin }}; +} + img { max-width: 100%; } @media all and (min-width: 960px) { html { - font-size: 16pt; + font-size: 15pt; } header { @@ -169,21 +262,41 @@ img { flex-direction: row; } + footer .outer-wrapper { + border-right: solid cyan 4rem; + } + main { border-left: solid black {{ page.body-lhs-border }}; padding: 1rem 0 1rem {{ page.body-margin }}; margin: 0 0 0 {{ page.body-lhs-border-indent }}; } + main ul.boxes { + flex-direction: row; + margin: -0.5rem -4.75rem -0.5rem -9.5rem; + } + + main ul.boxes > li { + width: calc(100%/3 - 2 * 0.5rem); + } + + main > hr { + margin-left: calc(-{{ page.body-margin }} - {{ page.body-lhs-border }}); + height: 1rem; + } + .rightfloat { float: right; margin-left: 1rem; margin-bottom: 1rem; } .leftfloat { float: left; margin-right: 1rem; margin-bottom: 1rem; } .frontpage_code_examples { + margin: 0; display: flex; - justify-content: center; + align-items: stretch; } .frontpage_code_examples > div { padding: 0 0.5rem; + flex: 1; } } diff --git a/syndicate.png b/img/syndicate.png similarity index 100% rename from syndicate.png rename to img/syndicate.png diff --git a/syndicate.svg b/img/syndicate.svg similarity index 100% rename from syndicate.svg rename to img/syndicate.svg