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.
diff --git a/themes/ccchh/assets/scss/classes/container.scss b/themes/ccchh/assets/scss/classes/container.scss
new file mode 100644
index 0000000..4c546ec
--- /dev/null
+++ b/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");
+ }
+ }
+}
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
new file mode 100644
index 0000000..e6c09d9
--- /dev/null
+++ b/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";
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;
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 }}
-