From e9271fbd925deb4d25b79548546a17ff52d3af71 Mon Sep 17 00:00:00 2001 From: June Date: Thu, 25 Jan 2024 23:11:36 +0100 Subject: [PATCH 1/6] Mention use of picocss source code and provide its license This is in preparation for creating a theme, which uses picocss source code. --- README.md | 4 ++++ licenses/picocss-pico_mit_license | 21 +++++++++++++++++++++ 2 files changed, 25 insertions(+) create mode 100644 licenses/picocss-pico_mit_license diff --git a/README.md b/README.md index 8bf8426..8f82704 100644 --- a/README.md +++ b/README.md @@ -104,3 +104,7 @@ Each sub-directory is creating a section of the home page and all content files If a directory only contains an `index.md`, it will be rendered as normal content. If there are additional markdown files, those will be rendered as a flexbox column layout. An image gallery can be added by providing a list of `resources` in the front matter. + +## Open Source Code Used + +Source code of the [picocss/pico repo](https://github.com/picocss/pico) was either used directly or as a reference. It was licensed under the MIT license. A copy of the license can be found under: `licenses/picocss-pico_mit_license`. diff --git a/licenses/picocss-pico_mit_license b/licenses/picocss-pico_mit_license new file mode 100644 index 0000000..275ca7e --- /dev/null +++ b/licenses/picocss-pico_mit_license @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2019-2023 Pico + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. -- 2.44.1 From 41284ef7d53274da4ef8e52d383b47ff1c24abda Mon Sep 17 00:00:00 2001 From: June Date: Sun, 28 Jan 2024 20:14:06 +0100 Subject: [PATCH 2/6] Add empty main.scss and just load that to start with a blank slate --- themes/ccchh/assets/scss/main.scss | 0 themes/ccchh/layouts/partials/head.html | 8 ++------ 2 files changed, 2 insertions(+), 6 deletions(-) create mode 100644 themes/ccchh/assets/scss/main.scss diff --git a/themes/ccchh/assets/scss/main.scss b/themes/ccchh/assets/scss/main.scss new file mode 100644 index 0000000..e69de29 diff --git a/themes/ccchh/layouts/partials/head.html b/themes/ccchh/layouts/partials/head.html index 0cbca28..f60cbd4 100644 --- a/themes/ccchh/layouts/partials/head.html +++ b/themes/ccchh/layouts/partials/head.html @@ -1,14 +1,10 @@ -{{- $cssOptionsMain := dict "transpiler" "libsass" "targetPath" "css/style.css" -}} -{{- $cssOptionsPico := dict "transpiler" "libsass" "targetPath" "css/pico.css" -}} +{{- $cssOptions := dict "transpiler" "libsass" "targetPath" "css/style.css" -}} {{- $jsResources := resources.Match "js/*.js" }} {{- partial "robots.html" . -}} - {{ with resources.Get "pico-1.5.11/scss/pico.scss" | toCSS $cssOptionsPico | minify | fingerprint -}} - - {{- end }} - {{ with resources.Get "sass/main.scss" | toCSS $cssOptionsMain | minify | fingerprint -}} + {{ with resources.Get "scss/main.scss" | toCSS $cssOptions | minify | fingerprint -}} {{- end }} -- 2.44.1 From 4c84dabb237f7ebaa8c87fb24d1bf621249fd9b1 Mon Sep 17 00:00:00 2001 From: June Date: Thu, 25 Jan 2024 23:38:31 +0100 Subject: [PATCH 3/6] Provide container class to limit viewport depending on screen width Also define the necessary variables for these breakpoints and viewports. This way they can be used in other contexts as well. --- themes/ccchh/assets/scss/container.scss | 38 +++++++++++++++++++++++++ themes/ccchh/assets/scss/main.scss | 2 ++ themes/ccchh/assets/scss/variables.scss | 33 +++++++++++++++++++++ 3 files changed, 73 insertions(+) create mode 100644 themes/ccchh/assets/scss/container.scss create mode 100644 themes/ccchh/assets/scss/variables.scss diff --git a/themes/ccchh/assets/scss/container.scss b/themes/ccchh/assets/scss/container.scss new file mode 100644 index 0000000..4c546ec --- /dev/null +++ b/themes/ccchh/assets/scss/container.scss @@ -0,0 +1,38 @@ +// Provide a container class, which limits the viewport depending on the screen +// width. +// Taken from PicoCSS, see here: +// https://github.com/picocss/pico/blob/v1.5.11/scss/layout/_container.scss + +.container { + width: 100%; + margin-right: auto; + margin-left: auto; + padding-right: var(--spacing); + padding-left: var(--spacing); + + @if map-get($breakpoints, "sm") { + @media (min-width: map-get($breakpoints, "sm")) { + max-width: map-get($viewports, "sm"); + padding-right: 0; + padding-left: 0; + } + } + + @if map-get($breakpoints, "md") { + @media (min-width: map-get($breakpoints, "md")) { + max-width: map-get($viewports, "md"); + } + } + + @if map-get($breakpoints, "lg") { + @media (min-width: map-get($breakpoints, "lg")) { + max-width: map-get($viewports, "lg"); + } + } + + @if map-get($breakpoints, "xl") { + @media (min-width: map-get($breakpoints, "xl")) { + max-width: map-get($viewports, "xl"); + } + } +} diff --git a/themes/ccchh/assets/scss/main.scss b/themes/ccchh/assets/scss/main.scss index e69de29..785bcd0 100644 --- a/themes/ccchh/assets/scss/main.scss +++ b/themes/ccchh/assets/scss/main.scss @@ -0,0 +1,2 @@ +@import "variables.scss"; +@import "container.scss"; diff --git a/themes/ccchh/assets/scss/variables.scss b/themes/ccchh/assets/scss/variables.scss new file mode 100644 index 0000000..3ce3337 --- /dev/null +++ b/themes/ccchh/assets/scss/variables.scss @@ -0,0 +1,33 @@ +// Breakpoints and viewports for a responsive website. +// Taken from Pico CSS, see here: +// https://github.com/picocss/pico/blob/v1.5.11/scss/_variables.scss#L38 + +// xs: Extra small (portrait phones) +// sm: Small(landscape phones) +// md: Medium(tablets) +// lg: Large(desktops) +// xl: Extra large (large desktops) + +// NOTE: +// To provide an easy and fine styling on each breakpoint +// we didn't use @each, @mixin or @include. +// That means you need to edit each CSS selector file to add a breakpoint + +// Breakpoints +// 'null' disable the breakpoint +$breakpoints: ( + xs: 0, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px, +) !default; + +// Viewports +$viewports: ( + // 'null' disable the viewport on a breakpoint + sm: 510px, + md: 700px, + lg: 920px, + xl: 1130px +) !default; -- 2.44.1 From 6675cefc528ef513d5717b9e540ca1415a6426b9 Mon Sep 17 00:00:00 2001 From: June Date: Thu, 25 Jan 2024 23:55:35 +0100 Subject: [PATCH 4/6] Use section and article HTML elements instead of just divs on main page See here for information on these elements: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article --- themes/ccchh/layouts/index.html | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/themes/ccchh/layouts/index.html b/themes/ccchh/layouts/index.html index 1e58c48..cb12e1a 100644 --- a/themes/ccchh/layouts/index.html +++ b/themes/ccchh/layouts/index.html @@ -1,16 +1,16 @@ {{ define "main" }}
-
+
{{ .Content }} -
+ {{- $events := where (.Site.GetPage "blog").Pages ".Params.categories" "event" }} {{- $upcoming := where $events ".Params.date" "ge" now }} {{ if $upcoming }} -
+

Neuigkeiten

{{- range $upcoming.ByDate }} -
+
{{- partial "blog-header.html" (dict "headingLink" true "level" 4 "reduced" true "page" . ) }} {{- if in .RawContent "" }} @@ -18,15 +18,15 @@ {{- else }}

{{ .Summary | safeHTML }}

{{- end }} -
+ {{- end }} -
+ {{- end }} {{- $home := .Site.GetPage "/home" }} {{- $sections := where ($home.Resources.ByType "page") ".File.LogicalName" "index.md" }} {{- range sort $sections "File.Path" "asc" }} -
+
{{- $hdg_id := .Title | lower | safeURL }}

{{ .Title }}

{{ .Content -}} @@ -62,7 +62,7 @@ {{- end }}
{{- end }} - + {{ end }}
-- 2.44.1 From 1d77be4e7c3eea544967956a5b33bbf464a9e49f Mon Sep 17 00:00:00 2001 From: June Date: Mon, 29 Jan 2024 03:52:50 +0100 Subject: [PATCH 5/6] Define some general document typography: font config and heading sizes --- .../assets/scss/document-typography.scss | 48 +++++++++++++++++++ themes/ccchh/assets/scss/main.scss | 1 + 2 files changed, 49 insertions(+) create mode 100644 themes/ccchh/assets/scss/document-typography.scss diff --git a/themes/ccchh/assets/scss/document-typography.scss b/themes/ccchh/assets/scss/document-typography.scss new file mode 100644 index 0000000..357cbde --- /dev/null +++ b/themes/ccchh/assets/scss/document-typography.scss @@ -0,0 +1,48 @@ +// A bunch of this is taken from PicoCSS, see here: +// https://github.com/picocss/pico/blob/v1.5.11/scss/themes/default/_styles.scss +:root { + // Use a (minimum) font size of 16px, since this seems to be a standard font + // size. + font-size: 16px; + // Explicitly set the Firefox default. + font-weight: 400; + // Line height of 1.5, see: + // https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#accessibility_concerns + line-height: 1.5; + font-family: sans-serif; + + // Go up to 18px for the font size depending on the screen width. + @if map-get($breakpoints, "sm") { + @media (min-width: map-get($breakpoints, "sm")) { + font-size: 17px; + } + } + + @if map-get($breakpoints, "md") { + @media (min-width: map-get($breakpoints, "md")) { + font-size: 18px; + } + } + + + h1, h2, h3, h4, h5, h6 { + // Explicitly set the Firefox default. + font-weight: 700; + } + + h1 { + font-size: 2rem; + } + h2 { + font-size: 1.75rem; + } + h3 { + font-size: 1.5rem; + } + h4 { + font-size: 1.25rem; + } + h5 { + font-size: 1.125rem; + } +} diff --git a/themes/ccchh/assets/scss/main.scss b/themes/ccchh/assets/scss/main.scss index 785bcd0..e831c66 100644 --- a/themes/ccchh/assets/scss/main.scss +++ b/themes/ccchh/assets/scss/main.scss @@ -1,2 +1,3 @@ @import "variables.scss"; @import "container.scss"; +@import "document-typography.scss"; -- 2.44.1 From 9429366f49d47c35760e6f2063dda133f8368eab Mon Sep 17 00:00:00 2001 From: June Date: Mon, 29 Jan 2024 03:59:55 +0100 Subject: [PATCH 6/6] Organize SCSS: split implicit general styling and explicit. used classes So differentiate between general stuff like variables, implicit general document styling and classes, which need to be used explicitly. --- themes/ccchh/assets/scss/{ => classes}/container.scss | 0 .../typography.scss} | 0 themes/ccchh/assets/scss/main.scss | 9 +++++++-- 3 files changed, 7 insertions(+), 2 deletions(-) rename themes/ccchh/assets/scss/{ => classes}/container.scss (100%) rename themes/ccchh/assets/scss/{document-typography.scss => document/typography.scss} (100%) diff --git a/themes/ccchh/assets/scss/container.scss b/themes/ccchh/assets/scss/classes/container.scss similarity index 100% rename from themes/ccchh/assets/scss/container.scss rename to themes/ccchh/assets/scss/classes/container.scss diff --git a/themes/ccchh/assets/scss/document-typography.scss b/themes/ccchh/assets/scss/document/typography.scss similarity index 100% rename from themes/ccchh/assets/scss/document-typography.scss rename to themes/ccchh/assets/scss/document/typography.scss diff --git a/themes/ccchh/assets/scss/main.scss b/themes/ccchh/assets/scss/main.scss index e831c66..e6c09d9 100644 --- a/themes/ccchh/assets/scss/main.scss +++ b/themes/ccchh/assets/scss/main.scss @@ -1,3 +1,8 @@ +// General variables. @import "variables.scss"; -@import "container.scss"; -@import "document-typography.scss"; + +// General implicit document styling. +@import "document/typography.scss"; + +// Classes to be used explicitly. +@import "classes/container.scss"; -- 2.44.1