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

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