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`.

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.

themes/ccchh/assets/scss/classes/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");
+    }
+  }
+}

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;
+  }
+}

themes/ccchh/assets/scss/main.scss

@@ -0,0 +1,8 @@
+// General variables.
+@import "variables.scss";
+
+// General implicit document styling.
+@import "document/typography.scss";
+
+// Classes to be used explicitly.
+@import "classes/container.scss";

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;

themes/ccchh/layouts/index.html

@@ -1,16 +1,16 @@
 {{ define "main" }}
   <main class="container" aria-role="main">
-    <div class="homepage-content">
+    <section class="homepage-content">
       {{ .Content }}
-    </div>
+    </section>
 
     {{- $events := where (.Site.GetPage "blog").Pages ".Params.categories" "event" }}
     {{- $upcoming := where $events ".Params.date" "ge" now }}
     {{ if $upcoming }}
-    <div class="announcements">
+    <section class="announcements">
       <h2 id="neuigkeiten" class="on-hover-trg">Neuigkeiten <a href="#neuigkeiten" class="on-hover"><i class="fa-solid fa-link small"></i></a></h2>
       {{- range $upcoming.ByDate }}
-      <div class="announcement">
+      <article class="announcement">
         {{- partial "blog-header.html" (dict "headingLink" true "level" 4 "reduced" true "page" . ) }}
 
         {{- if in .RawContent "<!--more-->" }}
@@ -18,15 +18,15 @@
         {{- else }}
           <p>{{ .Summary | safeHTML }}</p>
         {{- end }}
-      </div>
+      </article>
       {{- end }}
-    </div>
+    </section>
     {{- end }}
 
     {{- $home := .Site.GetPage "/home" }}
     {{- $sections := where ($home.Resources.ByType "page") ".File.LogicalName" "index.md" }}
     {{- range sort $sections "File.Path" "asc" }}
-    <div class="section">
+    <section class="section">
       {{- $hdg_id := .Title | lower | safeURL }}
       <h2 id="{{ $hdg_id }}" class="on-hover-trg">{{ .Title }} <a href="#{{ $hdg_id }}" class="on-hover"><i class="fa-solid fa-link small"></i></a></h2>
       {{ .Content -}}
@@ -62,7 +62,7 @@
         {{- end }}
       </div>
       {{- end }}
-    </div>
+    </section>
     {{ end }}
 
   </main>

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" }}
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta charset="utf-8">
   {{- partial "robots.html" . -}}
-  {{ with resources.Get "pico-1.5.11/scss/pico.scss" | toCSS $cssOptionsPico | minify | fingerprint -}}
-  <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
-  {{- end }}
-  {{ with resources.Get "sass/main.scss" | toCSS $cssOptionsMain | minify | fingerprint -}}
+  {{ with resources.Get "scss/main.scss" | toCSS $cssOptions | minify | fingerprint -}}
   <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
   {{- end }}
   <link rel="stylesheet" href="{{ .Site.BaseURL }}thirdparty/fontawesome6/css/all.min.css" crossorigin="anonymous">