diff --git a/themes/ccchh/assets/js/hamburgerAdditional.js b/themes/ccchh/assets/js/hamburgerAdditional.js
new file mode 100644
index 0000000..73c602f
--- /dev/null
+++ b/themes/ccchh/assets/js/hamburgerAdditional.js
@@ -0,0 +1,33 @@
+"use strict";
+
+function setScrolling(enable = true) {
+ const body = document.body;
+ if (enable) {
+ body.style.overflow = "unset";
+ }
+ else {
+ body.style.overflow = "hidden";
+ }
+};
+
+document.addEventListener("DOMContentLoaded", () => {
+ const hamburgerMenuCheckbox = document.querySelector(".menu-button");
+
+ // When the hamburger menu is open, disable scrolling.
+ hamburgerMenuCheckbox.addEventListener("change", () => {
+ if (hamburgerMenuCheckbox.checked) {
+ setScrolling(false);
+ }
+ else {
+ setScrolling(true);
+ }
+ });
+
+ window.addEventListener("resize", () => {
+ if (window.innerWidth > 768 && hamburgerMenuCheckbox.checked) {
+ // Uncheck the checkbox to disable scrolling and to get to the original state.
+ hamburgerMenuCheckbox.checked = false;
+ hamburgerMenuCheckbox.dispatchEvent(new Event("change"));
+ }
+ });
+});
diff --git a/themes/ccchh/assets/pico-1.5.11/LICENSE.md b/themes/ccchh/assets/pico-1.5.11/LICENSE.md
new file mode 100644
index 0000000..275ca7e
--- /dev/null
+++ b/themes/ccchh/assets/pico-1.5.11/LICENSE.md
@@ -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/pico-1.5.11/scss/_functions.scss b/themes/ccchh/assets/pico-1.5.11/scss/_functions.scss
new file mode 100644
index 0000000..160870c
--- /dev/null
+++ b/themes/ccchh/assets/pico-1.5.11/scss/_functions.scss
@@ -0,0 +1,4 @@
+// Output color in RGB format
+@function to-rgb($color) {
+ @return unquote("rgb(#{red($color)}, #{green($color)}, #{blue($color)})");
+}
\ No newline at end of file
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/_variables.scss b/themes/ccchh/assets/pico-1.5.11/scss/_variables.scss
new file mode 100644
index 0000000..e2f653e
--- /dev/null
+++ b/themes/ccchh/assets/pico-1.5.11/scss/_variables.scss
@@ -0,0 +1,69 @@
+// Config
+// ––––––––––––––––––––
+
+// Set the root element for $enable-semantic-container and $enable-responsive-spacings
+$semantic-root-element: "body" !default;
+
+// Enable <header>, <main>, <footer> inside $semantic-root-element as containers
+$enable-semantic-container: false !default;
+
+// Enable .container and .container-fluid
+$enable-class-container: true !default;
+
+// Enable a centered viewport for <header>, <main>, <footer> inside $enable-semantic-container
+// Fluid layout if disabled
+$enable-viewport: true !default;
+
+// Enable responsive spacings for <header>, <main>, <footer>, <section>, <article>
+// Fixed spacings if disabled
+$enable-responsive-spacings: true !default;
+
+// Enable responsive typography
+// Fixed root element size if disabled
+$enable-responsive-typography: true !default;
+
+// Enable .classes
+// .classless version if disabled
+$enable-classes: true !default;
+
+// Enable .grid class
+$enable-grid: true !default;
+
+// Enable transitions
+$enable-transitions: true !default;
+
+// Enable overriding with !important
+$enable-important: true !default;
+
+// Responsive
+// ––––––––––––––––––––
+
+// 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/assets/pico-1.5.11/scss/components/_accordion.scss b/themes/ccchh/assets/pico-1.5.11/scss/components/_accordion.scss
new file mode 100644
index 0000000..59b2c65
--- /dev/null
+++ b/themes/ccchh/assets/pico-1.5.11/scss/components/_accordion.scss
@@ -0,0 +1,116 @@
+/**
+ * Accordion (<details>)
+ */
+
+details {
+ display: block;
+ margin-bottom: var(--spacing);
+ padding-bottom: var(--spacing);
+ border-bottom: var(--border-width) solid var(--accordion-border-color);
+
+ summary {
+ line-height: 1rem;
+ list-style-type: none;
+ cursor: pointer;
+
+ &:not([role]) {
+ color: var(--accordion-close-summary-color);
+ }
+
+ @if $enable-transitions {
+ transition: color var(--transition);
+ }
+
+ // Reset marker
+ &::-webkit-details-marker {
+ display: none;
+ }
+
+ &::marker {
+ display: none;
+ }
+
+ &::-moz-list-bullet {
+ list-style-type: none;
+ }
+
+ // Marker
+ &::after {
+ display: block;
+ width: 1rem;
+ height: 1rem;
+ margin-inline-start: calc(var(--spacing, 1rem) * 0.5);
+ float: right;
+ transform: rotate(-90deg);
+ background-image: var(--icon-chevron);
+ background-position: right center;
+ background-size: 1rem auto;
+ background-repeat: no-repeat;
+ content: "";
+
+ @if $enable-transitions {
+ transition: transform var(--transition);
+ }
+ }
+
+ &:focus {
+ outline: none;
+
+ &:not([role="button"]) {
+ color: var(--accordion-active-summary-color);
+ }
+ }
+
+ // Type button
+ &[role="button"] {
+ width: 100%;
+ text-align: left;
+
+ // Marker
+ &::after {
+ height: calc(1rem * var(--line-height, 1.5));
+ background-image: var(--icon-chevron-button);
+ }
+
+ @if $enable-classes {
+ // .contrast
+ &:not(.outline).contrast {
+ // Marker
+ &::after {
+ background-image: var(--icon-chevron-button-inverse);
+ }
+ }
+ }
+ }
+ }
+
+ // Open
+ &[open] {
+ > summary {
+ margin-bottom: calc(var(--spacing));
+
+ &:not([role]) {
+ &:not(:focus) {
+ color: var(--accordion-open-summary-color);
+ }
+ }
+
+ &::after {
+ transform: rotate(0);
+ }
+ }
+ }
+}
+
+[dir="rtl"] {
+ details {
+ summary {
+ text-align: right;
+
+ &::after {
+ float: left;
+ background-position: left center;
+ }
+ }
+ }
+}
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/components/_card.scss b/themes/ccchh/assets/pico-1.5.11/scss/components/_card.scss
new file mode 100644
index 0000000..924415e
--- /dev/null
+++ b/themes/ccchh/assets/pico-1.5.11/scss/components/_card.scss
@@ -0,0 +1,36 @@
+/**
+ * Card (<article>)
+ */
+
+article {
+ margin: var(--block-spacing-vertical) 0;
+ padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
+ border-radius: var(--border-radius);
+ background: var(--card-background-color);
+ box-shadow: var(--card-box-shadow);
+
+ > header,
+ > footer {
+ margin-right: calc(var(--block-spacing-horizontal) * -1);
+ margin-left: calc(var(--block-spacing-horizontal) * -1);
+ padding: calc(var(--block-spacing-vertical) * 0.66)
+ var(--block-spacing-horizontal);
+ background-color: var(--card-sectionning-background-color);
+ }
+
+ > header {
+ margin-top: calc(var(--block-spacing-vertical) * -1);
+ margin-bottom: var(--block-spacing-vertical);
+ border-bottom: var(--border-width) solid var(--card-border-color);
+ border-top-right-radius: var(--border-radius);
+ border-top-left-radius: var(--border-radius);
+ }
+
+ > footer {
+ margin-top: var(--block-spacing-vertical);
+ margin-bottom: calc(var(--block-spacing-vertical) * -1);
+ border-top: var(--border-width) solid var(--card-border-color);
+ border-bottom-right-radius: var(--border-radius);
+ border-bottom-left-radius: var(--border-radius);
+ }
+}
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/components/_dropdown.scss b/themes/ccchh/assets/pico-1.5.11/scss/components/_dropdown.scss
new file mode 100644
index 0000000..a16e6d2
--- /dev/null
+++ b/themes/ccchh/assets/pico-1.5.11/scss/components/_dropdown.scss
@@ -0,0 +1,214 @@
+/**
+ * Dropdown ([role="list"])
+ */
+
+// Menu
+details[role="list"],
+li[role="list"] {
+ position: relative;
+}
+
+details[role="list"] summary + ul,
+li[role="list"] > ul {
+ display: flex;
+ z-index: 99;
+ position: absolute;
+ top: auto;
+ right: 0;
+ left: 0;
+ flex-direction: column;
+ margin: 0;
+ padding: 0;
+ border: var(--border-width) solid var(--dropdown-border-color);
+ border-radius: var(--border-radius);
+ border-top-right-radius: 0;
+ border-top-left-radius: 0;
+ background-color: var(--dropdown-background-color);
+ box-shadow: var(--card-box-shadow);
+ color: var(--dropdown-color);
+ white-space: nowrap;
+
+ li {
+ width: 100%;
+ margin-bottom: 0;
+ padding: calc(var(--form-element-spacing-vertical) * 0.5)
+ var(--form-element-spacing-horizontal);
+ list-style: none;
+
+ &:first-of-type {
+ margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
+ }
+
+ &:last-of-type {
+ margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
+ }
+
+ a {
+ display: block;
+ margin: calc(var(--form-element-spacing-vertical) * -0.5)
+ calc(var(--form-element-spacing-horizontal) * -1);
+ padding: calc(var(--form-element-spacing-vertical) * 0.5)
+ var(--form-element-spacing-horizontal);
+ overflow: hidden;
+ color: var(--dropdown-color);
+ text-decoration: none;
+ text-overflow: ellipsis;
+
+ &:hover {
+ background-color: var(--dropdown-hover-background-color);
+ }
+ }
+ }
+}
+
+// Marker
+details[role="list"] summary,
+li[role="list"] > a {
+ &::after {
+ display: block;
+ width: 1rem;
+ height: calc(1rem * var(--line-height, 1.5));
+ margin-inline-start: 0.5rem;
+ float: right;
+ transform: rotate(0deg);
+ background-image: var(--icon-chevron);
+ background-position: right center;
+ background-size: 1rem auto;
+ background-repeat: no-repeat;
+ content: "";
+ }
+}
+
+// Global dropdown only
+details[role="list"] {
+ padding: 0;
+ border-bottom: none;
+
+ // Style <summary> as <select>
+ summary {
+ margin-bottom: 0;
+
+ &:not([role]) {
+ height: calc(
+ 1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 +
+ var(--border-width) * 2
+ );
+ padding: var(--form-element-spacing-vertical)
+ var(--form-element-spacing-horizontal);
+ border: var(--border-width) solid var(--form-element-border-color);
+ border-radius: var(--border-radius);
+ background-color: var(--form-element-background-color);
+ color: var(--form-element-placeholder-color);
+ line-height: inherit;
+ cursor: pointer;
+
+ @if $enable-transitions {
+ transition: background-color var(--transition),
+ border-color var(--transition), color var(--transition),
+ box-shadow var(--transition);
+ }
+
+ &:active,
+ &:focus {
+ border-color: var(--form-element-active-border-color);
+ background-color: var(--form-element-active-background-color);
+ }
+
+ &:focus {
+ box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
+ }
+ }
+ }
+
+ // Close for details[role="list"]
+ &[open] summary {
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 0;
+
+ &::before {
+ display: block;
+ z-index: 1;
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background: none;
+ content: "";
+ cursor: default;
+ }
+ }
+}
+
+// All Dropdowns inside <nav>
+nav details[role="list"] summary,
+nav li[role="list"] a {
+ display: flex;
+ direction: ltr;
+}
+
+nav details[role="list"] summary + ul,
+nav li[role="list"] > ul {
+ min-width: fit-content;
+ border-radius: var(--border-radius);
+
+ li a {
+ border-radius: 0;
+ }
+}
+
+// Dropdowns inside <nav> as nested <details>
+nav details[role="list"] {
+ summary,
+ summary:not([role]) {
+ height: auto;
+ padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
+ }
+
+ &[open] summary {
+ border-radius: var(--border-radius);
+ }
+
+ summary + ul {
+ margin-top: var(--outline-width);
+ margin-inline-start: 0;
+ }
+
+ summary[role="link"] {
+ margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
+ line-height: var(--line-height);
+
+ + ul {
+ margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
+ margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
+ }
+ }
+}
+
+// Dropdowns inside a <nav> without using <details>
+li[role="list"] {
+ // Open on hover (for mobile)
+ // or on active/focus (for keyboard navigation)
+ &:hover > ul,
+ a:active ~ ul,
+ a:focus ~ ul {
+ display: flex;
+ }
+
+ > ul {
+ display: none;
+ margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
+ margin-inline-start: calc(
+ var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal)
+ );
+ }
+
+ > a::after {
+ background-image: var(--icon-chevron);
+ }
+}
+
+label > details[role="list"] {
+ margin-top: calc(var(--spacing) * .25);
+ margin-bottom: var(--spacing);
+}
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/components/_modal.scss b/themes/ccchh/assets/pico-1.5.11/scss/components/_modal.scss
new file mode 100644
index 0000000..af5cb16
--- /dev/null
+++ b/themes/ccchh/assets/pico-1.5.11/scss/components/_modal.scss
@@ -0,0 +1,168 @@
+/**
+ * Modal (<dialog>)
+ */
+
+:root {
+ --scrollbar-width: 0px;
+}
+
+dialog {
+ display: flex;
+ z-index: 999;
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ align-items: center;
+ justify-content: center;
+ width: inherit;
+ min-width: 100%;
+ height: inherit;
+ min-height: 100%;
+ padding: var(--spacing);
+ border: 0;
+ backdrop-filter: var(--modal-overlay-backdrop-filter);
+ background-color: var(--modal-overlay-background-color);
+ color: var(--color);
+
+ // Content
+ article {
+ $close-selector: if($enable-classes, ".close", "a[rel='prev']");
+ max-height: calc(100vh - var(--spacing) * 2);
+ overflow: auto;
+
+ @if map-get($breakpoints, "sm") {
+ @media (min-width: map-get($breakpoints, "sm")) {
+ max-width: map-get($viewports, "sm");
+ }
+ }
+
+ @if map-get($breakpoints, "md") {
+ @media (min-width: map-get($breakpoints, "md")) {
+ max-width: map-get($viewports, "md");
+ }
+ }
+
+ > header,
+ > footer {
+ padding: calc(var(--block-spacing-vertical) * 0.5)
+ var(--block-spacing-horizontal);
+ }
+
+ > header {
+ #{$close-selector} {
+ margin: 0;
+ margin-left: var(--spacing);
+ float: right;
+ }
+ }
+
+ > footer {
+ text-align: right;
+
+ [role="button"] {
+ margin-bottom: 0;
+
+ &:not(:first-of-type) {
+ margin-left: calc(var(--spacing) * 0.5);
+ }
+ }
+ }
+
+ p {
+ &:last-of-type {
+ margin: 0;
+ }
+ }
+
+ // Close icon
+ #{$close-selector} {
+ display: block;
+ width: 1rem;
+ height: 1rem;
+ margin-top: calc(var(--block-spacing-vertical) * -0.5);
+ margin-bottom: var(--typography-spacing-vertical);
+ margin-left: auto;
+ background-image: var(--icon-close);
+ background-position: center;
+ background-size: auto 1rem;
+ background-repeat: no-repeat;
+ opacity: 0.5;
+
+ @if $enable-transitions {
+ transition: opacity var(--transition);
+ }
+
+ &:is([aria-current], :hover, :active, :focus) {
+ opacity: 1;
+ }
+ }
+ }
+
+ // Closed state
+ &:not([open]),
+ &[open="false"] {
+ display: none;
+ }
+}
+
+// Utilities
+@if $enable-classes {
+ .modal-is-open {
+ padding-right: var(--scrollbar-width, 0px);
+ overflow: hidden;
+ pointer-events: none;
+ touch-action: none;
+
+ dialog {
+ pointer-events: auto;
+ }
+ }
+}
+
+// Animations
+@if ($enable-classes and $enable-transitions) {
+ $animation-duration: 0.2s;
+
+ :where(.modal-is-opening, .modal-is-closing) {
+ dialog,
+ dialog > article {
+ animation-duration: $animation-duration;
+ animation-timing-function: ease-in-out;
+ animation-fill-mode: both;
+ }
+
+ dialog {
+ animation-duration: ($animation-duration * 4);
+ animation-name: modal-overlay ;
+
+ > article {
+ animation-delay: $animation-duration;
+ animation-name: modal;
+ }
+ }
+ }
+
+ .modal-is-closing {
+ dialog,
+ dialog > article {
+ animation-delay: 0s;
+ animation-direction: reverse;
+ }
+ }
+
+ @keyframes modal-overlay {
+ from {
+ backdrop-filter: none;
+ background-color: transparent;
+ }
+ }
+
+ @keyframes modal {
+ from {
+ transform: translateY(-100%);
+ opacity: 0;
+ }
+ }
+}
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/components/_nav.scss b/themes/ccchh/assets/pico-1.5.11/scss/components/_nav.scss
new file mode 100644
index 0000000..06fdd22
--- /dev/null
+++ b/themes/ccchh/assets/pico-1.5.11/scss/components/_nav.scss
@@ -0,0 +1,141 @@
+/**
+ * Nav
+ */
+
+// Reboot based on :
+// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+
+// Prevent VoiceOver from ignoring list semantics in Safari (opinionated)
+:where(nav li)::before {
+ float: left;
+ content: "\200B";
+}
+
+// Pico
+// ––––––––––––––––––––
+
+// Horizontal Nav
+nav,
+nav ul {
+ display: flex;
+}
+
+nav {
+ justify-content: space-between;
+
+ ol,
+ ul {
+ align-items: center;
+ margin-bottom: 0;
+ padding: 0;
+ list-style: none;
+
+ &:first-of-type {
+ margin-left: calc(var(--nav-element-spacing-horizontal) * -1);
+ }
+ &:last-of-type {
+ margin-right: calc(var(--nav-element-spacing-horizontal) * -1);
+ }
+ }
+
+ li {
+ display: inline-block;
+ margin: 0;
+ padding: var(--nav-element-spacing-vertical)
+ var(--nav-element-spacing-horizontal);
+
+ // Minimal support for buttons and forms elements
+ > * {
+ --spacing: 0;
+ }
+ }
+
+ :where(a, [role="link"]) {
+ display: inline-block;
+ margin: calc(var(--nav-link-spacing-vertical) * -1)
+ calc(var(--nav-link-spacing-horizontal) * -1);
+ padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
+ border-radius: var(--border-radius);
+ text-decoration: none;
+
+ &:is([aria-current], :hover, :active, :focus) {
+ text-decoration: none;
+ }
+ }
+
+ // Breadcrumb
+ &[aria-label="breadcrumb"] {
+ align-items: center;
+ justify-content: start;
+
+ & ul li {
+ &:not(:first-child) {
+ margin-inline-start: var(--nav-link-spacing-horizontal);
+ }
+
+ &:not(:last-child) {
+ ::after {
+ position: absolute;
+ width: calc(var(--nav-link-spacing-horizontal) * 2);
+ margin-inline-start: calc(var(--nav-link-spacing-horizontal) / 2);
+ content: "/";
+ color: var(--muted-color);
+ text-align: center;
+ }
+ }
+ }
+
+ & a[aria-current] {
+ background-color: transparent;
+ color: inherit;
+ text-decoration: none;
+ pointer-events: none;
+ }
+ }
+
+ // Minimal support for role="button"
+ [role="button"] {
+ margin-right: inherit;
+ margin-left: inherit;
+ padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
+ }
+}
+
+// Vertical Nav
+aside {
+ nav,
+ ol,
+ ul,
+ li {
+ display: block;
+ }
+
+ li {
+ padding: calc(var(--nav-element-spacing-vertical) * 0.5)
+ var(--nav-element-spacing-horizontal);
+
+ a {
+ display: block;
+ }
+
+ // Minimal support for links as buttons
+ [role="button"] {
+ margin: inherit;
+ }
+ }
+}
+
+// Breadcrumb RTL
+[dir="rtl"] {
+ nav {
+ &[aria-label="breadcrumb"] {
+ & ul li {
+ &:not(:last-child) {
+ ::after {
+ content: "\\";
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/components/_progress.scss b/themes/ccchh/assets/pico-1.5.11/scss/components/_progress.scss
new file mode 100644
index 0000000..d62ddc0
--- /dev/null
+++ b/themes/ccchh/assets/pico-1.5.11/scss/components/_progress.scss
@@ -0,0 +1,89 @@
+/**
+ * Progress
+ */
+
+// Reboot based on :
+// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+// ––––––––––––––––––––
+
+// 1. Add the correct display in Edge 18- and IE
+// 2. Add the correct vertical alignment in Chrome, Edge, and Firefox
+progress {
+ display: inline-block; // 1
+ vertical-align: baseline; // 2
+}
+
+// Pico
+// ––––––––––––––––––––
+
+progress {
+ // Reset the default appearance
+ -webkit-appearance: none;
+ -moz-appearance: none;
+
+ // Styles
+ display: inline-block;
+ appearance: none;
+ width: 100%;
+ height: 0.5rem;
+ margin-bottom: calc(var(--spacing) * 0.5);
+ overflow: hidden;
+
+ // Remove Firefox and Opera border
+ border: 0;
+ border-radius: var(--border-radius);
+ background-color: var(--progress-background-color);
+
+ // IE10 uses `color` to set the bar background-color
+ color: var(--progress-color);
+
+ &::-webkit-progress-bar {
+ border-radius: var(--border-radius);
+ background: none;
+ }
+ &[value]::-webkit-progress-value {
+ background-color: var(--progress-color);
+ }
+ &::-moz-progress-bar {
+ background-color: var(--progress-color);
+ }
+
+ // Indeterminate state
+ @media (prefers-reduced-motion: no-preference) {
+ &:indeterminate {
+ background: var(--progress-background-color)
+ linear-gradient(
+ to right,
+ var(--progress-color) 30%,
+ var(--progress-background-color) 30%
+ )
+ top left / 150% 150% no-repeat;
+ animation: progress-indeterminate 1s linear infinite;
+
+ &[value]::-webkit-progress-value {
+ background-color: transparent;
+ }
+ &::-moz-progress-bar {
+ background-color: transparent;
+ }
+ }
+ }
+}
+
+[dir="rtl"] {
+ @media (prefers-reduced-motion: no-preference) {
+ progress:indeterminate {
+ animation-direction: reverse;
+ }
+ }
+}
+
+@keyframes progress-indeterminate {
+ 0% {
+ background-position: 200% 0;
+ }
+ 100% {
+ background-position: -200% 0;
+ }
+}
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/content/_button.scss b/themes/ccchh/assets/pico-1.5.11/scss/content/_button.scss
new file mode 100644
index 0000000..075a166
--- /dev/null
+++ b/themes/ccchh/assets/pico-1.5.11/scss/content/_button.scss
@@ -0,0 +1,183 @@
+/**
+ * Button
+ */
+
+// Reboot based on :
+// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+// ––––––––––––––––––––
+
+// 1. Change the font styles in all browsers
+// 2. Remove the margin on controls in Safari
+// 3. Show the overflow in Edge
+button {
+ margin: 0; // 2
+ overflow: visible; // 3
+ font-family: inherit; // 1
+ text-transform: none; // 1
+}
+
+// Correct the inability to style buttons in iOS and Safari
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+ -webkit-appearance: button;
+}
+
+// Pico
+// ––––––––––––––––––––
+
+button {
+ display: block;
+ width: 100%;
+ margin-bottom: var(--spacing);
+}
+
+[role="button"] {
+ display: inline-block;
+ text-decoration: none;
+}
+
+button,
+input[type="submit"],
+input[type="button"],
+input[type="reset"],
+[role="button"] {
+ --background-color: var(--primary);
+ --border-color: var(--primary);
+ --color: var(--primary-inverse);
+ --box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
+ padding: var(--form-element-spacing-vertical)
+ var(--form-element-spacing-horizontal);
+ border: var(--border-width) solid var(--border-color);
+ border-radius: var(--border-radius);
+ outline: none;
+ background-color: var(--background-color);
+ box-shadow: var(--box-shadow);
+ color: var(--color);
+ font-weight: var(--font-weight);
+ font-size: 1rem;
+ line-height: var(--line-height);
+ text-align: center;
+ cursor: pointer;
+
+ @if $enable-transitions {
+ transition: background-color var(--transition),
+ border-color var(--transition), color var(--transition),
+ box-shadow var(--transition);
+ }
+
+ &:is([aria-current], :hover, :active, :focus) {
+ --background-color: var(--primary-hover);
+ --border-color: var(--primary-hover);
+ --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
+ --color: var(--primary-inverse);
+ }
+
+ &:focus {
+ --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+ 0 0 0 var(--outline-width) var(--primary-focus);
+ }
+}
+
+// .secondary, .contrast & .outline
+@if $enable-classes {
+
+ // Secondary
+ :is(button, input[type="submit"], input[type="button"], [role="button"]).secondary,
+ input[type="reset"] {
+ --background-color: var(--secondary);
+ --border-color: var(--secondary);
+ --color: var(--secondary-inverse);
+ cursor: pointer;
+
+ &:is([aria-current], :hover, :active, :focus) {
+ --background-color: var(--secondary-hover);
+ --border-color: var(--secondary-hover);
+ --color: var(--secondary-inverse);
+ }
+
+ &:focus {
+ --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+ 0 0 0 var(--outline-width) var(--secondary-focus);
+ }
+ }
+
+ // Contrast
+ :is(button, input[type="submit"], input[type="button"], [role="button"]).contrast {
+ --background-color: var(--contrast);
+ --border-color: var(--contrast);
+ --color: var(--contrast-inverse);
+
+ &:is([aria-current], :hover, :active, :focus) {
+ --background-color: var(--contrast-hover);
+ --border-color: var(--contrast-hover);
+ --color: var(--contrast-inverse);
+ }
+
+ &:focus {
+ --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+ 0 0 0 var(--outline-width) var(--contrast-focus);
+ }
+ }
+
+ // Outline (primary)
+ :is(button, input[type="submit"], input[type="button"], [role="button"]).outline,
+ input[type="reset"].outline {
+ --background-color: transparent;
+ --color: var(--primary);
+
+ &:is([aria-current], :hover, :active, :focus) {
+ --background-color: transparent;
+ --color: var(--primary-hover);
+ }
+ }
+
+ // Outline (secondary)
+ :is(button, input[type="submit"], input[type="button"], [role="button"]).outline.secondary,
+ input[type="reset"].outline {
+ --color: var(--secondary);
+
+ &:is([aria-current], :hover, :active, :focus) {
+ --color: var(--secondary-hover);
+ }
+ }
+
+ // Outline (contrast)
+ :is(button, input[type="submit"], input[type="button"], [role="button"]).outline.contrast {
+ --color: var(--contrast);
+
+ &:is([aria-current], :hover, :active, :focus) {
+ --color: var(--contrast-hover);
+ }
+ }
+}
+@else {
+ // Secondary button without .class
+ input[type="reset"] {
+ --background-color: var(--secondary);
+ --border-color: var(--secondary);
+ --color: var(--secondary-inverse);
+ cursor: pointer;
+
+ &:is([aria-current], :hover, :active, :focus) {
+ --background-color: var(--secondary-hover);
+ --border-color: var(--secondary-hover);
+ }
+
+ &:focus {
+ --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+ 0 0 0 var(--outline-width) var(--secondary-focus);
+ }
+ }
+}
+
+// Button [disabled]
+// Links without href are disabled by default
+:where(button, [type="submit"], [type="button"], [type="reset"], [role="button"])[disabled],
+:where(fieldset[disabled]) :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]),
+a[role="button"]:not([href]) {
+ opacity: 0.5;
+ pointer-events: none;
+}
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/content/_code.scss b/themes/ccchh/assets/pico-1.5.11/scss/content/_code.scss
new file mode 100644
index 0000000..e03b191
--- /dev/null
+++ b/themes/ccchh/assets/pico-1.5.11/scss/content/_code.scss
@@ -0,0 +1,91 @@
+/**
+ * Code
+ */
+
+// Reboot based on :
+// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+// ––––––––––––––––––––
+
+// 1. Correct the inheritance and scaling of font size in all browsers
+// 2. Correct the odd `em` font sizing in all browsers
+pre,
+code,
+kbd,
+samp {
+ font-size: 0.875em; // 2
+ font-family: var(--font-family); // 1
+}
+
+// Prevent overflow of the container in all browsers (opinionated)
+pre {
+ -ms-overflow-style: scrollbar;
+ overflow: auto;
+}
+
+// Pico
+// ––––––––––––––––––––
+
+pre,
+code,
+kbd {
+ border-radius: var(--border-radius);
+ background: var(--code-background-color);
+ color: var(--code-color);
+ font-weight: var(--font-weight);
+ line-height: initial;
+}
+
+code,
+kbd {
+ display: inline-block;
+ padding: 0.375rem 0.5rem;
+}
+
+pre {
+ display: block;
+ margin-bottom: var(--spacing);
+ overflow-x: auto;
+
+ > code {
+ display: block;
+ padding: var(--spacing);
+ background: none;
+ font-size: 14px;
+ line-height: var(--line-height);
+ }
+}
+
+// Code Syntax
+code {
+ // Tags
+ b {
+ color: var(--code-tag-color);
+ font-weight: var(--font-weight);
+ }
+
+ // Properties
+ i {
+ color: var(--code-property-color);
+ font-style: normal;
+ }
+
+ // Values
+ u {
+ color: var(--code-value-color);
+ text-decoration: none;
+ }
+
+ // Comments
+ em {
+ color: var(--code-comment-color);
+ font-style: normal;
+ }
+}
+
+// kbd
+kbd {
+ background-color: var(--code-kbd-background-color);
+ color: var(--code-kbd-color);
+ vertical-align: baseline;
+}
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/content/_embedded.scss b/themes/ccchh/assets/pico-1.5.11/scss/content/_embedded.scss
new file mode 100644
index 0000000..d48293b
--- /dev/null
+++ b/themes/ccchh/assets/pico-1.5.11/scss/content/_embedded.scss
@@ -0,0 +1,48 @@
+/**
+ * Embedded content
+ */
+
+// Reboot based on :
+// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+// ––––––––––––––––––––
+
+// Change the alignment on media elements in all browsers (opinionated)
+:where(audio, canvas, iframe, img, svg, video) {
+ vertical-align: middle;
+}
+
+// Add the correct display in IE 9-
+audio,
+video {
+ display: inline-block;
+}
+
+// Add the correct display in iOS 4-7
+audio:not([controls]) {
+ display: none;
+ height: 0;
+}
+
+// Remove the border on iframes in all browsers (opinionated)
+:where(iframe) {
+ border-style: none;
+}
+
+// 1. Remove the border on images inside links in IE 10.
+// 2. Responsive by default
+img {
+ max-width: 100%; // 2
+ height: auto; // 2
+ border-style: none; // 1
+}
+
+// Change the fill color to match the text color in all browsers (opinionated)
+:where(svg:not([fill])) {
+ fill: currentColor;
+}
+
+// Hide the overflow in IE
+svg:not(:root) {
+ overflow: hidden;
+}
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/content/_form-alt-input-types.scss b/themes/ccchh/assets/pico-1.5.11/scss/content/_form-alt-input-types.scss
new file mode 100644
index 0000000..f22151e
--- /dev/null
+++ b/themes/ccchh/assets/pico-1.5.11/scss/content/_form-alt-input-types.scss
@@ -0,0 +1,286 @@
+/**
+ * Form elements
+ * Alternatives input types (Not Checkboxes & Radios)
+ */
+
+// Color
+[type="color"] {
+ // Wrapper
+ @mixin color-wrapper {
+ padding: 0;
+ }
+
+ &::-webkit-color-swatch-wrapper {
+ @include color-wrapper;
+ }
+
+ &::-moz-focus-inner {
+ @include color-wrapper;
+ }
+
+ // Swatch
+ @mixin color-swatch {
+ border: 0;
+ border-radius: calc(var(--border-radius) * 0.5);
+ }
+
+ &::-webkit-color-swatch {
+ @include color-swatch;
+ }
+
+ &::-moz-color-swatch {
+ @include color-swatch;
+ }
+}
+
+// Date & Time
+// :not() are needed to add Specificity and avoid !important on padding
+input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
+ &:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
+ --icon-position: 0.75rem;
+ --icon-width: 1rem;
+ padding-right: calc(var(--icon-width) + var(--icon-position));
+ background-image: var(--icon-date);
+ background-position: center right var(--icon-position);
+ background-size: var(--icon-width) auto;
+ background-repeat: no-repeat;
+ }
+
+ // Time
+ &[type="time"] {
+ background-image: var(--icon-time);
+ }
+}
+
+// Calendar picker
+[type="date"],
+[type="datetime-local"],
+[type="month"],
+[type="time"],
+[type="week"] {
+ &::-webkit-calendar-picker-indicator {
+ width: var(--icon-width);
+ margin-right: calc(var(--icon-width) * -1);
+ margin-left: var(--icon-position);
+ opacity: 0;
+ }
+}
+
+[dir="rtl"]
+ :is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
+ text-align: right;
+}
+
+// Calendar icons are hidden in Firefox
+@if $enable-important {
+ @-moz-document url-prefix() {
+ [type="date"],
+ [type="datetime-local"],
+ [type="month"],
+ [type="time"],
+ [type="week"] {
+ padding-right: var(--form-element-spacing-horizontal) !important;
+ background-image: none !important;
+ }
+ }
+}
+
+// File
+[type="file"] {
+ --color: var(--muted-color);
+ padding: calc(var(--form-element-spacing-vertical) * 0.5) 0;
+ border: 0;
+ border-radius: 0;
+ background: none;
+
+ @mixin file-selector-button {
+ --background-color: var(--secondary);
+ --border-color: var(--secondary);
+ --color: var(--secondary-inverse);
+ margin-right: calc(var(--spacing) / 2);
+ margin-left: 0;
+ margin-inline-start: 0;
+ margin-inline-end: calc(var(--spacing) / 2);
+ padding: calc(var(--form-element-spacing-vertical) * 0.5)
+ calc(var(--form-element-spacing-horizontal) * 0.5);
+ border: var(--border-width) solid var(--border-color);
+ border-radius: var(--border-radius);
+ outline: none;
+ background-color: var(--background-color);
+ box-shadow: var(--box-shadow);
+ color: var(--color);
+ font-weight: var(--font-weight);
+ font-size: 1rem;
+ line-height: var(--line-height);
+ text-align: center;
+ cursor: pointer;
+
+ @if $enable-transitions {
+ transition: background-color var(--transition),
+ border-color var(--transition), color var(--transition),
+ box-shadow var(--transition);
+ }
+
+ &:is(:hover, :active, :focus) {
+ --background-color: var(--secondary-hover);
+ --border-color: var(--secondary-hover);
+ }
+ }
+
+ &::file-selector-button {
+ @include file-selector-button;
+ }
+
+ &::-webkit-file-upload-button {
+ @include file-selector-button;
+ }
+
+ &::-ms-browse {
+ @include file-selector-button;
+ }
+}
+
+// Range
+[type="range"] {
+ // Config
+ $height-track: 0.25rem;
+ $height-thumb: 1.25rem;
+ $border-thumb: 2px;
+
+ // Styles
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ width: 100%;
+ height: $height-thumb;
+ background: none;
+
+ // Slider Track
+ @mixin slider-track {
+ width: 100%;
+ height: $height-track;
+ border-radius: var(--border-radius);
+ background-color: var(--range-border-color);
+
+ @if $enable-transitions {
+ transition: background-color var(--transition),
+ box-shadow var(--transition);
+ }
+ }
+
+ &::-webkit-slider-runnable-track {
+ @include slider-track;
+ }
+
+ &::-moz-range-track {
+ @include slider-track;
+ }
+
+ &::-ms-track {
+ @include slider-track;
+ }
+
+ // Slider Thumb
+ @mixin slider-thumb {
+ -webkit-appearance: none;
+ width: $height-thumb;
+ height: $height-thumb;
+ margin-top: #{(-($height-thumb * 0.5) + ($height-track * 0.5))};
+ border: $border-thumb solid var(--range-thumb-border-color);
+ border-radius: 50%;
+ background-color: var(--range-thumb-color);
+ cursor: pointer;
+
+ @if $enable-transitions {
+ transition: background-color var(--transition),
+ transform var(--transition);
+ }
+ }
+ &::-webkit-slider-thumb {
+ @include slider-thumb;
+ }
+
+ &::-moz-range-thumb {
+ @include slider-thumb;
+ }
+
+ &::-ms-thumb {
+ @include slider-thumb;
+ }
+
+ &:hover,
+ &:focus {
+ --range-border-color: var(--range-active-border-color);
+ --range-thumb-color: var(--range-thumb-hover-color);
+ }
+
+ &:active {
+ --range-thumb-color: var(--range-thumb-active-color);
+
+ // Slider Thumb
+ &::-webkit-slider-thumb {
+ transform: scale(1.25);
+ }
+
+ &::-moz-range-thumb {
+ transform: scale(1.25);
+ }
+
+ &::-ms-thumb {
+ transform: scale(1.25);
+ }
+ }
+}
+
+// Search
+// :not() are needed to add Specificity and avoid !important on padding
+input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
+ &[type="search"] {
+ padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
+ border-radius: 5rem;
+ background-image: var(--icon-search);
+ background-position: center left 1.125rem;
+ background-size: 1rem auto;
+ background-repeat: no-repeat;
+
+ &[aria-invalid] {
+ @if $enable-important {
+ padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
+ }
+ @else {
+ padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
+ }
+ background-position: center left 1.125rem, center right 0.75rem;
+ }
+
+ &[aria-invalid="false"] {
+ background-image: var(--icon-search), var(--icon-valid);
+ }
+
+ &[aria-invalid="true"] {
+ background-image: var(--icon-search), var(--icon-invalid);
+ }
+ }
+}
+
+// Cancel button
+[type="search"] {
+ &::-webkit-search-cancel-button {
+ -webkit-appearance: none;
+ display: none;
+ }
+}
+
+[dir="rtl"] {
+ :where(input) {
+ &:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
+ &[type="search"] {
+ background-position: center right 1.125rem;
+
+ &[aria-invalid] {
+ background-position: center right 1.125rem, center left 0.75rem;
+ }
+ }
+ }
+ }
+}
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/content/_form-checkbox-radio.scss b/themes/ccchh/assets/pico-1.5.11/scss/content/_form-checkbox-radio.scss
new file mode 100644
index 0000000..c83d35e
--- /dev/null
+++ b/themes/ccchh/assets/pico-1.5.11/scss/content/_form-checkbox-radio.scss
@@ -0,0 +1,138 @@
+/**
+ * Form elements
+ * Checkboxes & Radios
+ */
+
+[type="checkbox"],
+[type="radio"] {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ width: 1.25em;
+ height: 1.25em;
+ margin-top: -0.125em;
+ margin-right: 0.375em;
+ margin-left: 0;
+ margin-inline-start: 0;
+ margin-inline-end: 0.375em;
+ border-width: var(--border-width);
+ font-size: inherit;
+ vertical-align: middle;
+ cursor: pointer;
+
+ &::-ms-check {
+ display: none; // unstyle IE checkboxes
+ }
+
+ &:checked,
+ &:checked:active,
+ &:checked:focus {
+ --background-color: var(--primary);
+ --border-color: var(--primary);
+ background-image: var(--icon-checkbox);
+ background-position: center;
+ background-size: 0.75em auto;
+ background-repeat: no-repeat;
+ }
+
+ & ~ label {
+ display: inline-block;
+ margin-right: 0.375em;
+ margin-bottom: 0;
+ cursor: pointer;
+ }
+}
+
+// Checkboxes
+[type="checkbox"] {
+ &:indeterminate {
+ --background-color: var(--primary);
+ --border-color: var(--primary);
+ background-image: var(--icon-minus);
+ background-position: center;
+ background-size: 0.75em auto;
+ background-repeat: no-repeat;
+ }
+}
+
+// Radios
+[type="radio"] {
+ border-radius: 50%;
+
+ &:checked,
+ &:checked:active,
+ &:checked:focus {
+ --background-color: var(--primary-inverse);
+ border-width: 0.35em;
+ background-image: none;
+ }
+}
+
+// Switchs
+[type="checkbox"][role="switch"] {
+ --background-color: var(--switch-background-color);
+ --border-color: var(--switch-background-color);
+ --color: var(--switch-color);
+
+ // Config
+ $switch-height: 1.25em;
+ $switch-width: 2.25em;
+ $switch-transition: 0.1s ease-in-out;
+
+ // Styles
+ width: $switch-width;
+ height: $switch-height;
+ border: var(--border-width) solid var(--border-color);
+ border-radius: $switch-height;
+ background-color: var(--background-color);
+ line-height: $switch-height;
+
+ &:focus {
+ --background-color: var(--switch-background-color);
+ --border-color: var(--switch-background-color);
+ }
+
+ &:checked {
+ --background-color: var(--switch-checked-background-color);
+ --border-color: var(--switch-checked-background-color);
+ }
+
+ &:before {
+ display: block;
+ width: calc(#{$switch-height} - (var(--border-width) * 2));
+ height: 100%;
+ border-radius: 50%;
+ background-color: var(--color);
+ content: "";
+
+ @if $enable-transitions {
+ transition: margin $switch-transition;
+ }
+ }
+
+ &:checked {
+ background-image: none;
+
+ &::before {
+ margin-left: calc(#{$switch-width * 0.5} - var(--border-width));
+ margin-inline-start: calc(#{$switch-width * 0.5} - var(--border-width));
+ }
+ }
+}
+
+// Aria-invalid
+[type="checkbox"],
+[type="checkbox"]:checked,
+[type="radio"],
+[type="radio"]:checked,
+[type="checkbox"][role="switch"],
+[type="checkbox"][role="switch"]:checked {
+
+ &[aria-invalid="false"] {
+ --border-color: var(--form-element-valid-border-color);
+ }
+
+ &[aria-invalid="true"] {
+ --border-color: var(--form-element-invalid-border-color);
+ }
+}
\ No newline at end of file
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/content/_form.scss b/themes/ccchh/assets/pico-1.5.11/scss/content/_form.scss
new file mode 100644
index 0000000..1dda8f3
--- /dev/null
+++ b/themes/ccchh/assets/pico-1.5.11/scss/content/_form.scss
@@ -0,0 +1,352 @@
+/**
+ * Form elements
+ */
+
+// Reboot based on :
+// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+// ––––––––––––––––––––
+
+// 1. Change the font styles in all browsers
+// 2. Remove the margin in Firefox and Safari
+input,
+optgroup,
+select,
+textarea {
+ margin: 0; // 2
+ font-size: 1rem; // 1
+ line-height: var(--line-height); // 1
+ font-family: inherit; // 1
+ letter-spacing: inherit; // 2
+}
+
+// Show the overflow in IE.
+input {
+ overflow: visible;
+}
+
+// Remove the inheritance of text transform in Edge, Firefox, and IE
+select {
+ text-transform: none;
+}
+
+// 1. Correct the text wrapping in Edge and IE
+// 2. Correct the color inheritance from `fieldset` elements in IE
+// 3. Remove the padding so developers are not caught out when they zero out
+// `fieldset` elements in all browsers
+legend {
+ max-width: 100%; // 1
+ padding: 0; // 3
+ color: inherit; // 2
+ white-space: normal; // 1
+}
+
+// 1. Remove the default vertical scrollbar in IE
+textarea {
+ overflow: auto; // 1
+}
+
+// Remove the padding in IE 10
+[type="checkbox"],
+[type="radio"] {
+ padding: 0;
+}
+
+// Correct the cursor style of increment and decrement buttons in Safari
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+ height: auto;
+}
+
+// 1. Correct the odd appearance in Chrome and Safari
+// 2. Correct the outline style in Safari
+[type="search"] {
+ -webkit-appearance: textfield; // 1
+ outline-offset: -2px; // 2
+}
+
+// Remove the inner padding in Chrome and Safari on macOS
+[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+// 1. Correct the inability to style clickable types in iOS and Safari
+// 2. Change font properties to `inherit` in Safari
+::-webkit-file-upload-button {
+ -webkit-appearance: button; // 1
+ font: inherit; // 2
+}
+
+// Remove the inner border and padding of focus outlines in Firefox
+::-moz-focus-inner {
+ padding: 0;
+ border-style: none;
+}
+
+// Remove the focus outline in Firefox
+:-moz-focusring {
+ outline: none;
+}
+
+// Remove the additional :invalid styles in Firefox
+:-moz-ui-invalid {
+ box-shadow: none;
+}
+
+// Change the inconsistent appearance in IE (opinionated)
+::-ms-expand {
+ display: none;
+}
+
+// Remove the border and padding in all browsers (opinionated)
+[type="file"],
+[type="range"] {
+ padding: 0;
+ border-width: 0;
+}
+
+// Pico
+// ––––––––––––––––––––
+
+// Force height for alternatives input types
+input:not([type="checkbox"], [type="radio"], [type="range"]) {
+ height: calc(
+ (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) +
+ (var(--border-width) * 2)
+ );
+}
+
+// Fieldset
+fieldset {
+ margin: 0;
+ margin-bottom: var(--spacing);
+ padding: 0;
+ border: 0;
+}
+
+// Label & legend
+label,
+fieldset legend {
+ display: block;
+ margin-bottom: calc(var(--spacing) * 0.25);
+ font-weight: var(--form-label-font-weight, var(--font-weight));
+}
+
+// Blocks, 100%
+input:not([type="checkbox"], [type="radio"]),
+select,
+textarea {
+ width: 100%;
+}
+
+// Reset appearance (Not Checkboxes, Radios, Range and File)
+input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
+select,
+textarea {
+ appearance: none;
+ padding: var(--form-element-spacing-vertical)
+ var(--form-element-spacing-horizontal);
+}
+
+// Commons styles
+input,
+select,
+textarea {
+ --background-color: var(--form-element-background-color);
+ --border-color: var(--form-element-border-color);
+ --color: var(--form-element-color);
+ --box-shadow: none;
+ border: var(--border-width) solid var(--border-color);
+ border-radius: var(--border-radius);
+ outline: none;
+ background-color: var(--background-color);
+ box-shadow: var(--box-shadow);
+ color: var(--color);
+ font-weight: var(--font-weight);
+
+ @if $enable-transitions {
+ transition: background-color var(--transition),
+ border-color var(--transition), color var(--transition),
+ box-shadow var(--transition);
+ }
+}
+
+// Active & Focus
+input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [readonly]),
+:where(select, textarea) {
+ &:is(:active, :focus) {
+ --background-color: var(--form-element-active-background-color);
+ }
+}
+
+// Active & Focus
+input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]),
+:where(select, textarea) {
+ &:is(:active, :focus) {
+ --border-color: var(--form-element-active-border-color);
+ }
+}
+
+// Focus
+input:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]),
+select,
+textarea {
+ &:focus {
+ --box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
+ }
+}
+
+// Disabled
+input:not([type="submit"], [type="button"], [type="reset"])[disabled],
+select[disabled],
+textarea[disabled],
+:where(fieldset[disabled]) :is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
+ --background-color: var(--form-element-disabled-background-color);
+ --border-color: var(--form-element-disabled-border-color);
+ opacity: var(--form-element-disabled-opacity);
+ pointer-events: none;
+}
+
+// Aria-invalid
+:where(input, select, textarea) {
+ &:not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
+ &[aria-invalid] {
+ @if $enable-important {
+ padding-right: calc(
+ var(--form-element-spacing-horizontal) + 1.5rem
+ ) !important;
+ padding-left: var(--form-element-spacing-horizontal);
+ padding-inline-start: var(--form-element-spacing-horizontal) !important;
+ padding-inline-end: calc(
+ var(--form-element-spacing-horizontal) + 1.5rem
+ ) !important;
+ }
+ @else {
+ padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
+ padding-left: var(--form-element-spacing-horizontal);
+ padding-inline-start: var(--form-element-spacing-horizontal);
+ padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
+ }
+ background-position: center right 0.75rem;
+ background-size: 1rem auto;
+ background-repeat: no-repeat;
+ }
+
+ &[aria-invalid="false"] {
+ background-image: var(--icon-valid);
+ }
+
+ &[aria-invalid="true"] {
+ background-image: var(--icon-invalid);
+ }
+ }
+
+ &[aria-invalid="false"] {
+ --border-color: var(--form-element-valid-border-color);
+
+ &:is(:active, :focus) {
+ @if $enable-important {
+ --border-color: var(--form-element-valid-active-border-color) !important;
+ --box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color) !important;
+ }
+ @else {
+ --border-color: var(--form-element-valid-active-border-color);
+ --box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color);
+ }
+ }
+ }
+
+ &[aria-invalid="true"] {
+ --border-color: var(--form-element-invalid-border-color);
+
+ &:is(:active, :focus) {
+ @if $enable-important {
+ --border-color: var(--form-element-invalid-active-border-color) !important;
+ --box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important;
+ }
+ @else {
+ --border-color: var(--form-element-invalid-active-border-color);
+ --box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color);
+ }
+ }
+ }
+}
+
+[dir="rtl"] {
+ :where(input, select, textarea) {
+ &:not([type="checkbox"], [type="radio"]) {
+ &:is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"] ){
+ background-position: center left 0.75rem;
+ }
+ }
+ }
+}
+
+// Placeholder
+input::placeholder,
+input::-webkit-input-placeholder,
+textarea::placeholder,
+textarea::-webkit-input-placeholder,
+select:invalid {
+ color: var(--form-element-placeholder-color);
+ opacity: 1;
+}
+
+// Margin bottom (Not Checkboxes and Radios)
+input:not([type="checkbox"], [type="radio"]),
+select,
+textarea {
+ margin-bottom: var(--spacing);
+}
+
+// Select
+select {
+ // Unstyle the caret on `<select>`s in IE10+.
+ &::-ms-expand {
+ border: 0;
+ background-color: transparent;
+ }
+
+ &:not([multiple], [size]) {
+ padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
+ padding-left: var(--form-element-spacing-horizontal);
+ padding-inline-start: var(--form-element-spacing-horizontal);
+ padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
+ background-image: var(--icon-chevron);
+ background-position: center right 0.75rem;
+ background-size: 1rem auto;
+ background-repeat: no-repeat;
+ }
+}
+
+[dir="rtl"] {
+ select {
+ &:not([multiple], [size]) {
+ background-position: center left 0.75rem;
+ }
+ }
+}
+
+// Helper
+$inputs: "input, select, textarea";
+
+@if ($enable-classes and $enable-grid) {
+ $inputs: $inputs + ", .grid";
+}
+
+:where(#{$inputs}) {
+ + small {
+ display: block;
+ width: 100%;
+ margin-top: calc(var(--spacing) * -0.75);
+ margin-bottom: var(--spacing);
+ color: var(--muted-color);
+ }
+}
+
+// Styles for Input inside a label
+label {
+ > :where(input, select, textarea) {
+ margin-top: calc(var(--spacing) * 0.25);
+ }
+}
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/content/_miscs.scss b/themes/ccchh/assets/pico-1.5.11/scss/content/_miscs.scss
new file mode 100644
index 0000000..526baba
--- /dev/null
+++ b/themes/ccchh/assets/pico-1.5.11/scss/content/_miscs.scss
@@ -0,0 +1,33 @@
+/**
+ * Miscs
+ */
+
+// Reboot based on :
+// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+// ––––––––––––––––––––
+
+// 1. Correct the inheritance of border color in Firefox
+// 2. Add the correct box sizing in Firefox
+hr {
+ height: 0; // 2
+ border: 0;
+ border-top: 1px solid var(--muted-border-color);
+ color: inherit; // 1
+}
+
+// Add the correct display in IE 10+
+[hidden],
+template {
+ @if $enable-important {
+ display: none !important;
+ }
+ @else {
+ display: none;
+ }
+}
+
+// Add the correct display in IE 9-
+canvas {
+ display: inline-block;
+}
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/content/_table.scss b/themes/ccchh/assets/pico-1.5.11/scss/content/_table.scss
new file mode 100644
index 0000000..d70cfd7
--- /dev/null
+++ b/themes/ccchh/assets/pico-1.5.11/scss/content/_table.scss
@@ -0,0 +1,50 @@
+/**
+ * Table
+ */
+
+// Reboot based on :
+// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+// ––––––––––––––––––––
+
+// 1. Collapse border spacing in all browsers (opinionated)
+// 2. Remove text indentation from table contents in Chrome, Edge, and Safari
+:where(table) {
+ width: 100%;
+ border-collapse: collapse; // 1
+ border-spacing: 0;
+ text-indent: 0; // 2
+}
+
+// Pico
+// ––––––––––––––––––––
+
+// Cells
+th,
+td {
+ padding: calc(var(--spacing) / 2) var(--spacing);
+ border-bottom: var(--border-width) solid var(--table-border-color);
+ color: var(--color);
+ font-weight: var(--font-weight);
+ font-size: var(--font-size);
+ text-align: left;
+ text-align: start;
+}
+
+// Footer
+tfoot {
+ th,
+ td {
+ border-top: var(--border-width) solid var(--table-border-color);
+ border-bottom: 0;
+ }
+}
+
+// Striped
+table {
+ &[role="grid"] {
+ tbody tr:nth-child(odd) {
+ background-color: var(--table-row-stripped-background-color);
+ }
+ }
+}
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/content/_typography.scss b/themes/ccchh/assets/pico-1.5.11/scss/content/_typography.scss
new file mode 100644
index 0000000..a9ed71b
--- /dev/null
+++ b/themes/ccchh/assets/pico-1.5.11/scss/content/_typography.scss
@@ -0,0 +1,264 @@
+/**
+ * Typography
+ */
+
+// Reboot based on :
+// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+// ––––––––––––––––––––
+
+// Add the correct font weight in Chrome, Edge, and Safari
+b,
+strong {
+ font-weight: bolder;
+}
+
+// Prevent `sub` and `sup` elements from affecting the line height in all browsers
+sub,
+sup {
+ position: relative;
+ font-size: 0.75em;
+ line-height: 0;
+ vertical-align: baseline;
+}
+sub {
+ bottom: -0.25em;
+}
+sup {
+ top: -0.5em;
+}
+
+// Pico
+// ––––––––––––––––––––
+
+address,
+blockquote,
+dl,
+figure,
+form,
+ol,
+p,
+pre,
+table,
+ul {
+ margin-top: 0;
+ margin-bottom: var(--typography-spacing-vertical);
+ color: var(--color);
+ font-style: normal;
+ font-weight: var(--font-weight);
+ font-size: var(--font-size);
+}
+
+// Links
+// 1. Remove the gray background on active links in IE 10
+a,
+[role="link"] {
+ --color: var(--primary);
+ --background-color: transparent;
+ outline: none;
+ background-color: var(--background-color); // 1
+ color: var(--color);
+ text-decoration: var(--text-decoration);
+
+ @if $enable-transitions {
+ transition: background-color var(--transition), color var(--transition),
+ text-decoration var(--transition), box-shadow var(--transition);
+ }
+
+ &:is([aria-current], :hover, :active, :focus) {
+ --color: var(--primary-hover);
+ --text-decoration: underline;
+ }
+
+ &:focus {
+ --background-color: var(--primary-focus);
+ }
+
+ @if $enable-classes {
+ // Secondary
+ &.secondary {
+ --color: var(--secondary);
+
+ &:is([aria-current], :hover, :active, :focus) {
+ --color: var(--secondary-hover);
+ }
+
+ &:focus {
+ --background-color: var(--secondary-focus);
+ }
+ }
+
+ // Contrast
+ &.contrast {
+ --color: var(--contrast);
+
+ &:is([aria-current], :hover, :active, :focus) {
+ --color: var(--contrast-hover);
+ }
+
+ &:focus {
+ --background-color: var(--contrast-focus);
+ }
+ }
+ }
+}
+
+// Headings
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ margin-top: 0;
+ margin-bottom: var(--typography-spacing-vertical);
+ color: var(--color);
+ font-weight: var(--font-weight);
+ font-size: var(--font-size);
+ font-family: var(--font-family);
+}
+
+h1 {
+ --color: var(--h1-color);
+}
+h2 {
+ --color: var(--h2-color);
+}
+h3 {
+ --color: var(--h3-color);
+}
+h4 {
+ --color: var(--h4-color);
+}
+h5 {
+ --color: var(--h5-color);
+}
+h6 {
+ --color: var(--h6-color);
+}
+
+// Margin-top for headings after a typography block
+:where(address, blockquote, dl, figure, form, ol, p, pre, table, ul) {
+ ~ :is(h1, h2, h3, h4, h5, h6) {
+ margin-top: var(--typography-spacing-vertical);
+ }
+}
+
+// Heading group
+@if $enable-classes == false {
+ hgroup {
+ margin-bottom: var(--typography-spacing-vertical);
+
+ > * {
+ margin-bottom: 0;
+ }
+
+ > *:last-child {
+ --color: var(--muted-color);
+ --font-weight: unset;
+ font-size: 1rem;
+ font-family: unset;
+ }
+ }
+}
+
+@if $enable-classes {
+ hgroup,
+ .headings {
+ margin-bottom: var(--typography-spacing-vertical);
+
+ > * {
+ margin-bottom: 0;
+ }
+
+ > *:last-child {
+ --color: var(--muted-color);
+ --font-weight: unset;
+ font-size: 1rem;
+ font-family: unset;
+ }
+ }
+}
+
+// Paragraphs
+p {
+ margin-bottom: var(--typography-spacing-vertical);
+}
+
+// Small
+small {
+ font-size: var(--font-size);
+}
+
+// Lists
+:where(dl, ol, ul) {
+ padding-right: 0;
+ padding-left: var(--spacing);
+ padding-inline-start: var(--spacing);
+ padding-inline-end: 0;
+
+ li {
+ margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
+ }
+}
+
+// Margin-top for nested lists
+// 1. Remove the margin on nested lists in Chrome, Edge, IE, and Safari
+:where(dl, ol, ul) {
+ :is(dl, ol, ul) {
+ margin: 0; // 1
+ margin-top: calc(var(--typography-spacing-vertical) * 0.25);
+ }
+}
+
+ul li {
+ list-style: square;
+}
+
+// Highlighted text
+mark {
+ padding: 0.125rem 0.25rem;
+ background-color: var(--mark-background-color);
+ color: var(--mark-color);
+ vertical-align: baseline;
+}
+
+// Blockquote
+blockquote {
+ display: block;
+ margin: var(--typography-spacing-vertical) 0;
+ padding: var(--spacing);
+ border-right: none;
+ border-left: 0.25rem solid var(--blockquote-border-color);
+ border-inline-start: 0.25rem solid var(--blockquote-border-color);
+ border-inline-end: none;
+
+ footer {
+ margin-top: calc(var(--typography-spacing-vertical) * 0.5);
+ color: var(--blockquote-footer-color);
+ }
+}
+
+// Abbreviations
+// 1. Remove underline decoration in Chrome, Edge, IE, Opera, and Safari
+abbr[title] {
+ border-bottom: 1px dotted;
+ text-decoration: none; // 1
+ cursor: help;
+}
+
+// Ins
+ins {
+ color: var(--ins-color);
+ text-decoration: none;
+}
+
+// del
+del {
+ color: var(--del-color);
+}
+
+// selection
+::selection {
+ background-color: var(--primary-focus);
+}
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/layout/_container.scss b/themes/ccchh/assets/pico-1.5.11/scss/layout/_container.scss
new file mode 100644
index 0000000..6a20bea
--- /dev/null
+++ b/themes/ccchh/assets/pico-1.5.11/scss/layout/_container.scss
@@ -0,0 +1,42 @@
+@if ($enable-class-container and $enable-classes) {
+ /**
+ * Container
+ */
+
+ .container,
+ .container-fluid {
+ width: 100%;
+ margin-right: auto;
+ margin-left: auto;
+ padding-right: var(--spacing);
+ padding-left: var(--spacing);
+ }
+
+ .container {
+ @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/pico-1.5.11/scss/layout/_document.scss b/themes/ccchh/assets/pico-1.5.11/scss/layout/_document.scss
new file mode 100644
index 0000000..1607659
--- /dev/null
+++ b/themes/ccchh/assets/pico-1.5.11/scss/layout/_document.scss
@@ -0,0 +1,48 @@
+/**
+ * Document
+ * Content-box & Responsive typography
+ */
+
+// Reboot based on :
+// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+// ––––––––––––––––––––
+
+// 1. Add border box sizing in all browsers (opinionated)
+// 2. Backgrounds do not repeat by default (opinionated)
+*,
+*::before,
+*::after {
+ box-sizing: border-box; // 1
+ background-repeat: no-repeat; // 2
+}
+
+// 1. Add text decoration inheritance in all browsers (opinionated)
+// 2. Add vertical alignment inheritance in all browsers (opinionated)
+::before,
+::after {
+ text-decoration: inherit; // 1
+ vertical-align: inherit; // 2
+}
+
+// 1. Use the default cursor in all browsers (opinionated)
+// 2. Change the line height in all browsers (opinionated)
+// 3. Breaks words to prevent overflow in all browsers (opinionated)
+// 4. Use a 4-space tab width in all browsers (opinionated)
+// 5. Remove the grey highlight on links in iOS (opinionated)
+// 6. Prevent adjustments of font size after orientation changes in iOS
+:where(:root) {
+ -webkit-tap-highlight-color: transparent; // 5
+ -webkit-text-size-adjust: 100%; // 6
+ text-size-adjust: 100%; // 6
+ background-color: var(--background-color);
+ color: var(--color);
+ font-weight: var(--font-weight);
+ font-size: var(--font-size);
+ line-height: var(--line-height); // 2
+ font-family: var(--font-family);
+ text-rendering: optimizeLegibility;
+ overflow-wrap: break-word; // 3
+ cursor: default; // 1
+ tab-size: 4; // 4
+}
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/layout/_grid.scss b/themes/ccchh/assets/pico-1.5.11/scss/layout/_grid.scss
new file mode 100644
index 0000000..572312b
--- /dev/null
+++ b/themes/ccchh/assets/pico-1.5.11/scss/layout/_grid.scss
@@ -0,0 +1,24 @@
+@if ($enable-classes and $enable-grid) {
+ /**
+ * Grid
+ * Minimal grid system with auto-layout columns
+ */
+
+ .grid {
+ grid-column-gap: var(--grid-spacing-horizontal);
+ grid-row-gap: var(--grid-spacing-vertical);
+ display: grid;
+ grid-template-columns: 1fr;
+ margin: 0;
+
+ @if map-get($breakpoints, "lg") {
+ @media (min-width: map-get($breakpoints, "lg")) {
+ grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
+ }
+ }
+
+ & > * {
+ min-width: 0; // HACK for childs in overflow
+ }
+ }
+}
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/layout/_scroller.scss b/themes/ccchh/assets/pico-1.5.11/scss/layout/_scroller.scss
new file mode 100644
index 0000000..9b58ef7
--- /dev/null
+++ b/themes/ccchh/assets/pico-1.5.11/scss/layout/_scroller.scss
@@ -0,0 +1,16 @@
+/**
+ * Horizontal scroller (<figure>)
+ */
+
+// Wrapper to make any content responsive across all viewports
+figure {
+ display: block;
+ margin: 0;
+ padding: 0;
+ overflow-x: auto;
+
+ figcaption {
+ padding: calc(var(--spacing) * 0.5) 0;
+ color: var(--muted-color);
+ }
+}
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/layout/_section.scss b/themes/ccchh/assets/pico-1.5.11/scss/layout/_section.scss
new file mode 100644
index 0000000..8bc6902
--- /dev/null
+++ b/themes/ccchh/assets/pico-1.5.11/scss/layout/_section.scss
@@ -0,0 +1,8 @@
+/**
+ * Section
+ * Responsive spacings for section
+ */
+
+section {
+ margin-bottom: var(--block-spacing-vertical);
+}
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/layout/_sectioning.scss b/themes/ccchh/assets/pico-1.5.11/scss/layout/_sectioning.scss
new file mode 100644
index 0000000..00d73c5
--- /dev/null
+++ b/themes/ccchh/assets/pico-1.5.11/scss/layout/_sectioning.scss
@@ -0,0 +1,70 @@
+/**
+ * Sectioning
+ * Container and responsive spacings for header, main, footer
+ */
+
+// Reboot based on :
+// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+// ––––––––––––––––––––
+
+// Render the `main` element consistently in IE
+main {
+ display: block;
+}
+
+// Pico
+// ––––––––––––––––––––
+
+// 1. Remove the margin in all browsers (opinionated)
+#{$semantic-root-element} {
+ width: 100%;
+ margin: 0; // 1
+
+ > header,
+ > main,
+ > footer {
+ width: 100%;
+ margin-right: auto;
+ margin-left: auto;
+
+ // Semantic container
+ @if $enable-semantic-container {
+ padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
+
+ // Centered viewport
+ @if $enable-viewport {
+ @if map-get($breakpoints, "sm") and $enable-viewport {
+ @media (min-width: map-get($breakpoints, "sm")) {
+ max-width: map-get($viewports, "sm");
+ padding-right: 0;
+ padding-left: 0;
+ }
+ }
+
+ @if map-get($breakpoints, "md") and $enable-viewport {
+ @media (min-width: map-get($breakpoints, "md")) {
+ max-width: map-get($viewports, "md");
+ }
+ }
+
+ @if map-get($breakpoints, "lg") and $enable-viewport {
+ @media (min-width: map-get($breakpoints, "lg")) {
+ max-width: map-get($viewports, "lg");
+ }
+ }
+
+ @if map-get($breakpoints, "xl") and $enable-viewport {
+ @media (min-width: map-get($breakpoints, "xl")) {
+ max-width: map-get($viewports, "xl");
+ }
+ }
+ }
+ }
+
+ // Semantic container
+ @else {
+ padding: var(--block-spacing-vertical) 0;
+ }
+ }
+}
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/pico.classless.scss b/themes/ccchh/assets/pico-1.5.11/scss/pico.classless.scss
new file mode 100644
index 0000000..c5ea832
--- /dev/null
+++ b/themes/ccchh/assets/pico-1.5.11/scss/pico.classless.scss
@@ -0,0 +1,13 @@
+// Config
+// --------------------
+
+// Enable <header>, <main>, <footer> inside $semantic-root-element as containers
+$enable-semantic-container: true;
+
+// Enable .classes
+$enable-classes: false;
+
+// Pico Lib
+// --------------------
+
+@import "pico";
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/pico.fluid.classless.scss b/themes/ccchh/assets/pico-1.5.11/scss/pico.fluid.classless.scss
new file mode 100644
index 0000000..ef6af04
--- /dev/null
+++ b/themes/ccchh/assets/pico-1.5.11/scss/pico.fluid.classless.scss
@@ -0,0 +1,16 @@
+// Config
+// --------------------
+
+// Enable <header>, <main>, <footer> inside $semantic-root-element as containers
+$enable-semantic-container: true;
+
+// Enable a centered viewport for <header>, <main>, <footer> inside $enable-semantic-container
+$enable-viewport: false;
+
+// Enable .classes
+$enable-classes: false;
+
+// Pico Lib
+// --------------------
+
+@import "pico";
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/pico.scss b/themes/ccchh/assets/pico-1.5.11/scss/pico.scss
new file mode 100644
index 0000000..b248799
--- /dev/null
+++ b/themes/ccchh/assets/pico-1.5.11/scss/pico.scss
@@ -0,0 +1,43 @@
+/*!
+ * Pico CSS v1.5.11 (https://picocss.com)
+ * Copyright 2019-2023 - Licensed under MIT
+ */
+
+// Config
+@import "variables";
+
+// Theming
+@import "themes/default";
+
+// Layout
+@import "layout/document"; // html
+@import "layout/sectioning"; // body, header, main, footer
+@import "layout/container"; // .container, .container-fluid
+@import "layout/section"; // section
+@import "layout/grid"; // .grid
+@import "layout/scroller"; // figure
+
+// Content
+@import "content/typography"; // a, headings, p, ul, blockquote, ...
+@import "content/embedded"; // audio, canvas, iframe, img, svg, video
+@import "content/button"; // button, a[role=button], type=button, type=submit ...
+@import "content/form"; // input, select, textarea, label, fieldset, legend
+@import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch
+@import "content/form-alt-input-types"; // type=color, type=date, type=file, type=search, ...
+@import "content/table"; // table, tr, td, ...
+@import "content/code"; // pre, code, ...
+@import "content/miscs"; // hr, template, [hidden], dialog, canvas
+
+// Components
+@import "components/accordion"; // details, summary
+@import "components/card"; // article
+@import "components/modal"; // dialog
+@import "components/nav"; // nav
+@import "components/progress"; // progress
+@import "components/dropdown"; // dropdown
+
+// Utilities
+@import "utilities/loading"; // aria-busy=true
+@import "utilities/tooltip"; // data-tooltip
+@import "utilities/accessibility"; // -ms-touch-action, aria-*
+@import "utilities/reduce-motion"; // prefers-reduced-motion
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/pico.slim.scss b/themes/ccchh/assets/pico-1.5.11/scss/pico.slim.scss
new file mode 100644
index 0000000..cb9aa42
--- /dev/null
+++ b/themes/ccchh/assets/pico-1.5.11/scss/pico.slim.scss
@@ -0,0 +1,47 @@
+/*!
+ * Pico CSS v1.5.11 (https://picocss.com)
+ * Copyright 2019-2023 - Licensed under MIT
+ *
+ * Slim version example
+ * You can export only the modules you need
+ */
+
+// Config
+// --------------------
+
+// Enable responsive spacings for <header>, <main>, <footer>, <section>, <article>
+$enable-responsive-spacings: false;
+
+// Enable transitions
+$enable-transitions: false;
+
+// Enable overriding with !important
+$enable-important: false;
+
+// Pico Lib
+// --------------------
+
+// Config
+@import "variables";
+
+// Theming
+@import "themes/default";
+
+// Layout
+@import "layout/document"; // html
+@import "layout/sectioning"; // body, header, main, footer
+@import "layout/container"; // .container, .container-fluid
+@import "layout/section"; // section
+@import "layout/grid"; // .grid
+@import "layout/scroller"; // figure
+
+// Content
+@import "content/typography"; // a, headings, p, ul, blockquote, ...
+@import "content/embedded"; // audio, canvas, iframe, img, svg, video
+@import "content/button"; // button, a[role=button], type=button, type=submit ...
+@import "content/form"; // input, select, textarea, label, fieldset, legend
+@import "content/table"; // table, tr, td, ...
+
+// Utilities
+@import "utilities/accessibility"; // -ms-touch-action, aria-*
+@import "utilities/reduce-motion"; // prefers-reduced-motion
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/themes/default.scss b/themes/ccchh/assets/pico-1.5.11/scss/themes/default.scss
new file mode 100644
index 0000000..c96b7e7
--- /dev/null
+++ b/themes/ccchh/assets/pico-1.5.11/scss/themes/default.scss
@@ -0,0 +1,37 @@
+/**
+ * Theme: default
+ */
+
+// Variables
+@import "../variables";
+@import "default/colors";
+
+// Commons styles
+@import "default/styles";
+
+// Light theme (Default)
+// Can be forced with data-theme="light"
+@import "default/light";
+
+// Dark theme (Auto)
+// Automatically enabled if user has Dark mode enabled
+@import "default/dark";
+@media only screen and (prefers-color-scheme: dark) {
+ :root:not([data-theme]) {
+ @include dark;
+ }
+}
+
+// Dark theme (Forced)
+// Enabled if forced with data-theme="dark"
+[data-theme="dark"] {
+ @include dark;
+}
+
+// Accent-color
+progress,
+[type="checkbox"],
+[type="radio"],
+[type="range"] {
+ accent-color: var(--primary);
+}
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/themes/default/_colors.scss b/themes/ccchh/assets/pico-1.5.11/scss/themes/default/_colors.scss
new file mode 100644
index 0000000..19079ff
--- /dev/null
+++ b/themes/ccchh/assets/pico-1.5.11/scss/themes/default/_colors.scss
@@ -0,0 +1,65 @@
+// Navy-Grey
+$grey-hue: 205 !default;
+$grey-50: hsl($grey-hue, 20%, 94%) !default;
+$grey-100: hsl($grey-hue, 18%, 86%) !default;
+$grey-200: hsl($grey-hue, 16%, 77%) !default;
+$grey-300: hsl($grey-hue, 14%, 68%) !default;
+$grey-400: hsl($grey-hue, 12%, 59%) !default;
+$grey-500: hsl($grey-hue, 10%, 50%) !default;
+$grey-600: hsl($grey-hue, 15%, 41%) !default;
+$grey-700: hsl($grey-hue, 20%, 32%) !default;
+$grey-800: hsl($grey-hue, 25%, 23%) !default;
+$grey-900: hsl($grey-hue, 30%, 15%) !default;
+
+// Light Blue
+$primary-hue: 195 !default;
+$primary-50: hsl($primary-hue, 90%, 94%) !default;
+$primary-100: hsl($primary-hue, 88%, 86%) !default;
+$primary-200: hsl($primary-hue, 86%, 77%) !default;
+$primary-300: hsl($primary-hue, 84%, 68%) !default;
+$primary-400: hsl($primary-hue, 82%, 59%) !default;
+$primary-500: hsl($primary-hue, 80%, 50%) !default;
+$primary-600: hsl($primary-hue, 85%, 41%) !default;
+$primary-700: hsl($primary-hue, 90%, 32%) !default;
+$primary-800: hsl($primary-hue, 95%, 23%) !default;
+$primary-900: hsl($primary-hue, 100%, 15%) !default;
+
+// Black & White
+$black: #000 !default;
+$white: #fff !default;
+
+// Amber
+$amber-50: #fff8e1 !default;
+$amber-100: #ffecb3 !default;
+$amber-200: #ffe082 !default;
+$amber-300: #ffd54f !default;
+$amber-400: #ffca28 !default;
+$amber-500: #ffc107 !default;
+$amber-600: #ffb300 !default;
+$amber-700: #ffa000 !default;
+$amber-800: #ff8f00 !default;
+$amber-900: #ff6f00 !default;
+
+// Green
+$green-50: #e8f5e9 !default;
+$green-100: #c8e6c9 !default;
+$green-200: #a5d6a7 !default;
+$green-300: #81c784 !default;
+$green-400: #66bb6a !default;
+$green-500: #4caf50 !default;
+$green-600: #43a047 !default;
+$green-700: #388e3c !default;
+$green-800: #2e7d32 !default;
+$green-900: #1b5e20 !default;
+
+// Red
+$red-50: #ffebee !default;
+$red-100: #ffcdd2 !default;
+$red-200: #ef9a9a !default;
+$red-300: #e57373 !default;
+$red-400: #ef5350 !default;
+$red-500: #f44336 !default;
+$red-600: #e53935 !default;
+$red-700: #d32f2f !default;
+$red-800: #c62828 !default;
+$red-900: #b71c1c !default;
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/themes/default/_dark.scss b/themes/ccchh/assets/pico-1.5.11/scss/themes/default/_dark.scss
new file mode 100644
index 0000000..2bf12e2
--- /dev/null
+++ b/themes/ccchh/assets/pico-1.5.11/scss/themes/default/_dark.scss
@@ -0,0 +1,159 @@
+@import "../../functions";
+
+// Default: Dark theme
+@mixin dark {
+ --background-color: #{mix($black, $grey-900, 37.5%)};
+
+ // Texts colors
+ --color: #{$grey-200};
+ --h1-color: #{$grey-50};
+ --h2-color: #{mix($grey-100, $grey-50)};
+ --h3-color: #{$grey-100};
+ --h4-color: #{mix($grey-200, $grey-100)};
+ --h5-color: #{$grey-200};
+ --h6-color: #{mix($grey-300, $grey-200)};
+
+ // Muted colors
+ --muted-color: #{$grey-500};
+ --muted-border-color: #{mix($grey-900, $grey-800, 75%)};
+
+ // Primary colors
+ --primary: #{$primary-600};
+ --primary-hover: #{$primary-500};
+ --primary-focus: #{rgba($primary-600, 0.25)};
+ --primary-inverse: #{$white};
+
+ // Secondary colors
+ --secondary: #{$grey-600};
+ --secondary-hover: #{$grey-500};
+ --secondary-focus: #{rgba($grey-500, 0.25)};
+ --secondary-inverse: #{$white};
+
+ // Contrast colors
+ --contrast: #{$grey-50};
+ --contrast-hover: #{$white};
+ --contrast-focus: #{rgba($grey-500, 0.25)};
+ --contrast-inverse: #{$black};
+
+ // Highlighted text (<mark>)
+ --mark-background-color: #{mix($grey-300, $amber-300)};
+ --mark-color: #{mix($black, $grey-900, 37.5%)};
+
+ // Inserted (<ins>) & Deleted (<ins>)
+ --ins-color: #{$green-700};
+ --del-color: #{$red-800};
+
+ // Blockquote
+ --blockquote-border-color: var(--muted-border-color);
+ --blockquote-footer-color: var(--muted-color);
+
+ // Button
+ // To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)'
+ // Don't use, 'none, 'false, 'null', '0', etc.
+ --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+ --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+
+ // Form elements
+ --form-element-background-color: #{mix($black, $grey-900, 37.5%)};
+ --form-element-border-color: #{mix($grey-800, $grey-700)};
+ --form-element-color: var(--color);
+ --form-element-placeholder-color: var(--muted-color);
+ --form-element-active-background-color: var(--form-element-background-color);
+ --form-element-active-border-color: var(--primary);
+ --form-element-focus-color: var(--primary-focus);
+ --form-element-disabled-background-color: #{$grey-800};
+ --form-element-disabled-border-color: #{$grey-700};
+ --form-element-disabled-opacity: 0.5;
+ --form-element-invalid-border-color: #{$red-900};
+ --form-element-invalid-active-border-color: #{$red-800};
+ --form-element-invalid-focus-color: #{rgba($red-800, 0.25)};
+ --form-element-valid-border-color: #{$green-800};
+ --form-element-valid-active-border-color: #{$green-700};
+ --form-element-valid-focus-color: #{rgba($green-700, 0.25)};
+
+ // Switch (input[type="checkbox"][role="switch"])
+ --switch-background-color: #{mix($grey-800, $grey-700)};
+ --switch-color: var(--primary-inverse);
+ --switch-checked-background-color: var(--primary);
+
+ // Range (input[type="range"])
+ --range-border-color: #{mix($grey-900, $grey-800)};
+ --range-active-border-color: #{$grey-800};
+ --range-thumb-border-color: var(--background-color);
+ --range-thumb-color: var(--secondary);
+ --range-thumb-hover-color: var(--secondary-hover);
+ --range-thumb-active-color: var(--primary);
+
+ // Table
+ --table-border-color: var(--muted-border-color);
+ --table-row-stripped-background-color: #{rgba($grey-500, 0.05)};
+
+ // Code
+ --code-background-color: #{mix($black, $grey-900, 12.5%)};
+ --code-color: var(--muted-color);
+ --code-kbd-background-color: var(--contrast);
+ --code-kbd-color: var(--contrast-inverse);
+ --code-tag-color: #{hsl(330, 30%, 50%)};
+ --code-property-color: #{hsl(185, 30%, 50%)};
+ --code-value-color: #{hsl(40, 10%, 50%)};
+ --code-comment-color: #{mix($grey-700, $grey-600)};
+
+ // Accordion (<details>)
+ --accordion-border-color: var(--muted-border-color);
+ --accordion-active-summary-color: var(--primary);
+ --accordion-close-summary-color: var(--color);
+ --accordion-open-summary-color: var(--muted-color);
+
+ // Card (<article>)
+ $box-shadow-elevation: 1rem;
+ $box-shadow-blur-strengh: 6rem;
+ $box-shadow-opacity: 0.06;
+ --card-background-color: #{mix($black, $grey-900, 25%)};
+ --card-border-color: var(--card-background-color);
+ --card-box-shadow:
+ #{($box-shadow-elevation * 0.5 * 0.029)} #{($box-shadow-elevation * 0.029)} #{($box-shadow-blur-strengh * 0.029)} #{rgba($black, ($box-shadow-opacity * 0.283))},
+ #{($box-shadow-elevation * 0.5 * 0.067)} #{($box-shadow-elevation * 0.067)} #{($box-shadow-blur-strengh * 0.067)} #{rgba($black, ($box-shadow-opacity * 0.4))},
+ #{($box-shadow-elevation * 0.5 * 0.125)} #{($box-shadow-elevation * 0.125)} #{($box-shadow-blur-strengh * 0.125)} #{rgba($black, ($box-shadow-opacity * 0.5))},
+ #{($box-shadow-elevation * 0.5 * 0.225)} #{($box-shadow-elevation * 0.225)} #{($box-shadow-blur-strengh * 0.225)} #{rgba($black, ($box-shadow-opacity * 0.6))},
+ #{($box-shadow-elevation * 0.5 * 0.417)} #{($box-shadow-elevation * 0.417)} #{($box-shadow-blur-strengh * 0.417)} #{rgba($black, ($box-shadow-opacity * 0.717))},
+ #{($box-shadow-elevation * 0.5)} #{$box-shadow-elevation} #{$box-shadow-blur-strengh} #{rgba($black, $box-shadow-opacity)},
+ 0 0 0 0.0625rem #{rgba($black, ($box-shadow-opacity * 0.25) )};
+ --card-sectionning-background-color: #{mix($black, $grey-900, 12.5%)};
+
+ // Dropdown (<details role="list">)
+ --dropdown-background-color: #{$grey-900};
+ --dropdown-border-color: #{mix($grey-900, $grey-800)};
+ --dropdown-box-shadow: var(--card-box-shadow);
+ --dropdown-color: var(--color);
+ --dropdown-hover-background-color: #{rgba(mix($grey-900, $grey-800), 0.75)};
+
+ // Modal (<dialog>)
+ --modal-overlay-background-color: #{rgba(mix($grey-900, $grey-800), 0.8)};
+
+ // Progress
+ --progress-background-color: #{mix($grey-900, $grey-800)};
+ --progress-color: var(--primary);
+
+ // Loading ([aria-busy=true])
+ --loading-spinner-opacity: 0.5;
+
+ // Tooltip ([data-tooltip])
+ --tooltip-background-color: var(--contrast);
+ --tooltip-color: var(--contrast-inverse);
+
+ // Icons
+ --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+ --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-300)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+ --icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($white)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+ --icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($black)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+ --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-500)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
+ --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-300)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
+ --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($red-900)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
+ --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
+ --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-300)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
+ --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-300)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
+ --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($green-800)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+
+ // Document
+ color-scheme: dark;
+}
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/themes/default/_light.scss b/themes/ccchh/assets/pico-1.5.11/scss/themes/default/_light.scss
new file mode 100644
index 0000000..237fb8f
--- /dev/null
+++ b/themes/ccchh/assets/pico-1.5.11/scss/themes/default/_light.scss
@@ -0,0 +1,159 @@
+@import "../../functions";
+
+// Default: Light theme
+[data-theme="light"],
+:root:not([data-theme="dark"]) {
+ --background-color: #{$white};
+
+ // Texts colors
+ --color: #{$grey-700};
+ --h1-color: #{$grey-900};
+ --h2-color: #{mix($grey-900, $grey-800)};
+ --h3-color: #{$grey-800};
+ --h4-color: #{mix($grey-800, $grey-700)};
+ --h5-color: #{$grey-700};
+ --h6-color: #{mix($grey-700, $grey-600)};
+
+ // Muted colors
+ --muted-color: #{$grey-500};
+ --muted-border-color: #{$grey-50};
+
+ // Primary colors
+ --primary: #{$primary-600};
+ --primary-hover: #{$primary-700};
+ --primary-focus: #{rgba($primary-600, 0.125)};
+ --primary-inverse: #{$white};
+
+ // Secondary colors
+ --secondary: #{$grey-600};
+ --secondary-hover: #{$grey-700};
+ --secondary-focus: #{rgba($grey-600, 0.125)};
+ --secondary-inverse: #{$white};
+
+ // Contrast colors
+ --contrast: #{$grey-900};
+ --contrast-hover: #{$black};
+ --contrast-focus: #{rgba($grey-600, 0.125)};
+ --contrast-inverse: #{$white};
+
+ // Highlighted text (<mark>)
+ --mark-background-color: #{mix($amber-100, $amber-50)};
+ --mark-color: #{mix($grey-900, $amber-900, 75%)};
+
+ // Inserted (<ins>) & Deleted (<ins>)
+ --ins-color: #{$green-700};
+ --del-color: #{$red-800};
+
+ // Blockquote
+ --blockquote-border-color: var(--muted-border-color);
+ --blockquote-footer-color: var(--muted-color);
+
+ // Button
+ // To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)'
+ // Don't use, 'none, 'false, 'null', '0', etc.
+ --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+ --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+
+ // Form elements
+ --form-element-background-color: transparent;
+ --form-element-border-color: #{$grey-300};
+ --form-element-color: var(--color);
+ --form-element-placeholder-color: var(--muted-color);
+ --form-element-active-background-color: transparent;
+ --form-element-active-border-color: var(--primary);
+ --form-element-focus-color: var(--primary-focus);
+ --form-element-disabled-background-color: #{$grey-100};
+ --form-element-disabled-border-color: #{$grey-300};
+ --form-element-disabled-opacity: 0.5;
+ --form-element-invalid-border-color: #{$red-800};
+ --form-element-invalid-active-border-color: #{$red-700};
+ --form-element-invalid-focus-color: #{rgba($red-700, 0.125)};
+ --form-element-valid-border-color: #{$green-700};
+ --form-element-valid-active-border-color: #{$green-600};
+ --form-element-valid-focus-color: #{rgba($green-600, 0.125)};
+
+ // Switch (input[type="checkbox"][role="switch"])
+ --switch-background-color: #{$grey-200};
+ --switch-color: var(--primary-inverse);
+ --switch-checked-background-color: var(--primary);
+
+ // Range (input[type="range"])
+ --range-border-color: #{$grey-100};
+ --range-active-border-color: #{$grey-200};
+ --range-thumb-border-color: var(--background-color);
+ --range-thumb-color: var(--secondary);
+ --range-thumb-hover-color: var(--secondary-hover);
+ --range-thumb-active-color: var(--primary);
+
+ // Table
+ --table-border-color: var(--muted-border-color);
+ --table-row-stripped-background-color: #{mix($grey-50, $white)};
+
+ // Code
+ --code-background-color: #{$grey-50};
+ --code-color: var(--muted-color);
+ --code-kbd-background-color: var(--contrast);
+ --code-kbd-color: var(--contrast-inverse);
+ --code-tag-color: #{hsl(330, 40%, 50%)};
+ --code-property-color: #{hsl(185, 40%, 40%)};
+ --code-value-color: #{hsl(40, 20%, 50%)};
+ --code-comment-color: #{$grey-300};
+
+ // Accordion (<details>)
+ --accordion-border-color: var(--muted-border-color);
+ --accordion-close-summary-color: var(--color);
+ --accordion-open-summary-color: var(--muted-color);
+
+ // Card (<article>)
+ $box-shadow-elevation: 1rem;
+ $box-shadow-blur-strengh: 6rem;
+ $box-shadow-opacity: 0.06;
+ --card-background-color: var(--background-color);
+ --card-border-color: var(--muted-border-color);
+ --card-box-shadow:
+ #{($box-shadow-elevation * 0.5 * 0.029)} #{($box-shadow-elevation * 0.029)} #{($box-shadow-blur-strengh * 0.029)} #{rgba($grey-900, ($box-shadow-opacity * 0.283))},
+ #{($box-shadow-elevation * 0.5 * 0.067)} #{($box-shadow-elevation * 0.067)} #{($box-shadow-blur-strengh * 0.067)} #{rgba($grey-900, ($box-shadow-opacity * 0.4))},
+ #{($box-shadow-elevation * 0.5 * 0.125)} #{($box-shadow-elevation * 0.125)} #{($box-shadow-blur-strengh * 0.125)} #{rgba($grey-900, ($box-shadow-opacity * 0.5))},
+ #{($box-shadow-elevation * 0.5 * 0.225)} #{($box-shadow-elevation * 0.225)} #{($box-shadow-blur-strengh * 0.225)} #{rgba($grey-900, ($box-shadow-opacity * 0.6))},
+ #{($box-shadow-elevation * 0.5 * 0.417)} #{($box-shadow-elevation * 0.417)} #{($box-shadow-blur-strengh * 0.417)} #{rgba($grey-900, ($box-shadow-opacity * 0.717))},
+ #{($box-shadow-elevation * 0.5)} #{$box-shadow-elevation} #{$box-shadow-blur-strengh} #{rgba($grey-900, $box-shadow-opacity)},
+ 0 0 0 0.0625rem #{rgba($grey-900, ($box-shadow-opacity * 0.25) )};
+ --card-sectionning-background-color: #{mix($grey-50, $white, 25%)};
+
+ // Dropdown (<details role="list">)
+ --dropdown-background-color: #{mix($grey-50, $white, 25%)};
+ --dropdown-border-color: #{mix($grey-100, $grey-50)};
+ --dropdown-box-shadow: var(--card-box-shadow);
+ --dropdown-color: var(--color);
+ --dropdown-hover-background-color: #{$grey-50};
+
+ // Modal (<dialog>)
+ --modal-overlay-background-color: #{rgba($grey-100, 0.7)};
+
+ // Progress
+ --progress-background-color: #{$grey-100};
+ --progress-color: var(--primary);
+
+ // Loading ([aria-busy=true])
+ --loading-spinner-opacity: 0.5;
+
+ // Tooltip ([data-tooltip])
+ --tooltip-background-color: var(--contrast);
+ --tooltip-color: var(--contrast-inverse);
+
+ // Icons
+ --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+ --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-700)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+ --icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($white)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+ --icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($white)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+ --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-500)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
+ --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-700)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
+ --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($red-800)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
+ --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
+ --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-700)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
+ --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-700)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
+ --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($green-700)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+
+ // Document
+ color-scheme: light;
+}
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/themes/default/_styles.scss b/themes/ccchh/assets/pico-1.5.11/scss/themes/default/_styles.scss
new file mode 100644
index 0000000..3a0a46d
--- /dev/null
+++ b/themes/ccchh/assets/pico-1.5.11/scss/themes/default/_styles.scss
@@ -0,0 +1,247 @@
+// Commons Styles
+:root {
+ // Typography
+ --font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
+ "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+ "Segoe UI Symbol", "Noto Color Emoji";
+ --line-height: 1.5;
+ --font-weight: 400;
+ --font-size: 16px;
+
+ // Responsive typography
+ @if $enable-responsive-typography {
+ @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;
+ }
+ }
+
+ @if map-get($breakpoints, "lg") {
+ @media (min-width: map-get($breakpoints, "lg")) {
+ --font-size: 19px;
+ }
+ }
+
+ @if map-get($breakpoints, "xl") {
+ @media (min-width: map-get($breakpoints, "xl")) {
+ --font-size: 20px;
+ }
+ }
+ }
+
+ // Borders
+ --border-radius: 0.25rem;
+ --border-width: 1px;
+ --outline-width: 3px;
+
+ // Spacings
+ --spacing: 1rem;
+
+ // Spacings for typography elements
+ --typography-spacing-vertical: 1.5rem;
+
+ // Spacings for body > header, body > main, body > footer, section, article
+ --block-spacing-vertical: calc(var(--spacing) * 2);
+ --block-spacing-horizontal: var(--spacing);
+
+ @if ($enable-classes and $enable-grid) {
+ --grid-spacing-vertical: 0;
+ --grid-spacing-horizontal: var(--spacing);
+ }
+
+ // Spacings for form elements and button
+ --form-element-spacing-vertical: 0.75rem;
+ --form-element-spacing-horizontal: 1rem;
+
+ // Spacings for nav component
+ --nav-element-spacing-vertical: 1rem;
+ --nav-element-spacing-horizontal: 0.5rem;
+ --nav-link-spacing-vertical: 0.5rem;
+ --nav-link-spacing-horizontal: 0.5rem;
+
+ // Font weight for form labels & fieldsets legend
+ --form-label-font-weight: var(--font-weight);
+
+ // Transitions
+ --transition: 0.2s ease-in-out;
+
+ // Modal (<dialog>)
+ --modal-overlay-backdrop-filter: blur(0.25rem);
+}
+
+// Responsives spacings
+@if $enable-responsive-spacings {
+ // Sectioning
+ #{$semantic-root-element} > header,
+ #{$semantic-root-element} > main,
+ #{$semantic-root-element} > footer,
+ section {
+ @if map-get($breakpoints, "sm") {
+ @media (min-width: map-get($breakpoints, "sm")) {
+ --block-spacing-vertical: calc(var(--spacing) * 2.5);
+ }
+ }
+
+ @if map-get($breakpoints, "md") {
+ @media (min-width: map-get($breakpoints, "md")) {
+ --block-spacing-vertical: calc(var(--spacing) * 3);
+ }
+ }
+
+ @if map-get($breakpoints, "lg") {
+ @media (min-width: map-get($breakpoints, "lg")) {
+ --block-spacing-vertical: calc(var(--spacing) * 3.5);
+ }
+ }
+
+ @if map-get($breakpoints, "xl") {
+ @media (min-width: map-get($breakpoints, "xl")) {
+ --block-spacing-vertical: calc(var(--spacing) * 4);
+ }
+ }
+ }
+
+ // Card (<article>)
+ article {
+ @if map-get($breakpoints, "sm") {
+ @media (min-width: map-get($breakpoints, "sm")) {
+ --block-spacing-horizontal: calc(var(--spacing) * 1.25);
+ }
+ }
+
+ @if map-get($breakpoints, "md") {
+ @media (min-width: map-get($breakpoints, "md")) {
+ --block-spacing-horizontal: calc(var(--spacing) * 1.5);
+ }
+ }
+
+ @if map-get($breakpoints, "lg") {
+ @media (min-width: map-get($breakpoints, "lg")) {
+ --block-spacing-horizontal: calc(var(--spacing) * 1.75);
+ }
+ }
+
+ @if map-get($breakpoints, "xl") {
+ @media (min-width: map-get($breakpoints, "xl")) {
+ --block-spacing-horizontal: calc(var(--spacing) * 2);
+ }
+ }
+ }
+
+ // Modal
+ dialog > article {
+
+ --block-spacing-vertical: calc(var(--spacing) * 2);
+ --block-spacing-horizontal: var(--spacing);
+
+ @if map-get($breakpoints, "sm") {
+ @media (min-width: map-get($breakpoints, "sm")) {
+ --block-spacing-vertical: calc(var(--spacing) * 2.5);
+ --block-spacing-horizontal: calc(var(--spacing) * 1.25);
+ }
+ }
+
+ @if map-get($breakpoints, "md") {
+ @media (min-width: map-get($breakpoints, "md")) {
+ --block-spacing-vertical: calc(var(--spacing) * 3);
+ --block-spacing-horizontal: calc(var(--spacing) * 1.5);
+ }
+ }
+ }
+}
+
+// Link
+a {
+ --text-decoration: none;
+
+ // Secondary & Contrast
+ @if $enable-classes {
+ &.secondary,
+ &.contrast {
+ --text-decoration: underline;
+ }
+ }
+}
+
+// Small
+small {
+ --font-size: 0.875em;
+}
+
+// Headings
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ --font-weight: 700;
+}
+
+h1 {
+ --font-size: 2rem;
+ --typography-spacing-vertical: 3rem;
+}
+
+h2 {
+ --font-size: 1.75rem;
+ --typography-spacing-vertical: 2.625rem;
+}
+
+h3 {
+ --font-size: 1.5rem;
+ --typography-spacing-vertical: 2.25rem;
+}
+
+h4 {
+ --font-size: 1.25rem;
+ --typography-spacing-vertical: 1.874rem;
+}
+
+h5 {
+ --font-size: 1.125rem;
+ --typography-spacing-vertical: 1.6875rem;
+}
+
+// Forms elements
+[type="checkbox"],
+[type="radio"] {
+ --border-width: 2px;
+}
+
+[type="checkbox"][role="switch"] {
+ --border-width: 3px;
+}
+
+// Table
+thead,
+tfoot {
+ th,
+ td {
+ --border-width: 3px;
+ }
+}
+
+:not(thead, tfoot) > * > td {
+ --font-size: 0.875em;
+}
+
+// Code
+pre,
+code,
+kbd,
+samp {
+ --font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace",
+ "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace,
+ "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+kbd {
+ --font-weight: bolder;
+}
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/utilities/_accessibility.scss b/themes/ccchh/assets/pico-1.5.11/scss/utilities/_accessibility.scss
new file mode 100644
index 0000000..e97ed7e
--- /dev/null
+++ b/themes/ccchh/assets/pico-1.5.11/scss/utilities/_accessibility.scss
@@ -0,0 +1,52 @@
+/**
+ * Accessibility & User interaction
+ */
+
+// Based on :
+// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+// ––––––––––––––––––––
+
+// Accessibility
+
+// Change the cursor on control elements in all browsers (opinionated)
+[aria-controls] {
+ cursor: pointer;
+}
+
+// Change the cursor on disabled, not-editable, or otherwise inoperable elements in all browsers (opinionated)
+[aria-disabled="true"],
+[disabled] {
+ cursor: not-allowed;
+}
+
+// Change the display on visually hidden accessible elements in all browsers (opinionated)
+[aria-hidden="false"][hidden] {
+ display: initial;
+}
+
+[aria-hidden="false"][hidden]:not(:focus) {
+ clip: rect(0, 0, 0, 0);
+ position: absolute;
+}
+
+// User interaction
+// Remove the tapping delay in IE 10
+a,
+area,
+button,
+input,
+label,
+select,
+summary,
+textarea,
+[tabindex] {
+ -ms-touch-action: manipulation;
+}
+
+// Pico
+// ––––––––––––––––––––
+
+[dir="rtl"] {
+ direction: rtl;
+}
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/utilities/_loading.scss b/themes/ccchh/assets/pico-1.5.11/scss/utilities/_loading.scss
new file mode 100644
index 0000000..c6f3afe
--- /dev/null
+++ b/themes/ccchh/assets/pico-1.5.11/scss/utilities/_loading.scss
@@ -0,0 +1,58 @@
+/**
+ * Loading ([aria-busy=true])
+ */
+
+
+// Cursor
+[aria-busy="true"] {
+ cursor: progress;
+}
+
+// Everyting except form elements
+[aria-busy="true"]:not(input, select, textarea, html) {
+
+ &::before {
+ display: inline-block;
+ width: 1em;
+ height: 1em;
+ border: 0.1875em solid currentColor;
+ border-radius: 1em;
+ border-right-color: transparent;
+ content: "";
+ vertical-align: text-bottom;
+ vertical-align: -.125em; // Visual alignment
+ animation: spinner 0.75s linear infinite;
+ opacity: var(--loading-spinner-opacity);
+ }
+
+ &:not(:empty) {
+ &::before {
+ margin-right: calc(var(--spacing) * 0.5);
+ margin-left: 0;
+ margin-inline-start: 0;
+ margin-inline-end: calc(var(--spacing) * 0.5);
+ }
+ }
+
+ &:empty {
+ text-align: center;
+ }
+}
+
+// Buttons and links
+button,
+input[type="submit"],
+input[type="button"],
+input[type="reset"],
+a {
+ &[aria-busy="true"] {
+ pointer-events: none;
+ }
+}
+
+// Animation: rotate
+@keyframes spinner {
+ to {
+ transform: rotate(360deg);
+ }
+}
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/utilities/_reduce-motion.scss b/themes/ccchh/assets/pico-1.5.11/scss/utilities/_reduce-motion.scss
new file mode 100644
index 0000000..ecfd6fd
--- /dev/null
+++ b/themes/ccchh/assets/pico-1.5.11/scss/utilities/_reduce-motion.scss
@@ -0,0 +1,27 @@
+@if $enable-transitions and $enable-important {
+ /**
+ * Reduce Motion Features
+ */
+
+ // Based on :
+ // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+ // ––––––––––––––––––––
+
+ // 1. Remove animations when motion is reduced (opinionated)
+ // 2. Remove fixed background attachments when motion is reduced (opinionated)
+ // 3. Remove timed scrolling behaviors when motion is reduced (opinionated)
+ // 4. Remove transitions when motion is reduced (opinionated)
+ @media (prefers-reduced-motion: reduce) {
+ *:not([aria-busy="true"]),
+ :not([aria-busy="true"])::before,
+ :not([aria-busy="true"])::after {
+ background-attachment: initial !important; // 2
+ animation-duration: 1ms !important; // 1
+ animation-delay: -1ms !important; // 1
+ animation-iteration-count: 1 !important; // 1
+ scroll-behavior: auto !important; // 3
+ transition-delay: 0s !important; // 4
+ transition-duration: 0s !important; // 4
+ }
+ }
+}
diff --git a/themes/ccchh/assets/pico-1.5.11/scss/utilities/_tooltip.scss b/themes/ccchh/assets/pico-1.5.11/scss/utilities/_tooltip.scss
new file mode 100644
index 0000000..d0355a3
--- /dev/null
+++ b/themes/ccchh/assets/pico-1.5.11/scss/utilities/_tooltip.scss
@@ -0,0 +1,278 @@
+/**
+ * Tooltip ([data-tooltip])
+ */
+
+[data-tooltip] {
+ position: relative;
+
+ &:not(a, button, input) {
+ border-bottom: 1px dotted;
+ text-decoration: none;
+ cursor: help;
+ }
+
+ &[data-placement="top"]::before,
+ &[data-placement="top"]::after,
+ &::before,
+ &::after {
+ display: block;
+ z-index: 99;
+ position: absolute;
+ bottom: 100%;
+ left: 50%;
+ padding: .25rem .5rem;
+ overflow: hidden;
+ transform: translate(-50%, -.25rem);
+ border-radius: var(--border-radius);
+ background: var(--tooltip-background-color);
+ content: attr(data-tooltip);
+ color: var(--tooltip-color);
+ font-style: normal;
+ font-weight: var(--font-weight);
+ font-size: .875rem;
+ text-decoration: none;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ opacity: 0;
+ pointer-events: none;
+ }
+
+ // Caret
+ &[data-placement="top"]::after,
+ &::after {
+ padding: 0;
+ transform: translate(-50%, 0rem);
+ border-top: .3rem solid;
+ border-right: .3rem solid transparent;
+ border-left: .3rem solid transparent;
+ border-radius: 0;
+ background-color: transparent;
+ content: "";
+ color: var(--tooltip-background-color);
+ }
+
+ &[data-placement="bottom"] {
+ &::before,
+ &::after {
+ top: 100%;
+ bottom: auto;
+ transform: translate(-50%, .25rem);
+ }
+
+ &:after{
+ transform: translate(-50%, -.3rem);
+ border: .3rem solid transparent;
+ border-bottom: .3rem solid;
+ }
+ }
+
+ &[data-placement="left"] {
+ &::before,
+ &::after {
+ top: 50%;
+ right: 100%;
+ bottom: auto;
+ left: auto;
+ transform: translate(-.25rem, -50%);
+ }
+
+ &:after{
+ transform: translate(.3rem, -50%);
+ border: .3rem solid transparent;
+ border-left: .3rem solid;
+ }
+ }
+
+ &[data-placement="right"] {
+ &::before,
+ &::after {
+ top: 50%;
+ right: auto;
+ bottom: auto;
+ left: 100%;
+ transform: translate(.25rem, -50%);
+ }
+
+ &:after{
+ transform: translate(-.3rem, -50%);
+ border: .3rem solid transparent;
+ border-right: .3rem solid;
+ }
+ }
+
+ // Display
+ &:focus,
+ &:hover {
+ &::before,
+ &::after {
+ opacity: 1;
+ }
+ }
+
+
+ @if $enable-transitions {
+
+ // Animations, excluding touch devices
+ @media (hover: hover) and (pointer: fine) {
+ &[data-placement="bottom"]:focus,
+ &[data-placement="bottom"]:hover
+ &:focus,
+ &:hover {
+ &::before,
+ &::after {
+ animation-duration: .2s;
+ animation-name: tooltip-slide-top;
+ }
+
+ &::after {
+ animation-name: tooltip-caret-slide-top;
+ }
+ }
+
+ &[data-placement="bottom"] {
+ &:focus,
+ &:hover {
+ &::before,
+ &::after {
+ animation-duration: .2s;
+ animation-name: tooltip-slide-bottom;
+ }
+
+ &::after {
+ animation-name: tooltip-caret-slide-bottom;
+ }
+ }
+ }
+
+ &[data-placement="left"] {
+ &:focus,
+ &:hover {
+ &::before,
+ &::after {
+ animation-duration: .2s;
+ animation-name: tooltip-slide-left;
+ }
+
+ &::after {
+ animation-name: tooltip-caret-slide-left;
+ }
+ }
+ }
+
+ &[data-placement="right"] {
+ &:focus,
+ &:hover {
+ &::before,
+ &::after {
+ animation-duration: .2s;
+ animation-name: tooltip-slide-right;
+ }
+
+ &::after {
+ animation-name: tooltip-caret-slide-right;
+ }
+ }
+ }
+ }
+
+ @keyframes tooltip-slide-top {
+ from {
+ transform: translate(-50%, .75rem);
+ opacity: 0;
+ }
+ to {
+ transform: translate(-50%, -.25rem);
+ opacity: 1;
+ }
+ }
+
+ @keyframes tooltip-caret-slide-top {
+ from {
+ opacity: 0;
+ }
+ 50% {
+ transform: translate(-50%, -.25rem);
+ opacity: 0;
+ }
+ to {
+ transform: translate(-50%, 0rem);
+ opacity: 1;
+ }
+ }
+
+ @keyframes tooltip-slide-bottom {
+ from {
+ transform: translate(-50%, -.75rem);
+ opacity: 0;
+ }
+ to {
+ transform: translate(-50%, .25rem);
+ opacity: 1;
+ }
+ }
+
+ @keyframes tooltip-caret-slide-bottom {
+ from {
+ opacity: 0;
+ }
+ 50% {
+ transform: translate(-50%, -.5rem);
+ opacity: 0;
+ }
+ to {
+ transform: translate(-50%, -.3rem);
+ opacity: 1;
+ }
+ }
+
+ @keyframes tooltip-slide-left {
+ from {
+ transform: translate(.75rem, -50%);
+ opacity: 0;
+ }
+ to {
+ transform: translate(-.25rem, -50%);
+ opacity: 1;
+ }
+ }
+
+ @keyframes tooltip-caret-slide-left {
+ from {
+ opacity: 0;
+ }
+ 50% {
+ transform: translate(.05rem, -50%);
+ opacity: 0;
+ }
+ to {
+ transform: translate(.3rem, -50%);
+ opacity: 1;
+ }
+ }
+
+ @keyframes tooltip-slide-right {
+ from {
+ transform: translate(-.75rem, -50%);
+ opacity: 0;
+ }
+ to {
+ transform: translate(.25rem, -50%);
+ opacity: 1;
+ }
+ }
+
+ @keyframes tooltip-caret-slide-right {
+ from {
+ opacity: 0;
+ }
+ 50% {
+ transform: translate(-.05rem, -50%);
+ opacity: 0;
+ }
+ to {
+ transform: translate(-.3rem, -50%);
+ opacity: 1;
+ }
+ }
+ }
+}
diff --git a/themes/ccchh/assets/sass/main.scss b/themes/ccchh/assets/sass/main.scss
index b087d0b..1f14821 100644
--- a/themes/ccchh/assets/sass/main.scss
+++ b/themes/ccchh/assets/sass/main.scss
@@ -128,6 +128,7 @@ body>main {
line-height: 1.0em;
max-width: 8em;
padding: 5px;
+ white-space: nowrap;
color: $roomstate_color_unknown;
@@ -144,7 +145,7 @@ body>main {
}
}
-// CCCHH Icon in Menu
+// CCCHH icon & hamburger menu in header
@media only screen and (prefers-color-scheme: light) {
.invert-on-light {
filter: invert(1);
@@ -253,6 +254,167 @@ body>main {
box-shadow: var(--card-box-shadow);
padding: 0;
margin: 0;
+
+ --main-header-content-height: calc(var(--font-size) * var(--line-height));
+
+ .container {
+ display: block flex;
+ position: relative;
+ flex-direction: row;
+ justify-content: start;
+ align-items: center;
+ column-gap: var(--spacing);
+ }
+
+ .menu-button,
+ .hamburger,
+ .in-nav-home {
+ // Don't display, when not in mobile mode.
+ display: none;
+ }
+
+ .menu {
+ // Set this to 100% to force the roomstate to "right-align".
+ width: 100%;
+ }
+
+ .ccchh-logo {
+ padding-top: var(--nav-element-spacing-vertical);
+ padding-bottom: var(--nav-element-spacing-vertical);
+
+ img {
+ height: var(--main-header-content-height);
+ }
+ }
+
+
+ // When the header content doesn't display nicely anymore, switch to mobile mode.
+ @import "../pico-1.5.11/scss/variables";
+
+ @media (max-width: map-get($breakpoints, md)) {
+ .hamburger-button {
+ display: unset;
+ position: absolute;
+ top: calc(var(--nav-element-spacing-vertical));
+ right: var(--spacing);
+ height: var(--main-header-content-height);
+ // To have an attempt at a good-looking cross, when converting the burger
+ // stack to one, set the width to the height / sin(45).
+ width: calc(var(--main-header-content-height) / 0.707106781);
+ }
+
+ .menu-button {
+ z-index: 3;
+ opacity: 0%;
+ border: 0;
+ margin: 0;
+ }
+
+ .hamburger {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+ .hamburger-line {
+ height: 4px;
+ width: 100%;
+ background-color: white;
+ }
+ }
+
+ .in-nav-home {
+ display: unset;
+ }
+
+ // Don't display the menu per default in mobile mode.
+ .menu {
+ display: none;
+ }
+
+ .menu-button:checked~.menu {
+ display: unset;
+ position: fixed;
+ width: 100%;
+ height: 100%;
+ top: calc(var(--main-header-content-height) + (var(--nav-element-spacing-vertical) * 2) + 3px);
+ left: 0;
+ background-color: var(--background-color);
+
+ ul,
+ li {
+ display: block;
+ padding-top: calc(var(--nav-element-spacing-vertical) * 0.5);
+ padding-bottom: calc(var(--nav-element-spacing-vertical) * 0.5);
+ }
+
+ ul {
+ padding-left: var(--spacing);
+ padding-right: var(--spacing);
+ }
+
+ li {
+ padding-left: 0;
+ padding-right: 0;
+ border-bottom: 0.2em solid var(--muted-border-color);
+ display: flex;
+
+ // borrowed form pico css for li
+ margin-bottom: calc(var(--typography-spacing-vertical) * .25);
+ }
+
+ a {
+ flex-grow: 1;
+ }
+
+ .main-nav {
+ margin: auto;
+ }
+
+ // Use the media queries, which we need, from here:
+ @if map-get($breakpoints, "sm") {
+ @media (min-width: map-get($breakpoints, "sm")) {
+ ul {
+ padding-left: 0;
+ padding-right: 0;
+ }
+
+ .main-nav {
+ max-width: map-get($viewports, "sm");
+ }
+ }
+ }
+ }
+
+ .hamburger-line-top {
+ transform-origin: top right;
+ transition: all 0.4s ease-in-out;
+ }
+
+ .hamburger-line-middle {
+ transition: all 0.2s ease-in-out;
+ }
+
+ .hamburger-line-bottom {
+ transform-origin: bottom right;
+ transition: all 0.4s ease-in-out;
+ }
+
+ .menu-button:checked~.hamburger {
+ .hamburger-line-top {
+ // After some adjustments to make the cross look decent, rotate -45deg.
+ transform: translateX(-1.5px) translateY(-1.5px) rotate(-45deg);
+ }
+
+ .hamburger-line-middle {
+ transform: scaleY(0);
+ }
+
+ .hamburger-line-bottom {
+ // After some adjustments to make the cross look decent, rotate 45deg.
+ transform: translateX(-1.5px) translateY(1.5px) rotate(45deg);
+ }
+ }
+ }
}
diff --git a/themes/ccchh/layouts/partials/head.html b/themes/ccchh/layouts/partials/head.html
index 7b8744b..0cbca28 100644
--- a/themes/ccchh/layouts/partials/head.html
+++ b/themes/ccchh/layouts/partials/head.html
@@ -1,13 +1,14 @@
-{{- $options := dict "transpiler" "libsass" "targetPath" "css/style.css" -}}
+{{- $cssOptionsMain := dict "transpiler" "libsass" "targetPath" "css/style.css" -}}
+{{- $cssOptionsPico := dict "transpiler" "libsass" "targetPath" "css/pico.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.GetRemote "https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css" }}
- <link rel="stylesheet" href="{{ .RelPermalink }}" crossorigin="anonymous">
- {{ end }}
- {{ with resources.Get "sass/main.scss" | toCSS $options | minify | fingerprint -}}
+ {{ 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 -}}
<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">
diff --git a/themes/ccchh/layouts/partials/header.html b/themes/ccchh/layouts/partials/header.html
index dafcd8f..154a775 100644
--- a/themes/ccchh/layouts/partials/header.html
+++ b/themes/ccchh/layouts/partials/header.html
@@ -1,8 +1,21 @@
<header class="main-header header">
<div class="container">
+ {{ $image := resources.Get "images/logo.svg" }}
+ <a href="{{ .Site.Home.RelPermalink }}" class="ccchh-logo">
+ <img src="{{ $image.RelPermalink }}" class="invert-on-light" alt="CCCHH Icon">
+ </a>
+ <input class="menu-button hamburger-button" type="checkbox">
+ <div class="hamburger hamburger-button invert-on-light">
+ <div class="hamburger-line hamburger-line-top"></div>
+ <div class="hamburger-line hamburger-line-middle"></div>
+ <div class="hamburger-line hamburger-line-bottom"></div>
+ </div>
<nav class="menu">
{{- partial "menu.html" (dict "menuID" "main" "page" . ) -}}
</nav>
+ <div class="roomstate" id="roomstate">
+ <span class="state">unbekannt</span><br><span class="duration">(seit )</span>
+ </div>
</div>
</header>
diff --git a/themes/ccchh/layouts/partials/menu.html b/themes/ccchh/layouts/partials/menu.html
index 84dea8d..7d3bda2 100644
--- a/themes/ccchh/layouts/partials/menu.html
+++ b/themes/ccchh/layouts/partials/menu.html
@@ -2,10 +2,9 @@
{{- $menuID := .menuID -}}
{{- $menuContent := index site.Menus .menuID -}}
- <ul>
+ <ul class="main-nav">
{{- if compare.Eq $menuID "main" -}}
- {{- $image := resources.Get "images/logo.svg" }}
- <li><a href="/{{ .Site.Home.URL }}"><img src="{{ $image.RelPermalink }}" class="invert-on-light" width="150px" alt="CCCHH Icon"></a></li>
+ <li><a href="/{{ .Site.Home.RelPermalink }}" class="in-nav-home">Home</a></li>
{{- end }}
{{- range $menuContent }}
<li>
@@ -22,10 +21,3 @@
>{{ or (T .Identifier) .Name | safeHTML }}</a></li>
{{- end }}
</ul>
- {{ if compare.Eq $menuID "main" -}}
- <ul>
- <li class="roomstate" id="roomstate">
- <span class="state">unbekannt</span><br><span class="duration">(seit )</span>
- </li>
- </ul>
- {{- end -}}