Compare commits

..

46 commits

Author SHA1 Message Date
Stefan Bethke fcf4a46a1d Vouchers are done (#72)
All checks were successful
/ build (push) Successful in 13s
Reviewed-on: #72
Co-authored-by: Stefan Bethke <stb@lassitu.de>
Co-committed-by: Stefan Bethke <stb@lassitu.de>
2024-11-05 16:41:05 +01:00
stb b3de8ec33d Ticket-Click-Party (#70)
All checks were successful
/ build (push) Successful in 13s
Reviewed-on: #70
2024-11-02 10:42:25 +01:00
Stefan Bethke 9c8c3ae28c typo (#71)
All checks were successful
/ build (push) Successful in 13s
Reviewed-on: #71
Co-authored-by: Stefan Bethke <stb@lassitu.de>
Co-committed-by: Stefan Bethke <stb@lassitu.de>
2024-11-02 10:18:21 +01:00
Stefan Bethke 2f54794d99 Add screenshot for target email (#69)
All checks were successful
/ build (push) Successful in 14s
Reviewed-on: #69
Co-authored-by: Stefan Bethke <stb@lassitu.de>
Co-committed-by: Stefan Bethke <stb@lassitu.de>
2024-10-23 08:23:16 +02:00
dario eadbdfd0d7
clarify 38c3 voucher payment process
All checks were successful
/ build (push) Successful in 14s
2024-10-22 00:54:48 +02:00
Stefan Bethke c8bd6e176b Typo (#68)
All checks were successful
/ build (push) Successful in 15s
Reviewed-on: #68
Co-authored-by: Stefan Bethke <stb@lassitu.de>
Co-committed-by: Stefan Bethke <stb@lassitu.de>
2024-10-21 19:52:44 +02:00
Stefan Bethke f2573eff5e Add info page for vouchers for 38c3 (#66)
All checks were successful
/ build (push) Successful in 14s
Reviewed-on: #66
Co-authored-by: Stefan Bethke <stb@lassitu.de>
Co-committed-by: Stefan Bethke <stb@lassitu.de>
2024-10-21 19:48:38 +02:00
Stefan Bethke 70a34c517d Korrekte Nummer für den Club verwenden
All checks were successful
/ build (pull_request) Successful in 36s
/ cleanup-staging (pull_request) Successful in 2s
/ build (push) Successful in 13s
2024-08-06 19:11:55 +02:00
Renovate 568f36a0b3 Configure Renovate (#61)
All checks were successful
/ build (push) Successful in 13s
Welcome to [Renovate](https://github.com/renovatebot/renovate)! This is an onboarding PR to help you understand and configure settings before regular Pull Requests begin.

🚦 To activate Renovate, merge this Pull Request. To disable Renovate, simply close this Pull Request unmerged.

---
### Detected Package Files

 * `.forgejo/workflows/cleanup.yaml` (github-actions)
 * `.forgejo/workflows/deploy.yaml` (github-actions)
 * `.gitlab-ci.yml` (gitlabci)

### Configuration Summary

Based on the default config's presets, Renovate will:

  - Start dependency updates only once this onboarding PR is merged
  - Enable Renovate Dependency Dashboard creation.
  - Use semantic commit type `fix` for dependencies and `chore` for all others if semantic commits are in use.
  - Ignore `node_modules`, `bower_components`, `vendor` and various test/tests directories.
  - Group known monorepo packages together.
  - Use curated list of recommended non-monorepo package groupings.
  - Apply crowd-sourced package replacement rules.
  - Apply crowd-sourced workarounds for known problems with packages.

🔡 Do you want to change how Renovate upgrades your dependencies? Add your custom config to `renovate.json` in this branch. Renovate will update the Pull Request description the next time it runs.

---

### What to Expect

It looks like your repository dependencies are already up-to-date and no Pull Requests will be necessary right away.

---

 Got questions? Check out Renovate's [Docs](https://docs.renovatebot.com/), particularly the Getting Started section.
If you need any further assistance then you can also [request help here](https://github.com/renovatebot/renovate/discussions).

---

This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).

<!--renovate-config-hash:e80b4e42a3043bc12fa0640db4bac392d2bf770acf841360d7c8ceeeac2ec1a9-->

Reviewed-on: #61
Co-authored-by: Renovate <no-reply@git.hamburg.ccc.de>
Co-committed-by: Renovate <no-reply@git.hamburg.ccc.de>
2024-07-29 09:48:38 +02:00
dario 36a34782ce
openchaos begins later on 2024-07-12
All checks were successful
/ build (pull_request) Successful in 36s
/ cleanup-staging (pull_request) Successful in 2s
/ build (push) Successful in 13s
2024-07-10 18:43:21 +02:00
dario 4222ac7b2b [blog] openchaos am 14. juni fällt aus
All checks were successful
/ build (push) Successful in 12s
Co-authored-by: dario <446-dario@users.noreply.gitlab.hamburg.ccc.de>
Co-committed-by: dario <446-dario@users.noreply.gitlab.hamburg.ccc.de>
2024-06-08 20:18:23 +02:00
jtbx 63d3f4459d Theme: Fix robots partial "isset on nil" warning
All checks were successful
/ build (pull_request) Successful in 40s
/ cleanup-staging (pull_request) Successful in 1s
/ build (push) Successful in 12s
As not all pages have the robots param defined, we got a warning:
WARN  calling IsSet with unsupported type "invalid" (<nil>) will always return false.
This is solved by adding an additional "isset" check.
2024-04-20 18:14:41 +02:00
w1ntermute e0c46fb4e2 Added new ctf event
All checks were successful
/ build (push) Successful in 13s
2024-04-17 20:58:29 +02:00
jtbx 462fb7ed68 [FIX] failed build on some newer hugo versions
All checks were successful
/ build (pull_request) Successful in 40s
/ cleanup-staging (pull_request) Successful in 2s
/ build (push) Successful in 13s
might need v0.123.0 or greater
2024-03-12 21:22:28 +01:00
jtbx 76dcc69074 CSS: Less bottom margin for headings
All checks were successful
/ build (push) Successful in 13s
2024-03-07 20:15:01 +01:00
jtbx 7e29bd5369 Theme: Keep current event for 6 hours after start date
Some checks failed
/ build (pull_request) Successful in 39s
/ cleanup-staging (pull_request) Successful in 2s
/ build (push) Has been cancelled
Events are shown in the "Neuigkeiten" section until their start date has been reached.
As we deploy quite often, this means, that the currently running event will disappear when it's still going.
As we don't know the end date, just show them for 6 more hours.
2024-03-07 20:11:29 +01:00
jtbx 765d271531 Home: Add "read more" link to announcement summary
All checks were successful
/ build (pull_request) Successful in 40s
/ cleanup-staging (pull_request) Successful in 2s
/ build (push) Successful in 13s
Adding an ellipsis doesn't really work for both cases.
2024-03-02 22:09:27 +01:00
jtbx 0f533e21e5 Theme: Add link to "Z9" location
All checks were successful
/ build (push) Successful in 13s
2024-02-20 21:27:28 +01:00
skye gänseblum 9b577a908f Tag des offenen Hackspace Ankündigung
All checks were successful
/ build (push) Successful in 12s
2024-02-20 21:26:01 +01:00
jtbx e1a8a4d90e fetch-calendar: set start time to 6 h in the past
All checks were successful
/ build (push) Successful in 12s
Only showing the current event if it started less than 6 hours in the past
should be fine. We rarely have longer events and those usually had an
announcement post anyways.
2024-02-13 19:17:01 +01:00
jtbx 7d492980b8 Theme: use right locale in calendar-table
All checks were successful
/ build (push) Successful in 13s
2024-02-11 20:10:22 +01:00
jtbx 8607882719
Theme: Add favicon
All checks were successful
/ build (pull_request) Successful in 39s
/ cleanup-staging (pull_request) Successful in 1s
/ build (push) Successful in 12s
2024-02-08 22:14:26 +01:00
lex 74f32d0138 Add lactf blog entry
All checks were successful
/ build (pull_request) Successful in 39s
/ cleanup-staging (pull_request) Successful in 1s
/ build (push) Successful in 13s
2024-02-07 22:38:00 +01:00
dario 8a66b0a361
fix doorstatus not updating every minute
All checks were successful
/ build (pull_request) Successful in 40s
/ cleanup-staging (pull_request) Successful in 2s
/ build (push) Successful in 13s
roomstate.js incorrectly used setTimeout() instead of setInterval() to
call the door status. This caused the status to only be updated once
after the initial page load, instead of once every minute
2024-02-02 15:44:59 +01:00
max 61f22607d6 fix typo
All checks were successful
/ build (pull_request) Successful in 40s
/ cleanup-staging (pull_request) Successful in 2s
/ build (push) Successful in 13s
2024-02-02 15:04:05 +01:00
jtbx dec278910e CI: Fix lastmod property of articles
All checks were successful
/ build (pull_request) Successful in 39s
/ cleanup-staging (pull_request) Successful in 2s
/ build (push) Successful in 13s
We use the git commit to determine the lastmod date, but the checkout action uses a shallow clone by default.
2024-02-01 20:23:23 +01:00
jtbx 8c2684abef CI: Fix deploy on schedule
All checks were successful
/ build (push) Successful in 12s
2024-02-01 20:11:25 +01:00
jtbx d5fc2adfe1 CI: Post staging URL to PR once (on open event)
All checks were successful
/ build (pull_request) Successful in 38s
/ cleanup-staging (pull_request) Successful in 1s
/ build (push) Successful in 13s
2024-01-28 13:04:48 +01:00
jtbx b1e4e69be2 CI: Auto-remove closed PRs from staging 2024-01-28 13:02:05 +01:00
echtnurich 6911482c0e RSS: Add authors
All checks were successful
/ build (push) Successful in 11s
2024-01-27 23:15:22 +01:00
June 75cdbad994 Style: Make header adaptive by intro. a hamburg. menu for mobile viewp.
All checks were successful
/ build (push) Successful in 12s
Co-authored-by: c6ristian <c6ristian@christian.moe>
2024-01-27 23:14:41 +01:00
jtbx 0471b5f348 Theme: Use internal picocss 2024-01-27 23:14:41 +01:00
jtbx 74cdb157fd Theme: Add picocss v1.5.11 2024-01-27 23:14:41 +01:00
jtbx fe6fab6f1e template: Set draft=false by default
All checks were successful
/ build (push) Successful in 12s
2024-01-27 22:58:50 +01:00
jtbx e20c15e490 Docs: Improve readme 2024-01-27 22:58:50 +01:00
w1ntermute 1f3b00ccf8 content/blog/2024/2024-01-27-hamburg-steht-zusammen/hamburg-steht-zusammen.md aktualisiert
All checks were successful
/ build (pull_request) Successful in 38s
/ build (push) Successful in 12s
2024-01-27 17:24:21 +01:00
w1ntermute ea88aa2979 New event hamburg steht zusammen morgige demo
All checks were successful
/ build (pull_request) Successful in 38s
/ build (push) Successful in 12s
neue Datei:     content/blog/2024/2024-01-27-hamburg-steht-zusammen/hamburg-steht-zusammen.md
2024-01-27 16:02:43 +01:00
skye gänseblum dcb341e608 draft: false für freitalk februar ankündigung
All checks were successful
/ build (pull_request) Successful in 37s
/ build (push) Successful in 12s
2024-01-24 23:54:20 +01:00
skye gänseblum 0a198b43fa freitalk februar ankündigung
All checks were successful
/ build (pull_request) Successful in 39s
2024-01-24 23:34:53 +01:00
christian e3b77eb989
contact: add CCCHH matrix chat to contact info
All checks were successful
/ build (pull_request) Successful in 39s
/ build (push) Successful in 12s
2024-01-23 21:00:58 +01:00
jtbx d9a1b256ad Calendar: Link to first URL from description
All checks were successful
/ build (pull_request) Successful in 37s
/ build (push) Successful in 12s
2024-01-23 20:37:19 +01:00
jtbx 3a13900bed Content: Change wiki URL
All checks were successful
/ build (push) Successful in 13s
2024-01-23 19:31:18 +01:00
jtbx 09c6fcf9c1 Content: More formatting fixes
All checks were successful
/ build (push) Successful in 13s
2024-01-23 19:11:42 +01:00
jtbx f303dee335 Home: Fix non-existing links on card headings
All checks were successful
/ build (push) Successful in 13s
2024-01-23 18:57:40 +01:00
jtbx 68267a933f Content: Fix name on home page 2024-01-23 18:44:36 +01:00
jtbx 945e590bde Content: Fix migrated "Tag des offenen Hackspace 25.3."
All checks were successful
/ build (push) Successful in 12s
2024-01-22 23:15:25 +01:00
95 changed files with 4562 additions and 100 deletions

View file

@ -1,7 +1,7 @@
on:
pull_request:
pull_request_target:
- closed
types:
- closed
jobs:
cleanup-staging:
@ -11,9 +11,13 @@ jobs:
steps:
- name: Pipeline info PR
run: |
echo "PR#${{ github.event.pull_request.number }} ${{ github.event.action }}"
echo "Run triggered by ${{ github.event_name }} (${{ github.event.action }}) on ref ${{ github.ref_name }}"
- name: Deploy - Remove PR from staging
if: github.event.action == 'closed'
- name: Staging Deployment - Prepare keys
run: |
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 }}/"
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 }}/"

View file

@ -2,7 +2,6 @@ on:
push:
branches:
- main
- feature/forgejo
pull_request:
schedule:
- cron: "0,20,40 * * * *"
@ -18,7 +17,7 @@ jobs:
steps:
- name: Pipeline info
run: |
echo "Run triggered by ${{ gitea.event_name }} on ref ${{ github.ref_name }}"
echo "Run triggered by ${{ github.event_name }} (${{ github.event.action }}) on ref ${{ github.ref_name }}"
- name: Install packages
run: |
@ -27,8 +26,12 @@ 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: Patch baseURL (staging only)
if: github.ref_name != 'main'
@ -41,44 +44,35 @@ jobs:
./fetch-calendar.sh
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 == 'pull_request'
if: github.event_name == 'push' || github.event_name == 'pull_request' || github.event_name == 'schedule'
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.ref_name == 'main'
if: (github.event_name == 'push' || github.event_name == 'schedule') && 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, Chaos Computer Club Hansestadt Hamburg e.V.
Copyright (c) 2023, CCC 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)
* visit us -> open chaos + link to wiki for all recurring events
* event calendar
* visit us -> open chaos + link to wiki for all recurring events
* 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,26 +47,47 @@ 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.
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.
To create a new event blog post, run a command like this:
```shell
hugo new content --kind event blog/your-event-title.md
hugo new content --kind event blog/yyyy/yyyy-mm-dd-your-event-title/index.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.
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.
To create a new general blog post, run a command like this:
```shell
hugo new content --kind article blog/your-article-title.md
hugo new content --kind article blog/yyyy/yyyy-mm-dd-your-article-title/index.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 >}} Internet Relay Chat: [hackint.eu](https://webirc.hackint.org/#irc://irc.hackint.org/#ccchh?nick=) [#ccchh](ircs://hackint.eu/ccchh)

Binary file not shown.

After

Width:  |  Height:  |  Size: 338 KiB

View file

@ -0,0 +1,17 @@
---
title: "38c3 Voucher"
---
# Update 5.11.2024: Die Voucher-Phase ist vorbei
Die Voucher-Phase ist beendet, es gibt keine Tickets mehr für die replizierenden Voucher-Codes (aber Engel-Voucher können noch bis einschließlich 11.11. eingelöst werden). Es tut uns leid, das wir nicht alle Interessenten berücksichtigen konnten. Wenn ihr noch ein Ticket braucht, dann kommt doch zu einer unserer Ticket-Klick-Parties!
# Ticket-Klick-Party
Wenn ihr im **offenen Verkauf** Tickets klicken möchtet, kommt zu einem unserer Klick-Party-Termine in den Club!
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: '2022-03-25T13:37:00+01:00'
date: '2023-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-02-28T10:00:00+01:00'
lastmod: '2023-03-01T10:00:00+01:00'
location: Zeiseweg 9
publishDate: '2023-02-28T10:00:00+01:00'
publishDate: '2023-03-01T10: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.ccchh.net/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.hamburg.ccc.de/club:freitalk:start). Dort findet ihr später auch die Folien und weiteres Material.

View file

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

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

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

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

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

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

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

@ -7,4 +7,4 @@ headless: true
{{< calendar-table >}}
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).
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).

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.ccchh.net/club:terminserien:openchaos) vorbei.
Wenn du uns kennenlernen möchtest, komm doch einfach mal zum [Open Chaos](https://wiki.hamburg.ccc.de/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.ccchh.net/club:freifunk:start
link: https://wiki.hamburg.ccc.de/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.ccchh.net/club:geekfem:start
link: https://wiki.hamburg.ccc.de/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.ccchh.net/club:ctf:start
link: https://wiki.hamburg.ccc.de/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.ccchh.net/club:cms:start
link: https://wiki.hamburg.ccc.de/club:cms:start
---
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.ccchh.net/club:cryptogruppe:start
link: https://wiki.hamburg.ccc.de/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.ccchh.net/club:ueberwachungsstammtisch:start
link: https://wiki.hamburg.ccc.de/club:ueberwachungsstammtisch:start
---
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 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.
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.

View file

@ -6,4 +6,4 @@ 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.ccchh.net/club:geschichte).
Mehr dazu findest du im [Wiki](https://wiki.hamburg.ccc.de/club:geschichte).

View file

@ -10,21 +10,18 @@ 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 anholen.
Da die Zwischentüren im Haus verschlossen sind, muss euch immer eine Person am Eingang abholen.
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.)
(Die Klingel ist aktuell verschwunden, bitte ruft einfach [+49 40 23830150](tel:+494023830150) 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 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.
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.
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.
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.
#### Weitere Kontaktdaten

View file

@ -9,7 +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. 20300 eingetragen.
Der CCC Hansestadt Hamburg e.V. wurde im Vereinsregister vom Registergericht des Amtsgericht Hamburg unter der VR-Nr.&nbsp;20300 eingetragen.
## Kontakt

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. 20300 eingetragen.
Der CCC Hansestadt Hamburg e.V. wurde im Vereinsregister vom Registergericht des Amtsgericht Hamburg unter der VR-Nr.&nbsp;20300 eingetragen.
### Kontaktdaten der Datenschutzstelle des CCC Hansestadt Hamburg e.V.

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="-1 day" +%s) # yesterday
START_TIME=$(date --date="-6 hours" +%s) # now - 6 hours
END_TIME=$(date --date="+1 month" +%s) # now + 1 month
elif [ "$OS_TYPE" = "Darwin" ] || [ "$OS_TYPE" = "FreeBSD" ]; then
START_TIME=$(date -v-1d +%s) # yesterday
START_TIME=$(date -v-6H +%s) # now - 6 hours
END_TIME=$(date -v+1m +%s) # now + 1 month
else
echo "ERROR: Unsupported OS type"

View file

@ -48,19 +48,19 @@ enableGitInfo = true
[[menu.footer]]
name = "Satzung"
weight = 90
url = "https://wiki.ccchh.net/verein:offizielles:satzung"
url = "https://wiki.hamburg.ccc.de/verein:offizielles:satzung"
[menu.footer.params]
rel = "external"
[[menu.footer]]
name = "Hausordnung"
weight = 92
url = "https://wiki.ccchh.net/verein:offizielles:hausordnung"
url = "https://wiki.hamburg.ccc.de/verein:offizielles:hausordnung"
[menu.footer.params]
rel = "external"
[[menu.footer]]
name = "Mitglied werden"
weight = 94
url = "https://wiki.ccchh.net/verein:offizielles:foemi-formular"
url = "https://wiki.hamburg.ccc.de/verein:offizielles:foemi-formular"
[menu.footer.params]
rel = "external"

6
renovate.json Normal file
View file

@ -0,0 +1,6 @@
{
"$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: true
draft: false
authors:
- your name
# tags:

View file

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

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: true
draft: false
location: Z9
authors:
- your name

View file

@ -0,0 +1,33 @@
"use strict";
function setScrolling(enable = true) {
const body = document.body;
if (enable) {
body.style.overflow = "unset";
}
else {
body.style.overflow = "hidden";
}
};
document.addEventListener("DOMContentLoaded", () => {
const hamburgerMenuCheckbox = document.querySelector(".menu-button");
// When the hamburger menu is open, disable scrolling.
hamburgerMenuCheckbox.addEventListener("change", () => {
if (hamburgerMenuCheckbox.checked) {
setScrolling(false);
}
else {
setScrolling(true);
}
});
window.addEventListener("resize", () => {
if (window.innerWidth > 768 && hamburgerMenuCheckbox.checked) {
// Uncheck the checkbox to disable scrolling and to get to the original state.
hamburgerMenuCheckbox.checked = false;
hamburgerMenuCheckbox.dispatchEvent(new Event("change"));
}
});
});

View file

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

View file

@ -0,0 +1,21 @@
MIT License
Copyright (c) 2019-2023 Pico
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

View file

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

View file

@ -0,0 +1,69 @@
// Config
//
// Set the root element for $enable-semantic-container and $enable-responsive-spacings
$semantic-root-element: "body" !default;
// Enable <header>, <main>, <footer> inside $semantic-root-element as containers
$enable-semantic-container: false !default;
// Enable .container and .container-fluid
$enable-class-container: true !default;
// Enable a centered viewport for <header>, <main>, <footer> inside $enable-semantic-container
// Fluid layout if disabled
$enable-viewport: true !default;
// Enable responsive spacings for <header>, <main>, <footer>, <section>, <article>
// Fixed spacings if disabled
$enable-responsive-spacings: true !default;
// Enable responsive typography
// Fixed root element size if disabled
$enable-responsive-typography: true !default;
// Enable .classes
// .classless version if disabled
$enable-classes: true !default;
// Enable .grid class
$enable-grid: true !default;
// Enable transitions
$enable-transitions: true !default;
// Enable overriding with !important
$enable-important: true !default;
// Responsive
//
// xs: Extra small (portrait phones)
// sm: Small(landscape phones)
// md: Medium(tablets)
// lg: Large(desktops)
// xl: Extra large (large desktops)
// NOTE:
// To provide an easy and fine styling on each breakpoint
// we didn't use @each, @mixin or @include.
// That means you need to edit each CSS selector file to add a breakpoint
// Breakpoints
// 'null' disable the breakpoint
$breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
) !default;
// Viewports
$viewports: (
// 'null' disable the viewport on a breakpoint
sm: 510px,
md: 700px,
lg: 920px,
xl: 1130px
) !default;

View file

@ -0,0 +1,116 @@
/**
* Accordion (<details>)
*/
details {
display: block;
margin-bottom: var(--spacing);
padding-bottom: var(--spacing);
border-bottom: var(--border-width) solid var(--accordion-border-color);
summary {
line-height: 1rem;
list-style-type: none;
cursor: pointer;
&:not([role]) {
color: var(--accordion-close-summary-color);
}
@if $enable-transitions {
transition: color var(--transition);
}
// Reset marker
&::-webkit-details-marker {
display: none;
}
&::marker {
display: none;
}
&::-moz-list-bullet {
list-style-type: none;
}
// Marker
&::after {
display: block;
width: 1rem;
height: 1rem;
margin-inline-start: calc(var(--spacing, 1rem) * 0.5);
float: right;
transform: rotate(-90deg);
background-image: var(--icon-chevron);
background-position: right center;
background-size: 1rem auto;
background-repeat: no-repeat;
content: "";
@if $enable-transitions {
transition: transform var(--transition);
}
}
&:focus {
outline: none;
&:not([role="button"]) {
color: var(--accordion-active-summary-color);
}
}
// Type button
&[role="button"] {
width: 100%;
text-align: left;
// Marker
&::after {
height: calc(1rem * var(--line-height, 1.5));
background-image: var(--icon-chevron-button);
}
@if $enable-classes {
// .contrast
&:not(.outline).contrast {
// Marker
&::after {
background-image: var(--icon-chevron-button-inverse);
}
}
}
}
}
// Open
&[open] {
> summary {
margin-bottom: calc(var(--spacing));
&:not([role]) {
&:not(:focus) {
color: var(--accordion-open-summary-color);
}
}
&::after {
transform: rotate(0);
}
}
}
}
[dir="rtl"] {
details {
summary {
text-align: right;
&::after {
float: left;
background-position: left center;
}
}
}
}

View file

@ -0,0 +1,36 @@
/**
* Card (<article>)
*/
article {
margin: var(--block-spacing-vertical) 0;
padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
border-radius: var(--border-radius);
background: var(--card-background-color);
box-shadow: var(--card-box-shadow);
> header,
> footer {
margin-right: calc(var(--block-spacing-horizontal) * -1);
margin-left: calc(var(--block-spacing-horizontal) * -1);
padding: calc(var(--block-spacing-vertical) * 0.66)
var(--block-spacing-horizontal);
background-color: var(--card-sectionning-background-color);
}
> header {
margin-top: calc(var(--block-spacing-vertical) * -1);
margin-bottom: var(--block-spacing-vertical);
border-bottom: var(--border-width) solid var(--card-border-color);
border-top-right-radius: var(--border-radius);
border-top-left-radius: var(--border-radius);
}
> footer {
margin-top: var(--block-spacing-vertical);
margin-bottom: calc(var(--block-spacing-vertical) * -1);
border-top: var(--border-width) solid var(--card-border-color);
border-bottom-right-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
}
}

View file

@ -0,0 +1,214 @@
/**
* Dropdown ([role="list"])
*/
// Menu
details[role="list"],
li[role="list"] {
position: relative;
}
details[role="list"] summary + ul,
li[role="list"] > ul {
display: flex;
z-index: 99;
position: absolute;
top: auto;
right: 0;
left: 0;
flex-direction: column;
margin: 0;
padding: 0;
border: var(--border-width) solid var(--dropdown-border-color);
border-radius: var(--border-radius);
border-top-right-radius: 0;
border-top-left-radius: 0;
background-color: var(--dropdown-background-color);
box-shadow: var(--card-box-shadow);
color: var(--dropdown-color);
white-space: nowrap;
li {
width: 100%;
margin-bottom: 0;
padding: calc(var(--form-element-spacing-vertical) * 0.5)
var(--form-element-spacing-horizontal);
list-style: none;
&:first-of-type {
margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
}
&:last-of-type {
margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
}
a {
display: block;
margin: calc(var(--form-element-spacing-vertical) * -0.5)
calc(var(--form-element-spacing-horizontal) * -1);
padding: calc(var(--form-element-spacing-vertical) * 0.5)
var(--form-element-spacing-horizontal);
overflow: hidden;
color: var(--dropdown-color);
text-decoration: none;
text-overflow: ellipsis;
&:hover {
background-color: var(--dropdown-hover-background-color);
}
}
}
}
// Marker
details[role="list"] summary,
li[role="list"] > a {
&::after {
display: block;
width: 1rem;
height: calc(1rem * var(--line-height, 1.5));
margin-inline-start: 0.5rem;
float: right;
transform: rotate(0deg);
background-image: var(--icon-chevron);
background-position: right center;
background-size: 1rem auto;
background-repeat: no-repeat;
content: "";
}
}
// Global dropdown only
details[role="list"] {
padding: 0;
border-bottom: none;
// Style <summary> as <select>
summary {
margin-bottom: 0;
&:not([role]) {
height: calc(
1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 +
var(--border-width) * 2
);
padding: var(--form-element-spacing-vertical)
var(--form-element-spacing-horizontal);
border: var(--border-width) solid var(--form-element-border-color);
border-radius: var(--border-radius);
background-color: var(--form-element-background-color);
color: var(--form-element-placeholder-color);
line-height: inherit;
cursor: pointer;
@if $enable-transitions {
transition: background-color var(--transition),
border-color var(--transition), color var(--transition),
box-shadow var(--transition);
}
&:active,
&:focus {
border-color: var(--form-element-active-border-color);
background-color: var(--form-element-active-background-color);
}
&:focus {
box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
}
}
}
// Close for details[role="list"]
&[open] summary {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
&::before {
display: block;
z-index: 1;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: none;
content: "";
cursor: default;
}
}
}
// All Dropdowns inside <nav>
nav details[role="list"] summary,
nav li[role="list"] a {
display: flex;
direction: ltr;
}
nav details[role="list"] summary + ul,
nav li[role="list"] > ul {
min-width: fit-content;
border-radius: var(--border-radius);
li a {
border-radius: 0;
}
}
// Dropdowns inside <nav> as nested <details>
nav details[role="list"] {
summary,
summary:not([role]) {
height: auto;
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
}
&[open] summary {
border-radius: var(--border-radius);
}
summary + ul {
margin-top: var(--outline-width);
margin-inline-start: 0;
}
summary[role="link"] {
margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
line-height: var(--line-height);
+ ul {
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
}
}
}
// Dropdowns inside a <nav> without using <details>
li[role="list"] {
// Open on hover (for mobile)
// or on active/focus (for keyboard navigation)
&:hover > ul,
a:active ~ ul,
a:focus ~ ul {
display: flex;
}
> ul {
display: none;
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
margin-inline-start: calc(
var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal)
);
}
> a::after {
background-image: var(--icon-chevron);
}
}
label > details[role="list"] {
margin-top: calc(var(--spacing) * .25);
margin-bottom: var(--spacing);
}

View file

@ -0,0 +1,168 @@
/**
* Modal (<dialog>)
*/
:root {
--scrollbar-width: 0px;
}
dialog {
display: flex;
z-index: 999;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
align-items: center;
justify-content: center;
width: inherit;
min-width: 100%;
height: inherit;
min-height: 100%;
padding: var(--spacing);
border: 0;
backdrop-filter: var(--modal-overlay-backdrop-filter);
background-color: var(--modal-overlay-background-color);
color: var(--color);
// Content
article {
$close-selector: if($enable-classes, ".close", "a[rel='prev']");
max-height: calc(100vh - var(--spacing) * 2);
overflow: auto;
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
max-width: map-get($viewports, "sm");
}
}
@if map-get($breakpoints, "md") {
@media (min-width: map-get($breakpoints, "md")) {
max-width: map-get($viewports, "md");
}
}
> header,
> footer {
padding: calc(var(--block-spacing-vertical) * 0.5)
var(--block-spacing-horizontal);
}
> header {
#{$close-selector} {
margin: 0;
margin-left: var(--spacing);
float: right;
}
}
> footer {
text-align: right;
[role="button"] {
margin-bottom: 0;
&:not(:first-of-type) {
margin-left: calc(var(--spacing) * 0.5);
}
}
}
p {
&:last-of-type {
margin: 0;
}
}
// Close icon
#{$close-selector} {
display: block;
width: 1rem;
height: 1rem;
margin-top: calc(var(--block-spacing-vertical) * -0.5);
margin-bottom: var(--typography-spacing-vertical);
margin-left: auto;
background-image: var(--icon-close);
background-position: center;
background-size: auto 1rem;
background-repeat: no-repeat;
opacity: 0.5;
@if $enable-transitions {
transition: opacity var(--transition);
}
&:is([aria-current], :hover, :active, :focus) {
opacity: 1;
}
}
}
// Closed state
&:not([open]),
&[open="false"] {
display: none;
}
}
// Utilities
@if $enable-classes {
.modal-is-open {
padding-right: var(--scrollbar-width, 0px);
overflow: hidden;
pointer-events: none;
touch-action: none;
dialog {
pointer-events: auto;
}
}
}
// Animations
@if ($enable-classes and $enable-transitions) {
$animation-duration: 0.2s;
:where(.modal-is-opening, .modal-is-closing) {
dialog,
dialog > article {
animation-duration: $animation-duration;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
}
dialog {
animation-duration: ($animation-duration * 4);
animation-name: modal-overlay ;
> article {
animation-delay: $animation-duration;
animation-name: modal;
}
}
}
.modal-is-closing {
dialog,
dialog > article {
animation-delay: 0s;
animation-direction: reverse;
}
}
@keyframes modal-overlay {
from {
backdrop-filter: none;
background-color: transparent;
}
}
@keyframes modal {
from {
transform: translateY(-100%);
opacity: 0;
}
}
}

View file

@ -0,0 +1,141 @@
/**
* Nav
*/
// Reboot based on :
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// Prevent VoiceOver from ignoring list semantics in Safari (opinionated)
:where(nav li)::before {
float: left;
content: "\200B";
}
// Pico
//
// Horizontal Nav
nav,
nav ul {
display: flex;
}
nav {
justify-content: space-between;
ol,
ul {
align-items: center;
margin-bottom: 0;
padding: 0;
list-style: none;
&:first-of-type {
margin-left: calc(var(--nav-element-spacing-horizontal) * -1);
}
&:last-of-type {
margin-right: calc(var(--nav-element-spacing-horizontal) * -1);
}
}
li {
display: inline-block;
margin: 0;
padding: var(--nav-element-spacing-vertical)
var(--nav-element-spacing-horizontal);
// Minimal support for buttons and forms elements
> * {
--spacing: 0;
}
}
:where(a, [role="link"]) {
display: inline-block;
margin: calc(var(--nav-link-spacing-vertical) * -1)
calc(var(--nav-link-spacing-horizontal) * -1);
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
border-radius: var(--border-radius);
text-decoration: none;
&:is([aria-current], :hover, :active, :focus) {
text-decoration: none;
}
}
// Breadcrumb
&[aria-label="breadcrumb"] {
align-items: center;
justify-content: start;
& ul li {
&:not(:first-child) {
margin-inline-start: var(--nav-link-spacing-horizontal);
}
&:not(:last-child) {
::after {
position: absolute;
width: calc(var(--nav-link-spacing-horizontal) * 2);
margin-inline-start: calc(var(--nav-link-spacing-horizontal) / 2);
content: "/";
color: var(--muted-color);
text-align: center;
}
}
}
& a[aria-current] {
background-color: transparent;
color: inherit;
text-decoration: none;
pointer-events: none;
}
}
// Minimal support for role="button"
[role="button"] {
margin-right: inherit;
margin-left: inherit;
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
}
}
// Vertical Nav
aside {
nav,
ol,
ul,
li {
display: block;
}
li {
padding: calc(var(--nav-element-spacing-vertical) * 0.5)
var(--nav-element-spacing-horizontal);
a {
display: block;
}
// Minimal support for links as buttons
[role="button"] {
margin: inherit;
}
}
}
// Breadcrumb RTL
[dir="rtl"] {
nav {
&[aria-label="breadcrumb"] {
& ul li {
&:not(:last-child) {
::after {
content: "\\";
}
}
}
}
}
}

View file

@ -0,0 +1,89 @@
/**
* Progress
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
//
// 1. Add the correct display in Edge 18- and IE
// 2. Add the correct vertical alignment in Chrome, Edge, and Firefox
progress {
display: inline-block; // 1
vertical-align: baseline; // 2
}
// Pico
//
progress {
// Reset the default appearance
-webkit-appearance: none;
-moz-appearance: none;
// Styles
display: inline-block;
appearance: none;
width: 100%;
height: 0.5rem;
margin-bottom: calc(var(--spacing) * 0.5);
overflow: hidden;
// Remove Firefox and Opera border
border: 0;
border-radius: var(--border-radius);
background-color: var(--progress-background-color);
// IE10 uses `color` to set the bar background-color
color: var(--progress-color);
&::-webkit-progress-bar {
border-radius: var(--border-radius);
background: none;
}
&[value]::-webkit-progress-value {
background-color: var(--progress-color);
}
&::-moz-progress-bar {
background-color: var(--progress-color);
}
// Indeterminate state
@media (prefers-reduced-motion: no-preference) {
&:indeterminate {
background: var(--progress-background-color)
linear-gradient(
to right,
var(--progress-color) 30%,
var(--progress-background-color) 30%
)
top left / 150% 150% no-repeat;
animation: progress-indeterminate 1s linear infinite;
&[value]::-webkit-progress-value {
background-color: transparent;
}
&::-moz-progress-bar {
background-color: transparent;
}
}
}
}
[dir="rtl"] {
@media (prefers-reduced-motion: no-preference) {
progress:indeterminate {
animation-direction: reverse;
}
}
}
@keyframes progress-indeterminate {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}

View file

@ -0,0 +1,183 @@
/**
* Button
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
//
// 1. Change the font styles in all browsers
// 2. Remove the margin on controls in Safari
// 3. Show the overflow in Edge
button {
margin: 0; // 2
overflow: visible; // 3
font-family: inherit; // 1
text-transform: none; // 1
}
// Correct the inability to style buttons in iOS and Safari
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
// Pico
//
button {
display: block;
width: 100%;
margin-bottom: var(--spacing);
}
[role="button"] {
display: inline-block;
text-decoration: none;
}
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
[role="button"] {
--background-color: var(--primary);
--border-color: var(--primary);
--color: var(--primary-inverse);
--box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
padding: var(--form-element-spacing-vertical)
var(--form-element-spacing-horizontal);
border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius);
outline: none;
background-color: var(--background-color);
box-shadow: var(--box-shadow);
color: var(--color);
font-weight: var(--font-weight);
font-size: 1rem;
line-height: var(--line-height);
text-align: center;
cursor: pointer;
@if $enable-transitions {
transition: background-color var(--transition),
border-color var(--transition), color var(--transition),
box-shadow var(--transition);
}
&:is([aria-current], :hover, :active, :focus) {
--background-color: var(--primary-hover);
--border-color: var(--primary-hover);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
--color: var(--primary-inverse);
}
&:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--primary-focus);
}
}
// .secondary, .contrast & .outline
@if $enable-classes {
// Secondary
:is(button, input[type="submit"], input[type="button"], [role="button"]).secondary,
input[type="reset"] {
--background-color: var(--secondary);
--border-color: var(--secondary);
--color: var(--secondary-inverse);
cursor: pointer;
&:is([aria-current], :hover, :active, :focus) {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
--color: var(--secondary-inverse);
}
&:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--secondary-focus);
}
}
// Contrast
:is(button, input[type="submit"], input[type="button"], [role="button"]).contrast {
--background-color: var(--contrast);
--border-color: var(--contrast);
--color: var(--contrast-inverse);
&:is([aria-current], :hover, :active, :focus) {
--background-color: var(--contrast-hover);
--border-color: var(--contrast-hover);
--color: var(--contrast-inverse);
}
&:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--contrast-focus);
}
}
// Outline (primary)
:is(button, input[type="submit"], input[type="button"], [role="button"]).outline,
input[type="reset"].outline {
--background-color: transparent;
--color: var(--primary);
&:is([aria-current], :hover, :active, :focus) {
--background-color: transparent;
--color: var(--primary-hover);
}
}
// Outline (secondary)
:is(button, input[type="submit"], input[type="button"], [role="button"]).outline.secondary,
input[type="reset"].outline {
--color: var(--secondary);
&:is([aria-current], :hover, :active, :focus) {
--color: var(--secondary-hover);
}
}
// Outline (contrast)
:is(button, input[type="submit"], input[type="button"], [role="button"]).outline.contrast {
--color: var(--contrast);
&:is([aria-current], :hover, :active, :focus) {
--color: var(--contrast-hover);
}
}
}
@else {
// Secondary button without .class
input[type="reset"] {
--background-color: var(--secondary);
--border-color: var(--secondary);
--color: var(--secondary-inverse);
cursor: pointer;
&:is([aria-current], :hover, :active, :focus) {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
}
&:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--secondary-focus);
}
}
}
// Button [disabled]
// Links without href are disabled by default
:where(button, [type="submit"], [type="button"], [type="reset"], [role="button"])[disabled],
:where(fieldset[disabled]) :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]),
a[role="button"]:not([href]) {
opacity: 0.5;
pointer-events: none;
}

View file

@ -0,0 +1,91 @@
/**
* Code
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
//
// 1. Correct the inheritance and scaling of font size in all browsers
// 2. Correct the odd `em` font sizing in all browsers
pre,
code,
kbd,
samp {
font-size: 0.875em; // 2
font-family: var(--font-family); // 1
}
// Prevent overflow of the container in all browsers (opinionated)
pre {
-ms-overflow-style: scrollbar;
overflow: auto;
}
// Pico
//
pre,
code,
kbd {
border-radius: var(--border-radius);
background: var(--code-background-color);
color: var(--code-color);
font-weight: var(--font-weight);
line-height: initial;
}
code,
kbd {
display: inline-block;
padding: 0.375rem 0.5rem;
}
pre {
display: block;
margin-bottom: var(--spacing);
overflow-x: auto;
> code {
display: block;
padding: var(--spacing);
background: none;
font-size: 14px;
line-height: var(--line-height);
}
}
// Code Syntax
code {
// Tags
b {
color: var(--code-tag-color);
font-weight: var(--font-weight);
}
// Properties
i {
color: var(--code-property-color);
font-style: normal;
}
// Values
u {
color: var(--code-value-color);
text-decoration: none;
}
// Comments
em {
color: var(--code-comment-color);
font-style: normal;
}
}
// kbd
kbd {
background-color: var(--code-kbd-background-color);
color: var(--code-kbd-color);
vertical-align: baseline;
}

View file

@ -0,0 +1,48 @@
/**
* Embedded content
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
//
// Change the alignment on media elements in all browsers (opinionated)
:where(audio, canvas, iframe, img, svg, video) {
vertical-align: middle;
}
// Add the correct display in IE 9-
audio,
video {
display: inline-block;
}
// Add the correct display in iOS 4-7
audio:not([controls]) {
display: none;
height: 0;
}
// Remove the border on iframes in all browsers (opinionated)
:where(iframe) {
border-style: none;
}
// 1. Remove the border on images inside links in IE 10.
// 2. Responsive by default
img {
max-width: 100%; // 2
height: auto; // 2
border-style: none; // 1
}
// Change the fill color to match the text color in all browsers (opinionated)
:where(svg:not([fill])) {
fill: currentColor;
}
// Hide the overflow in IE
svg:not(:root) {
overflow: hidden;
}

View file

@ -0,0 +1,286 @@
/**
* Form elements
* Alternatives input types (Not Checkboxes & Radios)
*/
// Color
[type="color"] {
// Wrapper
@mixin color-wrapper {
padding: 0;
}
&::-webkit-color-swatch-wrapper {
@include color-wrapper;
}
&::-moz-focus-inner {
@include color-wrapper;
}
// Swatch
@mixin color-swatch {
border: 0;
border-radius: calc(var(--border-radius) * 0.5);
}
&::-webkit-color-swatch {
@include color-swatch;
}
&::-moz-color-swatch {
@include color-swatch;
}
}
// Date & Time
// :not() are needed to add Specificity and avoid !important on padding
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
&:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
--icon-position: 0.75rem;
--icon-width: 1rem;
padding-right: calc(var(--icon-width) + var(--icon-position));
background-image: var(--icon-date);
background-position: center right var(--icon-position);
background-size: var(--icon-width) auto;
background-repeat: no-repeat;
}
// Time
&[type="time"] {
background-image: var(--icon-time);
}
}
// Calendar picker
[type="date"],
[type="datetime-local"],
[type="month"],
[type="time"],
[type="week"] {
&::-webkit-calendar-picker-indicator {
width: var(--icon-width);
margin-right: calc(var(--icon-width) * -1);
margin-left: var(--icon-position);
opacity: 0;
}
}
[dir="rtl"]
:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
text-align: right;
}
// Calendar icons are hidden in Firefox
@if $enable-important {
@-moz-document url-prefix() {
[type="date"],
[type="datetime-local"],
[type="month"],
[type="time"],
[type="week"] {
padding-right: var(--form-element-spacing-horizontal) !important;
background-image: none !important;
}
}
}
// File
[type="file"] {
--color: var(--muted-color);
padding: calc(var(--form-element-spacing-vertical) * 0.5) 0;
border: 0;
border-radius: 0;
background: none;
@mixin file-selector-button {
--background-color: var(--secondary);
--border-color: var(--secondary);
--color: var(--secondary-inverse);
margin-right: calc(var(--spacing) / 2);
margin-left: 0;
margin-inline-start: 0;
margin-inline-end: calc(var(--spacing) / 2);
padding: calc(var(--form-element-spacing-vertical) * 0.5)
calc(var(--form-element-spacing-horizontal) * 0.5);
border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius);
outline: none;
background-color: var(--background-color);
box-shadow: var(--box-shadow);
color: var(--color);
font-weight: var(--font-weight);
font-size: 1rem;
line-height: var(--line-height);
text-align: center;
cursor: pointer;
@if $enable-transitions {
transition: background-color var(--transition),
border-color var(--transition), color var(--transition),
box-shadow var(--transition);
}
&:is(:hover, :active, :focus) {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
}
}
&::file-selector-button {
@include file-selector-button;
}
&::-webkit-file-upload-button {
@include file-selector-button;
}
&::-ms-browse {
@include file-selector-button;
}
}
// Range
[type="range"] {
// Config
$height-track: 0.25rem;
$height-thumb: 1.25rem;
$border-thumb: 2px;
// Styles
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
height: $height-thumb;
background: none;
// Slider Track
@mixin slider-track {
width: 100%;
height: $height-track;
border-radius: var(--border-radius);
background-color: var(--range-border-color);
@if $enable-transitions {
transition: background-color var(--transition),
box-shadow var(--transition);
}
}
&::-webkit-slider-runnable-track {
@include slider-track;
}
&::-moz-range-track {
@include slider-track;
}
&::-ms-track {
@include slider-track;
}
// Slider Thumb
@mixin slider-thumb {
-webkit-appearance: none;
width: $height-thumb;
height: $height-thumb;
margin-top: #{(-($height-thumb * 0.5) + ($height-track * 0.5))};
border: $border-thumb solid var(--range-thumb-border-color);
border-radius: 50%;
background-color: var(--range-thumb-color);
cursor: pointer;
@if $enable-transitions {
transition: background-color var(--transition),
transform var(--transition);
}
}
&::-webkit-slider-thumb {
@include slider-thumb;
}
&::-moz-range-thumb {
@include slider-thumb;
}
&::-ms-thumb {
@include slider-thumb;
}
&:hover,
&:focus {
--range-border-color: var(--range-active-border-color);
--range-thumb-color: var(--range-thumb-hover-color);
}
&:active {
--range-thumb-color: var(--range-thumb-active-color);
// Slider Thumb
&::-webkit-slider-thumb {
transform: scale(1.25);
}
&::-moz-range-thumb {
transform: scale(1.25);
}
&::-ms-thumb {
transform: scale(1.25);
}
}
}
// Search
// :not() are needed to add Specificity and avoid !important on padding
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
&[type="search"] {
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
border-radius: 5rem;
background-image: var(--icon-search);
background-position: center left 1.125rem;
background-size: 1rem auto;
background-repeat: no-repeat;
&[aria-invalid] {
@if $enable-important {
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
}
@else {
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
}
background-position: center left 1.125rem, center right 0.75rem;
}
&[aria-invalid="false"] {
background-image: var(--icon-search), var(--icon-valid);
}
&[aria-invalid="true"] {
background-image: var(--icon-search), var(--icon-invalid);
}
}
}
// Cancel button
[type="search"] {
&::-webkit-search-cancel-button {
-webkit-appearance: none;
display: none;
}
}
[dir="rtl"] {
:where(input) {
&:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
&[type="search"] {
background-position: center right 1.125rem;
&[aria-invalid] {
background-position: center right 1.125rem, center left 0.75rem;
}
}
}
}
}

View file

@ -0,0 +1,138 @@
/**
* Form elements
* Checkboxes & Radios
*/
[type="checkbox"],
[type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 1.25em;
height: 1.25em;
margin-top: -0.125em;
margin-right: 0.375em;
margin-left: 0;
margin-inline-start: 0;
margin-inline-end: 0.375em;
border-width: var(--border-width);
font-size: inherit;
vertical-align: middle;
cursor: pointer;
&::-ms-check {
display: none; // unstyle IE checkboxes
}
&:checked,
&:checked:active,
&:checked:focus {
--background-color: var(--primary);
--border-color: var(--primary);
background-image: var(--icon-checkbox);
background-position: center;
background-size: 0.75em auto;
background-repeat: no-repeat;
}
& ~ label {
display: inline-block;
margin-right: 0.375em;
margin-bottom: 0;
cursor: pointer;
}
}
// Checkboxes
[type="checkbox"] {
&:indeterminate {
--background-color: var(--primary);
--border-color: var(--primary);
background-image: var(--icon-minus);
background-position: center;
background-size: 0.75em auto;
background-repeat: no-repeat;
}
}
// Radios
[type="radio"] {
border-radius: 50%;
&:checked,
&:checked:active,
&:checked:focus {
--background-color: var(--primary-inverse);
border-width: 0.35em;
background-image: none;
}
}
// Switchs
[type="checkbox"][role="switch"] {
--background-color: var(--switch-background-color);
--border-color: var(--switch-background-color);
--color: var(--switch-color);
// Config
$switch-height: 1.25em;
$switch-width: 2.25em;
$switch-transition: 0.1s ease-in-out;
// Styles
width: $switch-width;
height: $switch-height;
border: var(--border-width) solid var(--border-color);
border-radius: $switch-height;
background-color: var(--background-color);
line-height: $switch-height;
&:focus {
--background-color: var(--switch-background-color);
--border-color: var(--switch-background-color);
}
&:checked {
--background-color: var(--switch-checked-background-color);
--border-color: var(--switch-checked-background-color);
}
&:before {
display: block;
width: calc(#{$switch-height} - (var(--border-width) * 2));
height: 100%;
border-radius: 50%;
background-color: var(--color);
content: "";
@if $enable-transitions {
transition: margin $switch-transition;
}
}
&:checked {
background-image: none;
&::before {
margin-left: calc(#{$switch-width * 0.5} - var(--border-width));
margin-inline-start: calc(#{$switch-width * 0.5} - var(--border-width));
}
}
}
// Aria-invalid
[type="checkbox"],
[type="checkbox"]:checked,
[type="radio"],
[type="radio"]:checked,
[type="checkbox"][role="switch"],
[type="checkbox"][role="switch"]:checked {
&[aria-invalid="false"] {
--border-color: var(--form-element-valid-border-color);
}
&[aria-invalid="true"] {
--border-color: var(--form-element-invalid-border-color);
}
}

View file

@ -0,0 +1,352 @@
/**
* Form elements
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
//
// 1. Change the font styles in all browsers
// 2. Remove the margin in Firefox and Safari
input,
optgroup,
select,
textarea {
margin: 0; // 2
font-size: 1rem; // 1
line-height: var(--line-height); // 1
font-family: inherit; // 1
letter-spacing: inherit; // 2
}
// Show the overflow in IE.
input {
overflow: visible;
}
// Remove the inheritance of text transform in Edge, Firefox, and IE
select {
text-transform: none;
}
// 1. Correct the text wrapping in Edge and IE
// 2. Correct the color inheritance from `fieldset` elements in IE
// 3. Remove the padding so developers are not caught out when they zero out
// `fieldset` elements in all browsers
legend {
max-width: 100%; // 1
padding: 0; // 3
color: inherit; // 2
white-space: normal; // 1
}
// 1. Remove the default vertical scrollbar in IE
textarea {
overflow: auto; // 1
}
// Remove the padding in IE 10
[type="checkbox"],
[type="radio"] {
padding: 0;
}
// Correct the cursor style of increment and decrement buttons in Safari
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
// 1. Correct the odd appearance in Chrome and Safari
// 2. Correct the outline style in Safari
[type="search"] {
-webkit-appearance: textfield; // 1
outline-offset: -2px; // 2
}
// Remove the inner padding in Chrome and Safari on macOS
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
// 1. Correct the inability to style clickable types in iOS and Safari
// 2. Change font properties to `inherit` in Safari
::-webkit-file-upload-button {
-webkit-appearance: button; // 1
font: inherit; // 2
}
// Remove the inner border and padding of focus outlines in Firefox
::-moz-focus-inner {
padding: 0;
border-style: none;
}
// Remove the focus outline in Firefox
:-moz-focusring {
outline: none;
}
// Remove the additional :invalid styles in Firefox
:-moz-ui-invalid {
box-shadow: none;
}
// Change the inconsistent appearance in IE (opinionated)
::-ms-expand {
display: none;
}
// Remove the border and padding in all browsers (opinionated)
[type="file"],
[type="range"] {
padding: 0;
border-width: 0;
}
// Pico
//
// Force height for alternatives input types
input:not([type="checkbox"], [type="radio"], [type="range"]) {
height: calc(
(1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) +
(var(--border-width) * 2)
);
}
// Fieldset
fieldset {
margin: 0;
margin-bottom: var(--spacing);
padding: 0;
border: 0;
}
// Label & legend
label,
fieldset legend {
display: block;
margin-bottom: calc(var(--spacing) * 0.25);
font-weight: var(--form-label-font-weight, var(--font-weight));
}
// Blocks, 100%
input:not([type="checkbox"], [type="radio"]),
select,
textarea {
width: 100%;
}
// Reset appearance (Not Checkboxes, Radios, Range and File)
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
select,
textarea {
appearance: none;
padding: var(--form-element-spacing-vertical)
var(--form-element-spacing-horizontal);
}
// Commons styles
input,
select,
textarea {
--background-color: var(--form-element-background-color);
--border-color: var(--form-element-border-color);
--color: var(--form-element-color);
--box-shadow: none;
border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius);
outline: none;
background-color: var(--background-color);
box-shadow: var(--box-shadow);
color: var(--color);
font-weight: var(--font-weight);
@if $enable-transitions {
transition: background-color var(--transition),
border-color var(--transition), color var(--transition),
box-shadow var(--transition);
}
}
// Active & Focus
input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [readonly]),
:where(select, textarea) {
&:is(:active, :focus) {
--background-color: var(--form-element-active-background-color);
}
}
// Active & Focus
input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]),
:where(select, textarea) {
&:is(:active, :focus) {
--border-color: var(--form-element-active-border-color);
}
}
// Focus
input:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]),
select,
textarea {
&:focus {
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
}
}
// Disabled
input:not([type="submit"], [type="button"], [type="reset"])[disabled],
select[disabled],
textarea[disabled],
:where(fieldset[disabled]) :is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
--background-color: var(--form-element-disabled-background-color);
--border-color: var(--form-element-disabled-border-color);
opacity: var(--form-element-disabled-opacity);
pointer-events: none;
}
// Aria-invalid
:where(input, select, textarea) {
&:not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
&[aria-invalid] {
@if $enable-important {
padding-right: calc(
var(--form-element-spacing-horizontal) + 1.5rem
) !important;
padding-left: var(--form-element-spacing-horizontal);
padding-inline-start: var(--form-element-spacing-horizontal) !important;
padding-inline-end: calc(
var(--form-element-spacing-horizontal) + 1.5rem
) !important;
}
@else {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal);
padding-inline-start: var(--form-element-spacing-horizontal);
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
}
background-position: center right 0.75rem;
background-size: 1rem auto;
background-repeat: no-repeat;
}
&[aria-invalid="false"] {
background-image: var(--icon-valid);
}
&[aria-invalid="true"] {
background-image: var(--icon-invalid);
}
}
&[aria-invalid="false"] {
--border-color: var(--form-element-valid-border-color);
&:is(:active, :focus) {
@if $enable-important {
--border-color: var(--form-element-valid-active-border-color) !important;
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color) !important;
}
@else {
--border-color: var(--form-element-valid-active-border-color);
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color);
}
}
}
&[aria-invalid="true"] {
--border-color: var(--form-element-invalid-border-color);
&:is(:active, :focus) {
@if $enable-important {
--border-color: var(--form-element-invalid-active-border-color) !important;
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important;
}
@else {
--border-color: var(--form-element-invalid-active-border-color);
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color);
}
}
}
}
[dir="rtl"] {
:where(input, select, textarea) {
&:not([type="checkbox"], [type="radio"]) {
&:is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"] ){
background-position: center left 0.75rem;
}
}
}
}
// Placeholder
input::placeholder,
input::-webkit-input-placeholder,
textarea::placeholder,
textarea::-webkit-input-placeholder,
select:invalid {
color: var(--form-element-placeholder-color);
opacity: 1;
}
// Margin bottom (Not Checkboxes and Radios)
input:not([type="checkbox"], [type="radio"]),
select,
textarea {
margin-bottom: var(--spacing);
}
// Select
select {
// Unstyle the caret on `<select>`s in IE10+.
&::-ms-expand {
border: 0;
background-color: transparent;
}
&:not([multiple], [size]) {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal);
padding-inline-start: var(--form-element-spacing-horizontal);
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
background-image: var(--icon-chevron);
background-position: center right 0.75rem;
background-size: 1rem auto;
background-repeat: no-repeat;
}
}
[dir="rtl"] {
select {
&:not([multiple], [size]) {
background-position: center left 0.75rem;
}
}
}
// Helper
$inputs: "input, select, textarea";
@if ($enable-classes and $enable-grid) {
$inputs: $inputs + ", .grid";
}
:where(#{$inputs}) {
+ small {
display: block;
width: 100%;
margin-top: calc(var(--spacing) * -0.75);
margin-bottom: var(--spacing);
color: var(--muted-color);
}
}
// Styles for Input inside a label
label {
> :where(input, select, textarea) {
margin-top: calc(var(--spacing) * 0.25);
}
}

View file

@ -0,0 +1,33 @@
/**
* Miscs
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
//
// 1. Correct the inheritance of border color in Firefox
// 2. Add the correct box sizing in Firefox
hr {
height: 0; // 2
border: 0;
border-top: 1px solid var(--muted-border-color);
color: inherit; // 1
}
// Add the correct display in IE 10+
[hidden],
template {
@if $enable-important {
display: none !important;
}
@else {
display: none;
}
}
// Add the correct display in IE 9-
canvas {
display: inline-block;
}

View file

@ -0,0 +1,50 @@
/**
* Table
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
//
// 1. Collapse border spacing in all browsers (opinionated)
// 2. Remove text indentation from table contents in Chrome, Edge, and Safari
:where(table) {
width: 100%;
border-collapse: collapse; // 1
border-spacing: 0;
text-indent: 0; // 2
}
// Pico
//
// Cells
th,
td {
padding: calc(var(--spacing) / 2) var(--spacing);
border-bottom: var(--border-width) solid var(--table-border-color);
color: var(--color);
font-weight: var(--font-weight);
font-size: var(--font-size);
text-align: left;
text-align: start;
}
// Footer
tfoot {
th,
td {
border-top: var(--border-width) solid var(--table-border-color);
border-bottom: 0;
}
}
// Striped
table {
&[role="grid"] {
tbody tr:nth-child(odd) {
background-color: var(--table-row-stripped-background-color);
}
}
}

View file

@ -0,0 +1,264 @@
/**
* Typography
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
//
// Add the correct font weight in Chrome, Edge, and Safari
b,
strong {
font-weight: bolder;
}
// Prevent `sub` and `sup` elements from affecting the line height in all browsers
sub,
sup {
position: relative;
font-size: 0.75em;
line-height: 0;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
// Pico
//
address,
blockquote,
dl,
figure,
form,
ol,
p,
pre,
table,
ul {
margin-top: 0;
margin-bottom: var(--typography-spacing-vertical);
color: var(--color);
font-style: normal;
font-weight: var(--font-weight);
font-size: var(--font-size);
}
// Links
// 1. Remove the gray background on active links in IE 10
a,
[role="link"] {
--color: var(--primary);
--background-color: transparent;
outline: none;
background-color: var(--background-color); // 1
color: var(--color);
text-decoration: var(--text-decoration);
@if $enable-transitions {
transition: background-color var(--transition), color var(--transition),
text-decoration var(--transition), box-shadow var(--transition);
}
&:is([aria-current], :hover, :active, :focus) {
--color: var(--primary-hover);
--text-decoration: underline;
}
&:focus {
--background-color: var(--primary-focus);
}
@if $enable-classes {
// Secondary
&.secondary {
--color: var(--secondary);
&:is([aria-current], :hover, :active, :focus) {
--color: var(--secondary-hover);
}
&:focus {
--background-color: var(--secondary-focus);
}
}
// Contrast
&.contrast {
--color: var(--contrast);
&:is([aria-current], :hover, :active, :focus) {
--color: var(--contrast-hover);
}
&:focus {
--background-color: var(--contrast-focus);
}
}
}
}
// Headings
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
margin-bottom: var(--typography-spacing-vertical);
color: var(--color);
font-weight: var(--font-weight);
font-size: var(--font-size);
font-family: var(--font-family);
}
h1 {
--color: var(--h1-color);
}
h2 {
--color: var(--h2-color);
}
h3 {
--color: var(--h3-color);
}
h4 {
--color: var(--h4-color);
}
h5 {
--color: var(--h5-color);
}
h6 {
--color: var(--h6-color);
}
// Margin-top for headings after a typography block
:where(address, blockquote, dl, figure, form, ol, p, pre, table, ul) {
~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--typography-spacing-vertical);
}
}
// Heading group
@if $enable-classes == false {
hgroup {
margin-bottom: var(--typography-spacing-vertical);
> * {
margin-bottom: 0;
}
> *:last-child {
--color: var(--muted-color);
--font-weight: unset;
font-size: 1rem;
font-family: unset;
}
}
}
@if $enable-classes {
hgroup,
.headings {
margin-bottom: var(--typography-spacing-vertical);
> * {
margin-bottom: 0;
}
> *:last-child {
--color: var(--muted-color);
--font-weight: unset;
font-size: 1rem;
font-family: unset;
}
}
}
// Paragraphs
p {
margin-bottom: var(--typography-spacing-vertical);
}
// Small
small {
font-size: var(--font-size);
}
// Lists
:where(dl, ol, ul) {
padding-right: 0;
padding-left: var(--spacing);
padding-inline-start: var(--spacing);
padding-inline-end: 0;
li {
margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
}
}
// Margin-top for nested lists
// 1. Remove the margin on nested lists in Chrome, Edge, IE, and Safari
:where(dl, ol, ul) {
:is(dl, ol, ul) {
margin: 0; // 1
margin-top: calc(var(--typography-spacing-vertical) * 0.25);
}
}
ul li {
list-style: square;
}
// Highlighted text
mark {
padding: 0.125rem 0.25rem;
background-color: var(--mark-background-color);
color: var(--mark-color);
vertical-align: baseline;
}
// Blockquote
blockquote {
display: block;
margin: var(--typography-spacing-vertical) 0;
padding: var(--spacing);
border-right: none;
border-left: 0.25rem solid var(--blockquote-border-color);
border-inline-start: 0.25rem solid var(--blockquote-border-color);
border-inline-end: none;
footer {
margin-top: calc(var(--typography-spacing-vertical) * 0.5);
color: var(--blockquote-footer-color);
}
}
// Abbreviations
// 1. Remove underline decoration in Chrome, Edge, IE, Opera, and Safari
abbr[title] {
border-bottom: 1px dotted;
text-decoration: none; // 1
cursor: help;
}
// Ins
ins {
color: var(--ins-color);
text-decoration: none;
}
// del
del {
color: var(--del-color);
}
// selection
::selection {
background-color: var(--primary-focus);
}

View file

@ -0,0 +1,42 @@
@if ($enable-class-container and $enable-classes) {
/**
* Container
*/
.container,
.container-fluid {
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: var(--spacing);
padding-left: var(--spacing);
}
.container {
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
max-width: map-get($viewports, "sm");
padding-right: 0;
padding-left: 0;
}
}
@if map-get($breakpoints, "md") {
@media (min-width: map-get($breakpoints, "md")) {
max-width: map-get($viewports, "md");
}
}
@if map-get($breakpoints, "lg") {
@media (min-width: map-get($breakpoints, "lg")) {
max-width: map-get($viewports, "lg");
}
}
@if map-get($breakpoints, "xl") {
@media (min-width: map-get($breakpoints, "xl")) {
max-width: map-get($viewports, "xl");
}
}
}
}

View file

@ -0,0 +1,48 @@
/**
* Document
* Content-box & Responsive typography
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
//
// 1. Add border box sizing in all browsers (opinionated)
// 2. Backgrounds do not repeat by default (opinionated)
*,
*::before,
*::after {
box-sizing: border-box; // 1
background-repeat: no-repeat; // 2
}
// 1. Add text decoration inheritance in all browsers (opinionated)
// 2. Add vertical alignment inheritance in all browsers (opinionated)
::before,
::after {
text-decoration: inherit; // 1
vertical-align: inherit; // 2
}
// 1. Use the default cursor in all browsers (opinionated)
// 2. Change the line height in all browsers (opinionated)
// 3. Breaks words to prevent overflow in all browsers (opinionated)
// 4. Use a 4-space tab width in all browsers (opinionated)
// 5. Remove the grey highlight on links in iOS (opinionated)
// 6. Prevent adjustments of font size after orientation changes in iOS
:where(:root) {
-webkit-tap-highlight-color: transparent; // 5
-webkit-text-size-adjust: 100%; // 6
text-size-adjust: 100%; // 6
background-color: var(--background-color);
color: var(--color);
font-weight: var(--font-weight);
font-size: var(--font-size);
line-height: var(--line-height); // 2
font-family: var(--font-family);
text-rendering: optimizeLegibility;
overflow-wrap: break-word; // 3
cursor: default; // 1
tab-size: 4; // 4
}

View file

@ -0,0 +1,24 @@
@if ($enable-classes and $enable-grid) {
/**
* Grid
* Minimal grid system with auto-layout columns
*/
.grid {
grid-column-gap: var(--grid-spacing-horizontal);
grid-row-gap: var(--grid-spacing-vertical);
display: grid;
grid-template-columns: 1fr;
margin: 0;
@if map-get($breakpoints, "lg") {
@media (min-width: map-get($breakpoints, "lg")) {
grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
}
}
& > * {
min-width: 0; // HACK for childs in overflow
}
}
}

View file

@ -0,0 +1,16 @@
/**
* Horizontal scroller (<figure>)
*/
// Wrapper to make any content responsive across all viewports
figure {
display: block;
margin: 0;
padding: 0;
overflow-x: auto;
figcaption {
padding: calc(var(--spacing) * 0.5) 0;
color: var(--muted-color);
}
}

View file

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

View file

@ -0,0 +1,70 @@
/**
* Sectioning
* Container and responsive spacings for header, main, footer
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
//
// Render the `main` element consistently in IE
main {
display: block;
}
// Pico
//
// 1. Remove the margin in all browsers (opinionated)
#{$semantic-root-element} {
width: 100%;
margin: 0; // 1
> header,
> main,
> footer {
width: 100%;
margin-right: auto;
margin-left: auto;
// Semantic container
@if $enable-semantic-container {
padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
// Centered viewport
@if $enable-viewport {
@if map-get($breakpoints, "sm") and $enable-viewport {
@media (min-width: map-get($breakpoints, "sm")) {
max-width: map-get($viewports, "sm");
padding-right: 0;
padding-left: 0;
}
}
@if map-get($breakpoints, "md") and $enable-viewport {
@media (min-width: map-get($breakpoints, "md")) {
max-width: map-get($viewports, "md");
}
}
@if map-get($breakpoints, "lg") and $enable-viewport {
@media (min-width: map-get($breakpoints, "lg")) {
max-width: map-get($viewports, "lg");
}
}
@if map-get($breakpoints, "xl") and $enable-viewport {
@media (min-width: map-get($breakpoints, "xl")) {
max-width: map-get($viewports, "xl");
}
}
}
}
// Semantic container
@else {
padding: var(--block-spacing-vertical) 0;
}
}
}

View file

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

View file

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

View file

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

View file

@ -0,0 +1,47 @@
/*!
* Pico CSS v1.5.11 (https://picocss.com)
* Copyright 2019-2023 - Licensed under MIT
*
* Slim version example
* You can export only the modules you need
*/
// Config
// --------------------
// Enable responsive spacings for <header>, <main>, <footer>, <section>, <article>
$enable-responsive-spacings: false;
// Enable transitions
$enable-transitions: false;
// Enable overriding with !important
$enable-important: false;
// Pico Lib
// --------------------
// Config
@import "variables";
// Theming
@import "themes/default";
// Layout
@import "layout/document"; // html
@import "layout/sectioning"; // body, header, main, footer
@import "layout/container"; // .container, .container-fluid
@import "layout/section"; // section
@import "layout/grid"; // .grid
@import "layout/scroller"; // figure
// Content
@import "content/typography"; // a, headings, p, ul, blockquote, ...
@import "content/embedded"; // audio, canvas, iframe, img, svg, video
@import "content/button"; // button, a[role=button], type=button, type=submit ...
@import "content/form"; // input, select, textarea, label, fieldset, legend
@import "content/table"; // table, tr, td, ...
// Utilities
@import "utilities/accessibility"; // -ms-touch-action, aria-*
@import "utilities/reduce-motion"; // prefers-reduced-motion

View file

@ -0,0 +1,37 @@
/**
* Theme: default
*/
// Variables
@import "../variables";
@import "default/colors";
// Commons styles
@import "default/styles";
// Light theme (Default)
// Can be forced with data-theme="light"
@import "default/light";
// Dark theme (Auto)
// Automatically enabled if user has Dark mode enabled
@import "default/dark";
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) {
@include dark;
}
}
// Dark theme (Forced)
// Enabled if forced with data-theme="dark"
[data-theme="dark"] {
@include dark;
}
// Accent-color
progress,
[type="checkbox"],
[type="radio"],
[type="range"] {
accent-color: var(--primary);
}

View file

@ -0,0 +1,65 @@
// Navy-Grey
$grey-hue: 205 !default;
$grey-50: hsl($grey-hue, 20%, 94%) !default;
$grey-100: hsl($grey-hue, 18%, 86%) !default;
$grey-200: hsl($grey-hue, 16%, 77%) !default;
$grey-300: hsl($grey-hue, 14%, 68%) !default;
$grey-400: hsl($grey-hue, 12%, 59%) !default;
$grey-500: hsl($grey-hue, 10%, 50%) !default;
$grey-600: hsl($grey-hue, 15%, 41%) !default;
$grey-700: hsl($grey-hue, 20%, 32%) !default;
$grey-800: hsl($grey-hue, 25%, 23%) !default;
$grey-900: hsl($grey-hue, 30%, 15%) !default;
// Light Blue
$primary-hue: 195 !default;
$primary-50: hsl($primary-hue, 90%, 94%) !default;
$primary-100: hsl($primary-hue, 88%, 86%) !default;
$primary-200: hsl($primary-hue, 86%, 77%) !default;
$primary-300: hsl($primary-hue, 84%, 68%) !default;
$primary-400: hsl($primary-hue, 82%, 59%) !default;
$primary-500: hsl($primary-hue, 80%, 50%) !default;
$primary-600: hsl($primary-hue, 85%, 41%) !default;
$primary-700: hsl($primary-hue, 90%, 32%) !default;
$primary-800: hsl($primary-hue, 95%, 23%) !default;
$primary-900: hsl($primary-hue, 100%, 15%) !default;
// Black & White
$black: #000 !default;
$white: #fff !default;
// Amber
$amber-50: #fff8e1 !default;
$amber-100: #ffecb3 !default;
$amber-200: #ffe082 !default;
$amber-300: #ffd54f !default;
$amber-400: #ffca28 !default;
$amber-500: #ffc107 !default;
$amber-600: #ffb300 !default;
$amber-700: #ffa000 !default;
$amber-800: #ff8f00 !default;
$amber-900: #ff6f00 !default;
// Green
$green-50: #e8f5e9 !default;
$green-100: #c8e6c9 !default;
$green-200: #a5d6a7 !default;
$green-300: #81c784 !default;
$green-400: #66bb6a !default;
$green-500: #4caf50 !default;
$green-600: #43a047 !default;
$green-700: #388e3c !default;
$green-800: #2e7d32 !default;
$green-900: #1b5e20 !default;
// Red
$red-50: #ffebee !default;
$red-100: #ffcdd2 !default;
$red-200: #ef9a9a !default;
$red-300: #e57373 !default;
$red-400: #ef5350 !default;
$red-500: #f44336 !default;
$red-600: #e53935 !default;
$red-700: #d32f2f !default;
$red-800: #c62828 !default;
$red-900: #b71c1c !default;

View file

@ -0,0 +1,159 @@
@import "../../functions";
// Default: Dark theme
@mixin dark {
--background-color: #{mix($black, $grey-900, 37.5%)};
// Texts colors
--color: #{$grey-200};
--h1-color: #{$grey-50};
--h2-color: #{mix($grey-100, $grey-50)};
--h3-color: #{$grey-100};
--h4-color: #{mix($grey-200, $grey-100)};
--h5-color: #{$grey-200};
--h6-color: #{mix($grey-300, $grey-200)};
// Muted colors
--muted-color: #{$grey-500};
--muted-border-color: #{mix($grey-900, $grey-800, 75%)};
// Primary colors
--primary: #{$primary-600};
--primary-hover: #{$primary-500};
--primary-focus: #{rgba($primary-600, 0.25)};
--primary-inverse: #{$white};
// Secondary colors
--secondary: #{$grey-600};
--secondary-hover: #{$grey-500};
--secondary-focus: #{rgba($grey-500, 0.25)};
--secondary-inverse: #{$white};
// Contrast colors
--contrast: #{$grey-50};
--contrast-hover: #{$white};
--contrast-focus: #{rgba($grey-500, 0.25)};
--contrast-inverse: #{$black};
// Highlighted text (<mark>)
--mark-background-color: #{mix($grey-300, $amber-300)};
--mark-color: #{mix($black, $grey-900, 37.5%)};
// Inserted (<ins>) & Deleted (<ins>)
--ins-color: #{$green-700};
--del-color: #{$red-800};
// Blockquote
--blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color);
// Button
// To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)'
// Don't use, 'none, 'false, 'null', '0', etc.
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
// Form elements
--form-element-background-color: #{mix($black, $grey-900, 37.5%)};
--form-element-border-color: #{mix($grey-800, $grey-700)};
--form-element-color: var(--color);
--form-element-placeholder-color: var(--muted-color);
--form-element-active-background-color: var(--form-element-background-color);
--form-element-active-border-color: var(--primary);
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #{$grey-800};
--form-element-disabled-border-color: #{$grey-700};
--form-element-disabled-opacity: 0.5;
--form-element-invalid-border-color: #{$red-900};
--form-element-invalid-active-border-color: #{$red-800};
--form-element-invalid-focus-color: #{rgba($red-800, 0.25)};
--form-element-valid-border-color: #{$green-800};
--form-element-valid-active-border-color: #{$green-700};
--form-element-valid-focus-color: #{rgba($green-700, 0.25)};
// Switch (input[type="checkbox"][role="switch"])
--switch-background-color: #{mix($grey-800, $grey-700)};
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
// Range (input[type="range"])
--range-border-color: #{mix($grey-900, $grey-800)};
--range-active-border-color: #{$grey-800};
--range-thumb-border-color: var(--background-color);
--range-thumb-color: var(--secondary);
--range-thumb-hover-color: var(--secondary-hover);
--range-thumb-active-color: var(--primary);
// Table
--table-border-color: var(--muted-border-color);
--table-row-stripped-background-color: #{rgba($grey-500, 0.05)};
// Code
--code-background-color: #{mix($black, $grey-900, 12.5%)};
--code-color: var(--muted-color);
--code-kbd-background-color: var(--contrast);
--code-kbd-color: var(--contrast-inverse);
--code-tag-color: #{hsl(330, 30%, 50%)};
--code-property-color: #{hsl(185, 30%, 50%)};
--code-value-color: #{hsl(40, 10%, 50%)};
--code-comment-color: #{mix($grey-700, $grey-600)};
// Accordion (<details>)
--accordion-border-color: var(--muted-border-color);
--accordion-active-summary-color: var(--primary);
--accordion-close-summary-color: var(--color);
--accordion-open-summary-color: var(--muted-color);
// Card (<article>)
$box-shadow-elevation: 1rem;
$box-shadow-blur-strengh: 6rem;
$box-shadow-opacity: 0.06;
--card-background-color: #{mix($black, $grey-900, 25%)};
--card-border-color: var(--card-background-color);
--card-box-shadow:
#{($box-shadow-elevation * 0.5 * 0.029)} #{($box-shadow-elevation * 0.029)} #{($box-shadow-blur-strengh * 0.029)} #{rgba($black, ($box-shadow-opacity * 0.283))},
#{($box-shadow-elevation * 0.5 * 0.067)} #{($box-shadow-elevation * 0.067)} #{($box-shadow-blur-strengh * 0.067)} #{rgba($black, ($box-shadow-opacity * 0.4))},
#{($box-shadow-elevation * 0.5 * 0.125)} #{($box-shadow-elevation * 0.125)} #{($box-shadow-blur-strengh * 0.125)} #{rgba($black, ($box-shadow-opacity * 0.5))},
#{($box-shadow-elevation * 0.5 * 0.225)} #{($box-shadow-elevation * 0.225)} #{($box-shadow-blur-strengh * 0.225)} #{rgba($black, ($box-shadow-opacity * 0.6))},
#{($box-shadow-elevation * 0.5 * 0.417)} #{($box-shadow-elevation * 0.417)} #{($box-shadow-blur-strengh * 0.417)} #{rgba($black, ($box-shadow-opacity * 0.717))},
#{($box-shadow-elevation * 0.5)} #{$box-shadow-elevation} #{$box-shadow-blur-strengh} #{rgba($black, $box-shadow-opacity)},
0 0 0 0.0625rem #{rgba($black, ($box-shadow-opacity * 0.25) )};
--card-sectionning-background-color: #{mix($black, $grey-900, 12.5%)};
// Dropdown (<details role="list">)
--dropdown-background-color: #{$grey-900};
--dropdown-border-color: #{mix($grey-900, $grey-800)};
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-hover-background-color: #{rgba(mix($grey-900, $grey-800), 0.75)};
// Modal (<dialog>)
--modal-overlay-background-color: #{rgba(mix($grey-900, $grey-800), 0.8)};
// Progress
--progress-background-color: #{mix($grey-900, $grey-800)};
--progress-color: var(--primary);
// Loading ([aria-busy=true])
--loading-spinner-opacity: 0.5;
// Tooltip ([data-tooltip])
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
// Icons
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-300)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($white)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($black)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-500)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-300)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($red-900)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-300)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-300)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($green-800)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
// Document
color-scheme: dark;
}

View file

@ -0,0 +1,159 @@
@import "../../functions";
// Default: Light theme
[data-theme="light"],
:root:not([data-theme="dark"]) {
--background-color: #{$white};
// Texts colors
--color: #{$grey-700};
--h1-color: #{$grey-900};
--h2-color: #{mix($grey-900, $grey-800)};
--h3-color: #{$grey-800};
--h4-color: #{mix($grey-800, $grey-700)};
--h5-color: #{$grey-700};
--h6-color: #{mix($grey-700, $grey-600)};
// Muted colors
--muted-color: #{$grey-500};
--muted-border-color: #{$grey-50};
// Primary colors
--primary: #{$primary-600};
--primary-hover: #{$primary-700};
--primary-focus: #{rgba($primary-600, 0.125)};
--primary-inverse: #{$white};
// Secondary colors
--secondary: #{$grey-600};
--secondary-hover: #{$grey-700};
--secondary-focus: #{rgba($grey-600, 0.125)};
--secondary-inverse: #{$white};
// Contrast colors
--contrast: #{$grey-900};
--contrast-hover: #{$black};
--contrast-focus: #{rgba($grey-600, 0.125)};
--contrast-inverse: #{$white};
// Highlighted text (<mark>)
--mark-background-color: #{mix($amber-100, $amber-50)};
--mark-color: #{mix($grey-900, $amber-900, 75%)};
// Inserted (<ins>) & Deleted (<ins>)
--ins-color: #{$green-700};
--del-color: #{$red-800};
// Blockquote
--blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color);
// Button
// To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)'
// Don't use, 'none, 'false, 'null', '0', etc.
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
// Form elements
--form-element-background-color: transparent;
--form-element-border-color: #{$grey-300};
--form-element-color: var(--color);
--form-element-placeholder-color: var(--muted-color);
--form-element-active-background-color: transparent;
--form-element-active-border-color: var(--primary);
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #{$grey-100};
--form-element-disabled-border-color: #{$grey-300};
--form-element-disabled-opacity: 0.5;
--form-element-invalid-border-color: #{$red-800};
--form-element-invalid-active-border-color: #{$red-700};
--form-element-invalid-focus-color: #{rgba($red-700, 0.125)};
--form-element-valid-border-color: #{$green-700};
--form-element-valid-active-border-color: #{$green-600};
--form-element-valid-focus-color: #{rgba($green-600, 0.125)};
// Switch (input[type="checkbox"][role="switch"])
--switch-background-color: #{$grey-200};
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
// Range (input[type="range"])
--range-border-color: #{$grey-100};
--range-active-border-color: #{$grey-200};
--range-thumb-border-color: var(--background-color);
--range-thumb-color: var(--secondary);
--range-thumb-hover-color: var(--secondary-hover);
--range-thumb-active-color: var(--primary);
// Table
--table-border-color: var(--muted-border-color);
--table-row-stripped-background-color: #{mix($grey-50, $white)};
// Code
--code-background-color: #{$grey-50};
--code-color: var(--muted-color);
--code-kbd-background-color: var(--contrast);
--code-kbd-color: var(--contrast-inverse);
--code-tag-color: #{hsl(330, 40%, 50%)};
--code-property-color: #{hsl(185, 40%, 40%)};
--code-value-color: #{hsl(40, 20%, 50%)};
--code-comment-color: #{$grey-300};
// Accordion (<details>)
--accordion-border-color: var(--muted-border-color);
--accordion-close-summary-color: var(--color);
--accordion-open-summary-color: var(--muted-color);
// Card (<article>)
$box-shadow-elevation: 1rem;
$box-shadow-blur-strengh: 6rem;
$box-shadow-opacity: 0.06;
--card-background-color: var(--background-color);
--card-border-color: var(--muted-border-color);
--card-box-shadow:
#{($box-shadow-elevation * 0.5 * 0.029)} #{($box-shadow-elevation * 0.029)} #{($box-shadow-blur-strengh * 0.029)} #{rgba($grey-900, ($box-shadow-opacity * 0.283))},
#{($box-shadow-elevation * 0.5 * 0.067)} #{($box-shadow-elevation * 0.067)} #{($box-shadow-blur-strengh * 0.067)} #{rgba($grey-900, ($box-shadow-opacity * 0.4))},
#{($box-shadow-elevation * 0.5 * 0.125)} #{($box-shadow-elevation * 0.125)} #{($box-shadow-blur-strengh * 0.125)} #{rgba($grey-900, ($box-shadow-opacity * 0.5))},
#{($box-shadow-elevation * 0.5 * 0.225)} #{($box-shadow-elevation * 0.225)} #{($box-shadow-blur-strengh * 0.225)} #{rgba($grey-900, ($box-shadow-opacity * 0.6))},
#{($box-shadow-elevation * 0.5 * 0.417)} #{($box-shadow-elevation * 0.417)} #{($box-shadow-blur-strengh * 0.417)} #{rgba($grey-900, ($box-shadow-opacity * 0.717))},
#{($box-shadow-elevation * 0.5)} #{$box-shadow-elevation} #{$box-shadow-blur-strengh} #{rgba($grey-900, $box-shadow-opacity)},
0 0 0 0.0625rem #{rgba($grey-900, ($box-shadow-opacity * 0.25) )};
--card-sectionning-background-color: #{mix($grey-50, $white, 25%)};
// Dropdown (<details role="list">)
--dropdown-background-color: #{mix($grey-50, $white, 25%)};
--dropdown-border-color: #{mix($grey-100, $grey-50)};
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-hover-background-color: #{$grey-50};
// Modal (<dialog>)
--modal-overlay-background-color: #{rgba($grey-100, 0.7)};
// Progress
--progress-background-color: #{$grey-100};
--progress-color: var(--primary);
// Loading ([aria-busy=true])
--loading-spinner-opacity: 0.5;
// Tooltip ([data-tooltip])
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
// Icons
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-700)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($white)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($white)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-500)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-700)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($red-800)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-700)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-700)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($green-700)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
// Document
color-scheme: light;
}

View file

@ -0,0 +1,247 @@
// Commons Styles
:root {
// Typography
--font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
"Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol", "Noto Color Emoji";
--line-height: 1.5;
--font-weight: 400;
--font-size: 16px;
// Responsive typography
@if $enable-responsive-typography {
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
--font-size: 17px;
}
}
@if map-get($breakpoints, "md") {
@media (min-width: map-get($breakpoints, "md")) {
--font-size: 18px;
}
}
@if map-get($breakpoints, "lg") {
@media (min-width: map-get($breakpoints, "lg")) {
--font-size: 19px;
}
}
@if map-get($breakpoints, "xl") {
@media (min-width: map-get($breakpoints, "xl")) {
--font-size: 20px;
}
}
}
// Borders
--border-radius: 0.25rem;
--border-width: 1px;
--outline-width: 3px;
// Spacings
--spacing: 1rem;
// Spacings for typography elements
--typography-spacing-vertical: 1.5rem;
// Spacings for body > header, body > main, body > footer, section, article
--block-spacing-vertical: calc(var(--spacing) * 2);
--block-spacing-horizontal: var(--spacing);
@if ($enable-classes and $enable-grid) {
--grid-spacing-vertical: 0;
--grid-spacing-horizontal: var(--spacing);
}
// Spacings for form elements and button
--form-element-spacing-vertical: 0.75rem;
--form-element-spacing-horizontal: 1rem;
// Spacings for nav component
--nav-element-spacing-vertical: 1rem;
--nav-element-spacing-horizontal: 0.5rem;
--nav-link-spacing-vertical: 0.5rem;
--nav-link-spacing-horizontal: 0.5rem;
// Font weight for form labels & fieldsets legend
--form-label-font-weight: var(--font-weight);
// Transitions
--transition: 0.2s ease-in-out;
// Modal (<dialog>)
--modal-overlay-backdrop-filter: blur(0.25rem);
}
// Responsives spacings
@if $enable-responsive-spacings {
// Sectioning
#{$semantic-root-element} > header,
#{$semantic-root-element} > main,
#{$semantic-root-element} > footer,
section {
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
--block-spacing-vertical: calc(var(--spacing) * 2.5);
}
}
@if map-get($breakpoints, "md") {
@media (min-width: map-get($breakpoints, "md")) {
--block-spacing-vertical: calc(var(--spacing) * 3);
}
}
@if map-get($breakpoints, "lg") {
@media (min-width: map-get($breakpoints, "lg")) {
--block-spacing-vertical: calc(var(--spacing) * 3.5);
}
}
@if map-get($breakpoints, "xl") {
@media (min-width: map-get($breakpoints, "xl")) {
--block-spacing-vertical: calc(var(--spacing) * 4);
}
}
}
// Card (<article>)
article {
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
--block-spacing-horizontal: calc(var(--spacing) * 1.25);
}
}
@if map-get($breakpoints, "md") {
@media (min-width: map-get($breakpoints, "md")) {
--block-spacing-horizontal: calc(var(--spacing) * 1.5);
}
}
@if map-get($breakpoints, "lg") {
@media (min-width: map-get($breakpoints, "lg")) {
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
}
}
@if map-get($breakpoints, "xl") {
@media (min-width: map-get($breakpoints, "xl")) {
--block-spacing-horizontal: calc(var(--spacing) * 2);
}
}
}
// Modal
dialog > article {
--block-spacing-vertical: calc(var(--spacing) * 2);
--block-spacing-horizontal: var(--spacing);
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
--block-spacing-vertical: calc(var(--spacing) * 2.5);
--block-spacing-horizontal: calc(var(--spacing) * 1.25);
}
}
@if map-get($breakpoints, "md") {
@media (min-width: map-get($breakpoints, "md")) {
--block-spacing-vertical: calc(var(--spacing) * 3);
--block-spacing-horizontal: calc(var(--spacing) * 1.5);
}
}
}
}
// Link
a {
--text-decoration: none;
// Secondary & Contrast
@if $enable-classes {
&.secondary,
&.contrast {
--text-decoration: underline;
}
}
}
// Small
small {
--font-size: 0.875em;
}
// Headings
h1,
h2,
h3,
h4,
h5,
h6 {
--font-weight: 700;
}
h1 {
--font-size: 2rem;
--typography-spacing-vertical: 3rem;
}
h2 {
--font-size: 1.75rem;
--typography-spacing-vertical: 2.625rem;
}
h3 {
--font-size: 1.5rem;
--typography-spacing-vertical: 2.25rem;
}
h4 {
--font-size: 1.25rem;
--typography-spacing-vertical: 1.874rem;
}
h5 {
--font-size: 1.125rem;
--typography-spacing-vertical: 1.6875rem;
}
// Forms elements
[type="checkbox"],
[type="radio"] {
--border-width: 2px;
}
[type="checkbox"][role="switch"] {
--border-width: 3px;
}
// Table
thead,
tfoot {
th,
td {
--border-width: 3px;
}
}
:not(thead, tfoot) > * > td {
--font-size: 0.875em;
}
// Code
pre,
code,
kbd,
samp {
--font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace",
"Noto Mono", "Oxygen Mono", "Liberation Mono", monospace,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
kbd {
--font-weight: bolder;
}

View file

@ -0,0 +1,52 @@
/**
* Accessibility & User interaction
*/
// Based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
//
// Accessibility
// Change the cursor on control elements in all browsers (opinionated)
[aria-controls] {
cursor: pointer;
}
// Change the cursor on disabled, not-editable, or otherwise inoperable elements in all browsers (opinionated)
[aria-disabled="true"],
[disabled] {
cursor: not-allowed;
}
// Change the display on visually hidden accessible elements in all browsers (opinionated)
[aria-hidden="false"][hidden] {
display: initial;
}
[aria-hidden="false"][hidden]:not(:focus) {
clip: rect(0, 0, 0, 0);
position: absolute;
}
// User interaction
// Remove the tapping delay in IE 10
a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] {
-ms-touch-action: manipulation;
}
// Pico
//
[dir="rtl"] {
direction: rtl;
}

View file

@ -0,0 +1,58 @@
/**
* Loading ([aria-busy=true])
*/
// Cursor
[aria-busy="true"] {
cursor: progress;
}
// Everyting except form elements
[aria-busy="true"]:not(input, select, textarea, html) {
&::before {
display: inline-block;
width: 1em;
height: 1em;
border: 0.1875em solid currentColor;
border-radius: 1em;
border-right-color: transparent;
content: "";
vertical-align: text-bottom;
vertical-align: -.125em; // Visual alignment
animation: spinner 0.75s linear infinite;
opacity: var(--loading-spinner-opacity);
}
&:not(:empty) {
&::before {
margin-right: calc(var(--spacing) * 0.5);
margin-left: 0;
margin-inline-start: 0;
margin-inline-end: calc(var(--spacing) * 0.5);
}
}
&:empty {
text-align: center;
}
}
// Buttons and links
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
a {
&[aria-busy="true"] {
pointer-events: none;
}
}
// Animation: rotate
@keyframes spinner {
to {
transform: rotate(360deg);
}
}

View file

@ -0,0 +1,27 @@
@if $enable-transitions and $enable-important {
/**
* Reduce Motion Features
*/
// Based on :
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
//
// 1. Remove animations when motion is reduced (opinionated)
// 2. Remove fixed background attachments when motion is reduced (opinionated)
// 3. Remove timed scrolling behaviors when motion is reduced (opinionated)
// 4. Remove transitions when motion is reduced (opinionated)
@media (prefers-reduced-motion: reduce) {
*:not([aria-busy="true"]),
:not([aria-busy="true"])::before,
:not([aria-busy="true"])::after {
background-attachment: initial !important; // 2
animation-duration: 1ms !important; // 1
animation-delay: -1ms !important; // 1
animation-iteration-count: 1 !important; // 1
scroll-behavior: auto !important; // 3
transition-delay: 0s !important; // 4
transition-duration: 0s !important; // 4
}
}
}

View file

@ -0,0 +1,278 @@
/**
* Tooltip ([data-tooltip])
*/
[data-tooltip] {
position: relative;
&:not(a, button, input) {
border-bottom: 1px dotted;
text-decoration: none;
cursor: help;
}
&[data-placement="top"]::before,
&[data-placement="top"]::after,
&::before,
&::after {
display: block;
z-index: 99;
position: absolute;
bottom: 100%;
left: 50%;
padding: .25rem .5rem;
overflow: hidden;
transform: translate(-50%, -.25rem);
border-radius: var(--border-radius);
background: var(--tooltip-background-color);
content: attr(data-tooltip);
color: var(--tooltip-color);
font-style: normal;
font-weight: var(--font-weight);
font-size: .875rem;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
opacity: 0;
pointer-events: none;
}
// Caret
&[data-placement="top"]::after,
&::after {
padding: 0;
transform: translate(-50%, 0rem);
border-top: .3rem solid;
border-right: .3rem solid transparent;
border-left: .3rem solid transparent;
border-radius: 0;
background-color: transparent;
content: "";
color: var(--tooltip-background-color);
}
&[data-placement="bottom"] {
&::before,
&::after {
top: 100%;
bottom: auto;
transform: translate(-50%, .25rem);
}
&:after{
transform: translate(-50%, -.3rem);
border: .3rem solid transparent;
border-bottom: .3rem solid;
}
}
&[data-placement="left"] {
&::before,
&::after {
top: 50%;
right: 100%;
bottom: auto;
left: auto;
transform: translate(-.25rem, -50%);
}
&:after{
transform: translate(.3rem, -50%);
border: .3rem solid transparent;
border-left: .3rem solid;
}
}
&[data-placement="right"] {
&::before,
&::after {
top: 50%;
right: auto;
bottom: auto;
left: 100%;
transform: translate(.25rem, -50%);
}
&:after{
transform: translate(-.3rem, -50%);
border: .3rem solid transparent;
border-right: .3rem solid;
}
}
// Display
&:focus,
&:hover {
&::before,
&::after {
opacity: 1;
}
}
@if $enable-transitions {
// Animations, excluding touch devices
@media (hover: hover) and (pointer: fine) {
&[data-placement="bottom"]:focus,
&[data-placement="bottom"]:hover
&:focus,
&:hover {
&::before,
&::after {
animation-duration: .2s;
animation-name: tooltip-slide-top;
}
&::after {
animation-name: tooltip-caret-slide-top;
}
}
&[data-placement="bottom"] {
&:focus,
&:hover {
&::before,
&::after {
animation-duration: .2s;
animation-name: tooltip-slide-bottom;
}
&::after {
animation-name: tooltip-caret-slide-bottom;
}
}
}
&[data-placement="left"] {
&:focus,
&:hover {
&::before,
&::after {
animation-duration: .2s;
animation-name: tooltip-slide-left;
}
&::after {
animation-name: tooltip-caret-slide-left;
}
}
}
&[data-placement="right"] {
&:focus,
&:hover {
&::before,
&::after {
animation-duration: .2s;
animation-name: tooltip-slide-right;
}
&::after {
animation-name: tooltip-caret-slide-right;
}
}
}
}
@keyframes tooltip-slide-top {
from {
transform: translate(-50%, .75rem);
opacity: 0;
}
to {
transform: translate(-50%, -.25rem);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-top {
from {
opacity: 0;
}
50% {
transform: translate(-50%, -.25rem);
opacity: 0;
}
to {
transform: translate(-50%, 0rem);
opacity: 1;
}
}
@keyframes tooltip-slide-bottom {
from {
transform: translate(-50%, -.75rem);
opacity: 0;
}
to {
transform: translate(-50%, .25rem);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-bottom {
from {
opacity: 0;
}
50% {
transform: translate(-50%, -.5rem);
opacity: 0;
}
to {
transform: translate(-50%, -.3rem);
opacity: 1;
}
}
@keyframes tooltip-slide-left {
from {
transform: translate(.75rem, -50%);
opacity: 0;
}
to {
transform: translate(-.25rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-left {
from {
opacity: 0;
}
50% {
transform: translate(.05rem, -50%);
opacity: 0;
}
to {
transform: translate(.3rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-slide-right {
from {
transform: translate(-.75rem, -50%);
opacity: 0;
}
to {
transform: translate(.25rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-right {
from {
opacity: 0;
}
50% {
transform: translate(-.05rem, -50%);
opacity: 0;
}
to {
transform: translate(-.3rem, -50%);
opacity: 1;
}
}
}
}

View file

@ -128,6 +128,7 @@ body>main {
line-height: 1.0em;
max-width: 8em;
padding: 5px;
white-space: nowrap;
color: $roomstate_color_unknown;
@ -144,7 +145,7 @@ body>main {
}
}
// CCCHH Icon in Menu
// CCCHH icon & hamburger menu in header
@media only screen and (prefers-color-scheme: light) {
.invert-on-light {
filter: invert(1);
@ -253,6 +254,167 @@ body>main {
box-shadow: var(--card-box-shadow);
padding: 0;
margin: 0;
--main-header-content-height: calc(var(--font-size) * var(--line-height));
.container {
display: block flex;
position: relative;
flex-direction: row;
justify-content: start;
align-items: center;
column-gap: var(--spacing);
}
.menu-button,
.hamburger,
.in-nav-home {
// Don't display, when not in mobile mode.
display: none;
}
.menu {
// Set this to 100% to force the roomstate to "right-align".
width: 100%;
}
.ccchh-logo {
padding-top: var(--nav-element-spacing-vertical);
padding-bottom: var(--nav-element-spacing-vertical);
img {
height: var(--main-header-content-height);
}
}
// When the header content doesn't display nicely anymore, switch to mobile mode.
@import "../pico-1.5.11/scss/variables";
@media (max-width: map-get($breakpoints, md)) {
.hamburger-button {
display: unset;
position: absolute;
top: calc(var(--nav-element-spacing-vertical));
right: var(--spacing);
height: var(--main-header-content-height);
// To have an attempt at a good-looking cross, when converting the burger
// stack to one, set the width to the height / sin(45).
width: calc(var(--main-header-content-height) / 0.707106781);
}
.menu-button {
z-index: 3;
opacity: 0%;
border: 0;
margin: 0;
}
.hamburger {
display: flex;
flex-direction: column;
justify-content: space-between;
.hamburger-line {
height: 4px;
width: 100%;
background-color: white;
}
}
.in-nav-home {
display: unset;
}
// Don't display the menu per default in mobile mode.
.menu {
display: none;
}
.menu-button:checked~.menu {
display: unset;
position: fixed;
width: 100%;
height: 100%;
top: calc(var(--main-header-content-height) + (var(--nav-element-spacing-vertical) * 2) + 3px);
left: 0;
background-color: var(--background-color);
ul,
li {
display: block;
padding-top: calc(var(--nav-element-spacing-vertical) * 0.5);
padding-bottom: calc(var(--nav-element-spacing-vertical) * 0.5);
}
ul {
padding-left: var(--spacing);
padding-right: var(--spacing);
}
li {
padding-left: 0;
padding-right: 0;
border-bottom: 0.2em solid var(--muted-border-color);
display: flex;
// borrowed form pico css for li
margin-bottom: calc(var(--typography-spacing-vertical) * .25);
}
a {
flex-grow: 1;
}
.main-nav {
margin: auto;
}
// Use the media queries, which we need, from here:
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
ul {
padding-left: 0;
padding-right: 0;
}
.main-nav {
max-width: map-get($viewports, "sm");
}
}
}
}
.hamburger-line-top {
transform-origin: top right;
transition: all 0.4s ease-in-out;
}
.hamburger-line-middle {
transition: all 0.2s ease-in-out;
}
.hamburger-line-bottom {
transform-origin: bottom right;
transition: all 0.4s ease-in-out;
}
.menu-button:checked~.hamburger {
.hamburger-line-top {
// After some adjustments to make the cross look decent, rotate -45deg.
transform: translateX(-1.5px) translateY(-1.5px) rotate(-45deg);
}
.hamburger-line-middle {
transform: scaleY(0);
}
.hamburger-line-bottom {
// After some adjustments to make the cross look decent, rotate 45deg.
transform: translateX(-1.5px) translateY(1.5px) rotate(45deg);
}
}
}
}

View file

@ -0,0 +1,68 @@
/*!
* 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,6 +61,11 @@
<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

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

View file

@ -5,7 +5,8 @@
</div>
{{- $events := where (.Site.GetPage "blog").Pages ".Params.categories" "event" }}
{{- $upcoming := where $events ".Params.date" "ge" now }}
{{- $lookback := time.ParseDuration "-6h" }}
{{- $upcoming := where $events ".Params.date" "ge" (time.Now.Add $lookback) }}
{{ 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>
@ -18,6 +19,9 @@
{{- else }}
<p>{{ .Summary | safeHTML }}</p>
{{- end }}
{{- if .Truncated }}
<p class="ellipsis"><a href="{{ .RelPermalink }}">mehr lesen</a></p>
{{- end }}
</div>
{{- end }}
</div>
@ -39,7 +43,11 @@
{{- 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,16 +1,25 @@
{{- $options := dict "transpiler" "libsass" "targetPath" "css/style.css" -}}
{{- $cssOptionsMain := dict "transpiler" "libsass" "targetPath" "css/style.css" -}}
{{- $cssOptionsPico := dict "transpiler" "libsass" "targetPath" "css/pico.css" -}}
{{- $jsResources := resources.Match "js/*.js" }}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
{{- partial "robots.html" . -}}
{{- with resources.GetRemote "https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css" }}
<link rel="stylesheet" href="{{ .RelPermalink }}" crossorigin="anonymous">
{{ end }}
{{ with resources.Get "sass/main.scss" | toCSS $options | minify | fingerprint -}}
<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 -}}
<link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
{{- end }}
<link rel="stylesheet" href="{{ .Site.BaseURL }}thirdparty/fontawesome6/css/all.min.css" crossorigin="anonymous">
{{ 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">
{{- range $jsResources }}
{{- with . | js.Build | minify | fingerprint }}
@ -23,4 +32,3 @@
{{- end }}
<title>{{ .Title }}</title>
<!-- TODO: Favicon -->

View file

@ -1,8 +1,21 @@
<header class="main-header header">
<div class="container">
{{ $image := resources.Get "images/logo.svg" }}
<a href="{{ .Site.Home.RelPermalink }}" class="ccchh-logo">
<img src="{{ $image.RelPermalink }}" class="invert-on-light" alt="CCCHH Icon">
</a>
<input class="menu-button hamburger-button" type="checkbox">
<div class="hamburger hamburger-button invert-on-light">
<div class="hamburger-line hamburger-line-top"></div>
<div class="hamburger-line hamburger-line-middle"></div>
<div class="hamburger-line hamburger-line-bottom"></div>
</div>
<nav class="menu">
{{- partial "menu.html" (dict "menuID" "main" "page" . ) -}}
</nav>
<div class="roomstate" id="roomstate">
<span class="state">unbekannt</span><br><span class="duration">(seit&nbsp;)</span>
</div>
</div>
</header>

View file

@ -2,10 +2,9 @@
{{- $menuID := .menuID -}}
{{- $menuContent := index site.Menus .menuID -}}
<ul>
<ul class="main-nav">
{{- if compare.Eq $menuID "main" -}}
{{- $image := resources.Get "images/logo.svg" }}
<li><a href="/{{ .Site.Home.URL }}"><img src="{{ $image.RelPermalink }}" class="invert-on-light" width="150px" alt="CCCHH Icon"></a></li>
<li><a href="/{{ .Site.Home.RelPermalink }}" class="in-nav-home">Home</a></li>
{{- end }}
{{- range $menuContent }}
<li>
@ -22,10 +21,3 @@
>{{ or (T .Identifier) .Name | safeHTML }}</a></li>
{{- end }}
</ul>
{{ if compare.Eq $menuID "main" -}}
<ul>
<li class="roomstate" id="roomstate">
<span class="state">unbekannt</span><br><span class="duration">(seit&nbsp;)</span>
</li>
</ul>
{{- end -}}

View file

@ -1,5 +1,5 @@
{{ $robotsGenerate := false -}}
{{- if or (isset $.Params.robots "index") (isset $.Params.robots "follow") }}
{{- if and (isset $.Params "robots") (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,9 +12,18 @@
{{- if eq ._type "vevent"}}
<tr>
{{- $start := time .dtstart }}
<td style="font-variant-numeric: tabular-nums;">{{ $start.Local.Format "Mon, 2006-01-02 15:04" }}</td>
<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>{{ .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.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

View file

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/mstile-150x150.png" />
<TileColor>#ffffff</TileColor>
</tile>
</msapplication>
</browserconfig>

Binary file not shown.

After

Width:  |  Height:  |  Size: 353 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 514 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

View file

@ -0,0 +1,228 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="1310.000000pt" height="1310.000000pt" viewBox="0 0 1310.000000 1310.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.14, written by Peter Selinger 2001-2017
</metadata>
<g transform="translate(0.000000,1310.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M2678 11245 c-2 -3 -85 -7 -183 -10 -185 -6 -307 -10 -500 -20 -60
-3 -157 -7 -215 -10 -97 -4 -209 -10 -400 -20 -41 -3 -118 -7 -170 -9 -52 -3
-133 -7 -180 -10 -47 -3 -125 -8 -175 -11 -385 -21 -438 -26 -474 -41 -44 -18
-75 -53 -117 -128 -30 -56 -96 -235 -108 -296 -3 -14 -16 -79 -30 -145 -13
-66 -27 -138 -31 -160 -3 -22 -8 -53 -11 -70 -3 -16 -7 -46 -9 -65 -2 -19 -4
-35 -5 -35 -1 0 -3 -22 -5 -50 -2 -27 -4 -50 -5 -50 -1 0 -4 -20 -5 -45 -2
-25 -4 -45 -5 -45 -1 0 -3 -18 -5 -40 -2 -22 -6 -74 -10 -115 -3 -41 -8 -97
-10 -125 -20 -245 -26 -753 -12 -1080 17 -417 31 -689 42 -815 3 -36 8 -99 11
-140 3 -41 7 -91 9 -110 2 -19 6 -64 9 -100 3 -36 10 -96 16 -135 5 -38 12
-90 16 -115 10 -73 11 -81 28 -175 28 -162 61 -298 96 -390 12 -33 24 -69 28
-80 7 -25 65 -123 90 -151 25 -29 65 -54 98 -60 16 -3 102 -7 192 -8 89 -2
165 -6 168 -9 3 -3 17 -2 30 3 14 6 26 6 29 0 4 -7 13 -6 26 0 10 6 19 7 19 2
0 -4 753 -8 1673 -9 919 0 1845 -4 2057 -8 856 -14 984 -14 1095 5 100 17 186
50 230 88 32 28 65 98 80 168 2 10 11 47 20 81 9 35 18 71 20 80 2 10 12 54
24 98 11 44 22 91 25 105 2 14 14 72 26 130 12 58 23 123 25 145 2 22 4 40 5
40 4 0 10 46 13 103 2 34 6 64 8 66 6 7 2 130 -6 173 -16 88 -62 126 -148 124
-94 -2 -144 -45 -165 -146 -11 -49 -15 -77 -27 -200 -4 -33 -8 -67 -10 -75 -3
-8 -7 -28 -10 -45 -14 -82 -30 -142 -62 -235 -32 -94 -56 -141 -101 -201 -37
-49 -100 -101 -139 -113 -52 -16 -118 -28 -170 -30 -24 0 -43 -3 -43 -6 0 -3
-21 -6 -48 -6 -79 -2 -327 -13 -327 -14 0 -6 -532 -10 -1315 -9 -973 0 -1887
-1 -2255 -4 -115 0 -237 2 -270 6 -250 27 -407 108 -503 260 -21 34 -41 71
-45 82 -3 11 -17 52 -32 90 -14 39 -26 72 -27 75 0 3 -2 10 -3 15 -2 6 -5 19
-8 30 -3 11 -15 56 -27 100 -12 44 -23 85 -24 90 -4 15 -17 77 -21 100 -2 11
-4 21 -5 23 -4 4 -6 16 -15 77 -9 63 -11 73 -14 78 -2 2 -10 50 -16 102 -2 17
-4 30 -5 30 -1 0 -3 17 -15 140 -13 132 -14 145 -21 275 -17 275 -2 1452 20
1590 3 19 8 67 11 105 3 39 7 77 10 85 2 8 6 31 9 50 18 114 46 231 59 248 5
6 7 12 4 12 -12 0 74 213 93 230 3 3 17 23 31 45 54 83 135 147 227 179 46 17
86 23 182 31 36 3 94 7 130 10 163 13 193 16 201 21 5 3 9 0 9 -6 0 -6 5 -8
11 -4 12 7 51 11 194 18 44 3 80 5 80 6 0 0 41 3 90 5 50 3 135 7 190 10 141
8 268 14 430 20 77 3 187 8 245 10 58 3 247 8 420 11 173 3 333 7 355 8 22 1
46 -3 53 -8 6 -5 12 -5 12 0 0 13 103 12 112 -1 5 -7 8 -7 8 0 0 12 358 14
378 2 6 -5 12 -5 12 0 0 4 33 7 72 6 40 -2 163 -5 273 -8 321 -9 457 -16 730
-40 44 -4 96 -9 115 -11 19 -3 54 -7 78 -9 24 -3 56 -7 70 -10 15 -3 43 -8 62
-11 48 -7 65 -11 152 -30 15 -3 29 -5 30 -4 7 2 117 -39 153 -58 79 -40 159
-150 180 -247 22 -99 31 -167 40 -294 3 -31 7 -73 9 -95 10 -78 46 -156 71
-156 7 0 15 -4 17 -10 5 -14 177 -18 223 -6 29 9 40 18 46 39 4 15 3 29 -2 33
-5 3 -7 9 -4 15 14 21 -2 343 -19 389 -3 8 -7 33 -10 55 -9 85 -60 254 -106
353 -17 35 -30 67 -30 72 0 6 -3 10 -8 10 -4 0 -16 15 -26 34 -19 36 -78 100
-111 122 -12 8 -36 16 -55 19 -19 2 -46 7 -60 9 -14 3 -45 7 -70 10 -25 3 -63
8 -85 11 -37 5 -54 8 -137 20 -18 2 -55 6 -83 9 -27 3 -70 8 -95 11 -25 3 -74
7 -110 10 -36 3 -87 8 -115 10 -84 8 -197 16 -265 20 -164 9 -221 14 -230 20
-6 3 -10 1 -10 -5 0 -6 -4 -9 -9 -6 -10 6 -104 12 -351 22 -167 7 -1566 14
-1572 9z"/>
<path d="M4248 10747 c-1 -21 -3 -34 -8 -49 -4 -14 -6 -23 -15 -83 -21 -151
-28 -243 -28 -415 0 -145 5 -220 18 -280 3 -14 8 -38 10 -53 9 -50 47 -117 81
-145 62 -51 293 -156 414 -188 138 -36 268 -60 425 -80 197 -24 656 -24 1140
1 28 2 156 6 285 9 267 8 378 12 570 22 270 15 710 9 890 -11 89 -10 310 -48
348 -59 9 -3 28 -7 42 -10 100 -20 252 -76 361 -132 110 -56 134 -69 139 -74
3 -3 21 -17 40 -30 59 -42 72 -52 152 -131 54 -53 78 -84 78 -100 0 -52 -12
-52 -108 -6 -49 25 -103 49 -119 55 -15 6 -54 22 -85 35 -32 14 -58 22 -58 20
0 -3 -7 0 -15 7 -8 7 -15 9 -15 5 0 -4 -6 -3 -12 3 -7 5 -33 16 -58 23 -56 16
-52 14 -70 22 -15 7 -212 58 -280 73 -19 4 -676 9 -1460 10 -1556 2 -2209 9
-2490 29 -228 16 -223 16 -269 39 -72 38 -318 262 -437 400 -89 102 -168 203
-273 346 -22 30 -44 60 -48 65 -5 6 -20 26 -33 45 -13 19 -30 41 -37 48 -6 6
-14 21 -18 31 -3 11 -12 22 -20 25 -8 3 -15 10 -15 15 0 8 -66 104 -108 156
-4 6 -23 33 -42 60 -19 28 -40 55 -46 60 -6 6 -24 28 -40 50 -16 22 -33 45
-39 51 -11 13 -74 89 -90 110 -7 9 -51 15 -135 19 -69 3 -142 6 -162 8 -21 1
-38 0 -38 -3 0 -3 11 -17 25 -32 14 -15 25 -30 25 -34 0 -6 26 -38 79 -99 9
-11 45 -56 78 -100 33 -44 69 -90 79 -102 45 -51 54 -64 54 -72 0 -5 4 -11 9
-13 4 -1 52 -59 105 -128 53 -69 107 -137 119 -152 12 -14 33 -41 47 -59 14
-18 41 -49 60 -68 20 -20 67 -74 105 -121 39 -47 73 -86 78 -88 4 -2 7 -8 7
-14 0 -5 6 -15 13 -23 6 -7 21 -25 32 -40 18 -25 94 -126 113 -150 61 -79 88
-110 152 -177 86 -92 181 -166 260 -204 79 -38 105 -44 200 -49 47 -2 130 -7
185 -10 208 -11 533 -25 745 -31 433 -12 1200 -24 1777 -27 189 -1 343 -6 343
-11 0 -5 6 -4 13 1 14 11 57 11 75 0 6 -5 12 -4 12 1 0 10 42 8 59 -3 6 -3 11
-2 11 4 0 7 8 7 23 2 14 -5 30 -5 40 0 9 6 17 6 17 2 0 -4 125 -9 278 -10 464
-2 692 -10 798 -28 222 -37 388 -104 482 -194 36 -34 102 -126 102 -141 0 -5
-30 2 -67 15 -65 23 -134 43 -178 51 -11 2 -74 15 -140 29 -66 13 -133 27
-150 30 -31 7 -95 10 -434 19 -112 3 -206 7 -208 10 -3 3 -16 1 -29 -4 -13 -5
-24 -6 -24 -2 0 4 -55 8 -123 9 -67 0 -214 4 -327 7 -238 7 -270 7 -282 0 -4
-3 -8 -2 -8 3 0 4 -84 9 -188 10 -103 0 -367 4 -587 9 -517 9 -1658 9 -1890 0
-193 -8 -230 -11 -315 -20 -86 -10 -103 -13 -132 -25 -16 -6 -28 -8 -28 -5 0
4 -7 1 -15 -6 -8 -7 -15 -10 -15 -6 0 3 -24 -4 -52 -15 -29 -12 -59 -22 -65
-22 -7 0 -13 -4 -13 -9 0 -4 -5 -8 -11 -8 -38 0 -361 -312 -549 -529 -30 -35
-60 -69 -66 -75 -10 -11 -244 -303 -288 -359 -11 -15 -26 -33 -31 -40 -6 -7
-35 -46 -65 -87 -30 -41 -58 -79 -62 -85 -38 -49 -100 -134 -133 -181 -22 -31
-46 -62 -52 -70 -7 -7 -13 -15 -13 -19 0 -3 -5 -11 -10 -18 -25 -28 -200 -279
-203 -288 -1 -8 46 -11 147 -11 l149 1 24 28 c14 15 39 44 56 63 56 62 132
153 191 230 31 41 68 89 81 105 14 17 76 100 139 185 316 428 484 614 716 793
39 30 128 85 148 91 12 4 22 12 22 17 0 5 3 8 8 7 4 -1 16 3 27 9 33 18 141
62 166 67 13 3 48 12 77 20 56 16 112 26 172 32 83 8 451 0 468 -10 6 -3 13
-2 17 4 4 6 11 7 17 4 11 -7 342 -15 710 -17 126 -1 228 -6 228 -10 0 -5 5 -5
12 -1 16 10 139 11 145 1 3 -4 10 -4 17 2 6 6 18 6 25 2 8 -5 26 -5 42 -1 15
5 30 6 33 3 3 -3 303 -7 668 -9 1057 -7 1334 -10 1345 -17 7 -4 14 -4 17 1 5
9 210 8 341 -3 211 -16 381 -74 514 -174 47 -35 52 -48 18 -42 -4 1 -58 4
-120 7 -62 3 -155 8 -207 11 -119 6 -1732 11 -1743 5 -8 -4 -217 -9 -562 -12
-82 -1 -258 2 -390 5 -265 8 -776 13 -787 7 -5 -2 -61 -5 -125 -8 -153 -7
-302 -19 -357 -30 -11 -2 -36 -6 -56 -9 -38 -6 -70 -12 -110 -20 -14 -3 -34
-7 -45 -9 -43 -9 -161 -48 -170 -57 -5 -5 -15 -9 -23 -9 -8 0 -45 -20 -82 -45
-54 -36 -73 -56 -97 -102 -30 -57 -48 -104 -57 -153 -33 -165 -35 -192 -41
-400 -3 -96 -7 -181 -10 -187 -2 -7 -1 -13 3 -13 4 0 8 -21 8 -47 1 -48 12
-197 18 -243 2 -14 4 -32 5 -42 2 -25 103 -38 181 -23 32 6 67 48 82 100 12
39 15 230 4 290 -6 35 -19 213 -19 265 0 43 15 159 23 175 3 6 3 6 14 55 5 19
11 40 14 45 4 6 7 15 8 22 7 41 81 103 134 111 34 4 65 10 65 12 0 1 18 3 40
5 44 5 107 13 145 19 23 4 94 12 185 21 163 16 175 17 365 30 157 10 466 17
750 18 278 0 475 -3 1175 -20 318 -7 1029 -9 1222 -2 113 3 124 2 149 -18 23
-18 25 -26 20 -55 -26 -121 -4 -149 155 -202 44 -15 142 -41 189 -50 14 -3 36
-7 49 -10 104 -23 382 -24 501 -2 14 2 48 8 75 12 28 4 52 8 55 9 12 3 67 16
85 20 11 2 35 8 53 14 18 5 33 10 35 10 1 0 9 2 17 5 8 3 49 17 91 30 110 36
237 90 379 161 171 86 214 109 220 116 3 4 23 16 45 28 59 32 98 55 110 64 28
22 230 147 237 147 16 0 7 -19 -34 -72 -85 -107 -335 -338 -367 -338 -6 0 -11
-4 -11 -8 0 -5 -12 -15 -27 -23 -16 -8 -30 -17 -33 -20 -22 -24 -251 -144
-335 -174 -27 -10 -54 -22 -60 -26 -8 -5 -79 -29 -135 -44 -3 -1 -12 -5 -20
-8 -23 -9 -260 -65 -300 -71 -19 -2 -44 -7 -56 -9 -11 -3 -41 -6 -65 -8 -24
-1 -48 -4 -52 -7 -5 -2 -52 -6 -105 -8 -53 -3 -108 -7 -122 -10 -14 -3 -38 -7
-55 -9 -58 -8 -90 -16 -134 -36 -44 -19 -101 -72 -101 -93 1 -34 159 -119 262
-141 59 -12 300 -14 353 -2 11 3 40 8 65 12 55 9 63 10 123 24 26 6 64 14 84
17 20 3 47 10 60 15 13 5 23 6 23 4 0 -2 12 0 28 6 15 6 36 12 46 15 26 5 89
25 101 33 6 3 17 6 25 8 8 1 23 6 35 12 11 5 43 20 70 32 117 51 232 113 316
170 32 21 61 39 64 39 4 0 13 6 20 13 8 6 20 17 27 22 134 104 253 214 323
300 17 20 35 42 42 49 24 26 121 183 152 243 30 60 79 195 87 240 3 18 -1 24
-23 29 -35 7 -76 26 -85 39 -11 15 -1 90 17 124 8 17 15 32 14 33 0 2 4 16 10
31 19 50 24 103 11 128 -49 91 -117 93 -177 5 -15 -23 -30 -43 -33 -46 -3 -3
-17 -23 -31 -45 -32 -50 -76 -76 -90 -55 -8 14 -29 77 -35 108 -1 8 -6 21 -10
30 -4 9 -8 24 -10 33 -12 60 -70 265 -96 337 -68 195 -139 295 -272 387 -48
33 -59 37 -80 27 -14 -6 -30 -28 -40 -54 l-17 -44 39 -84 c78 -170 155 -360
146 -360 -4 0 -2 -6 4 -12 13 -17 86 -260 97 -323 2 -11 6 -30 8 -41 3 -12 8
-37 11 -55 3 -19 10 -56 15 -82 8 -46 7 -51 -23 -90 -36 -48 -96 -82 -129 -73
-19 4 -26 21 -46 98 -25 95 -76 251 -106 323 -29 67 -94 209 -104 225 -6 8
-20 35 -32 60 -13 25 -49 89 -81 143 -32 55 -58 101 -58 103 0 2 -22 39 -50
82 -27 43 -50 84 -50 90 0 5 -3 12 -8 14 -4 2 -29 39 -56 83 -39 65 -64 92
-131 145 -113 88 -169 115 -226 114 -53 -2 -93 -19 -83 -37 4 -7 43 -69 88
-139 45 -70 92 -145 106 -167 14 -22 76 -119 138 -216 61 -97 112 -178 112
-181 0 -3 8 -18 18 -32 68 -98 259 -492 245 -506 -4 -3 -2 -6 4 -6 6 0 13 -12
16 -27 3 -16 11 -41 17 -58 6 -16 11 -31 11 -33 -1 -1 5 -17 13 -35 7 -19 22
-71 31 -116 l18 -83 -43 -39 c-23 -21 -48 -39 -55 -39 -18 0 -61 42 -79 79 -9
17 -15 31 -12 31 12 0 -122 352 -136 358 -5 2 -8 12 -8 23 0 10 -4 19 -10 19
-5 0 -10 9 -10 19 0 11 -3 21 -7 23 -5 2 -19 26 -33 53 -32 65 -83 149 -92
153 -5 2 -8 8 -8 13 0 12 -71 123 -82 127 -4 2 -8 8 -8 13 0 8 -58 97 -70 109
-3 3 -17 21 -30 40 -13 19 -29 40 -35 47 -30 35 -35 43 -35 48 0 4 -61 85
-133 175 -7 8 -49 61 -94 118 -78 97 -148 157 -247 211 -48 26 -96 26 -133 -1
-33 -25 -32 -38 6 -77 22 -24 93 -110 110 -135 8 -12 18 -23 21 -26 12 -9 237
-295 299 -380 34 -47 69 -93 77 -103 8 -9 14 -20 14 -24 0 -3 7 -15 17 -25 9
-10 21 -27 27 -37 6 -11 37 -60 69 -110 68 -108 143 -242 153 -273 4 -13 10
-25 13 -28 12 -8 94 -210 88 -216 -2 -3 -1 -21 3 -40 4 -18 4 -34 0 -34 -5 0
-5 -12 -1 -27 4 -16 4 -39 0 -53 -5 -17 -7 -19 -8 -7 -1 10 -17 49 -35 87 -19
39 -32 70 -28 70 4 0 3 4 -3 8 -5 4 -27 41 -47 82 -50 101 -91 174 -100 178
-5 2 -8 10 -8 18 0 8 -4 14 -10 14 -5 0 -10 5 -10 11 0 9 -100 162 -137 209
-155 198 -174 220 -293 340 -89 89 -105 101 -235 167 -77 39 -169 81 -205 93
-36 13 -69 27 -75 30 -5 4 -57 22 -115 39 -58 18 -112 35 -120 38 -8 3 -19 7
-25 7 -23 3 -131 28 -145 33 -8 3 -25 7 -37 9 -11 1 -59 9 -105 18 -45 8 -107
18 -137 21 -30 4 -62 8 -72 10 -44 9 -206 22 -394 32 -234 12 -1059 4 -1083
-11 -6 -3 -13 -2 -17 4 -4 6 -11 8 -16 5 -28 -18 -1204 -22 -1204 -5 0 1 -27
3 -60 5 -130 8 -256 22 -370 40 -16 3 -42 7 -58 9 -38 6 -106 42 -144 76 -87
78 -117 175 -115 370 1 74 4 149 6 165 8 48 8 236 1 280 -4 22 -11 47 -16 56
-4 9 -6 19 -3 22 3 3 -47 5 -110 6 -113 0 -116 -1 -118 -22z"/>
<path d="M11418 8187 c-21 -19 -79 -107 -124 -187 -12 -21 -19 -31 -105 -150
-34 -47 -65 -87 -68 -90 -3 -3 -26 -30 -51 -60 -113 -140 -291 -314 -425 -416
-54 -41 -166 -119 -185 -127 -8 -4 -31 -17 -50 -29 -50 -30 -168 -88 -180 -88
-5 0 -10 -4 -10 -8 0 -5 -6 -9 -13 -9 -6 0 -42 -12 -79 -26 -36 -15 -71 -27
-78 -27 -6 0 -29 -9 -52 -21 -86 -44 -163 -59 -373 -74 -86 -7 -99 -8 -184
-26 -65 -13 -151 -47 -151 -60 0 -5 -6 -9 -14 -9 -31 0 -20 -28 31 -77 30 -29
61 -53 69 -53 8 0 14 -3 14 -8 0 -6 111 -54 135 -58 6 0 15 -2 20 -4 27 -8
255 -5 255 4 0 5 2 7 5 4 3 -3 35 1 71 8 35 8 78 16 94 19 16 3 42 10 57 16
15 6 37 13 47 15 11 2 58 15 105 29 47 13 95 26 106 29 57 11 85 19 85 25 0 4
16 13 35 21 19 8 35 17 35 22 0 4 5 8 10 8 10 0 199 125 210 139 3 3 22 19 42
34 73 54 223 196 303 288 96 108 235 297 235 318 0 6 5 11 10 11 6 0 10 4 10
9 0 7 32 67 60 111 9 14 73 149 75 160 1 3 6 16 12 30 10 22 19 47 49 125 4
11 8 25 9 30 1 6 3 13 5 18 1 4 4 12 5 17 1 6 3 11 5 13 1 1 4 15 6 31 3 16 9
37 14 46 7 13 4 22 -9 34 -24 22 -44 20 -73 -7z"/>
<path d="M11472 7653 c-96 -172 -87 -157 -146 -254 -25 -42 -46 -82 -46 -88 0
-6 -4 -11 -9 -11 -5 0 -14 -13 -21 -30 -7 -16 -16 -30 -20 -30 -4 0 -10 -8
-13 -17 -4 -15 -128 -199 -165 -244 -98 -122 -139 -167 -212 -240 -86 -84
-217 -189 -266 -211 -13 -6 -24 -15 -24 -20 0 -4 -9 -8 -19 -8 -11 0 -21 -4
-23 -8 -4 -10 -163 -79 -198 -86 -14 -3 -40 -9 -58 -15 -18 -5 -35 -10 -37
-10 -3 -1 -6 -1 -7 -2 -22 -4 -100 -11 -163 -12 l-80 -3 -3 -44 c-3 -43 -1
-46 41 -72 72 -46 117 -58 252 -72 11 -1 24 0 28 2 5 2 32 5 62 7 29 1 57 5
62 8 4 3 26 8 48 12 44 7 53 9 75 17 8 3 51 18 95 33 83 29 285 125 305 145 3
3 32 23 65 45 74 49 244 218 309 305 53 71 145 219 147 235 1 6 9 21 18 35 10
14 30 54 45 90 15 36 34 79 41 95 7 17 18 48 25 70 6 22 14 47 17 55 4 8 7 18
8 23 2 4 3 8 4 10 2 1 5 13 7 27 3 14 9 27 14 28 6 2 8 7 6 11 -4 6 1 33 18
101 31 118 30 148 -10 216 -21 37 -46 53 -79 54 -6 0 -48 -66 -93 -147z"/>
<path d="M11384 6577 c-6 -7 -57 -55 -114 -107 -57 -52 -118 -109 -137 -127
l-33 -31 35 -39 c19 -21 54 -64 77 -95 23 -32 46 -58 50 -58 5 0 8 -4 8 -10 0
-8 56 -96 70 -110 3 -3 12 -18 20 -35 8 -16 18 -32 21 -35 32 -25 207 -439
194 -460 -3 -5 -1 -11 5 -15 5 -3 10 -16 10 -29 0 -12 5 -27 12 -34 7 -7 9
-12 6 -12 -3 0 -1 -21 4 -47 28 -140 36 -239 33 -408 -2 -170 -8 -257 -19
-294 -3 -9 -8 -29 -11 -46 -5 -32 -12 -62 -21 -97 -8 -32 -14 -67 -19 -108 -3
-19 -14 -60 -26 -90 -11 -30 -23 -63 -26 -72 -3 -10 -9 -18 -14 -18 -5 0 -9
-5 -9 -12 0 -20 -80 -121 -152 -190 -39 -38 -112 -99 -163 -138 -87 -65 -93
-72 -99 -113 -7 -44 -12 -75 -21 -124 -14 -75 -17 -103 -12 -103 37 0 247 129
342 210 28 24 159 156 181 182 80 98 191 292 237 415 31 81 40 106 42 113 15
48 37 123 41 141 17 73 33 157 40 207 2 17 6 49 9 70 3 20 8 66 10 102 4 58 1
92 -21 225 -15 92 -6 210 18 226 4 3 50 -5 100 -18 51 -12 109 -25 128 -28 19
-3 42 -7 50 -10 8 -2 42 -7 75 -10 33 -4 74 -9 90 -11 42 -5 272 -4 315 1 91
11 115 14 118 16 2 2 1 2 57 14 22 4 43 8 48 7 4 -1 7 2 7 6 0 4 9 8 19 9 11
1 46 14 78 30 53 26 58 30 55 58 -5 53 -42 140 -73 173 -64 69 -167 83 -311
44 -18 -5 -25 -6 -68 -15 -19 -4 -46 -10 -60 -13 -14 -3 -41 -8 -60 -11 -19
-3 -53 -8 -75 -12 -76 -14 -198 -3 -285 26 -200 65 -369 221 -528 485 -55 92
-141 258 -141 272 1 5 -3 12 -8 15 -4 3 -24 39 -43 79 -19 39 -37 72 -40 72
-3 -1 -10 -6 -16 -13z"/>
<path d="M10694 6100 c-135 -28 -140 -30 -160 -113 -36 -150 -114 -321 -220
-483 -22 -33 -41 -64 -44 -69 -12 -25 -94 -140 -102 -143 -4 -2 -8 -10 -8 -18
0 -8 -4 -14 -9 -14 -5 0 -13 -9 -16 -20 -3 -11 -12 -26 -18 -32 -11 -12 -109
-158 -169 -253 -22 -36 -105 -203 -128 -260 -13 -33 -39 -118 -44 -150 -3 -17
-8 -48 -12 -70 -9 -54 -11 -235 -3 -260 4 -11 12 -45 18 -75 18 -85 12 -83
137 -58 l111 21 0 61 c0 62 9 160 18 206 3 14 7 37 10 51 9 52 56 204 67 216
6 7 8 13 5 13 -6 0 21 60 75 165 33 64 134 228 161 261 8 10 39 51 68 89 29
39 58 75 64 81 5 6 26 30 45 54 19 24 49 58 65 76 17 18 52 57 80 88 l50 55
38 -77 c21 -43 40 -97 42 -122 2 -25 5 -45 6 -45 5 0 5 -381 0 -390 -3 -5 -7
-30 -8 -55 -3 -48 -10 -105 -13 -105 -1 0 -3 -16 -5 -35 -2 -19 -6 -44 -8 -55
-3 -11 -8 -40 -12 -65 -8 -53 -63 -287 -105 -450 -72 -281 -89 -353 -85 -361
3 -4 1 -10 -4 -13 -5 -3 -12 -27 -16 -53 -5 -27 -10 -55 -12 -63 -2 -8 -5 -26
-8 -40 -2 -14 -10 -63 -18 -110 -26 -145 -31 -228 -32 -445 0 -190 7 -316 20
-370 2 -11 11 -51 19 -88 40 -181 134 -378 232 -483 25 -27 51 -56 57 -64 41
-53 230 -180 267 -180 31 0 60 35 60 73 0 19 3 36 6 39 3 3 7 37 9 75 l4 68
-63 65 c-97 101 -178 236 -226 379 -22 65 -42 137 -45 166 -2 11 -7 38 -13 60
-6 22 -13 56 -16 75 -10 74 -18 127 -26 168 -4 24 -6 63 -5 85 5 64 14 139 21
167 3 14 7 36 9 50 2 14 4 27 5 30 1 3 2 8 2 11 -1 8 24 149 38 214 16 79 18
88 24 130 4 22 9 48 12 57 11 36 35 163 37 196 0 6 3 12 6 12 3 0 7 10 8 23 2
32 11 85 23 137 5 25 12 59 15 75 2 17 9 55 15 85 6 30 13 71 16 90 3 19 7 46
10 60 2 14 7 45 10 70 3 25 7 56 10 70 2 14 7 50 9 80 3 30 8 66 10 80 9 51
19 240 19 365 0 173 -10 313 -30 425 -3 19 -7 45 -9 57 -2 11 -6 29 -9 40 -3
10 -8 32 -11 49 -4 29 -57 198 -72 234 -3 8 -7 20 -8 26 -7 31 -80 174 -89
175 -54 6 -82 4 -152 -11z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 16 KiB

View file

@ -0,0 +1,19 @@
{
"name": "",
"short_name": "",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}