Compare commits

..

2 commits

Author SHA1 Message Date
7d596f2a30 WIP CI: Split pipeline into two stages
All checks were successful
/ build (push) Successful in 37s
/ deploy (push) Successful in 13s
2024-01-22 23:04:41 +01:00
ef11807d29 WIP: enable on feature/forgejo branch for testing 2024-01-22 23:01:03 +01:00
109 changed files with 122 additions and 4863 deletions

View file

@ -1,23 +1,19 @@
on:
pull_request:
types:
- closed
pull_request_target:
- closed
jobs:
cleanup-staging:
runs-on: docker
container:
image: code.forgejo.org/oci/node:22-bookworm
image: code.forgejo.org/oci/node:20-bookworm
steps:
- name: Pipeline info PR
run: |
echo "Run triggered by ${{ github.event_name }} (${{ github.event.action }}) on ref ${{ github.ref_name }}"
echo "PR#${{ github.event.pull_request.number }} ${{ github.event.action }}"
- name: Staging Deployment - Prepare keys
- name: Deploy - Remove PR from staging
if: github.event.action == 'closed'
run: |
echo "${{ secrets.SSH_DEPLOY_KEY }}" > deploykey.priv
chmod 400 deploykey.priv
echo "${{ secrets.SSH_KNOWN_HOSTS_FILE }}" > ./known_hosts
- name: Staging Deployment - Remove PR from staging
run: |
ssh -i deploykey.priv -o 'UserKnownHostsFile ./known_hosts' ccchh-website-deploy@public-web-static-intern.hamburg.ccc.de -t "rm -r /var/www/staging.hamburg.ccc.de/pr${{ github.event.pull_request.number }}/"
ssh -i deploykey.priv -o 'UserKnownHostsFile ./known_hosts' ccchh-website-deploy@public-web-static-intern.hamburg.ccc.de -t "rm -r /var/www/next.hamburg.ccc.de/pr${{ github.event.pull_request.number }}/"

View file

@ -2,6 +2,7 @@ on:
push:
branches:
- main
- feature/forgejo
pull_request:
schedule:
- cron: "0,20,40 * * * *"
@ -13,11 +14,11 @@ jobs:
build:
runs-on: docker
container:
image: hugomods/hugo:exts-0.148.1
image: registry.gitlab.com/pages/hugo/hugo_extended:latest
steps:
- name: Pipeline info
run: |
echo "Run triggered by ${{ github.event_name }} (${{ github.event.action }}) on ref ${{ github.ref_name }}"
echo "Run triggered by ${{ gitea.event_name }} on ref ${{ github.ref_name }}"
- name: Install packages
run: |
@ -26,56 +27,58 @@ jobs:
apk add nodejs-current
# For website build.
apk add tzdata coreutils curl jq git
# For uploading.
apk add rsync openssh
- uses: actions/checkout@v4
with:
fetch-depth: 0 # pull full history for page lastmod by git commit date
- name: Build website - prod
run: |
./fetch-calendar.sh
hugo
- name: Build website - staging
- name: Patch baseURL (staging only)
if: github.ref_name != 'main'
run: |
sed -i "s#baseURL = 'https://hamburg.ccc.de/'#baseURL = 'https://staging.hamburg.ccc.de/pr${{ github.event.pull_request.number }}/'#" hugo.toml
sed -i "s#index = true#index = false#" hugo.toml
sed -i "s#follow = true#follow = false#" hugo.toml
- name: Build website
run: |
./fetch-calendar.sh
hugo --buildFuture
hugo
# TODO: Turn retention time down for scheduled runs
- uses: actions/upload-artifact@v3
with:
name: website-build
path: public/
deploy:
needs: [build]
runs-on: docker
container:
image: alpine
if: github.event_name == 'push'
steps:
- name: Install packages
run: |
apk update
# For CI actions.
apk add nodejs-current
# For uploading.
apk add rsync openssh
- name: Deploy - Prepare keys
if: github.event_name == 'push' || github.event_name == 'pull_request' || github.event_name == 'schedule'
if: github.event_name == 'pull_request'
run: |
echo "${{ secrets.SSH_DEPLOY_KEY }}" > deploykey.priv
chmod 400 deploykey.priv
echo "${{ secrets.SSH_KNOWN_HOSTS_FILE }}" > ./known_hosts
- uses: actions/download-artifact@v3
with:
name: website-build
- name: Deploy - Upload PR to staging
if: github.event_name == 'pull_request'
run: |
echo "Deploying to staging.hamburg.ccc.de/pr${{ github.event.pull_request.number }}"
rsync -v -r --delete -e "ssh -i deploykey.priv -o 'UserKnownHostsFile ./known_hosts'" public/ ccchh-website-deploy@public-web-static-intern.hamburg.ccc.de:/var/www/staging.hamburg.ccc.de/pr${{ github.event.pull_request.number }}/
- name: Deploy - Add comment to PR with staging URL
if: github.event_name == 'pull_request' && github.event.action == 'opened'
run: |
curl \
-X POST \
${{ github.event.pull_request.base.repo.url }}/issues/${{ github.event.pull_request.number }}/comments \
-H "Content-Type: application/json" \
-H "Authorization: token $GITHUB_TOKEN" \
--data '{ "body": "You can view your changes at https://staging.hamburg.ccc.de/pr${{ github.event.pull_request.number }}/" }'
- name: Deploy - Upload to prod
if: (github.event_name == 'push' || github.event_name == 'schedule') && github.ref_name == 'main'
if: github.ref_name == 'main'
run: |
rsync -v -r --delete -e "ssh -i deploykey.priv -o 'UserKnownHostsFile ./known_hosts'" public/ ccchh-website-deploy@public-web-static-intern.hamburg.ccc.de:/var/www/hamburg.ccc.de/
- uses: actions/upload-artifact@v3
if: github.event_name == 'pull_request'
with:
name: website-build
path: public/

View file

@ -1,6 +1,6 @@
BSD 3-Clause License
Copyright (c) 2023, CCC Hansestadt Hamburg e.V.
Copyright (c) 2023, Chaos Computer Club Hansestadt Hamburg e.V.
Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:

View file

@ -11,8 +11,8 @@ All other information like details on groups, projects and recurring events shou
- start page (onepager)
* who we are
* announcements aka current blog entry (if in the future)
* event calendar
* visit us -> open chaos + link to wiki for all recurring events
* event calendar
* groups, e.g. CTF team, CMS, freifunk, etc.
* directions (map)
- blog, split into:
@ -24,7 +24,7 @@ All other information like details on groups, projects and recurring events shou
### Build and Deploy
To populate the calendar data, please run `./fetch-calendar.sh` before running hugo.
To populate the calendar data, please run `fetch-calendar.sh` before running hugo.
Running the hugo command without and parameters will re-generate the site in the `public` directory.
To deploy the website, just copy the whole folder to a directory which is servered by the webserver of your preference.
@ -47,47 +47,26 @@ hugo server -D
#### Add an Event Announcement
There are two basic types of posts: Events and articles.
Events will be shown on the home page from their publishing date until they have happened and shall be used for things which happen at a certain date.
This is not limited to events organized by the CCCHH, but can also be a hint to other events which we think are related to our activities.
Events will be shown on the home page from their publishing date until they have happened.
To create a new event blog post, run a command like this:
```shell
hugo new content --kind event blog/yyyy/yyyy-mm-dd-your-event-title/index.md
hugo new content --kind event blog/your-event-title.md
```
#### Add a Blog Entry
As mentioned before, you can also create blog posts for things which aren't events.
They will only be shown in the "blog" section and posted to the RSS feeds and shall be used for things which are relevant for a longer time.
As we have much more event announcements than articles, finding articles in all blog posts can be quite a challenge.
But using these two categories enables filtering, so that the history of articles is in one list.
They will only be shown in the "blog" section and posted to the RSS feeds.
To create a new general blog post, run a command like this:
```shell
hugo new content --kind article blog/yyyy/yyyy-mm-dd-your-article-title/index.md
hugo new content --kind article blog/your-article-title.md
```
#### Additional Notes on Events and Articles
By default the first 70 words are shown as a summary on list pages.
Please use `<!--more-->` to manually separate the summary from other post content.
Please prefix your folder name with a date to make browsing the content in the source code easier.
The date in the URL will be taken from the `date` field in the front matter.
Blog posts from before 2024-01-22 were imported from the previous website and have additional front matter data which is not usually needed (e.g. the lastmod value).
When using the commands above, the template shall have evenything you need.
#### Populate the Event Calendar
The event calendar table is filled from the Nextcloud iCal feed.
To add a link on the title text, just add some link to the event's description field.
The first link (something starting with `https://` or `http://`) from anywhere in the text will be taken.
(iCal has a link attribute, but that is not supported by the Nextcloud web UI. So we use the description instead.)
### Icons
You can use solid and brand icons from https://fontawesome.com/icons version 6 in your posts like this:

View file

@ -2,5 +2,5 @@
- {{< fa envelope >}} E-Mail an den CCC Hamburg: <mail@hamburg.ccc.de>
- {{< fa envelope >}} Verwaltung des CCC Hamburg: <buero@hamburg.ccc.de>
- {{< fa brands mastodon >}} Fediverse: [@ccchh@chaos.social](https://chaos.social/@ccchh)
- {{< fa comments >}} Matrix CCCHH Chat: [#ccchh:hamburg.ccc.de](https://matrix.to/#/#ccchh:hamburg.ccc.de)
- {{< fa comments >}} Matrix Space: [#ccchh-space:hamburg.ccc.de](https://matrix.to/#/#ccchh-space:hamburg.ccc.de)
- {{< fa comments >}} Matrix Space: [#ccchh-space:hamburg.ccc.de](https://matrix.to/#/#ccchh-space:hamburg.ccc.de)
- {{< fa comments >}} Internet Relay Chat: [hackint.eu](https://webirc.hackint.org/#irc://irc.hackint.org/#ccchh?nick=) [#ccchh](ircs://hackint.eu/ccchh)

Binary file not shown.

Before

Width:  |  Height:  |  Size: 338 KiB

View file

@ -1,20 +0,0 @@
---
title: "38c3 Voucher"
---
# Ticket-Klick-Party
Wenn ihr im **offenen Verkauf** Tickets klicken möchtet, kommt zu einem unserer Klick-Party-Termine in den Club!
Termine:
* ~~Dienstag, 12.11. 19:30~~
* Sonntag, 17.11. 15:30
* Samstag, 23.11. 10:30
An den drei Verkaufsterminen treffen wir uns im Club im Zeiseweg und klicken gemeinsam im Shop.
Das erhöht die Chancen, im richtigen Moment geklickt zu haben und somit ein Ticket kaufen zu können.
* Bitte tragt euch hier ein, damit wir eine Idee haben, wie viele Personen jeweils kommen möchten: [Umfrage Ticket-Klick-Party](https://cloud.hamburg.ccc.de/apps/forms/s/49f3Mj6TRJ8EzLYp3RjK9HeS)
* Seid rechtzeitig da! Für den Ticketverkauf muss man im genau richtigen Moment klicken, es lohnt sich, darauf vorbereitet zu sein. Seid deshalb mindestens eine halbe Stunde vor dem Beginn des Verkaufs [bei uns im Club](https://hamburg.ccc.de/#kontakt).
* Bringt ein Laptop oder Tablet mit, mit dem ihr in den Shop gehen könnt. Ein Telefon geht grundsätzlich auch, ist aber erfahrungsgemäß etwas fummeliger.
* Habt eine Email-Adresse parat, an die die Bestellbestätigung inkl. Zahlungsdaten geschickt werden kann, oder eure Kreditkarte, damit ihr sofort bezahlen könnt.

View file

@ -1,13 +1,13 @@
---
categories: event
date: '2023-03-25T13:37:00+01:00'
date: '2022-03-25T13:37:00+01:00'
draft: false
header:
caption: Sorry this blog entry was migrated, there is no Alt-Text
image: chaosknoten.gif
lastmod: '2023-03-01T10:00:00+01:00'
lastmod: '2023-02-28T10:00:00+01:00'
location: Zeiseweg 9
publishDate: '2023-03-01T10:00:00+01:00'
publishDate: '2023-02-28T10:00:00+01:00'
slug: tag-des-offenen-hackspace-25-3-index
title: Tag des offenen Hackspace 25.3.
---

View file

@ -29,4 +29,4 @@ Wir empfehlen euch das Mitbringen einer Methode, um euch Notizen zu machen, sowi
Ihr findet uns in den Räumen des CCCHH in der [Viktoria-Kaserne, Zeiseweg 9](https://www.hamburg.ccc.de/#wegbeschreibung). Die Veranstaltung ist kostenlos und wird etwa 2 Stunden dauern. Wer im Anschluss noch länger bleiben möchte, um weiterführende Fragen zu stellen oder mit uns zu quatschen, ist dazu herzlich eingeladen.
Allgemeine Informationen über unsere FreiTalk-Gruppe und wie ihr auf dem Laufenden bleiben könnt, findet ihr [in unserem Wiki](https://wiki.hamburg.ccc.de/club:freitalk:start). Dort findet ihr später auch die Folien und weiteres Material.
Allgemeine Informationen über unsere FreiTalk-Gruppe und wie ihr auf dem Laufenden bleiben könnt, findet ihr [in unserem Wiki](https://wiki.ccchh.net/club:freitalk:start). Dort findet ihr später auch die Folien und weiteres Material.

View file

@ -1,28 +0,0 @@
---
categories: event
title: 'Freitalk - Linux Werkstatt'
date: '2024-02-02T18:30:00+01:00' # date of the event
publishDate: '2024-01-24T23:28:09+01:00' # when to publish
draft: false
location: Z9
authors:
- skye
# tags:
# header:
# caption: A caption für the picture will be used as Alt-Text
# image: Path to the image
---
Linux ist toll, um sich von den kommerziellen Interessen anderer Betriebssysteme zu befreien, um alter Hardware ein zweites Leben zu schenken, oder um mehr Spaß mit Computern zu haben. Leider gibt es nur sehr wenige Angebote, um Hilfe mit Linux-Problemen zu erhalten, und es kann schwierig sein, Menschen zu finden, die sich damit auskennen.
Deshalb werden wir am 2. Februar zwischen 18:30 und 21 Uhr in den Räumen des CCCHH eine offene Linux-Werkstatt anbieten, wo wir euch mit Linux helfen können. Wir können euch zum Beispiel dabei unterstützen, passende Linux-Software für eure Anwendungen zu finden, ein kaputtes Linux wieder zu reparieren, oder ein Linux eurer Wahl auf eurem PC oder Laptop zu installieren (bitte sorgt vorher eigenständig dafür, alle eure wertvollen Daten auf einem anderen Gerät zu speichern).
Gerne stehen wir auch für allgemeine und spezifischere Fragen zur Verfügung. Auch erfahrenere Linux-Fans sind eingeladen, um sich mit uns auszutauschen oder den Anfänger\*innen zu helfen.
Es ist eine offene Veranstaltung ohne Vortragsteil. Ihr könnt zwischen 18:30 und 21 Uhr jederzeit vorbeikommen. Bitte bringt euer Gerät mit sowie ggf. einen externen Datenträger, um Daten sichern zu können. Wenn ihr einen „großen“ PC vorbeibringen möchtet, braucht ihr Bildschirm, Tastatur etc. nicht extra mitzuschleppen, davon haben wir genug.
Die Veranstaltung findet mit FFP2-Maskenpflicht statt, es stehen Masken im Club zur Verfügung.
We are also happy to help you in English.
Weitere Infos über unsere FreiTalk-Veranstaltungen sowie eine Anleitung, wie ihr über E-Mail darüber auf dem Laufenden gehalten werden könnt, gibt es in [unserem Wiki-Artikel über FreiTalk.](https://wiki.hamburg.ccc.de/club:freitalk:start)

View file

@ -1,21 +0,0 @@
---
categories: event
title: 'Hamburg steht Zusammen'
date: '2024-01-28T14:00:00+01:00'
publishDate: '2024-01-27T15:27:09+01:00'
draft: false
location: Ludwig-Erhard-Straße
weight: 0
authors:
- w1ntermute
# tags:
# header:
# caption: A caption für the picture will be used as Alt-Text
# image: Path to the image
---
Auch wir, der CCC Hamburg, rufen zusammen mit anderen Gruppen auf, sich bei der morgigen Demo am 28.01. zu beteiligen.
Gerade wir vom Chaos Computer Club wissen, wie wichtig es ist, unsere Demokratie und Diversität zu verteidigen.
Deshalb werden wir und auch andere Gruppen morgen um 14:00 einen Marsch an der Ludwig-Erhard-Straße starten.
Wir hoffen, dass viele Wesen dem Aufruf folgen werden. Mehr Informationen findet ihr dazu auf der [Seite des Demokratieteams](https://www.demokrateam.org/demos/hamburg-steht-zusammen/).
Dieses Mal wird es eine bewegende Demonstration. Zieht also bequeme Schuhe an.

View file

@ -1,23 +0,0 @@
---
categories: event
title: 'Cyclopropenylidene spielt LA CTF'
date: '2024-02-17T14:00:00+01:00'
publishDate: '2024-02-07T22:00:00+01:00'
draft: false
location: Zeiseweg 9, Hauptraum
weight: 0
authors:
- ellcs
# tags:
# header:
# caption: A caption für the picture will be used as Alt-Text
# image: Path to the image
---
Seit der Pandemie wurde in den Clubräumen an keinem echten CTF teilgenommen. Dies möchten wir ändern!
Teilnehmen werden wir am [LA CTF](https://lac.tf/). Wir spielen am Samstag, dem 17.02.2024, ab 14:00, im Clubraum und am Sonntag, dem 18.02.2024 bis 20:00. Im Hauptraum des Z9.
Wir treffen uns dabei, um zusammen zu rätseln, zu hacken und zu tschunken. [Meldet euch gerne bei uns](https://wiki.hamburg.ccc.de/club:ctf:start#kontakt).
Wir freuen uns auf alle Personen, die früher bereits bei Cyclopropenylidene mitgespielt haben, als kleines Wiedersehen :) Wir freuen uns auf euch!

View file

@ -1,33 +0,0 @@
---
categories: event
title: 'Tag Des Offenen Hackspace'
date: '2024-03-02T16:00:00+01:00' # date of the event
publishDate: '2024-02-17T19:07:43+01:00' # when to publish
draft: false
location: Z9
authors:
- skye
# tags:
# header:
# caption: A caption für the picture will be used as Alt-Text
# image: Path to the image
---
Am Samstag, den 2. März wird der CCCHH einen Tag der offenen Tür veranstalten. Wir begrüßen alle Interessierten, alle Neulinge und alle alten Hasen, die diese in Empfang nehmen möchten. Es gibt kurze Präsentationen, einen offenen Gesprächsteil und ein Stricktreffen. <!--more-->
Was für Projekte und Gruppen gibt es im CCCHH? Muss ich IT-Profi sein, um bei euch mitzumachen, oder finde ich auch als fachfremde Person einen Platz? Macht ihr eigentlich nur Computer oder engagiert ihr euch auch sozial und politisch? Wie sieht es mit Inklusion und Barrierefreiheit aus? Wie organisieren sich FLINTA\*-Personen im CCC-Umfeld? Wie kann ich in den Club einsteigen und wie finde ich ein Projekt, bei dem ich mich einbringen kann? Wen kann ich ansprechen, wenn ich über ein bestimmtes Thema etwas lernen möchte? Warum habt ihr eigentlich alle Katzenohren auf?
Diese und weitere Fragen beantworten wir euch in [unseren Vereinsräumen](https://hamburg.ccc.de/#kontakt) in der Viktoria-Kaserne.
## Ablauf und Programm
- 15:30: Ab hier rechnen wir mit eurem Erscheinen, aber wir werden natürlich während der gesamten Zeitdauer der Veranstaltung unsere Tür für Besuchende öffnen. Ihr dürft auch später kommen.
- 16:00 bis 17:00: Wir stellen unseren Club sowie verschiedene Gruppen und Projekte vor, um euch zu inspirieren und zum Mitmachen einzuladen. Wir sprechen über [regelmäßige Termine](https://wiki.hamburg.ccc.de/club:terminserien:start) und feste Gruppen in unserem Hackspace, über [Geekfem](https://geekfem.net/) und die [Haecksen](https://www.haecksen.org/), über [CTF](https://wiki.hamburg.ccc.de/club:ctf:start), über die [Cryptoparty](https://cryptoparty-hamburg.de/) sowie über andere Projekte, die im Chaos-Umfeld passieren.
- 17:00 bis 18:00: In einer lockeren Runde beantworten wir eure Fragen zu den vorgestellten Projekten oder zum Club allgemein.
- Ab 18:00: Gemütliches Stricktreffen für alle, die an der flauschigen Seite des Chaos interessiert oder schon daran beteiligt sind, denn Chaos ist viel mehr als nur Computerkram. Wenn alle, die sowieso schon stricken, ein bisschen zusätzliches Material mitbringen, können wir es auch denen beibringen, die es neu lernen möchten.
- Im weiteren Verlauf des Abends Übergang zu Socializing.
Hinweis 1, Maskenpflicht: Rücksichtnahme und Inklusion sind feste Bestandteile der Chaos-Kultur. Um gesundheitlich vorbelastete Personen zu schützen, gilt in unseren Clubräumen eine sogenannte On-Demand-Maskenpflicht: Sobald eine Person dies wünscht, müssen alle Anwesenden eine FFP2-Maske aufsetzen. Da an der Organisation und Durchführung dieser Veranstaltung mehrere Personen beteiligt sind, die auf diesen Schutz angewiesen sind, ist davon auszugehen, dass eine Maskenpflicht gelten wird. Selbstverständlich stehen in den Clubräumen Masken zur Verfügung für alle, die keine eigene dabei haben.
Hinweis 2, Einlass: Da unsere Klingel vor einiger Zeit entwendet wurde (Beweggründe dafür sind unklar), ist es derzeit so, dass Gäste im Club anrufen müssen (siehe [Kontakt](https://hamburg.ccc.de/#kontakt)), um am Eingang abgeholt zu werden. Ein Schild mit der Club-Telefonnummer hängt an der Stelle, wo sich einstmals unsere Klingel befand, aber für den Fall, dass ihr den richtigen Eingang nicht findet oder sofern ihr anderweitig Hilfe braucht (Rollstuhl, Sehbehinderung, falschen Eingang genommen etc.) empfehlen wir euch, die Nummer schon im Vorfeld zu notieren. Alternativ ist es möglich, in unserem [Matrix-Channel](https://matrix.to/#/#ccchh:hamburg.ccc.de) zu schreiben.
Hinweis 3, all creatures welcome: The presentation part will be in German but we do speak English, and are more than happy to introduce you to our hackspace individually.

View file

@ -1,23 +0,0 @@
---
categories: event
title: 'CTF am 20.04.2024'
date: '2024-04-20T12:00:00+02:00' # date of the event
publishDate: '2024-04-16T21:18:41+02:00' # when to publish
draft: false
location: Zeiseweg 9, Hautpraum
weight: 0
authors:
- w1ntermute
tags: ctf
#header:
# caption: A caption für the picture will be used as Alt-Tex
# image: Path to the image
---
Es ist wieder so weit, wir wollen gemeinsam hacken. Kommt gerne vorbei und wir werden zusammen die challenges angehen.
Teilnehmen werden wir am [Potsdam Cyber Games](https://potsdam-cyber-games.de/). Wir spielen am Samstag, dem 20.04.2024, ab 12:00, im Clubraum und am Sonntag, dem 21.04.2024 bis 20:00. Im Hauptraum des Z9.
Wir treffen uns dabei, um zusammen zu rätseln, zu hacken und zu tschunken. [Meldet euch gerne bei uns](https://wiki.hamburg.ccc.de/club:ctf:start#kontakt).
Wer es nicht schafft, vor Ort zu sein, kann auch gerne zu Hause spielen und beim nächsten CTF-MIttwoch Fragen oder Lösungen mit uns durchgehen.

View file

@ -1,16 +0,0 @@
---
categories: event
title: 'Openchaos am 14.06.2024 fällt aus'
date: '2024-06-14T20:00:00+02:00' # date of the event
publishDate: '2024-06-08T18:00:00+02:00' # when to publish
draft: false
location: Zeiseweg 9, Hautpraum
weight: 0
tags: openchaos
#header:
# caption: A caption für the picture will be used as Alt-Tex
# image: Path to the image
---
Aus organisatorischen Gründen fällt das Openchaos am Freitag den 14. Juni 2024 leider aus.
Die nächsten Termine sind am Dienstag den 25. Juni, und Freitag den 12. Juli (mit Maskenpflicht).

View file

@ -1,13 +0,0 @@
---
categories: event
title: 'Openchaos am 12.07. erst um 21 Uhr'
date: '2024-07-12T21:00:00+02:00' # date of the event
publishDate: '2024-07-10T18:00:00+02:00' # when to publish
draft: false
location: Zeiseweg 9, Hautpraum
weight: 0
tags: openchaos
---
Aus organisatorischen Gründen kann das Openchaos am Freitag den 12. Juli 2024 erst um 21 Uhr beginnen.
Wir bitten darum, nicht vor 21 Uhr zu erscheinen.

View file

@ -1,21 +0,0 @@
---
categories: event
title: '6. Dezember FreiTalk Esport'
date: '2024-12-06T18:00:00+01:00' # date of the event
publishDate: '2024-11-29T18:54:52+01:00' # when to publish
draft: false
location: Z9
authors:
- skye
# tags:
# header:
# caption: A caption für the picture will be used as Alt-Text
# image: Path to the image
---
Am 6. Dezember um 18:00 findet in den Räumen des CCCHH ein Vortrag über Esport statt: Wie funktioniert das Ökosystem Esport, welche Karrieren gibt es und was machen Teams? Ein allgemeiner Überblick am Beispiel der Esport Organisation "Unicorns of Love".
<!--more-->
Wir freuen uns auf alle Neulinge, Gäste und "Stammkund\*innen", die sich für das Thema interessieren. Die Veranstaltung wird um ca. 19:00 beendet sein. Im Anschluss dürft ihr gerne noch bleiben tauscht euch über das Thema aus, trinkt auf der Couch eine Mate oder lernt den Hamburger Chaos Computer Club kennen.
Unsere Vereinsräume in Altona erreicht ihr am besten per Fahrrad, Bus oder Bahn. Für genauere Details siehe [Kontakt](https://hamburg.ccc.de/#kontakt).

View file

@ -1,16 +0,0 @@
---
categories: event
title: 'Brettspielabend am 28.02.'
date: '2025-02-28T19:00:00+01:00' # date of the event
publishDate: '2025-02-08T20:00:00+01:00' # when to publish
draft: false
location: Z9
authors:
- wusel
---
Am Freitag, den 28.02. wird von 19 bis 22 Uhr ein analoger (!) Brettspielabend in unseren Räumen stattfinden.
Bringe gern dein Lieblingsbrettspiel mit und stelle es kurz vor, du wirst sicher Mitspieler*innen finden! Vielleicht entdeckst du auch selbst einen neuen Favoriten?
Um auch Personen, die Infektionen vermeiden müssen, die Teilnahme zu ermöglichen, besteht während dieser Veranstaltung eine Maskenpflicht. Masken können für 1€ bei uns erworben oder natürlich mitgebracht werden.

View file

@ -1,27 +0,0 @@
---
categories: event
title: 'Netzpolitischer Ausflug'
date: '2025-03-21T19:15:00+01:00' # date of the event
publishDate: '2025-03-18T00:00:00+01:00' # when to publish
draft: false
location: U-Feldstraße, Später Fanräume im Millerntor Stadion
authors:
- n0th1ng
---
Wir machen mal was außergewöhnliches und besuchen einen Vortrag der Datenpunks zum Thema Überwachung und Repression, bei der Braun-Weißen Hilfe vom FC St. Pauli.
Wir treffen uns um 19:15 an der Feldstraße und versuchen den Weg gemeinsam zu finden.
Infos zum Event:
+++ Vortrag + Soliparty gegen staatliche Repression! +++
Ob antifaschistisch Engagierte, Genoss*innen aus unseren eigenen Reihen oder auch befreundete Kurven - der Staat greift gerne mit voller Härte durch, gerade wenn es um linke Politik geht. Umso wichtiger ist es, zusammenzustehen und einander solidarisch zu unterstützen!
Die "Braun-Weisse Hilfe" sowie die "Mett Crew FCSP" laden am 21.03.2025 zum Vortrag Überwachung, sichere Kommunikation & Fankultur der netzaktivistischen Gruppe "Datenpunks" ein. Los geht es um 19:30h in den Fanräumen im Millerntor-Stadion.
Im direkten Anschluss veranstaltet die Mett Crew dann noch eine Soli-Party ebenfalls in den Fanräumen.
Techno, Trash und Trance gegen ihre Repressionen inkl. Soli-Shirt, -Schnaps und -Tombola. Der Eintritt ist gegen Spende.
Kommt vorbei - Sankt Pauli hält zusammen!

View file

@ -1,28 +0,0 @@
---
categories: event
title: 'Tag des Offenen Hackspace'
date: '2025-03-29T13:37:00+01:00' # date of the event
publishDate: '2025-03-09T00:00:00+01:00' # when to publish
draft: false
location: Z9
authors:
- dl8xas
---
Am Samstag, den 29. März wird der CCCHH [im Rahmen des Tags des offenen Hackspaces](https://events.ccc.de/2025/02/28/tag-des-offenen-hackspace-2025/) einen Tag der offenen Tür veranstalten. Wir begrüßen alle Interessierten, alle Neulinge und alle alten Hasen, die diese in Empfang nehmen möchten. Es gibt kurze Präsentationen, einen offenen Gesprächsteil und viel Vintage Computing. <!--more-->
Was für Projekte und Gruppen gibt es im CCCHH? Muss ich IT-Profi sein, um bei euch mitzumachen, oder finde ich auch als fachfremde Person einen Platz? Macht ihr eigentlich nur Computer oder engagiert ihr euch auch sozial und politisch? Wie sieht es mit Inklusion und Barrierefreiheit aus? Wie organisieren sich FLINTA\*-Personen im CCC-Umfeld? Wie kann ich in den Club einsteigen und wie finde ich ein Projekt, bei dem ich mich einbringen kann? Wen kann ich ansprechen, wenn ich über ein bestimmtes Thema etwas lernen möchte? Warum habt ihr eigentlich alle Katzenohren auf?
Diese und weitere Fragen beantworten wir euch in [unseren Vereinsräumen](https://hamburg.ccc.de/#kontakt) in der Viktoria-Kaserne.
## Ablauf und Programm
- 13:37: Ab hier rechnen wir mit eurem Erscheinen, aber wir werden natürlich während der gesamten Zeitdauer der Veranstaltung unsere Tür für Besuchende öffnen. Ihr dürft auch später kommen.
- 16:00 bis 17:00: Wir stellen unseren Club sowie verschiedene Gruppen und Projekte vor, um euch zu inspirieren und zum Mitmachen einzuladen. Wir sprechen über [regelmäßige Termine](https://wiki.hamburg.ccc.de/club:terminserien:start) und feste Gruppen in unserem Hackspace, über [Geekfem](https://geekfem.net/) und die [Haecksen](https://www.haecksen.org/), über [CTF](https://wiki.hamburg.ccc.de/club:ctf:start), über die [Cryptoparty](https://cryptoparty-hamburg.de/) sowie über andere Projekte, die im Chaos-Umfeld passieren.
- 17:00 bis 18:00: In einer lockeren Runde beantworten wir eure Fragen zu den vorgestellten Projekten oder zum Club allgemein.
- Im weiteren Verlauf des Abends Übergang zu Socializing.
Hinweis 1, Maskenpflicht: Rücksichtnahme und Inklusion sind feste Bestandteile der Chaos-Kultur. Um gesundheitlich vorbelastete Personen zu schützen, gilt in unseren Clubräumen eine sogenannte On-Demand-Maskenpflicht: Sobald eine Person dies wünscht, müssen alle Anwesenden eine FFP2-Maske aufsetzen. Da an der Organisation und Durchführung dieser Veranstaltung mehrere Personen beteiligt sind, die auf diesen Schutz angewiesen sind, ist davon auszugehen, dass eine Maskenpflicht gelten wird. Selbstverständlich stehen in den Clubräumen Masken zur Verfügung für alle, die keine eigene dabei haben.
Hinweis 2, Einlass: Da unsere Klingel vor einiger Zeit entwendet wurde (Beweggründe dafür sind unklar), ist es derzeit so, dass Gäste im Club anrufen müssen (siehe [Kontakt](https://hamburg.ccc.de/#kontakt)), um am Eingang abgeholt zu werden. Hierfür bitte an der Türsprechstelle due Rufnummer 1337 wählen oder uns vom Mobilfunkgerät aus anrufen. Ein Schild mit der Club-Telefonnummer hängt an der Stelle, wo sich einstmals unsere Klingel befand, aber für den Fall, dass ihr den richtigen Eingang nicht findet oder sofern ihr anderweitig Hilfe braucht (Rollstuhl, Sehbehinderung, falschen Eingang genommen etc.) empfehlen wir euch, die Nummer schon im Vorfeld zu notieren. Alternativ ist es möglich, in unserem [Matrix-Channel](https://matrix.to/#/#ccchh:hamburg.ccc.de) zu schreiben.
Hinweis 3, all creatures welcome: The presentation part will be in German but we do speak English, and are more than happy to introduce you to our hackspace individually.

View file

@ -1,16 +0,0 @@
---
categories: event
title: 'Netzpolitischer Abend @ EH22'
date: '2025-04-19T20:00:00+01:00' # date of the event
publishDate: '2025-03-18T00:00:00+01:00' # when to publish
draft: false
location: "Kampnagel Plaza"
authors:
- n0th1ng
---
Da unser normaler Termin mit unserer kleinen und besinnlichen Osterfeier auf Kampnagel kollidiert, verlegen wir unseren Netzpolitischen Abend einfach dort hin, und einen Tag weiter.
Als Ausgleich dafür werden wir hoffentlich Gäste aus anderen Hackspaces zum austauschen haben.
Wir treffen uns auf dem [Plaza](https://www.openstreetmap.org/#map=/53.583419/10.021293) vor Kampnagel, dort kommt man auch ohne Easterhegg Ticket hin, und je nach Wetter und Crowd setzen wir uns dort hin, oder eventuell ins Peacetanbul Lokal was direkt am Plaza liegt.

View file

@ -1,40 +0,0 @@
---
authors:
- kantorkel
categories: article
draft: false
lastmod: '2025-05-26T22:04:00+02:00'
publishDate: '2025-05-26T22:04:00+02:00'
slug: die-gdp-fordert
tags:
- biometrie
- "überwachung"
title: Die GdP fordert
---
# Die GdP fordert
Wie erwartet [meldet sich die Gewerkschaft der Polizei (GdP) nach dem schlimmen Messerangriff in Hamburg](https://www.mopo.de/hamburg/polizei/mehr-ueberwachung-gewerkschaft-fordert-konsequenzen-nach-messerangriff/), um einmal mehr einen massiven Grundrechtseingriff zu fordern.
Bereits in der Vergangenheit forderte die GdP u.a. Vorratsdatenspeicherung, Videoüberwachung, noch mehr Videoüberwachung, Bodycams, verdachtsunabhängige Kontrollen und Gesichtserkennung. Zu viele dieser Forderungen wurden erfüllt.
Doch offenbar ließen sich soziale Probleme bisher nicht mit dem Einsatz von immer mehr Überwachung lösen. Dennoch nutzt die Gewerkschaft auch den jüngsten Angriff, um noch mehr Überwachung zu fordern in der bizarren Hoffnung, dass die sozialen Probleme mit dem Einsatz von nur noch etwas mehr Technik gelöst werden.
Die aktuelle Forderung nach dem Einsatz von Verhaltenserkennung suggeriert, dass eine KI Straftaten verhindern könnte, noch bevor sie passieren. Sie erweckt den Eindruck technologischer Objektivität, obwohl in Wahrheit [fehlerhafte, intransparente und diskriminierende Systeme eingesetzt werden.](https://marx.wtf/2024/12/24/der-hansaplatz-versuch-war-kein-erfolg/) Diese Systeme schaffen kein Mehr an Sicherheit, sondern nur eine Kontrolle aller. Die GdP verkauft wieder ein trügerisches Sicherheitsgefühl, liefert aber nur Totalüberwachung.
Den Überwachungsforderungen der GdP sollte nicht unkommentiert Raum gegeben werden.
- [GdP fordert Anwesenheitskontrolle](https://www.bz-berlin.de/berlin/gdp-fluechtlingsheim)
- [GdP fordert Bodycams](https://www.radiohamburg.de/aktuelles/hamburg/Erneute-Forderung-nach-Bodycams-id550759.html)
- [GdP fordert Datenanalyse](https://www.bundestag.de/resource/blob/1007600/57600c9bec2d7ce7bc67b48e0f025128/Protokoll-22-04-2024-14-00-Uhr.pdf)
- [GdP fordert Drohnenüberwachung](https://www.zeit.de/news/2025-05/05/gdp-bundespolizei-fordert-verdopplung-des-personals)
- [GdP fordert Gesichtserkennung](https://dp-digital.gdp.de/collection/de.gdp.dp.issue042024_375/article/de.gdp.dp.issue202404.bund101540)
- [GdP fordert Handy-Ortung](https://www.tagesspiegel.de/potsdam/brandenburg/innenminister-peilt-die-handy-ortung-an-1343050.html)
- [GdP fordert Kennzeichenerkennung](https://www.zeit.de/news/2025-05/05/gdp-bundespolizei-fordert-verdopplung-des-personals)
- [GdP fordert Register psychisch Kranker](https://www.morgenpost.de/berlin/article408168918/mehr-als-16000-ausreisesfluechtende-in-berlin.html)
- [GdP fordert TKÜ](https://www.bundestag.de/resource/blob/993726/acffbb8b4ac7fd90c15a41a0b473bfa7/Stellungnahme-Poitz_GdP.pdf)
- [GdP fordert Trageverbot für Messer](https://www.rbb24.de/panorama/beitrag/2025/02/messerverbotszonen-berlin-messerangriff-polizei-kreuzberg-wedding.html)
- [GdP fordert verdachtsunabhängige Kontrollen](https://www.zeit.de/news/2024-12/27/gdp-chef-warnt-messer-kriminalitaet-zum-problem-geworden)
- [GdP fordert Verhaltenserkennung](https://www.rnd.de/politik/ki-kameras-am-bahnhof-polizeigewerkschafter-fordert-einsatz-EPKDITDB6VL5NBXCUJZBFLFPPM.html)
- [GdP fordert Videoüberwachung](https://www.zeit.de/news/2024-12/21/gdp-chef-fordert-mehr-polizeipraesenz-und-videoueberwachung)
- [GdP fordert Vorratsdatenspeicherung](https://www.br.de/nachrichten/deutschland-welt/polizeigewerkschaft-fordert-mehr-befugnisse-zur-terrorabwehr,URu5h7G)

View file

@ -1,47 +0,0 @@
---
authors:
- lilly
- skye
categories: article
lastmod: '2025-07-30T19:20:00+02:00'
publishDate: '2025-07-30T19:20:00+02:00'
slug: transkartei
tags:
- geekfem
- "überwachung"
title: Stoppt die Transkartei
---
## Einordnung
Seit Anfang Juli ist bekannt, dass das Bundesinnenministerium einen Referentenentwurf mit dem sperrigen Titel “Verordnung zur Umsetzung des Gesetzes über die Selbstbestimmung in Bezug auf den Geschlechtseintrag im Meldewesen” herausgegeben hat ([hier das PDF](./referentenentwurf-verordnung-meldedaten-sbgg.pdf)).
Der CCC Hansestadt Hamburg e. V. bezieht in einem offenen Brief Stellung zu dem Vorschlag und fordert den Ersten Bürgermeister und die Zweite Bürgermeisterin Hamburgs, die auch die Hamburger Landesregierung im Bundesrat vertreten, dazu auf, diesen Referentenentwurf abzulehnen, falls es zu einer Abstimmung im Bundesrat kommt.
<!--more-->
Eine Kartei von Personen, die das Selbstbestimmungsgesetz in Anspruch genommen haben, stellt trans\* Personen unter Generalverdacht und setzt sie einer hohen Gefahr von Diskriminierung oder gar Gewalt aus. Sensible Daten wie den alten Namen und Geschlechtseintrag am Ende für praktisch alle Behörden abrufbar zu machen, verstößt gegen jedes Verständnis von Datenschutz.
Als Verein, dessen ehrenamtliche Arbeit zu großen Teilen von trans\* Personen getragen wird, sieht der CCCHH sich in der Verantwortung, sich öffentlich zu diesem Thema zu äußern. Datenschutz und staatliche Überwachung gehören zu unseren Kernthemen, und mit dem vorliegenden Referentenentwurf werden auch unsere Clubmitglieder allein wegen ihrer Geschlechtsidentität zur Zielscheibe rechtspopulistischer Überwachungspolitik.
## Der Brief mit dem Titel: *Verhindern Sie jetzt die Transvestiten-Kartei durch den Referentenentwurf zur Umsetzung des SBGG im Meldewesen*
Sehr geehrte Frau Fegebank, sehr geehrter Herr Dr. Tschentscher,
wir schreiben Ihnen aufgrund des Referentenentwurfs aus dem Bundesinnenministerium, der darauf abzielt, alle Personen, die ihren Namen oder Geschlechtseintrag nach dem Selbstbestimmungsgesetz geändert haben, in einer neuen Kartei zu registrieren.
Der CCC Hansestadt Hamburg e. V. ist ein Verein aus der demokratischen Mitte Hamburgs. Wir engagieren uns in den Bereichen Datenschutz, Datensicherheit und Technik, stellen der Zivilgesellschaft unser Fachwissen zur Verfügung und bieten Orte des Austauschs. Auch anderen Gruppen und Vereinen stehen die Mitglieder unseres Clubs regelmäßig mit Rat und Tat zur Seite. Unser offener und diverser Verein ist auch ein Zuhause für viele queere und trans\* Personen, die von dem Entwurf des Bundesinnenministeriums unmittelbar betroffen sind.
Als Spezialist\*innen für Datenschutz arbeiten wir stets mit dem etablierten Grundsatz, dass die Anzahl der erfassten Daten minimiert und der Zugang zu vorhandenen Daten effektiv abgesichert werden muss. Der Vorschlag des Bundesinnenministeriums, den zentralen Meldedatensatz um Punkte zu ergänzen, welche zweifelsfreien Aufschluss über die Trans\*-Identität von Bürgerinnen und Bürgern geben, schockiert uns deshalb gewaltig.
Sollte der Referentenentwurf unverändert in Kraft treten, wären diese Informationen praktisch sämtlichen Mitarbeitenden aller Behörden mit Zugriff auf das Melderegister zugänglich, denn in der Praxis findet keine wirksame Zugriffsbeschränkung oder -protokollierung statt. Es handelt sich hierbei jedoch um hochgradig sensible Daten, da die betroffenen Personen vermehrt von Diskriminierung und Hasskriminalität bedroht sind.
Deutschland hat mit dem Selbstbestimmungsgesetz 2024 einen deutlichen Schritt in Richtung Gleichberechtigung und Selbstbestimmung für transgeschlechtlich lebende Menschen gemacht. Aus gutem Grund enthält dieses Gesetz auch ein Offenbarungsverbot für die ursprünglichen, falschen Daten, die besonders geschützt werden müssen.
Vorstöße wie der vorliegende Referentenentwurf zielen auf einen Rückschritt zu einer verschlossenen und diskriminierenden Gesellschaft, in der trans\* Menschen ausgegrenzt und mit Misstrauen behandelt werden obwohl sie seit Jahrzehnten nichts anderes fordern, als in Frieden ein selbstbestimmtes Leben führen zu können.
Wir setzen unser Vertrauen in Sie als Vertreter\*innen der zwei größten sozialen Parteien Deutschlands, unsere Grundrechte zu schützen. Besonders in Bezug auf die aktuellen politischen Entwicklungen kann nicht ausgeschlossen werden, dass ein einmal angelegter Datensatz in Zukunft auch auf andere Art und Weise verwendet oder missbraucht wird. Wenn trans\* Personen in einer gesonderten Kartei registriert werden, lässt sich diese Liste nur allzu leicht auf dieselbe Art und Weise verwenden wie einstmals die sogenannten “Rosa Listen”, anhand derer homosexuelle Männer in Deutschland verfolgt wurden.
Daher verlassen wir uns darauf, dass Sie die berühmte Hamburgische Weltoffenheit auch auf Bundesebene vertreten und diesen Entwurf ablehnen werden, falls es zu einer Abstimmung im Bundesrat kommt.
Beste Grüße,
CCC Hansestadt Hamburg e.V.

View file

@ -1,16 +0,0 @@
---
categories: event
title: 'How 2 Congress / -Orga'
date: '2025-09-23T19:42:00+01:00' # date of the event
publishDate: '2025-03-18T00:00:00+01:00' # when to publish
draft: false
location: Z9
authors:
- n0th1ng
---
Kleine Einführung für alle die noch nie beim jährlichen Chaos Communication Congress hier in Hamburg waren, mit Tipps & Tricks die man vielleicht gerne vorher gewusst hätte.
Anschließend für alle die bereits Congress und Engelerfahrung haben ein deep-dive hinter die Kulissen wie diese Veranstaltung organisiert wird, welche Teams es eigentlich gibt, was diese so machen, und wie man vom Engel zu einem produktiven Mitglied der Event Orga bzw. eines festen Teams wird.
Wir treffen uns vor Ort in den Räumen, werden aber vermutlich auch hybride Teilnahme über https://jitsi.hamburg.ccc.de/how-2-congress ermöglichen.

View file

@ -1,27 +0,0 @@
---
categories: event
title: 'Start des Jugend hackt Lab Hamburg'
date: '2025-09-27T14:00:00+02:00'
publishDate: '2025-09-08T14:00:00+02:00'
draft: false
location: Z9
authors:
- paz
- jtbx
# tags:
# header:
# caption: A caption für the picture will be used as Alt-Text
# image: Path to the image
---
Der [Alpakas coden alles bunter e.V.](https://alpacabunt.de/) gründet ein [Jugend hackt Lab](https://jugendhackt.org/labs/) und lädt am 27.09.2025 von 14:00 bis 17:00 zum ersten Treffen in den Räumen des CCC Hamburg.
Alle technikinteressierten Jugendlichen zwischen 12 und 18 Jahren sind herzlich eingeladen vor dem [Jugend hackt Event im Oktober](https://jugendhackt.org/events/hamburg/) mal vorbeizuschauen.
Eure Eltern sind nicht erwünscht und auch sonst werden bis auf die Mentor\*innen keine Erwachsenen anwesend sein.
Euch erwarten unter anderem Lötbausätze, 3D-Druck und Programmieren, aber bringt auch gerne eigene Projekte und euren Laptop mit.
Das Lab wird (wie zuvor der Junghacker*innen-Tag) jeden letzten Samstag im Monat stattfinden (außer vmtl. im Dezember).
Weitere Informationen dazu sind [im Wiki](https://wiki.hamburg.ccc.de/club:terminserien:jugendhacktlab) zu finden.
Wichtiger Hinweis für alle volljährigen Clubmitglieder: Am Nachmittag stehen die Räume exclusiv dem Jugend hackt Lab zur Verfügung.
Ab 17:00 öffen sich die Türen dann wieder für den regulären Betrieb wobei die Lab-Teilnehmer\*innen gerne noch weiter bleiben dürfen.

View file

@ -7,4 +7,4 @@ headless: true
{{< calendar-table >}}
Im Wiki findest du eine [Übersicht über regelmäßige Termine](https://wiki.hamburg.ccc.de/club:terminserien:start) oder du abonnierst den Kalender als [iCal-Feed](webcal://cloud.hamburg.ccc.de/remote.php/dav/public-calendars/QJAdExziSnNJEz5g/?export).
Im Wiki findest du eine [Übersicht über regelmäßige Termine](https://wiki.ccchh.net/club:terminserien:start) oder du abonnierst den Kalender als [iCal-Feed](webcal://cloud.hamburg.ccc.de/remote.php/dav/public-calendars/QJAdExziSnNJEz5g/?export).

View file

@ -5,7 +5,7 @@ draft: false
headless: true
---
Wenn du uns kennenlernen möchtest, komm doch einfach mal zum [Open Chaos](https://wiki.hamburg.ccc.de/club:terminserien:openchaos) vorbei.
Wenn du uns kennenlernen möchtest, komm doch einfach mal zum [Open Chaos](https://wiki.ccchh.net/club:terminserien:openchaos) vorbei.
Gelegentlich bieten wir außerdem Vorträge zu spezifischen Themen an, die hier im [Blog]({{< ref "/blog" >}}) und im Kalender veröffentlichen.
{{< img-resize "2-visit/Z9-hauptraum-202301-leinwand.jpeg" "300x" "float-right" >}}

View file

@ -4,7 +4,7 @@ draft: false
headless: true
type: card
image: ffhhlogo_neu.png
link: https://wiki.hamburg.ccc.de/club:freifunk:start
link: https://wiki.ccchh.net/club:freifunk:start
---
Die Vision von Freifunk ist die Verbreitung freier Netzwerke, die Demokratisierung der Kommunikationsmedien und die Förderung lokaler Sozialstrukturen.

View file

@ -4,7 +4,7 @@ draft: false
headless: true
type: card
image: haecksen-logo-gruenblau.png
link: https://wiki.hamburg.ccc.de/club:geekfem:start
link: https://wiki.ccchh.net/club:geekfem:start
---
Geekfem ist ein Raum für technik-interessierte Frauen* und veranstaltet regelmäßig Termine zu verschiedenen Themen oder einfach nur zum schnacken.

View file

@ -4,7 +4,7 @@ draft: false
headless: true
type: card
image: c3h2-logo.png
link: https://wiki.hamburg.ccc.de/club:ctf:start
link: https://wiki.ccchh.net/club:ctf:start
---
Die CTF-Gruppe "Cyclopropenylidene" beschäftigt sich spielerisch mit IT-Security.

View file

@ -4,7 +4,7 @@ draft: false
headless: true
type: card
image: cms-logo-blau.png
link: https://wiki.hamburg.ccc.de/club:cms:start
link: https://wiki.ccchh.net/club:cms:start
---
CMS ist ein regionales Bildungsprojekt des CCCHH an Schulen in Hamburg und dem Umland.
CMS ist ein regionales Bildungsprojekt des CCCHH an Schulen in Hamburg und dem Umland.

View file

@ -4,7 +4,7 @@ draft: false
headless: true
type: card
image: cryptoparty-300x100.png
link: https://wiki.hamburg.ccc.de/club:cryptogruppe:start
link: https://wiki.ccchh.net/club:cryptogruppe:start
---
Die Cryptogruppe befasst sich mit digitaler Selbstverteidigung und veranstaltet u.a. Cryptoparties in Hamburg.

View file

@ -4,7 +4,7 @@ draft: false
headless: true
type: card
# image: TODO
link: https://wiki.hamburg.ccc.de/club:ueberwachungsstammtisch:start
link: https://wiki.ccchh.net/club:ueberwachungsstammtisch:start
---
Menschen aus Hamburg und der Welt sprechen über Überwachung und was wir dagegen tun können.
Menschen aus Hamburg und der Welt sprechen über Überwachung und was wir dagegen tun können.

View file

@ -5,4 +5,4 @@ headless: true
type: card
---
Falls du den CCC Hansestadt Hamburg e.V. unterstützen willst, lohnt es sich eine [Fördermitgliedschaft](https://wiki.hamburg.ccc.de/verein:offizielles:foemi-formular) abzuschließen.
Falls du den Chaos Computer Club Hansestadt Hamburg e.V. unterstützen willst, lohnt es sich eine [Fördermitgliedschaft](https://wiki.ccchh.net/verein:offizielles:foemi-formular) abzuschließen.

View file

@ -5,6 +5,5 @@ headless: true
type: card
---
Der Chaos Computer Club e.V. wurde im Jahr 1984 in Hamburg gegründet.
Seitdem ist der Verein gewachsen und ragt nun über Bundesdeutsches Gebiet bis nach Österreich und in die Schweiz hinaus.
Mehr dazu findest du im [Wiki](https://wiki.hamburg.ccc.de/club:geschichte).
Der Chaos Computer Club e.V. wurde im Jahr 1984 in Hamburg gegründet. Seitdem ist der Verein gewachsen und ragt nun über Bundesdeutsches Gebiet bis nach Österreich und in die Schweiz hinaus.
Mehr dazu findest du im [Wiki](https://wiki.ccchh.net/club:geschichte).

View file

@ -10,22 +10,21 @@ Unsere Räume befinden sich im Gebäude der [FUX eG](https://fux-eg.org):
**Zeiseweg 9**
22765 Hamburg-Altona.
Da die Zwischentüren im Haus verschlossen sind, muss euch immer eine Person am Eingang abholen.
An allen Eingängen gibt es jeweils eine Türsprechstelle.
Wählt einfach die 1337, und ihr werdet mit dem Club verbunden.
Wenn das aus irgendeinem Grund nicht funktioniert, wählt einfach die [+49 40 23830150](tel:+494023830150) oder [+49 221 596191008](+49221596191008).
Da die Zwischentüren im Haus verschlossen sind, muss euch immer eine Person am Eingang anholen.
Am östlichen Eingang (siehe Markierung auf der Karte) ist dafür eine Klingel.
(Die Klingel ist aktuell verschwunden, bitte ruft einfach [+49 221 59619 1008](tel:+49221596191008) an.)
Parkplätze sind in der Umgebung rar und es muss ein Parkschein gelöst werden, wir sind aber gut per ÖPNV erreichbar.
Die S-Bahn-Station **Holstenstraße** ist ca. 700&nbsp;m entfernt, die Bushaltestellen **Max-Brauer-Allee (Mitte)** oder Gerichtstraße ca. 400&nbsp;m.
{{< clearfix >}}
#### Wichtige Informationen für Mobilitätseingeschränkte
Unsere Räume befinden sich im ersten Stock und sind über den zentralen Aufzug erreichbar.
Der Aufzug kann entweder aus dem Hof oder über das Erdgeschoss erreicht werden.
Um ins Erdgeschoss zu kommen, kann die Hebevorrichtung im Kubus benutzt werden.
Für die Hoftür des Fahrstuhls ist ein Schlüssel notwendig, für die Hebevorrichtung eine Schlüsselkarte.
Unsere Räume befinden sich im ersten Stock und sind prinzipiell über den zentralen Aufzug erreichbar.
Der Aufzug ist vom Hof erreichbar, kann aber von Außen nur mit einem Schlüssel geöffnet werden.
Die Hebevorrichtung am Haupteingang braucht leider auch eine Schlüsselkarte, die wir aber haben.
Um sicherzugehen, das die Technik einwandfrei funktioniert, bevor ihr euch auf den Weg macht, meldet euch im Matrix oder telefonisch unter [+49 40 23830150](tel:+494023830150), dann können wir sichergehen, das euch jemand abholt.
So oder so ist es also hilfreich, wenn ihr euch telefonisch meldet ([+49 221 59619 1008](tel:+49221596191008)), damit euch jemand abholen kann.
Am Besten meldet ihr euch auch vorher, da der Aufzug gelegentlich defekt ist.
#### Weitere Kontaktdaten

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

View file

@ -16,6 +16,9 @@ resources:
- src: fiff.png
params:
url: https://www.fiff.de/
- src: hbgu.png
params:
url: https://www.stop-watching-hamburg.de/
- src: frappant.png
params:
url: https://frappant.org/

View file

@ -9,8 +9,7 @@ weight: 10
Verantwortlich für diese Seiten gemäß §10 MDStV ist der CCC Hansestadt Hamburg e.V. mit Sitz in Hamburg.
Der CCC Hansestadt Hamburg e.V. wurde im Vereinsregister vom Registergericht des Amtsgericht Hamburg unter der VR-Nr.&nbsp;20300 eingetragen.
Der CCC Hansestadt Hamburg e.V. wurde im Vereinsregister vom Registergericht des Amtsgericht Hamburg unter der VR-Nr. 20300 eingetragen.
## Kontakt
@ -28,8 +27,6 @@ Viktoria-Kaserne, mittlerer Osten, 1. OG, Raum 2
- IBAN: DE25 8306 5408 0005 2955 05
- BIC: GENODEF1SLR
Der CCC Hansestadt Hamburg e.V. ist nicht gemeinnützig im Sinne der Abgabenordnung - Geldspenden helfen uns, sind aber steuerlich nicht abzugsfähig.
## Interwebs & E-Mails
### CCC e.V.

View file

@ -18,7 +18,7 @@ In jedem Fall haben von unserer Seite nur berechtigte Personen Zugang zu euren p
### Verantwortliche
Der Verantwortliche im Sinne der Datenschutzgrundverordnung (DSGVO) und anderer nationaler Datenschutzgesetze der Mitgliedsstaaten sowie sonstiger datenschutzrechtlicher Bestimmungen ist der CCC Hansestadt Hamburg e.V. mit Sitz in Hamburg.
Der CCC Hansestadt Hamburg e.V. wurde im Vereinsregister vom Registergericht des Amtsgericht Hamburg unter der VR-Nr.&nbsp;20300 eingetragen.
Der CCC Hansestadt Hamburg e.V.wurde im Vereinsregister vom Registergericht des Amtsgericht Hamburg unter der VR-Nr. 20300 eingetragen.
### Kontaktdaten der Datenschutzstelle des CCC Hansestadt Hamburg e.V.
@ -31,8 +31,7 @@ Viktoria-Kaserne, mittlerer Osten, 1. OG, Raum 2
## Datenschutzerklärung für hamburg.ccc.de
Datenschutz ist uns wichtig, weshalb wir so wenig Daten wie möglich erheben.
Dies nennen wir Datensparsamkeit, je weniger Daten gesammelt werden, desto weniger Daten gilt es zu schützen.
Datenschutz ist uns wichtig, weshalb wir so wenig Daten wie möglich erheben. Dies nennen wir Datensparsamkeit, je weniger Daten gesammelt werden, desto weniger Daten gilt es zu schützen.
### Kategorien betroffener Personen
Da wir keine Daten erheben, gibt es auch keine betroffenen Personen.
@ -44,8 +43,7 @@ Aus Datensparsamkeit erheben wir keine Daten und können nichtvorhandene Daten a
Da wir keine Daten von Dir sammeln, können wir auch keine weitergeben.
### Eingebettete Inhalte von anderen Websites
Beiträge auf dieser Website können eingebettete Inhalte beinhalten (z. B. Videos, Bilder, Beiträge etc.).
Eingebettete Inhalte von anderen Websites verhalten sich exakt so, als ob der Besucher die andere Website besucht hätte.
Beiträge auf dieser Website können eingebettete Inhalte beinhalten (z. B. Videos, Bilder, Beiträge etc.). Eingebettete Inhalte von anderen Websites verhalten sich exakt so, als ob der Besucher die andere Website besucht hätte.
Diese Websites können Daten über Dich sammeln, Cookies benutzen, zusätzliche Tracking-Dienste von Dritten einbetten und deine Interaktion mit diesem eingebetteten Inhalt aufzeichnen, inklusive deiner Interaktion mit dem eingebetteten Inhalt, falls Du ein Konto hast und auf dieser Website angemeldet bist.

View file

@ -7,10 +7,10 @@ OUTFILE=data/calendar.json
# See here for uname -s outputs: https://en.wikipedia.org/wiki/Uname#Examples
OS_TYPE=$(uname -s)
if [ "$OS_TYPE" = "Linux" ]; then
START_TIME=$(date --date="-6 hours" +%s) # now - 6 hours
START_TIME=$(date --date="-1 day" +%s) # yesterday
END_TIME=$(date --date="+1 month" +%s) # now + 1 month
elif [ "$OS_TYPE" = "Darwin" ] || [ "$OS_TYPE" = "FreeBSD" ]; then
START_TIME=$(date -v-6H +%s) # now - 6 hours
START_TIME=$(date -v-1d +%s) # yesterday
END_TIME=$(date -v+1m +%s) # now + 1 month
else
echo "ERROR: Unsupported OS type"

View file

@ -4,15 +4,11 @@ defaultContentLanguage = 'de'
timeZone = 'Europe/Berlin'
title = 'CCC Hansestadt Hamburg e.V.'
theme = 'ccchh'
capitalizeListTitles = false
pluralizeListTitles = false
cleanDestinationDir = true
enableGitInfo = true
# paginate = 10
[markup.goldmark.renderer]
unsafe = true
[outputs]
home = ['html']
@ -52,19 +48,19 @@ enableGitInfo = true
[[menu.footer]]
name = "Satzung"
weight = 90
url = "https://wiki.hamburg.ccc.de/verein:offizielles:satzung"
url = "https://wiki.ccchh.net/verein:offizielles:satzung"
[menu.footer.params]
rel = "external"
[[menu.footer]]
name = "Hausordnung"
weight = 92
url = "https://wiki.hamburg.ccc.de/verein:offizielles:hausordnung"
url = "https://wiki.ccchh.net/verein:offizielles:hausordnung"
[menu.footer.params]
rel = "external"
[[menu.footer]]
name = "Mitglied werden"
weight = 94
url = "https://wiki.hamburg.ccc.de/verein:offizielles:foemi-formular"
url = "https://wiki.ccchh.net/verein:offizielles:foemi-formular"
[menu.footer.params]
rel = "external"

View file

@ -1,6 +0,0 @@
{
"$schema": "https://docs.renovatebot.com/renovate-schema.json",
"extends": [
"config:recommended"
]
}

View file

@ -2,7 +2,7 @@
categories: article
title: '{{ replace .File.ContentBaseName `-` ` ` | title }}'
date: '{{ .Date }}'
draft: false
draft: true
authors:
- your name
# tags:

View file

@ -1,5 +1,5 @@
---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: false
draft: true
---

View file

@ -3,7 +3,7 @@ categories: event
title: '{{ replace .File.ContentBaseName `-` ` ` | title }}'
date: '{{ .Date }}' # date of the event
publishDate: '{{ .Date }}' # when to publish
draft: false
draft: true
location: Z9
authors:
- your name

View file

@ -1,33 +0,0 @@
"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"));
}
});
});

View file

@ -76,5 +76,5 @@ function update() {
window.onload = function () {
update()
window.setInterval(update, interval_ms)
window.setTimeout(update, interval_ms)
}

View file

@ -1,21 +0,0 @@
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.

View file

@ -1,4 +0,0 @@
// Output color in RGB format
@function to-rgb($color) {
@return unquote("rgb(#{red($color)}, #{green($color)}, #{blue($color)})");
}

View file

@ -1,69 +0,0 @@
// 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;

View file

@ -1,116 +0,0 @@
/**
* 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;
}
}
}
}

View file

@ -1,36 +0,0 @@
/**
* 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);
}
}

View file

@ -1,214 +0,0 @@
/**
* 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);
}

View file

@ -1,168 +0,0 @@
/**
* 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;
}
}
}

View file

@ -1,141 +0,0 @@
/**
* 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: "\\";
}
}
}
}
}
}

View file

@ -1,89 +0,0 @@
/**
* 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;
}
}

View file

@ -1,183 +0,0 @@
/**
* 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;
}

View file

@ -1,91 +0,0 @@
/**
* 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;
}

View file

@ -1,48 +0,0 @@
/**
* 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;
}

View file

@ -1,286 +0,0 @@
/**
* 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;
}
}
}
}
}

View file

@ -1,138 +0,0 @@
/**
* 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);
}
}

View file

@ -1,352 +0,0 @@
/**
* 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);
}
}

View file

@ -1,33 +0,0 @@
/**
* 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;
}

View file

@ -1,50 +0,0 @@
/**
* 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);
}
}
}

View file

@ -1,264 +0,0 @@
/**
* 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);
}

View file

@ -1,42 +0,0 @@
@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");
}
}
}
}

View file

@ -1,48 +0,0 @@
/**
* 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
}

View file

@ -1,24 +0,0 @@
@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
}
}
}

View file

@ -1,16 +0,0 @@
/**
* 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);
}
}

View file

@ -1,8 +0,0 @@
/**
* Section
* Responsive spacings for section
*/
section {
margin-bottom: var(--block-spacing-vertical);
}

View file

@ -1,70 +0,0 @@
/**
* 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;
}
}
}

View file

@ -1,13 +0,0 @@
// Config
// --------------------
// Enable <header>, <main>, <footer> inside $semantic-root-element as containers
$enable-semantic-container: true;
// Enable .classes
$enable-classes: false;
// Pico Lib
// --------------------
@import "pico";

View file

@ -1,16 +0,0 @@
// 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";

View file

@ -1,43 +0,0 @@
/*!
* 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

View file

@ -1,47 +0,0 @@
/*!
* 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

View file

@ -1,37 +0,0 @@
/**
* 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);
}

View file

@ -1,65 +0,0 @@
// 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;

View file

@ -1,159 +0,0 @@
@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;
}

View file

@ -1,159 +0,0 @@
@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;
}

View file

@ -1,247 +0,0 @@
// 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;
}

View file

@ -1,52 +0,0 @@
/**
* 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;
}

View file

@ -1,58 +0,0 @@
/**
* 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);
}
}

View file

@ -1,27 +0,0 @@
@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
}
}
}

View file

@ -1,278 +0,0 @@
/**
* 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;
}
}
}
}

View file

@ -128,7 +128,6 @@ body>main {
line-height: 1.0em;
max-width: 8em;
padding: 5px;
white-space: nowrap;
color: $roomstate_color_unknown;
@ -145,7 +144,7 @@ body>main {
}
}
// CCCHH icon & hamburger menu in header
// CCCHH Icon in Menu
@media only screen and (prefers-color-scheme: light) {
.invert-on-light {
filter: invert(1);
@ -164,10 +163,6 @@ body>main {
margin-bottom: 1rem;
}
h1, h2, h3, h4, h5, h6 {
margin: 0.5rem 1rem;
}
p {
margin: 0 1rem;
}
@ -258,167 +253,6 @@ 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);
}
}
}
}

View file

@ -1,68 +0,0 @@
/*!
* Pico CSS v1.5.11 (https://picocss.com)
* Copyright 2019-2023 - Licensed under MIT
*/
// Config
@import "../pico-1.5.11/scss/variables";
// Theming
@import "../pico-1.5.11/scss/themes/default";
h1 {
--font-size: 2rem;
--typography-spacing-vertical: 1rem;
}
h2 {
--font-size: 1.75rem;
--typography-spacing-vertical: 0.875rem;
}
h3 {
--font-size: 1.5rem;
--typography-spacing-vertical: 0.75rem;
}
h4 {
--font-size: 1.25rem;
--typography-spacing-vertical: 0.625rem;
}
h5 {
--font-size: 1.125rem;
--typography-spacing-vertical: 0.5rem;
}
// Layout
@import "../pico-1.5.11/scss/layout/document"; // html
@import "../pico-1.5.11/scss/layout/sectioning"; // body, header, main, footer
@import "../pico-1.5.11/scss/layout/container"; // .container, .container-fluid
@import "../pico-1.5.11/scss/layout/section"; // section
@import "../pico-1.5.11/scss/layout/grid"; // .grid
@import "../pico-1.5.11/scss/layout/scroller"; // figure
// Content
@import "../pico-1.5.11/scss/content/typography"; // a, headings, p, ul, blockquote, ...
@import "../pico-1.5.11/scss/content/embedded"; // audio, canvas, iframe, img, svg, video
@import "../pico-1.5.11/scss/content/button"; // button, a[role=button], type=button, type=submit ...
@import "../pico-1.5.11/scss/content/form"; // input, select, textarea, label, fieldset, legend
@import "../pico-1.5.11/scss/content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch
@import "../pico-1.5.11/scss/content/form-alt-input-types"; // type=color, type=date, type=file, type=search, ...
@import "../pico-1.5.11/scss/content/table"; // table, tr, td, ...
@import "../pico-1.5.11/scss/content/code"; // pre, code, ...
@import "../pico-1.5.11/scss/content/miscs"; // hr, template, [hidden], dialog, canvas
// Components
@import "../pico-1.5.11/scss/components/accordion"; // details, summary
@import "../pico-1.5.11/scss/components/card"; // article
@import "../pico-1.5.11/scss/components/modal"; // dialog
@import "../pico-1.5.11/scss/components/nav"; // nav
@import "../pico-1.5.11/scss/components/progress"; // progress
@import "../pico-1.5.11/scss/components/dropdown"; // dropdown
// Utilities
// @import "../pico-1.5.11/scss/utilities/loading"; // aria-busy=true
// @import "../pico-1.5.11/scss/utilities/tooltip"; // data-tooltip
@import "../pico-1.5.11/scss/utilities/accessibility"; // -ms-touch-action, aria-*
@import "../pico-1.5.11/scss/utilities/reduce-motion"; // prefers-reduced-motion

View file

@ -61,11 +61,6 @@
<item>
<title>{{ .Title }}</title>
<link>{{ .Permalink }}</link>
<author>{{ with .GetTerms "authors" }}
{{- range $i, $pageAuthor := . }}
{{- if $i }}, {{ end }}{{ .Title }}
{{- end }}
{{- end }}</author>
<pubDate>{{ .PublishDate.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
{{- with $authorEmail }}<author>{{ . }}{{ with $authorName }} ({{ . }}){{ end }}</author>{{ end }}
<guid>{{ .Permalink }}</guid>

View file

@ -1,7 +1,11 @@
<article class="blog">
{{- partial "blog-header.html" (dict "headingLink" true "level" 2 "page" . ) }}
<section>
{{- if in .RawContent "<!--more--> " }}
{{ .Summary | safeHTML }}
{{- else }}
<p>{{ .Summary | safeHTML }}</p>
{{- end }}
{{- if .Truncated }}
<div class="morelink"><a href="{{ .RelPermalink }}">mehr...</a></div>
{{- end }}

View file

@ -8,11 +8,11 @@
</section>
<div class="meta">
{{- with .PublishDate }}
{{- with .Params.publishDate }}
<small class="li-comma">Veröffentlicht: {{ .Format "2006-01-02 15:04" }}</small>
{{- end }}
{{- if .Lastmod.After .PublishDate }}
{{- with .Lastmod }}
{{- if .Params.lastmod.After .Params.publishDate }}
{{- with .Params.lastmod }}
<small class="li-comma">letzte Änderung: {{ .Format "2006-01-02 15:04" }}</small>
{{- end }}
{{- end }}

View file

@ -5,8 +5,7 @@
</div>
{{- $events := where (.Site.GetPage "blog").Pages ".Params.categories" "event" }}
{{- $lookback := time.ParseDuration "-6h" }}
{{- $upcoming := where $events ".Params.date" "ge" (time.Now.Add $lookback) }}
{{- $upcoming := where $events ".Params.date" "ge" now }}
{{ if $upcoming }}
<div class="announcements">
<h2 id="neuigkeiten" class="on-hover-trg">Neuigkeiten <a href="#neuigkeiten" class="on-hover"><i class="fa-solid fa-link small"></i></a></h2>
@ -19,38 +18,11 @@
{{- else }}
<p>{{ .Summary | safeHTML }}</p>
{{- end }}
{{- if .Truncated }}
<p class="ellipsis"><a href="{{ .RelPermalink }}">mehr lesen</a></p>
{{- end }}
</div>
{{- end }}
</div>
{{- end }}
{{- $article := where (.Site.GetPage "blog").Pages ".Params.categories" "article" }}
{{- $articleDisplayTime := time.ParseDuration "-30h" }}
{{- $articleNew := where $article ".Params.publishDate" "ge" (time.Now.Add $articleDisplayTime) }}
{{ if $articleNew }}
<div class="announcements">
<h2 id="neuigkeiten" class="on-hover-trg">Neuigkeiten <a href="#neuigkeiten" class="on-hover"><i class="fa-solid fa-link small"></i></a></h2>
{{- range $articleNew.ByDate }}
<div class="announcement">
{{- partial "blog-header.html" (dict "headingLink" true "level" 4 "reduced" true "page" . ) }}
{{- if in .RawContent "<!--more-->" }}
{{ .Summary | safeHTML }}
{{- else }}
<p>{{ .Summary | safeHTML }}</p>
{{- end }}
{{- if .Truncated }}
<p class="ellipsis"><a href="{{ .RelPermalink }}">mehr lesen</a></p>
{{- end }}
</div>
{{- end }}
</div>
{{- end }}
{{- $home := .Site.GetPage "/home" }}
{{- $sections := where ($home.Resources.ByType "page") ".File.LogicalName" "index.md" }}
{{- range sort $sections "File.Path" "asc" }}
@ -67,11 +39,7 @@
{{- range $subsecs }}
{{- $link := .Params.link }}
<div class="wide">
{{- if eq $link nil }}
<h4>{{ .Title }}</h4>
{{- else }}
<h4><a href="{{ $link }}">{{ .Title }}</a></h4>
{{- end }}
{{- $img_path := printf "%s%s" $subsec_dir .Params.Image }}
{{- with $home.Resources.Get $img_path }}
<a href="{{ $link }}"><img class="groups-img" src="{{ .RelPermalink }}"></a>

View file

@ -1,25 +1,16 @@
{{- $cssOptionsMain := dict "transpiler" "libsass" "targetPath" "css/style.css" -}}
{{- $cssOptionsPico := dict "transpiler" "libsass" "targetPath" "css/pico.css" -}}
{{- $options := dict "transpiler" "libsass" "targetPath" "css/style.css" -}}
{{- $jsResources := resources.Match "js/*.js" }}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
{{- partial "robots.html" . -}}
<link rel="apple-touch-icon" sizes="180x180" href="{{ relURL "apple-touch-icon.png" }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ relURL "favicon-32x32.png" }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ relURL "favicon-16x16.png" }}">
<link rel="manifest" href="{{ relURL "site.webmanifest" }}">
<link rel="mask-icon" href="{{ relURL "safari-pinned-tab.svg" }}" color="#000000">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">
{{ with resources.Get "sass/pico-ccchh.scss" | toCSS $cssOptionsPico | minify | fingerprint -}}
{{- 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 -}}
<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="{{ relURL "thirdparty/fontawesome6/css/all.min.css" }}" crossorigin="anonymous">
<link rel="stylesheet" href="{{ .Site.BaseURL }}thirdparty/fontawesome6/css/all.min.css" crossorigin="anonymous">
{{- range $jsResources }}
{{- with . | js.Build | minify | fingerprint }}
@ -32,3 +23,4 @@
{{- end }}
<title>{{ .Title }}</title>
<!-- TODO: Favicon -->

View file

@ -1,21 +1,8 @@
<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&nbsp;)</span>
</div>
</div>
</header>

View file

@ -2,9 +2,10 @@
{{- $menuID := .menuID -}}
{{- $menuContent := index site.Menus .menuID -}}
<ul class="main-nav">
<ul>
{{- if compare.Eq $menuID "main" -}}
<li><a href="/{{ .Site.Home.RelPermalink }}" class="in-nav-home">Home</a></li>
{{- $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>
{{- end }}
{{- range $menuContent }}
<li>
@ -21,3 +22,10 @@
>{{ 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&nbsp;)</span>
</li>
</ul>
{{- end -}}

View file

@ -20,7 +20,7 @@
{{- if in $validFormats $format }}
{{- if gt $page.Paginator.TotalPages 1 }}
<ul class="pagination pagination-{{ $format }}">
{{- partial (printf "inline/pagination/%s.html" $format) $page }}
{{- partial (printf "partials/inline/pagination/%s" $format) $page }}
</ul>
{{- end }}
{{- else }}
@ -29,7 +29,7 @@
{{/* Format: default
{{/* --------------------------------------------------------------------- */}}
{{- define "_partials/inline/pagination/default.html" }}
{{- define "partials/inline/pagination/default" }}
{{- with .Paginator }}
{{- $currentPageNumber := .PageNumber }}
@ -100,7 +100,7 @@
{{/* Format: terse
{{/* --------------------------------------------------------------------- */}}
{{- define "_partials/inline/pagination/terse.html" }}
{{- define "partials/inline/pagination/terse" }}
{{- with .Paginator }}
{{- $currentPageNumber := .PageNumber }}

View file

@ -1,5 +1,5 @@
{{ $robotsGenerate := false -}}
{{- if and (isset $.Params "robots") (or (isset $.Params.robots "index") (isset $.Params.robots "follow")) }}
{{- if or (isset $.Params.robots "index") (isset $.Params.robots "follow") }}
{{- $robotsGenerate = true -}}
{{- else if or (isset $.Site.Params.robots "index") (isset $.Site.Params.robots "follow") -}}
{{- $robotsGenerate = true -}}

View file

@ -12,18 +12,9 @@
{{- if eq ._type "vevent"}}
<tr>
{{- $start := time .dtstart }}
<td style="font-variant-numeric: tabular-nums;">{{ time.Format "Mon, 2006-01-02 15:04" $start.Local }}</td>
{{- $potentialUrl := index (findRE `https?://\S*` .description 1) 0 }}
{{- if eq $potentialUrl nil }}
<td style="font-variant-numeric: tabular-nums;">{{ $start.Local.Format "Mon, 2006-01-02 15:04" }}</td>
<td>{{ .summary }}</td>
{{- else }}
<td><a href="{{ $potentialUrl }}">{{ .summary }}</a></td>
{{- end }}
{{- if eq .location "Z9" }}
<td><a href="https://wiki.hamburg.ccc.de/club:z9:start">Z9</a></td>
{{- else }}
<td>{{ .location }}</td>
{{- end }}
</tr>
{{- end }}
{{- end }}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.7 KiB

Some files were not shown because too many files have changed in this diff Show more