From fbe295fbdc34027e3fb675a0c1d563faee98746e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yannik=20R=C3=B6del?= Date: Mon, 20 Sep 2021 16:22:14 +0200 Subject: [PATCH] Refactor non-crictical CSS into own files --- _includes/layouts/base.njk | 6 +- _includes/layouts/home.njk | 9 +- _includes/layouts/page.njk | 11 +- computer-beantragen/index.md | 1 + computer-beantragen/organisation.md | 1 + computer-beantragen/privat.md | 1 + hardware-spenden/index.md | 1 + hardware-spenden/organisation.md | 1 + hardware-spenden/privat.md | 1 + kontakt/index.md | 1 + kontakt/problem.md | 1 + package.json | 2 +- styles/_typography.scss | 53 -------- styles/base.scss | 6 + styles/components/_actions.scss | 64 +++++++++ styles/components/_banner.scss | 61 +++++++++ styles/components/_form-choices.scss | 57 ++++++++ .../{_forms.scss => _form-elements.scss} | 61 +-------- .../{_base.scss => components/_markup.scss} | 6 +- styles/components/_page.scss | 126 +----------------- styles/components/_site.scss | 6 +- styles/components/_tabs.scss | 6 +- styles/forms.scss | 2 + styles/home.scss | 3 + styles/{ => lib}/_colors.scss | 0 styles/{ => lib}/_layout.scss | 0 styles/lib/_typography.scss | 55 ++++++++ styles/main.scss | 6 - 28 files changed, 290 insertions(+), 258 deletions(-) delete mode 100644 styles/_typography.scss create mode 100644 styles/base.scss create mode 100644 styles/components/_actions.scss create mode 100644 styles/components/_banner.scss create mode 100644 styles/components/_form-choices.scss rename styles/components/{_forms.scss => _form-elements.scss} (57%) rename styles/{_base.scss => components/_markup.scss} (94%) create mode 100644 styles/forms.scss create mode 100644 styles/home.scss rename styles/{ => lib}/_colors.scss (100%) rename styles/{ => lib}/_layout.scss (100%) create mode 100644 styles/lib/_typography.scss delete mode 100644 styles/main.scss diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk index b0d7234..19823cf 100644 --- a/_includes/layouts/base.njk +++ b/_includes/layouts/base.njk @@ -8,9 +8,11 @@ {{ title or metadata.title }} - + + + {% block extraHead %}{% endblock %}
@@ -44,7 +46,7 @@
-
+
{{ content | safe }}
diff --git a/_includes/layouts/home.njk b/_includes/layouts/home.njk index 018611b..70c5a72 100644 --- a/_includes/layouts/home.njk +++ b/_includes/layouts/home.njk @@ -1,4 +1,7 @@ ---- -layout: layouts/base.njk ---- +{% extends "layouts/base.njk" %} + +{% block extraHead %} + +{% endblock %} + {{ content | safe }} diff --git a/_includes/layouts/page.njk b/_includes/layouts/page.njk index 018611b..5ebf648 100644 --- a/_includes/layouts/page.njk +++ b/_includes/layouts/page.njk @@ -1,4 +1,9 @@ ---- -layout: layouts/base.njk ---- +{% extends "layouts/base.njk" %} + +{% block extraHead %} + {% if useForms %} + + {% endif %} +{% endblock %} + {{ content | safe }} diff --git a/computer-beantragen/index.md b/computer-beantragen/index.md index c7c3380..72743df 100644 --- a/computer-beantragen/index.md +++ b/computer-beantragen/index.md @@ -1,5 +1,6 @@ --- layout: layouts/page.njk +useForms: true eleventyNavigation: key: Computer beantragen order: 40 diff --git a/computer-beantragen/organisation.md b/computer-beantragen/organisation.md index 0e6bd5d..758fbbe 100644 --- a/computer-beantragen/organisation.md +++ b/computer-beantragen/organisation.md @@ -1,5 +1,6 @@ --- layout: layouts/page.njk +useForms: true --- # Geräte für eine gemeinnützige Organisation beantragen diff --git a/computer-beantragen/privat.md b/computer-beantragen/privat.md index 7d35198..b79edb1 100644 --- a/computer-beantragen/privat.md +++ b/computer-beantragen/privat.md @@ -1,5 +1,6 @@ --- layout: layouts/page.njk +useForms: true --- # Privat einen Computer beantragen diff --git a/hardware-spenden/index.md b/hardware-spenden/index.md index 6a581c7..8275964 100644 --- a/hardware-spenden/index.md +++ b/hardware-spenden/index.md @@ -1,5 +1,6 @@ --- layout: layouts/page.njk +useForms: true eleventyNavigation: key: Hardware spenden order: 50 diff --git a/hardware-spenden/organisation.md b/hardware-spenden/organisation.md index db704c9..3549e9a 100644 --- a/hardware-spenden/organisation.md +++ b/hardware-spenden/organisation.md @@ -1,5 +1,6 @@ --- layout: layouts/page.njk +useForms: true --- # Hardware als Organisation spenden diff --git a/hardware-spenden/privat.md b/hardware-spenden/privat.md index 4fb21e5..f81817d 100644 --- a/hardware-spenden/privat.md +++ b/hardware-spenden/privat.md @@ -1,5 +1,6 @@ --- layout: layouts/page.njk +useForms: true --- # Privat Hardware spenden diff --git a/kontakt/index.md b/kontakt/index.md index 18c08ff..ddf0221 100644 --- a/kontakt/index.md +++ b/kontakt/index.md @@ -1,5 +1,6 @@ --- layout: layouts/page.njk +useForms: true eleventyNavigation: key: Kontakt order: 100 diff --git a/kontakt/problem.md b/kontakt/problem.md index 8fc05c7..eca0573 100644 --- a/kontakt/problem.md +++ b/kontakt/problem.md @@ -1,5 +1,6 @@ --- layout: layouts/page.njk +useForms: true --- # Hilfe bei Problemen mit unseren Computern diff --git a/package.json b/package.json index 4ed3fb5..f037d28 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "description": "Angestöpselt Homepage", "scripts": { "build:site": "eleventy", - "build:styles": "sass styles/main.scss:_site/assets/css/main.css", + "build:styles": "sass --style=compressed styles/:_site/assets/css/", "build": "npm run build:site && npm run build:styles", "dev:site": "eleventy --serve", "dev:styles": "npm run build:styles -- --watch" diff --git a/styles/_typography.scss b/styles/_typography.scss deleted file mode 100644 index af9f6a4..0000000 --- a/styles/_typography.scss +++ /dev/null @@ -1,53 +0,0 @@ -$normal-weight: 400; -$emphasized-weight: 600; - -// This is the major third type scale. -$base-size: 1rem; -$title-size: 2.44rem; -$heading-size: 1.95rem; -$subheading-size: 1.56rem; - -$base-line-height: 1.5; -$heading-line-height: 1.3; - -$comfortaa-weights: ( - 'Light': 300, - 'Regular': 400, - 'Medium': 500, - 'Semi-bold': 600, - 'Bold': 700, -); - -@each $name, $weight in $comfortaa-weights { - @font-face { - font-family: 'Comfortaa'; - font-style: normal; - font-weight: $weight; - font-display: swap; - src: url('/assets/fonts/Comfortaa-#{$name}.ttf') format('truetype'); - } -} - -@font-face { - font-family: 'Comfortaa Variable'; - font-style: normal; - font-display: swap; - src: url('/assets/fonts/Comfortaa-VariableFont_wght.ttf') format('truetype'); -} - -html { - $fallback-fonts: Roboto, Arial, sans-serif; - - font-size: 125%; // Scale from 16px to 20px - font-family: Comfortaa, $fallback-fonts; - font-weight: $normal-weight; - - @supports (font-variation-settings: normal) { - font-family: 'Comfortaa Variable', $fallback-fonts; - } -} - -body { - font-size: $base-size; - line-height: $base-line-height; -} diff --git a/styles/base.scss b/styles/base.scss new file mode 100644 index 0000000..b4cf733 --- /dev/null +++ b/styles/base.scss @@ -0,0 +1,6 @@ +@use 'lib/typography'; +@use 'components/markup'; +@use 'components/site'; +@use 'components/page'; + +@include typography.root-config; diff --git a/styles/components/_actions.scss b/styles/components/_actions.scss new file mode 100644 index 0000000..b7087d8 --- /dev/null +++ b/styles/components/_actions.scss @@ -0,0 +1,64 @@ +@use '../lib/colors'; +@use '../lib/layout'; + +// Actions are another module that is present on the home page. It shows a small +// number of CTA-style buttons which lead to different parts of the site. +.page-actions { + padding: layout.$large-gap; + background-color: colors.$teal-300; + + > *:not(:last-child) { + margin-bottom: layout.$large-gap; + } + + > div { + > *:first-child { + margin-top: 0; + } + + > *:last-child { + margin-bottom: 0; + } + } + + > a { + margin: layout.$large-gap 0; + padding: layout.$large-gap; + background: colors.$gray-50; + color: inherit; + text-decoration: none; + @include colors.card-shadow; + + > h3 { + margin: 0; + text-transform: uppercase; + } + } + + @media screen and (min-width: layout.$breakpoint) { + display: grid; + grid-template-columns: repeat(6, 1fr); + gap: layout.$large-gap; + align-items: stretch; + + > * { + grid-column: span 3; + + &:not(:last-child) { + margin-bottom: 0; + } + } + + > a { + margin: 0; + + &.first { + transform: translateY(#{-1 * layout.$huge-gap}); + } + + &:not(.first) { + grid-column: span 2; + } + } + } +} diff --git a/styles/components/_banner.scss b/styles/components/_banner.scss new file mode 100644 index 0000000..adb9c3d --- /dev/null +++ b/styles/components/_banner.scss @@ -0,0 +1,61 @@ +@use '../lib/colors'; +@use '../lib/layout'; +@use '../lib/typography'; + +// Banners can be put at the top of a page to draw attention. A banner has +// two children: +// - A .background element which contains an image to render behind the text +// - A .content which holds the actual text. +.page-banner { + display: flex; + flex-direction: column; + justify-content: space-around; + position: relative; + min-height: 60vh; + + > .background { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: hidden; + + img { + width: 100%; + height: 100%; + object-fit: cover; + } + } + + > .content { + display: flex; + flex-direction: column; + align-items: flex-start; + position: relative; + padding: layout.$normal-gap max(#{layout.$large-gap}, 15vw); + + > div { + display: inline-block; + padding: layout.$small-gap layout.$normal-gap; + font-size: typography.$subheading-size; + background-color: colors.$yellow-600; + + > p:first-child { + margin-top: 0; + } + + > p:last-child { + margin-bottom: 0; + } + } + + > .title { + padding: 0 layout.$normal-gap; + line-height: 5rem; + font-size: typography.$title-size; + font-weight: typography.$emphasized-weight; + background-color: colors.$teal-500; + } + } +} diff --git a/styles/components/_form-choices.scss b/styles/components/_form-choices.scss new file mode 100644 index 0000000..dc845db --- /dev/null +++ b/styles/components/_form-choices.scss @@ -0,0 +1,57 @@ +@use '../lib/colors'; +@use '../lib/layout'; + +.form-choices { + @extend %narrow-content; + margin-top: layout.$huge-gap; + margin-bottom: layout.$huge-gap; + list-style: none; + text-align: center; + + > li { + position: relative; + + &:before { + content: '\2771'; + display: inline-block; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + } + + &:not(:last-child) { + &:before { + top: calc(50% - #{layout.$large-gap / 2}); + } + + &::after { + content: ''; + display: block; + margin: layout.$large-gap auto; + width: 15rem; + height: 1px; + background-color: colors.$gray-300; + } + } + + > a { + padding: layout.$small-gap layout.$normal-gap; + display: inline-block; + line-height: 2.5; + text-decoration: none; + + &:hover { + background-color: colors.$yellow-600; + color: inherit; + @include colors.card-shadow; + } + + > em { + padding-block: layout.$small-gap; + font-style: inherit; + background-color: colors.$yellow-600; + } + } + } +} diff --git a/styles/components/_forms.scss b/styles/components/_form-elements.scss similarity index 57% rename from styles/components/_forms.scss rename to styles/components/_form-elements.scss index 03169a5..39c56f7 100644 --- a/styles/components/_forms.scss +++ b/styles/components/_form-elements.scss @@ -1,61 +1,6 @@ -@use '../colors'; -@use '../layout'; -@use '../typography'; - -.form-choices { - @extend %narrow-content; - margin-top: layout.$huge-gap; - margin-bottom: layout.$huge-gap; - list-style: none; - text-align: center; - - > li { - position: relative; - - &:before { - content: '\2771'; - display: inline-block; - position: absolute; - left: 0; - top: 50%; - transform: translateY(-50%); - } - - &:not(:last-child) { - &:before { - top: calc(50% - #{layout.$large-gap / 2}); - } - - &::after { - content: ''; - display: block; - margin: layout.$large-gap auto; - width: 15rem; - height: 1px; - background-color: colors.$gray-300; - } - } - - > a { - padding: layout.$small-gap layout.$normal-gap; - display: inline-block; - line-height: 2.5; - text-decoration: none; - - &:hover { - background-color: colors.$yellow-600; - color: inherit; - @include colors.card-shadow; - } - - > em { - padding-block: layout.$small-gap; - font-style: inherit; - background-color: colors.$yellow-600; - } - } - } -} +@use '../lib/colors'; +@use '../lib/layout'; +@use '../lib/typography'; %form-item { @extend %narrow-content-gutter; diff --git a/styles/_base.scss b/styles/components/_markup.scss similarity index 94% rename from styles/_base.scss rename to styles/components/_markup.scss index 4e7f8a1..89dacb1 100644 --- a/styles/_base.scss +++ b/styles/components/_markup.scss @@ -1,6 +1,6 @@ -@use 'colors'; -@use 'layout'; -@use 'typography'; +@use '../lib/colors'; +@use '../lib/layout'; +@use '../lib/typography'; body { margin: 0; diff --git a/styles/components/_page.scss b/styles/components/_page.scss index 237da5f..84d8f14 100644 --- a/styles/components/_page.scss +++ b/styles/components/_page.scss @@ -1,6 +1,6 @@ -@use '../colors'; -@use '../layout'; -@use '../typography'; +@use '../lib/colors'; +@use '../lib/layout'; +@use '../lib/typography'; .page-section { padding: layout.$large-gap; @@ -18,123 +18,3 @@ background-color: colors.$teal-500; } } - -// Banners can be put at the top of a page to draw attention. A banner has -// two children: -// - A .background element which contains an image to render behind the text -// - A .content which holds the actual text. -.page-banner { - display: flex; - flex-direction: column; - justify-content: space-around; - position: relative; - min-height: 60vh; - - > .background { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - overflow: hidden; - - img { - width: 100%; - height: 100%; - object-fit: cover; - } - } - - > .content { - display: flex; - flex-direction: column; - align-items: flex-start; - position: relative; - padding: layout.$normal-gap max(#{layout.$large-gap}, 15vw); - - > div { - display: inline-block; - padding: layout.$small-gap layout.$normal-gap; - font-size: typography.$subheading-size; - background-color: colors.$yellow-600; - - > p:first-child { - margin-top: 0; - } - - > p:last-child { - margin-bottom: 0; - } - } - - > .title { - padding: 0 layout.$normal-gap; - line-height: 5rem; - font-size: typography.$title-size; - font-weight: typography.$emphasized-weight; - background-color: colors.$teal-500; - } - } -} - -// Actions are another module that is present on the home page. It shows a small -// number of CTA-style buttons which lead to different parts of the site. -.page-actions { - padding: layout.$large-gap; - background-color: colors.$teal-300; - - > *:not(:last-child) { - margin-bottom: layout.$large-gap; - } - - > div { - > *:first-child { - margin-top: 0; - } - - > *:last-child { - margin-bottom: 0; - } - } - - > a { - margin: layout.$large-gap 0; - padding: layout.$large-gap; - background: colors.$gray-50; - color: inherit; - text-decoration: none; - @include colors.card-shadow; - - > h3 { - margin: 0; - text-transform: uppercase; - } - } - - @media screen and (min-width: layout.$breakpoint) { - display: grid; - grid-template-columns: repeat(6, 1fr); - gap: layout.$large-gap; - align-items: stretch; - - > * { - grid-column: span 3; - - &:not(:last-child) { - margin-bottom: 0; - } - } - - > a { - margin: 0; - - &.first { - transform: translateY(#{-1 * layout.$huge-gap}); - } - - &:not(.first) { - grid-column: span 2; - } - } - } -} diff --git a/styles/components/_site.scss b/styles/components/_site.scss index 4eec380..db398b0 100644 --- a/styles/components/_site.scss +++ b/styles/components/_site.scss @@ -1,6 +1,6 @@ -@use '../colors'; -@use '../layout'; -@use '../typography'; +@use '../lib/colors'; +@use '../lib/layout'; +@use '../lib/typography'; @mixin header-item { padding: 0 layout.$normal-gap; diff --git a/styles/components/_tabs.scss b/styles/components/_tabs.scss index 44b6a5a..3590663 100644 --- a/styles/components/_tabs.scss +++ b/styles/components/_tabs.scss @@ -1,6 +1,6 @@ -@use '../colors'; -@use '../layout'; -@use '../typography'; +@use '../lib/colors'; +@use '../lib/layout'; +@use '../lib/typography'; // This is an HTML/CSS-only tabs component. It expects the following markup: // diff --git a/styles/forms.scss b/styles/forms.scss new file mode 100644 index 0000000..38ff3e4 --- /dev/null +++ b/styles/forms.scss @@ -0,0 +1,2 @@ +@use 'components/form-choices'; +@use 'components/form-elements'; diff --git a/styles/home.scss b/styles/home.scss new file mode 100644 index 0000000..64950e3 --- /dev/null +++ b/styles/home.scss @@ -0,0 +1,3 @@ +@use 'components/actions'; +@use 'components/banner'; +@use 'components/tabs'; diff --git a/styles/_colors.scss b/styles/lib/_colors.scss similarity index 100% rename from styles/_colors.scss rename to styles/lib/_colors.scss diff --git a/styles/_layout.scss b/styles/lib/_layout.scss similarity index 100% rename from styles/_layout.scss rename to styles/lib/_layout.scss diff --git a/styles/lib/_typography.scss b/styles/lib/_typography.scss new file mode 100644 index 0000000..71f7e19 --- /dev/null +++ b/styles/lib/_typography.scss @@ -0,0 +1,55 @@ +$normal-weight: 400; +$emphasized-weight: 600; + +// This is the major third type scale. +$base-size: 1rem; +$title-size: 2.44rem; +$heading-size: 1.95rem; +$subheading-size: 1.56rem; + +$base-line-height: 1.5; +$heading-line-height: 1.3; + +$comfortaa-weights: ( + 'Light': 300, + 'Regular': 400, + 'Medium': 500, + 'Semi-bold': 600, + 'Bold': 700, +); + +@mixin root-config { + @each $name, $weight in $comfortaa-weights { + @font-face { + font-family: 'Comfortaa'; + font-style: normal; + font-weight: $weight; + font-display: swap; + src: url('/assets/fonts/Comfortaa-#{$name}.ttf') format('truetype'); + } + } + + @font-face { + font-family: 'Comfortaa Variable'; + font-style: normal; + font-display: swap; + src: url('/assets/fonts/Comfortaa-VariableFont_wght.ttf') format('truetype'); + } + + html { + $fallback-fonts: Roboto, Arial, sans-serif; + + font-size: 125%; // Scale from 16px to 20px + font-family: Comfortaa, $fallback-fonts; + font-weight: $normal-weight; + + @supports (font-variation-settings: normal) { + font-family: 'Comfortaa Variable', $fallback-fonts; + } + } + + body { + font-size: $base-size; + line-height: $base-line-height; + } +} diff --git a/styles/main.scss b/styles/main.scss deleted file mode 100644 index c14bdf7..0000000 --- a/styles/main.scss +++ /dev/null @@ -1,6 +0,0 @@ -@use 'typography'; -@use 'base'; -@use 'components/site'; -@use 'components/page'; -@use 'components/tabs'; -@use 'components/forms';