Compare commits
2 commits
main
...
feature/fo
| Author | SHA1 | Date | |
|---|---|---|---|
 jtbx
|
7d596f2a30 | ||
 June
|
ef11807d29 |
|
|
@ -1,7 +1,7 @@
|
|||
on:
|
||||
pull_request:
|
||||
types:
|
||||
- closed
|
||||
pull_request_target:
|
||||
- closed
|
||||
|
||||
jobs:
|
||||
cleanup-staging:
|
||||
|
|
@ -11,13 +11,9 @@ jobs:
|
|||
steps:
|
||||
- name: Pipeline info PR
|
||||
run: |
|
||||
echo "Run triggered by ${{ github.event_name }} (${{ github.event.action }}) on ref ${{ github.ref_name }}"
|
||||
echo "PR#${{ github.event.pull_request.number }} ${{ github.event.action }}"
|
||||
|
||||
- name: Staging Deployment - Prepare keys
|
||||
- name: Deploy - Remove PR from staging
|
||||
if: github.event.action == 'closed'
|
||||
run: |
|
||||
echo "${{ secrets.SSH_DEPLOY_KEY }}" > deploykey.priv
|
||||
chmod 400 deploykey.priv
|
||||
echo "${{ secrets.SSH_KNOWN_HOSTS_FILE }}" > ./known_hosts
|
||||
- name: Staging Deployment - Remove PR from staging
|
||||
run: |
|
||||
ssh -i deploykey.priv -o 'UserKnownHostsFile ./known_hosts' ccchh-website-deploy@public-web-static-intern.hamburg.ccc.de -t "rm -r /var/www/staging.hamburg.ccc.de/pr${{ github.event.pull_request.number }}/"
|
||||
ssh -i deploykey.priv -o 'UserKnownHostsFile ./known_hosts' ccchh-website-deploy@public-web-static-intern.hamburg.ccc.de -t "rm -r /var/www/next.hamburg.ccc.de/pr${{ github.event.pull_request.number }}/"
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ on:
|
|||
push:
|
||||
branches:
|
||||
- main
|
||||
- feature/forgejo
|
||||
pull_request:
|
||||
schedule:
|
||||
- cron: "0,20,40 * * * *"
|
||||
|
|
@ -17,7 +18,7 @@ jobs:
|
|||
steps:
|
||||
- name: Pipeline info
|
||||
run: |
|
||||
echo "Run triggered by ${{ github.event_name }} (${{ github.event.action }}) on ref ${{ github.ref_name }}"
|
||||
echo "Run triggered by ${{ gitea.event_name }} on ref ${{ github.ref_name }}"
|
||||
|
||||
- name: Install packages
|
||||
run: |
|
||||
|
|
@ -26,12 +27,8 @@ 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'
|
||||
|
|
@ -44,35 +41,44 @@ 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 == 'push' || github.event_name == 'pull_request' || github.event_name == 'schedule'
|
||||
if: github.event_name == 'pull_request'
|
||||
run: |
|
||||
echo "${{ secrets.SSH_DEPLOY_KEY }}" > deploykey.priv
|
||||
chmod 400 deploykey.priv
|
||||
echo "${{ secrets.SSH_KNOWN_HOSTS_FILE }}" > ./known_hosts
|
||||
|
||||
- uses: actions/download-artifact@v3
|
||||
with:
|
||||
name: website-build
|
||||
|
||||
- name: Deploy - Upload PR to staging
|
||||
if: github.event_name == 'pull_request'
|
||||
run: |
|
||||
echo "Deploying to staging.hamburg.ccc.de/pr${{ github.event.pull_request.number }}"
|
||||
rsync -v -r --delete -e "ssh -i deploykey.priv -o 'UserKnownHostsFile ./known_hosts'" public/ ccchh-website-deploy@public-web-static-intern.hamburg.ccc.de:/var/www/staging.hamburg.ccc.de/pr${{ github.event.pull_request.number }}/
|
||||
- name: Deploy - Add comment to PR with staging URL
|
||||
if: github.event_name == 'pull_request' && github.event.action == 'opened'
|
||||
run: |
|
||||
curl \
|
||||
-X POST \
|
||||
${{ github.event.pull_request.base.repo.url }}/issues/${{ github.event.pull_request.number }}/comments \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "Authorization: token $GITHUB_TOKEN" \
|
||||
--data '{ "body": "You can view your changes at https://staging.hamburg.ccc.de/pr${{ github.event.pull_request.number }}/" }'
|
||||
|
||||
- name: Deploy - Upload to prod
|
||||
if: (github.event_name == 'push' || github.event_name == 'schedule') && github.ref_name == 'main'
|
||||
if: github.ref_name == 'main'
|
||||
run: |
|
||||
rsync -v -r --delete -e "ssh -i deploykey.priv -o 'UserKnownHostsFile ./known_hosts'" public/ ccchh-website-deploy@public-web-static-intern.hamburg.ccc.de:/var/www/hamburg.ccc.de/
|
||||
|
||||
- uses: actions/upload-artifact@v3
|
||||
if: github.event_name == 'pull_request'
|
||||
with:
|
||||
name: website-build
|
||||
path: public/
|
||||
|
|
|
|||
2
LICENSE
2
LICENSE
|
|
@ -1,6 +1,6 @@
|
|||
BSD 3-Clause License
|
||||
|
||||
Copyright (c) 2023, CCC Hansestadt Hamburg e.V.
|
||||
Copyright (c) 2023, Chaos Computer Club Hansestadt Hamburg e.V.
|
||||
|
||||
Redistribution and use in source and binary forms, with or without
|
||||
modification, are permitted provided that the following conditions are met:
|
||||
|
|
|
|||
33
README.md
33
README.md
|
|
@ -11,8 +11,8 @@ All other information like details on groups, projects and recurring events shou
|
|||
- start page (onepager)
|
||||
* who we are
|
||||
* announcements aka current blog entry (if in the future)
|
||||
* event calendar
|
||||
* visit us -> open chaos + link to wiki for all recurring events
|
||||
* event calendar
|
||||
* groups, e.g. CTF team, CMS, freifunk, etc.
|
||||
* directions (map)
|
||||
- blog, split into:
|
||||
|
|
@ -24,7 +24,7 @@ All other information like details on groups, projects and recurring events shou
|
|||
|
||||
### Build and Deploy
|
||||
|
||||
To populate the calendar data, please run `./fetch-calendar.sh` before running hugo.
|
||||
To populate the calendar data, please run `fetch-calendar.sh` before running hugo.
|
||||
|
||||
Running the hugo command without and parameters will re-generate the site in the `public` directory.
|
||||
To deploy the website, just copy the whole folder to a directory which is servered by the webserver of your preference.
|
||||
|
|
@ -47,47 +47,26 @@ hugo server -D
|
|||
#### Add an Event Announcement
|
||||
|
||||
There are two basic types of posts: Events and articles.
|
||||
Events will be shown on the home page from their publishing date until they have happened and shall be used for things which happen at a certain date.
|
||||
This is not limited to events organized by the CCCHH, but can also be a hint to other events which we think are related to our activities.
|
||||
Events will be shown on the home page from their publishing date until they have happened.
|
||||
|
||||
To create a new event blog post, run a command like this:
|
||||
```shell
|
||||
hugo new content --kind event blog/yyyy/yyyy-mm-dd-your-event-title/index.md
|
||||
hugo new content --kind event blog/your-event-title.md
|
||||
```
|
||||
|
||||
#### Add a Blog Entry
|
||||
|
||||
As mentioned before, you can also create blog posts for things which aren't events.
|
||||
They will only be shown in the "blog" section and posted to the RSS feeds and shall be used for things which are relevant for a longer time.
|
||||
|
||||
As we have much more event announcements than articles, finding articles in all blog posts can be quite a challenge.
|
||||
But using these two categories enables filtering, so that the history of articles is in one list.
|
||||
They will only be shown in the "blog" section and posted to the RSS feeds.
|
||||
|
||||
To create a new general blog post, run a command like this:
|
||||
```shell
|
||||
hugo new content --kind article blog/yyyy/yyyy-mm-dd-your-article-title/index.md
|
||||
hugo new content --kind article blog/your-article-title.md
|
||||
```
|
||||
|
||||
#### Additional Notes on Events and Articles
|
||||
|
||||
By default the first 70 words are shown as a summary on list pages.
|
||||
Please use `<!--more-->` to manually separate the summary from other post content.
|
||||
|
||||
Please prefix your folder name with a date to make browsing the content in the source code easier.
|
||||
The date in the URL will be taken from the `date` field in the front matter.
|
||||
|
||||
Blog posts from before 2024-01-22 were imported from the previous website and have additional front matter data which is not usually needed (e.g. the lastmod value).
|
||||
When using the commands above, the template shall have evenything you need.
|
||||
|
||||
#### Populate the Event Calendar
|
||||
|
||||
The event calendar table is filled from the Nextcloud iCal feed.
|
||||
To add a link on the title text, just add some link to the event's description field.
|
||||
The first link (something starting with `https://` or `http://`) from anywhere in the text will be taken.
|
||||
|
||||
(iCal has a link attribute, but that is not supported by the Nextcloud web UI. So we use the description instead.)
|
||||
|
||||
|
||||
### Icons
|
||||
|
||||
You can use solid and brand icons from https://fontawesome.com/icons version 6 in your posts like this:
|
||||
|
|
|
|||
|
|
@ -2,5 +2,5 @@
|
|||
- {{< fa envelope >}} E-Mail an den CCC Hamburg: <mail@hamburg.ccc.de>
|
||||
- {{< fa envelope >}} Verwaltung des CCC Hamburg: <buero@hamburg.ccc.de>
|
||||
- {{< fa brands mastodon >}} Fediverse: [@ccchh@chaos.social](https://chaos.social/@ccchh)
|
||||
- {{< fa comments >}} Matrix CCCHH Chat: [#ccchh:hamburg.ccc.de](https://matrix.to/#/#ccchh:hamburg.ccc.de)
|
||||
- {{< fa comments >}} Matrix Space: [#ccchh-space:hamburg.ccc.de](https://matrix.to/#/#ccchh-space:hamburg.ccc.de)
|
||||
- {{< fa comments >}} Matrix Space: [#ccchh-space:hamburg.ccc.de](https://matrix.to/#/#ccchh-space:hamburg.ccc.de)
|
||||
- {{< fa comments >}} Internet Relay Chat: [hackint.eu](https://webirc.hackint.org/#irc://irc.hackint.org/#ccchh?nick=) [#ccchh](ircs://hackint.eu/ccchh)
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 338 KiB |
|
|
@ -1,19 +0,0 @@
|
|||
---
|
||||
title: "38c3 Voucher"
|
||||
---
|
||||
|
||||
# Ticket-Klick-Party
|
||||
|
||||
Wenn ihr im **offenen Verkauf** Tickets klicken möchtet, kommt zu einem unserer Klick-Party-Termine in den Club!
|
||||
|
||||
Termine:
|
||||
* ~~Dienstag, 12.11. 19:30~~
|
||||
* Sonntag, 17.11. 15:30
|
||||
* Samstag, 23.11. 10:30
|
||||
|
||||
An den drei Verkaufsterminen treffen wir uns im Club im Zeiseweg und klicken gemeinsam im Shop. Das erhöht die Chancen, im richtigen Moment geklickt zu haben und somit ein Ticket kaufen zu können.
|
||||
|
||||
* Bitte tragt euch hier ein, damit wir eine Idee haben, wie viele Personen jeweils kommen möchten: [Umfrage Ticket-Klick-Party](https://cloud.hamburg.ccc.de/apps/forms/s/49f3Mj6TRJ8EzLYp3RjK9HeS)
|
||||
* Seid rechtzeitig da! Für den Ticketverkauf muss man im genau richtigen Moment klicken, es lohnt sich, darauf vorbereitet zu sein. Seid deshalb mindestens eine halbe Stunde vor dem Beginn des Verkaufs [bei uns im Club](https://hamburg.ccc.de/#kontakt).
|
||||
* Bringt ein Laptop oder Tablet mit, mit dem ihr in den Shop gehen könnt. Ein Telefon geht grundsätzlich auch, ist aber erfahrungsgemäß etwas fummeliger.
|
||||
* Habt eine Email-Adresse parat, an die die Bestellbestätigung inkl. Zahlungsdaten geschickt werden kann, oder eure Kreditkarte, damit ihr sofort bezahlen könnt.
|
||||
|
Before Width: | Height: | Size: 32 MiB After Width: | Height: | Size: 32 MiB |
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
categories: event
|
||||
date: '2023-03-25T13:37:00+01:00'
|
||||
date: '2022-03-25T13:37:00+01:00'
|
||||
draft: false
|
||||
header:
|
||||
caption: Sorry this blog entry was migrated, there is no Alt-Text
|
||||
image: chaosknoten.gif
|
||||
lastmod: '2023-03-01T10:00:00+01:00'
|
||||
lastmod: '2023-02-28T10:00:00+01:00'
|
||||
location: Zeiseweg 9
|
||||
publishDate: '2023-03-01T10:00:00+01:00'
|
||||
publishDate: '2023-02-28T10:00:00+01:00'
|
||||
slug: tag-des-offenen-hackspace-25-3-index
|
||||
title: Tag des offenen Hackspace 25.3.
|
||||
---
|
||||
|
|
@ -29,4 +29,4 @@ Wir empfehlen euch das Mitbringen einer Methode, um euch Notizen zu machen, sowi
|
|||
|
||||
Ihr findet uns in den Räumen des CCCHH in der [Viktoria-Kaserne, Zeiseweg 9](https://www.hamburg.ccc.de/#wegbeschreibung). Die Veranstaltung ist kostenlos und wird etwa 2 Stunden dauern. Wer im Anschluss noch länger bleiben möchte, um weiterführende Fragen zu stellen oder mit uns zu quatschen, ist dazu herzlich eingeladen.
|
||||
|
||||
Allgemeine Informationen über unsere FreiTalk-Gruppe und wie ihr auf dem Laufenden bleiben könnt, findet ihr [in unserem Wiki](https://wiki.hamburg.ccc.de/club:freitalk:start). Dort findet ihr später auch die Folien und weiteres Material.
|
||||
Allgemeine Informationen über unsere FreiTalk-Gruppe und wie ihr auf dem Laufenden bleiben könnt, findet ihr [in unserem Wiki](https://wiki.ccchh.net/club:freitalk:start). Dort findet ihr später auch die Folien und weiteres Material.
|
||||
|
|
|
|||
|
|
@ -1,28 +0,0 @@
|
|||
---
|
||||
categories: event
|
||||
title: 'Freitalk - Linux Werkstatt'
|
||||
date: '2024-02-02T18:30:00+01:00' # date of the event
|
||||
publishDate: '2024-01-24T23:28:09+01:00' # when to publish
|
||||
draft: false
|
||||
location: Z9
|
||||
authors:
|
||||
- skye
|
||||
# tags:
|
||||
# header:
|
||||
# caption: A caption für the picture will be used as Alt-Text
|
||||
# image: Path to the image
|
||||
---
|
||||
|
||||
Linux ist toll, um sich von den kommerziellen Interessen anderer Betriebssysteme zu befreien, um alter Hardware ein zweites Leben zu schenken, oder um mehr Spaß mit Computern zu haben. Leider gibt es nur sehr wenige Angebote, um Hilfe mit Linux-Problemen zu erhalten, und es kann schwierig sein, Menschen zu finden, die sich damit auskennen.
|
||||
|
||||
Deshalb werden wir am 2. Februar zwischen 18:30 und 21 Uhr in den Räumen des CCCHH eine offene Linux-Werkstatt anbieten, wo wir euch mit Linux helfen können. Wir können euch zum Beispiel dabei unterstützen, passende Linux-Software für eure Anwendungen zu finden, ein kaputtes Linux wieder zu reparieren, oder ein Linux eurer Wahl auf eurem PC oder Laptop zu installieren (bitte sorgt vorher eigenständig dafür, alle eure wertvollen Daten auf einem anderen Gerät zu speichern).
|
||||
|
||||
Gerne stehen wir auch für allgemeine und spezifischere Fragen zur Verfügung. Auch erfahrenere Linux-Fans sind eingeladen, um sich mit uns auszutauschen oder den Anfänger\*innen zu helfen.
|
||||
|
||||
Es ist eine offene Veranstaltung ohne Vortragsteil. Ihr könnt zwischen 18:30 und 21 Uhr jederzeit vorbeikommen. Bitte bringt euer Gerät mit sowie ggf. einen externen Datenträger, um Daten sichern zu können. Wenn ihr einen „großen“ PC vorbeibringen möchtet, braucht ihr Bildschirm, Tastatur etc. nicht extra mitzuschleppen, davon haben wir genug.
|
||||
|
||||
Die Veranstaltung findet mit FFP2-Maskenpflicht statt, es stehen Masken im Club zur Verfügung.
|
||||
|
||||
We are also happy to help you in English.
|
||||
|
||||
Weitere Infos über unsere FreiTalk-Veranstaltungen sowie eine Anleitung, wie ihr über E-Mail darüber auf dem Laufenden gehalten werden könnt, gibt es in [unserem Wiki-Artikel über FreiTalk.](https://wiki.hamburg.ccc.de/club:freitalk:start)
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
---
|
||||
categories: event
|
||||
title: 'Hamburg steht Zusammen'
|
||||
date: '2024-01-28T14:00:00+01:00'
|
||||
publishDate: '2024-01-27T15:27:09+01:00'
|
||||
draft: false
|
||||
location: Ludwig-Erhard-Straße
|
||||
weight: 0
|
||||
authors:
|
||||
- w1ntermute
|
||||
# tags:
|
||||
# header:
|
||||
# caption: A caption für the picture will be used as Alt-Text
|
||||
# image: Path to the image
|
||||
---
|
||||
|
||||
Auch wir, der CCC Hamburg, rufen zusammen mit anderen Gruppen auf, sich bei der morgigen Demo am 28.01. zu beteiligen.
|
||||
Gerade wir vom Chaos Computer Club wissen, wie wichtig es ist, unsere Demokratie und Diversität zu verteidigen.
|
||||
Deshalb werden wir und auch andere Gruppen morgen um 14:00 einen Marsch an der Ludwig-Erhard-Straße starten.
|
||||
Wir hoffen, dass viele Wesen dem Aufruf folgen werden. Mehr Informationen findet ihr dazu auf der [Seite des Demokratieteams](https://www.demokrateam.org/demos/hamburg-steht-zusammen/).
|
||||
Dieses Mal wird es eine bewegende Demonstration. Zieht also bequeme Schuhe an.
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
---
|
||||
categories: event
|
||||
title: 'Cyclopropenylidene spielt LA CTF'
|
||||
date: '2024-02-17T14:00:00+01:00'
|
||||
publishDate: '2024-02-07T22:00:00+01:00'
|
||||
draft: false
|
||||
location: Zeiseweg 9, Hauptraum
|
||||
weight: 0
|
||||
authors:
|
||||
- ellcs
|
||||
# tags:
|
||||
# header:
|
||||
# caption: A caption für the picture will be used as Alt-Text
|
||||
# image: Path to the image
|
||||
---
|
||||
|
||||
Seit der Pandemie wurde in den Clubräumen an keinem echten CTF teilgenommen. Dies möchten wir ändern!
|
||||
|
||||
Teilnehmen werden wir am [LA CTF](https://lac.tf/). Wir spielen am Samstag, dem 17.02.2024, ab 14:00, im Clubraum und am Sonntag, dem 18.02.2024 bis 20:00. Im Hauptraum des Z9.
|
||||
|
||||
Wir treffen uns dabei, um zusammen zu rätseln, zu hacken und zu tschunken. [Meldet euch gerne bei uns](https://wiki.hamburg.ccc.de/club:ctf:start#kontakt).
|
||||
|
||||
Wir freuen uns auf alle Personen, die früher bereits bei Cyclopropenylidene mitgespielt haben, als kleines Wiedersehen :) Wir freuen uns auf euch!
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
---
|
||||
categories: event
|
||||
title: 'Tag Des Offenen Hackspace'
|
||||
date: '2024-03-02T16:00:00+01:00' # date of the event
|
||||
publishDate: '2024-02-17T19:07:43+01:00' # when to publish
|
||||
draft: false
|
||||
location: Z9
|
||||
authors:
|
||||
- skye
|
||||
# tags:
|
||||
# header:
|
||||
# caption: A caption für the picture will be used as Alt-Text
|
||||
# image: Path to the image
|
||||
---
|
||||
|
||||
Am Samstag, den 2. März wird der CCCHH einen Tag der offenen Tür veranstalten. Wir begrüßen alle Interessierten, alle Neulinge und alle alten Hasen, die diese in Empfang nehmen möchten. Es gibt kurze Präsentationen, einen offenen Gesprächsteil und ein Stricktreffen. <!--more-->
|
||||
|
||||
Was für Projekte und Gruppen gibt es im CCCHH? Muss ich IT-Profi sein, um bei euch mitzumachen, oder finde ich auch als fachfremde Person einen Platz? Macht ihr eigentlich nur Computer oder engagiert ihr euch auch sozial und politisch? Wie sieht es mit Inklusion und Barrierefreiheit aus? Wie organisieren sich FLINTA\*-Personen im CCC-Umfeld? Wie kann ich in den Club einsteigen und wie finde ich ein Projekt, bei dem ich mich einbringen kann? Wen kann ich ansprechen, wenn ich über ein bestimmtes Thema etwas lernen möchte? Warum habt ihr eigentlich alle Katzenohren auf?
|
||||
|
||||
Diese und weitere Fragen beantworten wir euch in [unseren Vereinsräumen](https://hamburg.ccc.de/#kontakt) in der Viktoria-Kaserne.
|
||||
|
||||
## Ablauf und Programm
|
||||
- 15:30: Ab hier rechnen wir mit eurem Erscheinen, aber wir werden natürlich während der gesamten Zeitdauer der Veranstaltung unsere Tür für Besuchende öffnen. Ihr dürft auch später kommen.
|
||||
- 16:00 bis 17:00: Wir stellen unseren Club sowie verschiedene Gruppen und Projekte vor, um euch zu inspirieren und zum Mitmachen einzuladen. Wir sprechen über [regelmäßige Termine](https://wiki.hamburg.ccc.de/club:terminserien:start) und feste Gruppen in unserem Hackspace, über [Geekfem](https://geekfem.net/) und die [Haecksen](https://www.haecksen.org/), über [CTF](https://wiki.hamburg.ccc.de/club:ctf:start), über die [Cryptoparty](https://cryptoparty-hamburg.de/) sowie über andere Projekte, die im Chaos-Umfeld passieren.
|
||||
- 17:00 bis 18:00: In einer lockeren Runde beantworten wir eure Fragen zu den vorgestellten Projekten oder zum Club allgemein.
|
||||
- Ab 18:00: Gemütliches Stricktreffen für alle, die an der flauschigen Seite des Chaos interessiert oder schon daran beteiligt sind, denn Chaos ist viel mehr als nur Computerkram. Wenn alle, die sowieso schon stricken, ein bisschen zusätzliches Material mitbringen, können wir es auch denen beibringen, die es neu lernen möchten.
|
||||
- Im weiteren Verlauf des Abends Übergang zu Socializing.
|
||||
|
||||
Hinweis 1, Maskenpflicht: Rücksichtnahme und Inklusion sind feste Bestandteile der Chaos-Kultur. Um gesundheitlich vorbelastete Personen zu schützen, gilt in unseren Clubräumen eine sogenannte On-Demand-Maskenpflicht: Sobald eine Person dies wünscht, müssen alle Anwesenden eine FFP2-Maske aufsetzen. Da an der Organisation und Durchführung dieser Veranstaltung mehrere Personen beteiligt sind, die auf diesen Schutz angewiesen sind, ist davon auszugehen, dass eine Maskenpflicht gelten wird. Selbstverständlich stehen in den Clubräumen Masken zur Verfügung für alle, die keine eigene dabei haben.
|
||||
|
||||
Hinweis 2, Einlass: Da unsere Klingel vor einiger Zeit entwendet wurde (Beweggründe dafür sind unklar), ist es derzeit so, dass Gäste im Club anrufen müssen (siehe [Kontakt](https://hamburg.ccc.de/#kontakt)), um am Eingang abgeholt zu werden. Ein Schild mit der Club-Telefonnummer hängt an der Stelle, wo sich einstmals unsere Klingel befand, aber für den Fall, dass ihr den richtigen Eingang nicht findet oder sofern ihr anderweitig Hilfe braucht (Rollstuhl, Sehbehinderung, falschen Eingang genommen etc.) empfehlen wir euch, die Nummer schon im Vorfeld zu notieren. Alternativ ist es möglich, in unserem [Matrix-Channel](https://matrix.to/#/#ccchh:hamburg.ccc.de) zu schreiben.
|
||||
|
||||
Hinweis 3, all creatures welcome: The presentation part will be in German but we do speak English, and are more than happy to introduce you to our hackspace individually.
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
---
|
||||
categories: event
|
||||
title: 'CTF am 20.04.2024'
|
||||
date: '2024-04-20T12:00:00+02:00' # date of the event
|
||||
publishDate: '2024-04-16T21:18:41+02:00' # when to publish
|
||||
draft: false
|
||||
location: Zeiseweg 9, Hautpraum
|
||||
weight: 0
|
||||
authors:
|
||||
- w1ntermute
|
||||
tags: ctf
|
||||
#header:
|
||||
# caption: A caption für the picture will be used as Alt-Tex
|
||||
# image: Path to the image
|
||||
---
|
||||
|
||||
Es ist wieder so weit, wir wollen gemeinsam hacken. Kommt gerne vorbei und wir werden zusammen die challenges angehen.
|
||||
|
||||
Teilnehmen werden wir am [Potsdam Cyber Games](https://potsdam-cyber-games.de/). Wir spielen am Samstag, dem 20.04.2024, ab 12:00, im Clubraum und am Sonntag, dem 21.04.2024 bis 20:00. Im Hauptraum des Z9.
|
||||
|
||||
Wir treffen uns dabei, um zusammen zu rätseln, zu hacken und zu tschunken. [Meldet euch gerne bei uns](https://wiki.hamburg.ccc.de/club:ctf:start#kontakt).
|
||||
|
||||
Wer es nicht schafft, vor Ort zu sein, kann auch gerne zu Hause spielen und beim nächsten CTF-MIttwoch Fragen oder Lösungen mit uns durchgehen.
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
---
|
||||
categories: event
|
||||
title: 'Openchaos am 14.06.2024 fällt aus'
|
||||
date: '2024-06-14T20:00:00+02:00' # date of the event
|
||||
publishDate: '2024-06-08T18:00:00+02:00' # when to publish
|
||||
draft: false
|
||||
location: Zeiseweg 9, Hautpraum
|
||||
weight: 0
|
||||
tags: openchaos
|
||||
#header:
|
||||
# caption: A caption für the picture will be used as Alt-Tex
|
||||
# image: Path to the image
|
||||
---
|
||||
|
||||
Aus organisatorischen Gründen fällt das Openchaos am Freitag den 14. Juni 2024 leider aus.
|
||||
Die nächsten Termine sind am Dienstag den 25. Juni, und Freitag den 12. Juli (mit Maskenpflicht).
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
---
|
||||
categories: event
|
||||
title: 'Openchaos am 12.07. erst um 21 Uhr'
|
||||
date: '2024-07-12T21:00:00+02:00' # date of the event
|
||||
publishDate: '2024-07-10T18:00:00+02:00' # when to publish
|
||||
draft: false
|
||||
location: Zeiseweg 9, Hautpraum
|
||||
weight: 0
|
||||
tags: openchaos
|
||||
---
|
||||
|
||||
Aus organisatorischen Gründen kann das Openchaos am Freitag den 12. Juli 2024 erst um 21 Uhr beginnen.
|
||||
Wir bitten darum, nicht vor 21 Uhr zu erscheinen.
|
||||
|
|
@ -7,4 +7,4 @@ headless: true
|
|||
|
||||
{{< calendar-table >}}
|
||||
|
||||
Im Wiki findest du eine [Übersicht über regelmäßige Termine](https://wiki.hamburg.ccc.de/club:terminserien:start) oder du abonnierst den Kalender als [iCal-Feed](webcal://cloud.hamburg.ccc.de/remote.php/dav/public-calendars/QJAdExziSnNJEz5g/?export).
|
||||
Im Wiki findest du eine [Übersicht über regelmäßige Termine](https://wiki.ccchh.net/club:terminserien:start) oder du abonnierst den Kalender als [iCal-Feed](webcal://cloud.hamburg.ccc.de/remote.php/dav/public-calendars/QJAdExziSnNJEz5g/?export).
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ draft: false
|
|||
headless: true
|
||||
---
|
||||
|
||||
Wenn du uns kennenlernen möchtest, komm doch einfach mal zum [Open Chaos](https://wiki.hamburg.ccc.de/club:terminserien:openchaos) vorbei.
|
||||
Wenn du uns kennenlernen möchtest, komm doch einfach mal zum [Open Chaos](https://wiki.ccchh.net/club:terminserien:openchaos) vorbei.
|
||||
Gelegentlich bieten wir außerdem Vorträge zu spezifischen Themen an, die hier im [Blog]({{< ref "/blog" >}}) und im Kalender veröffentlichen.
|
||||
|
||||
{{< img-resize "2-visit/Z9-hauptraum-202301-leinwand.jpeg" "300x" "float-right" >}}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ draft: false
|
|||
headless: true
|
||||
type: card
|
||||
image: ffhhlogo_neu.png
|
||||
link: https://wiki.hamburg.ccc.de/club:freifunk:start
|
||||
link: https://wiki.ccchh.net/club:freifunk:start
|
||||
---
|
||||
|
||||
Die Vision von Freifunk ist die Verbreitung freier Netzwerke, die Demokratisierung der Kommunikationsmedien und die Förderung lokaler Sozialstrukturen.
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ draft: false
|
|||
headless: true
|
||||
type: card
|
||||
image: haecksen-logo-gruenblau.png
|
||||
link: https://wiki.hamburg.ccc.de/club:geekfem:start
|
||||
link: https://wiki.ccchh.net/club:geekfem:start
|
||||
---
|
||||
|
||||
Geekfem ist ein Raum für technik-interessierte Frauen* und veranstaltet regelmäßig Termine zu verschiedenen Themen oder einfach nur zum schnacken.
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ draft: false
|
|||
headless: true
|
||||
type: card
|
||||
image: c3h2-logo.png
|
||||
link: https://wiki.hamburg.ccc.de/club:ctf:start
|
||||
link: https://wiki.ccchh.net/club:ctf:start
|
||||
---
|
||||
|
||||
Die CTF-Gruppe "Cyclopropenylidene" beschäftigt sich spielerisch mit IT-Security.
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ draft: false
|
|||
headless: true
|
||||
type: card
|
||||
image: cms-logo-blau.png
|
||||
link: https://wiki.hamburg.ccc.de/club:cms:start
|
||||
link: https://wiki.ccchh.net/club:cms:start
|
||||
---
|
||||
|
||||
CMS ist ein regionales Bildungsprojekt des CCCHH an Schulen in Hamburg und dem Umland.
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ draft: false
|
|||
headless: true
|
||||
type: card
|
||||
image: cryptoparty-300x100.png
|
||||
link: https://wiki.hamburg.ccc.de/club:cryptogruppe:start
|
||||
link: https://wiki.ccchh.net/club:cryptogruppe:start
|
||||
---
|
||||
|
||||
Die Cryptogruppe befasst sich mit digitaler Selbstverteidigung und veranstaltet u.a. Cryptoparties in Hamburg.
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ draft: false
|
|||
headless: true
|
||||
type: card
|
||||
# image: TODO
|
||||
link: https://wiki.hamburg.ccc.de/club:ueberwachungsstammtisch:start
|
||||
link: https://wiki.ccchh.net/club:ueberwachungsstammtisch:start
|
||||
---
|
||||
|
||||
Menschen aus Hamburg und der Welt sprechen über Überwachung und was wir dagegen tun können.
|
||||
|
|
|
|||
|
|
@ -5,4 +5,4 @@ headless: true
|
|||
type: card
|
||||
---
|
||||
|
||||
Falls du den CCC Hansestadt Hamburg e.V. unterstützen willst, lohnt es sich eine [Fördermitgliedschaft](https://wiki.hamburg.ccc.de/verein:offizielles:foemi-formular) abzuschließen.
|
||||
Falls du den Chaos Computer Club Hansestadt Hamburg e.V. unterstützen willst, lohnt es sich eine [Fördermitgliedschaft](https://wiki.ccchh.net/verein:offizielles:foemi-formular) abzuschließen.
|
||||
|
|
|
|||
|
|
@ -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.hamburg.ccc.de/club:geschichte).
|
||||
Mehr dazu findest du im [Wiki](https://wiki.ccchh.net/club:geschichte).
|
||||
|
|
|
|||
|
|
@ -10,18 +10,21 @@ Unsere Räume befinden sich im Gebäude der [FUX eG](https://fux-eg.org):
|
|||
**Zeiseweg 9**
|
||||
22765 Hamburg-Altona.
|
||||
|
||||
Da die Zwischentüren im Haus verschlossen sind, muss euch immer eine Person am Eingang abholen.
|
||||
Da die Zwischentüren im Haus verschlossen sind, muss euch immer eine Person am Eingang anholen.
|
||||
Am östlichen Eingang (siehe Markierung auf der Karte) ist dafür eine Klingel.
|
||||
(Die Klingel ist aktuell verschwunden, bitte ruft einfach [+49 40 23830150](tel:+494023830150) an.)
|
||||
(Die Klingel ist aktuell verschwunden, bitte ruft einfach [+49 221 59619 1008](tel:+49221596191008) an.)
|
||||
|
||||
Parkplätze sind in der Umgebung rar und es muss ein Parkschein gelöst werden, wir sind aber gut per ÖPNV erreichbar.
|
||||
Die S-Bahn-Station **Holstenstraße** ist ca. 700 m entfernt, die Bushaltestellen **Max-Brauer-Allee (Mitte)** oder Gerichtstraße ca. 400 m.
|
||||
{{< clearfix >}}
|
||||
|
||||
#### Wichtige Informationen für Mobilitätseingeschränkte
|
||||
Unsere Räume befinden sich im ersten Stock und sind über den zentralen Aufzug erreichbar. Der Aufzug kann entweder aus dem Hof oder über das Erdgeschoss erreicht werden. Um ins Erdgeschoss zu kommen, kann die Hebevorrichtung im Kubus benutzt werden. Für die Hoftür des Fahrstuhls ist ein Schlüssel notwendig, für die Hebevorrichtung eine Schlüsselkarte.
|
||||
Unsere Räume befinden sich im ersten Stock und sind prinzipiell über den zentralen Aufzug erreichbar.
|
||||
Der Aufzug ist vom Hof erreichbar, kann aber von Außen nur mit einem Schlüssel geöffnet werden.
|
||||
Die Hebevorrichtung am Haupteingang braucht leider auch eine Schlüsselkarte, die wir aber haben.
|
||||
|
||||
Um sicherzugehen, das die Technik einwandfrei funktioniert, bevor ihr euch auf den Weg macht, meldet euch im Matrix oder telefonisch unter [+49 40 23830150](tel:+494023830150), dann können wir sichergehen, das euch jemand abholt.
|
||||
So oder so ist es also hilfreich, wenn ihr euch telefonisch meldet ([+49 221 59619 1008](tel:+49221596191008)), damit euch jemand abholen kann.
|
||||
Am Besten meldet ihr euch auch vorher, da der Aufzug gelegentlich defekt ist.
|
||||
|
||||
|
||||
#### Weitere Kontaktdaten
|
||||
|
|
|
|||
|
|
@ -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. 20300 eingetragen.
|
||||
|
||||
## Kontakt
|
||||
|
||||
|
|
|
|||
|
|
@ -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. 20300 eingetragen.
|
||||
|
||||
### Kontaktdaten der Datenschutzstelle des CCC Hansestadt Hamburg e.V.
|
||||
|
||||
|
|
|
|||
|
|
@ -7,10 +7,10 @@ OUTFILE=data/calendar.json
|
|||
# See here for uname -s outputs: https://en.wikipedia.org/wiki/Uname#Examples
|
||||
OS_TYPE=$(uname -s)
|
||||
if [ "$OS_TYPE" = "Linux" ]; then
|
||||
START_TIME=$(date --date="-6 hours" +%s) # now - 6 hours
|
||||
START_TIME=$(date --date="-1 day" +%s) # yesterday
|
||||
END_TIME=$(date --date="+1 month" +%s) # now + 1 month
|
||||
elif [ "$OS_TYPE" = "Darwin" ] || [ "$OS_TYPE" = "FreeBSD" ]; then
|
||||
START_TIME=$(date -v-6H +%s) # now - 6 hours
|
||||
START_TIME=$(date -v-1d +%s) # yesterday
|
||||
END_TIME=$(date -v+1m +%s) # now + 1 month
|
||||
else
|
||||
echo "ERROR: Unsupported OS type"
|
||||
|
|
|
|||
|
|
@ -48,19 +48,19 @@ enableGitInfo = true
|
|||
[[menu.footer]]
|
||||
name = "Satzung"
|
||||
weight = 90
|
||||
url = "https://wiki.hamburg.ccc.de/verein:offizielles:satzung"
|
||||
url = "https://wiki.ccchh.net/verein:offizielles:satzung"
|
||||
[menu.footer.params]
|
||||
rel = "external"
|
||||
[[menu.footer]]
|
||||
name = "Hausordnung"
|
||||
weight = 92
|
||||
url = "https://wiki.hamburg.ccc.de/verein:offizielles:hausordnung"
|
||||
url = "https://wiki.ccchh.net/verein:offizielles:hausordnung"
|
||||
[menu.footer.params]
|
||||
rel = "external"
|
||||
[[menu.footer]]
|
||||
name = "Mitglied werden"
|
||||
weight = 94
|
||||
url = "https://wiki.hamburg.ccc.de/verein:offizielles:foemi-formular"
|
||||
url = "https://wiki.ccchh.net/verein:offizielles:foemi-formular"
|
||||
[menu.footer.params]
|
||||
rel = "external"
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
{
|
||||
"$schema": "https://docs.renovatebot.com/renovate-schema.json",
|
||||
"extends": [
|
||||
"config:recommended"
|
||||
]
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
categories: article
|
||||
title: '{{ replace .File.ContentBaseName `-` ` ` | title }}'
|
||||
date: '{{ .Date }}'
|
||||
draft: false
|
||||
draft: true
|
||||
authors:
|
||||
- your name
|
||||
# tags:
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: "{{ replace .Name "-" " " | title }}"
|
||||
date: {{ .Date }}
|
||||
draft: false
|
||||
draft: true
|
||||
---
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ categories: event
|
|||
title: '{{ replace .File.ContentBaseName `-` ` ` | title }}'
|
||||
date: '{{ .Date }}' # date of the event
|
||||
publishDate: '{{ .Date }}' # when to publish
|
||||
draft: false
|
||||
draft: true
|
||||
location: Z9
|
||||
authors:
|
||||
- your name
|
||||
|
|
|
|||
|
|
@ -1,33 +0,0 @@
|
|||
"use strict";
|
||||
|
||||
function setScrolling(enable = true) {
|
||||
const body = document.body;
|
||||
if (enable) {
|
||||
body.style.overflow = "unset";
|
||||
}
|
||||
else {
|
||||
body.style.overflow = "hidden";
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const hamburgerMenuCheckbox = document.querySelector(".menu-button");
|
||||
|
||||
// When the hamburger menu is open, disable scrolling.
|
||||
hamburgerMenuCheckbox.addEventListener("change", () => {
|
||||
if (hamburgerMenuCheckbox.checked) {
|
||||
setScrolling(false);
|
||||
}
|
||||
else {
|
||||
setScrolling(true);
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener("resize", () => {
|
||||
if (window.innerWidth > 768 && hamburgerMenuCheckbox.checked) {
|
||||
// Uncheck the checkbox to disable scrolling and to get to the original state.
|
||||
hamburgerMenuCheckbox.checked = false;
|
||||
hamburgerMenuCheckbox.dispatchEvent(new Event("change"));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -76,5 +76,5 @@ function update() {
|
|||
|
||||
window.onload = function () {
|
||||
update()
|
||||
window.setInterval(update, interval_ms)
|
||||
window.setTimeout(update, interval_ms)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +0,0 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2019-2023 Pico
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
// Output color in RGB format
|
||||
@function to-rgb($color) {
|
||||
@return unquote("rgb(#{red($color)}, #{green($color)}, #{blue($color)})");
|
||||
}
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
// Config
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Set the root element for $enable-semantic-container and $enable-responsive-spacings
|
||||
$semantic-root-element: "body" !default;
|
||||
|
||||
// Enable <header>, <main>, <footer> inside $semantic-root-element as containers
|
||||
$enable-semantic-container: false !default;
|
||||
|
||||
// Enable .container and .container-fluid
|
||||
$enable-class-container: true !default;
|
||||
|
||||
// Enable a centered viewport for <header>, <main>, <footer> inside $enable-semantic-container
|
||||
// Fluid layout if disabled
|
||||
$enable-viewport: true !default;
|
||||
|
||||
// Enable responsive spacings for <header>, <main>, <footer>, <section>, <article>
|
||||
// Fixed spacings if disabled
|
||||
$enable-responsive-spacings: true !default;
|
||||
|
||||
// Enable responsive typography
|
||||
// Fixed root element size if disabled
|
||||
$enable-responsive-typography: true !default;
|
||||
|
||||
// Enable .classes
|
||||
// .classless version if disabled
|
||||
$enable-classes: true !default;
|
||||
|
||||
// Enable .grid class
|
||||
$enable-grid: true !default;
|
||||
|
||||
// Enable transitions
|
||||
$enable-transitions: true !default;
|
||||
|
||||
// Enable overriding with !important
|
||||
$enable-important: true !default;
|
||||
|
||||
// Responsive
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// xs: Extra small (portrait phones)
|
||||
// sm: Small(landscape phones)
|
||||
// md: Medium(tablets)
|
||||
// lg: Large(desktops)
|
||||
// xl: Extra large (large desktops)
|
||||
|
||||
// NOTE:
|
||||
// To provide an easy and fine styling on each breakpoint
|
||||
// we didn't use @each, @mixin or @include.
|
||||
// That means you need to edit each CSS selector file to add a breakpoint
|
||||
|
||||
// Breakpoints
|
||||
// 'null' disable the breakpoint
|
||||
$breakpoints: (
|
||||
xs: 0,
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1200px,
|
||||
) !default;
|
||||
|
||||
// Viewports
|
||||
$viewports: (
|
||||
// 'null' disable the viewport on a breakpoint
|
||||
sm: 510px,
|
||||
md: 700px,
|
||||
lg: 920px,
|
||||
xl: 1130px
|
||||
) !default;
|
||||
|
|
@ -1,116 +0,0 @@
|
|||
/**
|
||||
* Accordion (<details>)
|
||||
*/
|
||||
|
||||
details {
|
||||
display: block;
|
||||
margin-bottom: var(--spacing);
|
||||
padding-bottom: var(--spacing);
|
||||
border-bottom: var(--border-width) solid var(--accordion-border-color);
|
||||
|
||||
summary {
|
||||
line-height: 1rem;
|
||||
list-style-type: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:not([role]) {
|
||||
color: var(--accordion-close-summary-color);
|
||||
}
|
||||
|
||||
@if $enable-transitions {
|
||||
transition: color var(--transition);
|
||||
}
|
||||
|
||||
// Reset marker
|
||||
&::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::-moz-list-bullet {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
// Marker
|
||||
&::after {
|
||||
display: block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-inline-start: calc(var(--spacing, 1rem) * 0.5);
|
||||
float: right;
|
||||
transform: rotate(-90deg);
|
||||
background-image: var(--icon-chevron);
|
||||
background-position: right center;
|
||||
background-size: 1rem auto;
|
||||
background-repeat: no-repeat;
|
||||
content: "";
|
||||
|
||||
@if $enable-transitions {
|
||||
transition: transform var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
|
||||
&:not([role="button"]) {
|
||||
color: var(--accordion-active-summary-color);
|
||||
}
|
||||
}
|
||||
|
||||
// Type button
|
||||
&[role="button"] {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
|
||||
// Marker
|
||||
&::after {
|
||||
height: calc(1rem * var(--line-height, 1.5));
|
||||
background-image: var(--icon-chevron-button);
|
||||
}
|
||||
|
||||
@if $enable-classes {
|
||||
// .contrast
|
||||
&:not(.outline).contrast {
|
||||
// Marker
|
||||
&::after {
|
||||
background-image: var(--icon-chevron-button-inverse);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Open
|
||||
&[open] {
|
||||
> summary {
|
||||
margin-bottom: calc(var(--spacing));
|
||||
|
||||
&:not([role]) {
|
||||
&:not(:focus) {
|
||||
color: var(--accordion-open-summary-color);
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
details {
|
||||
summary {
|
||||
text-align: right;
|
||||
|
||||
&::after {
|
||||
float: left;
|
||||
background-position: left center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
/**
|
||||
* Card (<article>)
|
||||
*/
|
||||
|
||||
article {
|
||||
margin: var(--block-spacing-vertical) 0;
|
||||
padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--card-background-color);
|
||||
box-shadow: var(--card-box-shadow);
|
||||
|
||||
> header,
|
||||
> footer {
|
||||
margin-right: calc(var(--block-spacing-horizontal) * -1);
|
||||
margin-left: calc(var(--block-spacing-horizontal) * -1);
|
||||
padding: calc(var(--block-spacing-vertical) * 0.66)
|
||||
var(--block-spacing-horizontal);
|
||||
background-color: var(--card-sectionning-background-color);
|
||||
}
|
||||
|
||||
> header {
|
||||
margin-top: calc(var(--block-spacing-vertical) * -1);
|
||||
margin-bottom: var(--block-spacing-vertical);
|
||||
border-bottom: var(--border-width) solid var(--card-border-color);
|
||||
border-top-right-radius: var(--border-radius);
|
||||
border-top-left-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
> footer {
|
||||
margin-top: var(--block-spacing-vertical);
|
||||
margin-bottom: calc(var(--block-spacing-vertical) * -1);
|
||||
border-top: var(--border-width) solid var(--card-border-color);
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,214 +0,0 @@
|
|||
/**
|
||||
* Dropdown ([role="list"])
|
||||
*/
|
||||
|
||||
// Menu
|
||||
details[role="list"],
|
||||
li[role="list"] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
details[role="list"] summary + ul,
|
||||
li[role="list"] > ul {
|
||||
display: flex;
|
||||
z-index: 99;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
right: 0;
|
||||
left: 0;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: var(--border-width) solid var(--dropdown-border-color);
|
||||
border-radius: var(--border-radius);
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
background-color: var(--dropdown-background-color);
|
||||
box-shadow: var(--card-box-shadow);
|
||||
color: var(--dropdown-color);
|
||||
white-space: nowrap;
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
padding: calc(var(--form-element-spacing-vertical) * 0.5)
|
||||
var(--form-element-spacing-horizontal);
|
||||
list-style: none;
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
margin: calc(var(--form-element-spacing-vertical) * -0.5)
|
||||
calc(var(--form-element-spacing-horizontal) * -1);
|
||||
padding: calc(var(--form-element-spacing-vertical) * 0.5)
|
||||
var(--form-element-spacing-horizontal);
|
||||
overflow: hidden;
|
||||
color: var(--dropdown-color);
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--dropdown-hover-background-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Marker
|
||||
details[role="list"] summary,
|
||||
li[role="list"] > a {
|
||||
&::after {
|
||||
display: block;
|
||||
width: 1rem;
|
||||
height: calc(1rem * var(--line-height, 1.5));
|
||||
margin-inline-start: 0.5rem;
|
||||
float: right;
|
||||
transform: rotate(0deg);
|
||||
background-image: var(--icon-chevron);
|
||||
background-position: right center;
|
||||
background-size: 1rem auto;
|
||||
background-repeat: no-repeat;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
// Global dropdown only
|
||||
details[role="list"] {
|
||||
padding: 0;
|
||||
border-bottom: none;
|
||||
|
||||
// Style <summary> as <select>
|
||||
summary {
|
||||
margin-bottom: 0;
|
||||
|
||||
&:not([role]) {
|
||||
height: calc(
|
||||
1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 +
|
||||
var(--border-width) * 2
|
||||
);
|
||||
padding: var(--form-element-spacing-vertical)
|
||||
var(--form-element-spacing-horizontal);
|
||||
border: var(--border-width) solid var(--form-element-border-color);
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--form-element-background-color);
|
||||
color: var(--form-element-placeholder-color);
|
||||
line-height: inherit;
|
||||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition: background-color var(--transition),
|
||||
border-color var(--transition), color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
border-color: var(--form-element-active-border-color);
|
||||
background-color: var(--form-element-active-background-color);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Close for details[role="list"]
|
||||
&[open] summary {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: none;
|
||||
content: "";
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// All Dropdowns inside <nav>
|
||||
nav details[role="list"] summary,
|
||||
nav li[role="list"] a {
|
||||
display: flex;
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
nav details[role="list"] summary + ul,
|
||||
nav li[role="list"] > ul {
|
||||
min-width: fit-content;
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
li a {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdowns inside <nav> as nested <details>
|
||||
nav details[role="list"] {
|
||||
summary,
|
||||
summary:not([role]) {
|
||||
height: auto;
|
||||
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
|
||||
}
|
||||
|
||||
&[open] summary {
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
summary + ul {
|
||||
margin-top: var(--outline-width);
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
summary[role="link"] {
|
||||
margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
|
||||
line-height: var(--line-height);
|
||||
|
||||
+ ul {
|
||||
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
|
||||
margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdowns inside a <nav> without using <details>
|
||||
li[role="list"] {
|
||||
// Open on hover (for mobile)
|
||||
// or on active/focus (for keyboard navigation)
|
||||
&:hover > ul,
|
||||
a:active ~ ul,
|
||||
a:focus ~ ul {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
> ul {
|
||||
display: none;
|
||||
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
|
||||
margin-inline-start: calc(
|
||||
var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal)
|
||||
);
|
||||
}
|
||||
|
||||
> a::after {
|
||||
background-image: var(--icon-chevron);
|
||||
}
|
||||
}
|
||||
|
||||
label > details[role="list"] {
|
||||
margin-top: calc(var(--spacing) * .25);
|
||||
margin-bottom: var(--spacing);
|
||||
}
|
||||
|
|
@ -1,168 +0,0 @@
|
|||
/**
|
||||
* Modal (<dialog>)
|
||||
*/
|
||||
|
||||
:root {
|
||||
--scrollbar-width: 0px;
|
||||
}
|
||||
|
||||
dialog {
|
||||
display: flex;
|
||||
z-index: 999;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: inherit;
|
||||
min-width: 100%;
|
||||
height: inherit;
|
||||
min-height: 100%;
|
||||
padding: var(--spacing);
|
||||
border: 0;
|
||||
backdrop-filter: var(--modal-overlay-backdrop-filter);
|
||||
background-color: var(--modal-overlay-background-color);
|
||||
color: var(--color);
|
||||
|
||||
// Content
|
||||
article {
|
||||
$close-selector: if($enable-classes, ".close", "a[rel='prev']");
|
||||
max-height: calc(100vh - var(--spacing) * 2);
|
||||
overflow: auto;
|
||||
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
max-width: map-get($viewports, "sm");
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
max-width: map-get($viewports, "md");
|
||||
}
|
||||
}
|
||||
|
||||
> header,
|
||||
> footer {
|
||||
padding: calc(var(--block-spacing-vertical) * 0.5)
|
||||
var(--block-spacing-horizontal);
|
||||
}
|
||||
|
||||
> header {
|
||||
#{$close-selector} {
|
||||
margin: 0;
|
||||
margin-left: var(--spacing);
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
> footer {
|
||||
text-align: right;
|
||||
|
||||
[role="button"] {
|
||||
margin-bottom: 0;
|
||||
|
||||
&:not(:first-of-type) {
|
||||
margin-left: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
&:last-of-type {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Close icon
|
||||
#{$close-selector} {
|
||||
display: block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-top: calc(var(--block-spacing-vertical) * -0.5);
|
||||
margin-bottom: var(--typography-spacing-vertical);
|
||||
margin-left: auto;
|
||||
background-image: var(--icon-close);
|
||||
background-position: center;
|
||||
background-size: auto 1rem;
|
||||
background-repeat: no-repeat;
|
||||
opacity: 0.5;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition: opacity var(--transition);
|
||||
}
|
||||
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Closed state
|
||||
&:not([open]),
|
||||
&[open="false"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Utilities
|
||||
@if $enable-classes {
|
||||
.modal-is-open {
|
||||
padding-right: var(--scrollbar-width, 0px);
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
|
||||
dialog {
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Animations
|
||||
@if ($enable-classes and $enable-transitions) {
|
||||
$animation-duration: 0.2s;
|
||||
|
||||
:where(.modal-is-opening, .modal-is-closing) {
|
||||
dialog,
|
||||
dialog > article {
|
||||
animation-duration: $animation-duration;
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
dialog {
|
||||
animation-duration: ($animation-duration * 4);
|
||||
animation-name: modal-overlay ;
|
||||
|
||||
> article {
|
||||
animation-delay: $animation-duration;
|
||||
animation-name: modal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-is-closing {
|
||||
dialog,
|
||||
dialog > article {
|
||||
animation-delay: 0s;
|
||||
animation-direction: reverse;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes modal-overlay {
|
||||
from {
|
||||
backdrop-filter: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes modal {
|
||||
from {
|
||||
transform: translateY(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,141 +0,0 @@
|
|||
/**
|
||||
* Nav
|
||||
*/
|
||||
|
||||
// Reboot based on :
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
|
||||
// Prevent VoiceOver from ignoring list semantics in Safari (opinionated)
|
||||
:where(nav li)::before {
|
||||
float: left;
|
||||
content: "\200B";
|
||||
}
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Horizontal Nav
|
||||
nav,
|
||||
nav ul {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
nav {
|
||||
justify-content: space-between;
|
||||
|
||||
ol,
|
||||
ul {
|
||||
align-items: center;
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
&:first-of-type {
|
||||
margin-left: calc(var(--nav-element-spacing-horizontal) * -1);
|
||||
}
|
||||
&:last-of-type {
|
||||
margin-right: calc(var(--nav-element-spacing-horizontal) * -1);
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: var(--nav-element-spacing-vertical)
|
||||
var(--nav-element-spacing-horizontal);
|
||||
|
||||
// Minimal support for buttons and forms elements
|
||||
> * {
|
||||
--spacing: 0;
|
||||
}
|
||||
}
|
||||
|
||||
:where(a, [role="link"]) {
|
||||
display: inline-block;
|
||||
margin: calc(var(--nav-link-spacing-vertical) * -1)
|
||||
calc(var(--nav-link-spacing-horizontal) * -1);
|
||||
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
|
||||
border-radius: var(--border-radius);
|
||||
text-decoration: none;
|
||||
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Breadcrumb
|
||||
&[aria-label="breadcrumb"] {
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
|
||||
& ul li {
|
||||
&:not(:first-child) {
|
||||
margin-inline-start: var(--nav-link-spacing-horizontal);
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
::after {
|
||||
position: absolute;
|
||||
width: calc(var(--nav-link-spacing-horizontal) * 2);
|
||||
margin-inline-start: calc(var(--nav-link-spacing-horizontal) / 2);
|
||||
content: "/";
|
||||
color: var(--muted-color);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& a[aria-current] {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Minimal support for role="button"
|
||||
[role="button"] {
|
||||
margin-right: inherit;
|
||||
margin-left: inherit;
|
||||
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
|
||||
}
|
||||
}
|
||||
|
||||
// Vertical Nav
|
||||
aside {
|
||||
nav,
|
||||
ol,
|
||||
ul,
|
||||
li {
|
||||
display: block;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: calc(var(--nav-element-spacing-vertical) * 0.5)
|
||||
var(--nav-element-spacing-horizontal);
|
||||
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Minimal support for links as buttons
|
||||
[role="button"] {
|
||||
margin: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Breadcrumb RTL
|
||||
[dir="rtl"] {
|
||||
nav {
|
||||
&[aria-label="breadcrumb"] {
|
||||
& ul li {
|
||||
&:not(:last-child) {
|
||||
::after {
|
||||
content: "\\";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,89 +0,0 @@
|
|||
/**
|
||||
* Progress
|
||||
*/
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Add the correct display in Edge 18- and IE
|
||||
// 2. Add the correct vertical alignment in Chrome, Edge, and Firefox
|
||||
progress {
|
||||
display: inline-block; // 1
|
||||
vertical-align: baseline; // 2
|
||||
}
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
progress {
|
||||
// Reset the default appearance
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
|
||||
// Styles
|
||||
display: inline-block;
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
height: 0.5rem;
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
overflow: hidden;
|
||||
|
||||
// Remove Firefox and Opera border
|
||||
border: 0;
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--progress-background-color);
|
||||
|
||||
// IE10 uses `color` to set the bar background-color
|
||||
color: var(--progress-color);
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
border-radius: var(--border-radius);
|
||||
background: none;
|
||||
}
|
||||
&[value]::-webkit-progress-value {
|
||||
background-color: var(--progress-color);
|
||||
}
|
||||
&::-moz-progress-bar {
|
||||
background-color: var(--progress-color);
|
||||
}
|
||||
|
||||
// Indeterminate state
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
&:indeterminate {
|
||||
background: var(--progress-background-color)
|
||||
linear-gradient(
|
||||
to right,
|
||||
var(--progress-color) 30%,
|
||||
var(--progress-background-color) 30%
|
||||
)
|
||||
top left / 150% 150% no-repeat;
|
||||
animation: progress-indeterminate 1s linear infinite;
|
||||
|
||||
&[value]::-webkit-progress-value {
|
||||
background-color: transparent;
|
||||
}
|
||||
&::-moz-progress-bar {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
progress:indeterminate {
|
||||
animation-direction: reverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes progress-indeterminate {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,183 +0,0 @@
|
|||
/**
|
||||
* Button
|
||||
*/
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Change the font styles in all browsers
|
||||
// 2. Remove the margin on controls in Safari
|
||||
// 3. Show the overflow in Edge
|
||||
button {
|
||||
margin: 0; // 2
|
||||
overflow: visible; // 3
|
||||
font-family: inherit; // 1
|
||||
text-transform: none; // 1
|
||||
}
|
||||
|
||||
// Correct the inability to style buttons in iOS and Safari
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: var(--spacing);
|
||||
}
|
||||
|
||||
[role="button"] {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type="submit"],
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
[role="button"] {
|
||||
--background-color: var(--primary);
|
||||
--border-color: var(--primary);
|
||||
--color: var(--primary-inverse);
|
||||
--box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
||||
padding: var(--form-element-spacing-vertical)
|
||||
var(--form-element-spacing-horizontal);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
outline: none;
|
||||
background-color: var(--background-color);
|
||||
box-shadow: var(--box-shadow);
|
||||
color: var(--color);
|
||||
font-weight: var(--font-weight);
|
||||
font-size: 1rem;
|
||||
line-height: var(--line-height);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition: background-color var(--transition),
|
||||
border-color var(--transition), color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
--background-color: var(--primary-hover);
|
||||
--border-color: var(--primary-hover);
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
||||
--color: var(--primary-inverse);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(--outline-width) var(--primary-focus);
|
||||
}
|
||||
}
|
||||
|
||||
// .secondary, .contrast & .outline
|
||||
@if $enable-classes {
|
||||
|
||||
// Secondary
|
||||
:is(button, input[type="submit"], input[type="button"], [role="button"]).secondary,
|
||||
input[type="reset"] {
|
||||
--background-color: var(--secondary);
|
||||
--border-color: var(--secondary);
|
||||
--color: var(--secondary-inverse);
|
||||
cursor: pointer;
|
||||
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
--color: var(--secondary-inverse);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(--outline-width) var(--secondary-focus);
|
||||
}
|
||||
}
|
||||
|
||||
// Contrast
|
||||
:is(button, input[type="submit"], input[type="button"], [role="button"]).contrast {
|
||||
--background-color: var(--contrast);
|
||||
--border-color: var(--contrast);
|
||||
--color: var(--contrast-inverse);
|
||||
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
--background-color: var(--contrast-hover);
|
||||
--border-color: var(--contrast-hover);
|
||||
--color: var(--contrast-inverse);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(--outline-width) var(--contrast-focus);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline (primary)
|
||||
:is(button, input[type="submit"], input[type="button"], [role="button"]).outline,
|
||||
input[type="reset"].outline {
|
||||
--background-color: transparent;
|
||||
--color: var(--primary);
|
||||
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
--background-color: transparent;
|
||||
--color: var(--primary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline (secondary)
|
||||
:is(button, input[type="submit"], input[type="button"], [role="button"]).outline.secondary,
|
||||
input[type="reset"].outline {
|
||||
--color: var(--secondary);
|
||||
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
--color: var(--secondary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline (contrast)
|
||||
:is(button, input[type="submit"], input[type="button"], [role="button"]).outline.contrast {
|
||||
--color: var(--contrast);
|
||||
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
--color: var(--contrast-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
@else {
|
||||
// Secondary button without .class
|
||||
input[type="reset"] {
|
||||
--background-color: var(--secondary);
|
||||
--border-color: var(--secondary);
|
||||
--color: var(--secondary-inverse);
|
||||
cursor: pointer;
|
||||
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(--outline-width) var(--secondary-focus);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Button [disabled]
|
||||
// Links without href are disabled by default
|
||||
:where(button, [type="submit"], [type="button"], [type="reset"], [role="button"])[disabled],
|
||||
:where(fieldset[disabled]) :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]),
|
||||
a[role="button"]:not([href]) {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
@ -1,91 +0,0 @@
|
|||
/**
|
||||
* Code
|
||||
*/
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Correct the inheritance and scaling of font size in all browsers
|
||||
// 2. Correct the odd `em` font sizing in all browsers
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-size: 0.875em; // 2
|
||||
font-family: var(--font-family); // 1
|
||||
}
|
||||
|
||||
// Prevent overflow of the container in all browsers (opinionated)
|
||||
pre {
|
||||
-ms-overflow-style: scrollbar;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
pre,
|
||||
code,
|
||||
kbd {
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--code-background-color);
|
||||
color: var(--code-color);
|
||||
font-weight: var(--font-weight);
|
||||
line-height: initial;
|
||||
}
|
||||
|
||||
code,
|
||||
kbd {
|
||||
display: inline-block;
|
||||
padding: 0.375rem 0.5rem;
|
||||
}
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
margin-bottom: var(--spacing);
|
||||
overflow-x: auto;
|
||||
|
||||
> code {
|
||||
display: block;
|
||||
padding: var(--spacing);
|
||||
background: none;
|
||||
font-size: 14px;
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
}
|
||||
|
||||
// Code Syntax
|
||||
code {
|
||||
// Tags
|
||||
b {
|
||||
color: var(--code-tag-color);
|
||||
font-weight: var(--font-weight);
|
||||
}
|
||||
|
||||
// Properties
|
||||
i {
|
||||
color: var(--code-property-color);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
// Values
|
||||
u {
|
||||
color: var(--code-value-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Comments
|
||||
em {
|
||||
color: var(--code-comment-color);
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
// kbd
|
||||
kbd {
|
||||
background-color: var(--code-kbd-background-color);
|
||||
color: var(--code-kbd-color);
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
/**
|
||||
* Embedded content
|
||||
*/
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Change the alignment on media elements in all browsers (opinionated)
|
||||
:where(audio, canvas, iframe, img, svg, video) {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Add the correct display in IE 9-
|
||||
audio,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Add the correct display in iOS 4-7
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
// Remove the border on iframes in all browsers (opinionated)
|
||||
:where(iframe) {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
// 1. Remove the border on images inside links in IE 10.
|
||||
// 2. Responsive by default
|
||||
img {
|
||||
max-width: 100%; // 2
|
||||
height: auto; // 2
|
||||
border-style: none; // 1
|
||||
}
|
||||
|
||||
// Change the fill color to match the text color in all browsers (opinionated)
|
||||
:where(svg:not([fill])) {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
// Hide the overflow in IE
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -1,286 +0,0 @@
|
|||
/**
|
||||
* Form elements
|
||||
* Alternatives input types (Not Checkboxes & Radios)
|
||||
*/
|
||||
|
||||
// Color
|
||||
[type="color"] {
|
||||
// Wrapper
|
||||
@mixin color-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&::-webkit-color-swatch-wrapper {
|
||||
@include color-wrapper;
|
||||
}
|
||||
|
||||
&::-moz-focus-inner {
|
||||
@include color-wrapper;
|
||||
}
|
||||
|
||||
// Swatch
|
||||
@mixin color-swatch {
|
||||
border: 0;
|
||||
border-radius: calc(var(--border-radius) * 0.5);
|
||||
}
|
||||
|
||||
&::-webkit-color-swatch {
|
||||
@include color-swatch;
|
||||
}
|
||||
|
||||
&::-moz-color-swatch {
|
||||
@include color-swatch;
|
||||
}
|
||||
}
|
||||
|
||||
// Date & Time
|
||||
// :not() are needed to add Specificity and avoid !important on padding
|
||||
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
|
||||
&:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
|
||||
--icon-position: 0.75rem;
|
||||
--icon-width: 1rem;
|
||||
padding-right: calc(var(--icon-width) + var(--icon-position));
|
||||
background-image: var(--icon-date);
|
||||
background-position: center right var(--icon-position);
|
||||
background-size: var(--icon-width) auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
// Time
|
||||
&[type="time"] {
|
||||
background-image: var(--icon-time);
|
||||
}
|
||||
}
|
||||
|
||||
// Calendar picker
|
||||
[type="date"],
|
||||
[type="datetime-local"],
|
||||
[type="month"],
|
||||
[type="time"],
|
||||
[type="week"] {
|
||||
&::-webkit-calendar-picker-indicator {
|
||||
width: var(--icon-width);
|
||||
margin-right: calc(var(--icon-width) * -1);
|
||||
margin-left: var(--icon-position);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"]
|
||||
:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
// Calendar icons are hidden in Firefox
|
||||
@if $enable-important {
|
||||
@-moz-document url-prefix() {
|
||||
[type="date"],
|
||||
[type="datetime-local"],
|
||||
[type="month"],
|
||||
[type="time"],
|
||||
[type="week"] {
|
||||
padding-right: var(--form-element-spacing-horizontal) !important;
|
||||
background-image: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// File
|
||||
[type="file"] {
|
||||
--color: var(--muted-color);
|
||||
padding: calc(var(--form-element-spacing-vertical) * 0.5) 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
|
||||
@mixin file-selector-button {
|
||||
--background-color: var(--secondary);
|
||||
--border-color: var(--secondary);
|
||||
--color: var(--secondary-inverse);
|
||||
margin-right: calc(var(--spacing) / 2);
|
||||
margin-left: 0;
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: calc(var(--spacing) / 2);
|
||||
padding: calc(var(--form-element-spacing-vertical) * 0.5)
|
||||
calc(var(--form-element-spacing-horizontal) * 0.5);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
outline: none;
|
||||
background-color: var(--background-color);
|
||||
box-shadow: var(--box-shadow);
|
||||
color: var(--color);
|
||||
font-weight: var(--font-weight);
|
||||
font-size: 1rem;
|
||||
line-height: var(--line-height);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition: background-color var(--transition),
|
||||
border-color var(--transition), color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
|
||||
&:is(:hover, :active, :focus) {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&::file-selector-button {
|
||||
@include file-selector-button;
|
||||
}
|
||||
|
||||
&::-webkit-file-upload-button {
|
||||
@include file-selector-button;
|
||||
}
|
||||
|
||||
&::-ms-browse {
|
||||
@include file-selector-button;
|
||||
}
|
||||
}
|
||||
|
||||
// Range
|
||||
[type="range"] {
|
||||
// Config
|
||||
$height-track: 0.25rem;
|
||||
$height-thumb: 1.25rem;
|
||||
$border-thumb: 2px;
|
||||
|
||||
// Styles
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
height: $height-thumb;
|
||||
background: none;
|
||||
|
||||
// Slider Track
|
||||
@mixin slider-track {
|
||||
width: 100%;
|
||||
height: $height-track;
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--range-border-color);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition: background-color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-slider-runnable-track {
|
||||
@include slider-track;
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
@include slider-track;
|
||||
}
|
||||
|
||||
&::-ms-track {
|
||||
@include slider-track;
|
||||
}
|
||||
|
||||
// Slider Thumb
|
||||
@mixin slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: $height-thumb;
|
||||
height: $height-thumb;
|
||||
margin-top: #{(-($height-thumb * 0.5) + ($height-track * 0.5))};
|
||||
border: $border-thumb solid var(--range-thumb-border-color);
|
||||
border-radius: 50%;
|
||||
background-color: var(--range-thumb-color);
|
||||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition: background-color var(--transition),
|
||||
transform var(--transition);
|
||||
}
|
||||
}
|
||||
&::-webkit-slider-thumb {
|
||||
@include slider-thumb;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
@include slider-thumb;
|
||||
}
|
||||
|
||||
&::-ms-thumb {
|
||||
@include slider-thumb;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
--range-border-color: var(--range-active-border-color);
|
||||
--range-thumb-color: var(--range-thumb-hover-color);
|
||||
}
|
||||
|
||||
&:active {
|
||||
--range-thumb-color: var(--range-thumb-active-color);
|
||||
|
||||
// Slider Thumb
|
||||
&::-webkit-slider-thumb {
|
||||
transform: scale(1.25);
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
transform: scale(1.25);
|
||||
}
|
||||
|
||||
&::-ms-thumb {
|
||||
transform: scale(1.25);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Search
|
||||
// :not() are needed to add Specificity and avoid !important on padding
|
||||
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
|
||||
&[type="search"] {
|
||||
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
|
||||
border-radius: 5rem;
|
||||
background-image: var(--icon-search);
|
||||
background-position: center left 1.125rem;
|
||||
background-size: 1rem auto;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
&[aria-invalid] {
|
||||
@if $enable-important {
|
||||
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
|
||||
}
|
||||
@else {
|
||||
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
|
||||
}
|
||||
background-position: center left 1.125rem, center right 0.75rem;
|
||||
}
|
||||
|
||||
&[aria-invalid="false"] {
|
||||
background-image: var(--icon-search), var(--icon-valid);
|
||||
}
|
||||
|
||||
&[aria-invalid="true"] {
|
||||
background-image: var(--icon-search), var(--icon-invalid);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Cancel button
|
||||
[type="search"] {
|
||||
&::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
:where(input) {
|
||||
&:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
|
||||
&[type="search"] {
|
||||
background-position: center right 1.125rem;
|
||||
|
||||
&[aria-invalid] {
|
||||
background-position: center right 1.125rem, center left 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,138 +0,0 @@
|
|||
/**
|
||||
* Form elements
|
||||
* Checkboxes & Radios
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
margin-top: -0.125em;
|
||||
margin-right: 0.375em;
|
||||
margin-left: 0;
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0.375em;
|
||||
border-width: var(--border-width);
|
||||
font-size: inherit;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
|
||||
&::-ms-check {
|
||||
display: none; // unstyle IE checkboxes
|
||||
}
|
||||
|
||||
&:checked,
|
||||
&:checked:active,
|
||||
&:checked:focus {
|
||||
--background-color: var(--primary);
|
||||
--border-color: var(--primary);
|
||||
background-image: var(--icon-checkbox);
|
||||
background-position: center;
|
||||
background-size: 0.75em auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
& ~ label {
|
||||
display: inline-block;
|
||||
margin-right: 0.375em;
|
||||
margin-bottom: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
// Checkboxes
|
||||
[type="checkbox"] {
|
||||
&:indeterminate {
|
||||
--background-color: var(--primary);
|
||||
--border-color: var(--primary);
|
||||
background-image: var(--icon-minus);
|
||||
background-position: center;
|
||||
background-size: 0.75em auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
// Radios
|
||||
[type="radio"] {
|
||||
border-radius: 50%;
|
||||
|
||||
&:checked,
|
||||
&:checked:active,
|
||||
&:checked:focus {
|
||||
--background-color: var(--primary-inverse);
|
||||
border-width: 0.35em;
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Switchs
|
||||
[type="checkbox"][role="switch"] {
|
||||
--background-color: var(--switch-background-color);
|
||||
--border-color: var(--switch-background-color);
|
||||
--color: var(--switch-color);
|
||||
|
||||
// Config
|
||||
$switch-height: 1.25em;
|
||||
$switch-width: 2.25em;
|
||||
$switch-transition: 0.1s ease-in-out;
|
||||
|
||||
// Styles
|
||||
width: $switch-width;
|
||||
height: $switch-height;
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: $switch-height;
|
||||
background-color: var(--background-color);
|
||||
line-height: $switch-height;
|
||||
|
||||
&:focus {
|
||||
--background-color: var(--switch-background-color);
|
||||
--border-color: var(--switch-background-color);
|
||||
}
|
||||
|
||||
&:checked {
|
||||
--background-color: var(--switch-checked-background-color);
|
||||
--border-color: var(--switch-checked-background-color);
|
||||
}
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
width: calc(#{$switch-height} - (var(--border-width) * 2));
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background-color: var(--color);
|
||||
content: "";
|
||||
|
||||
@if $enable-transitions {
|
||||
transition: margin $switch-transition;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background-image: none;
|
||||
|
||||
&::before {
|
||||
margin-left: calc(#{$switch-width * 0.5} - var(--border-width));
|
||||
margin-inline-start: calc(#{$switch-width * 0.5} - var(--border-width));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Aria-invalid
|
||||
[type="checkbox"],
|
||||
[type="checkbox"]:checked,
|
||||
[type="radio"],
|
||||
[type="radio"]:checked,
|
||||
[type="checkbox"][role="switch"],
|
||||
[type="checkbox"][role="switch"]:checked {
|
||||
|
||||
&[aria-invalid="false"] {
|
||||
--border-color: var(--form-element-valid-border-color);
|
||||
}
|
||||
|
||||
&[aria-invalid="true"] {
|
||||
--border-color: var(--form-element-invalid-border-color);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,352 +0,0 @@
|
|||
/**
|
||||
* Form elements
|
||||
*/
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Change the font styles in all browsers
|
||||
// 2. Remove the margin in Firefox and Safari
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
margin: 0; // 2
|
||||
font-size: 1rem; // 1
|
||||
line-height: var(--line-height); // 1
|
||||
font-family: inherit; // 1
|
||||
letter-spacing: inherit; // 2
|
||||
}
|
||||
|
||||
// Show the overflow in IE.
|
||||
input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
// Remove the inheritance of text transform in Edge, Firefox, and IE
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
// 1. Correct the text wrapping in Edge and IE
|
||||
// 2. Correct the color inheritance from `fieldset` elements in IE
|
||||
// 3. Remove the padding so developers are not caught out when they zero out
|
||||
// `fieldset` elements in all browsers
|
||||
legend {
|
||||
max-width: 100%; // 1
|
||||
padding: 0; // 3
|
||||
color: inherit; // 2
|
||||
white-space: normal; // 1
|
||||
}
|
||||
|
||||
// 1. Remove the default vertical scrollbar in IE
|
||||
textarea {
|
||||
overflow: auto; // 1
|
||||
}
|
||||
|
||||
// Remove the padding in IE 10
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Correct the cursor style of increment and decrement buttons in Safari
|
||||
::-webkit-inner-spin-button,
|
||||
::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// 1. Correct the odd appearance in Chrome and Safari
|
||||
// 2. Correct the outline style in Safari
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; // 1
|
||||
outline-offset: -2px; // 2
|
||||
}
|
||||
|
||||
// Remove the inner padding in Chrome and Safari on macOS
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
// 1. Correct the inability to style clickable types in iOS and Safari
|
||||
// 2. Change font properties to `inherit` in Safari
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; // 1
|
||||
font: inherit; // 2
|
||||
}
|
||||
|
||||
// Remove the inner border and padding of focus outlines in Firefox
|
||||
::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
// Remove the focus outline in Firefox
|
||||
:-moz-focusring {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
// Remove the additional :invalid styles in Firefox
|
||||
:-moz-ui-invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// Change the inconsistent appearance in IE (opinionated)
|
||||
::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Remove the border and padding in all browsers (opinionated)
|
||||
[type="file"],
|
||||
[type="range"] {
|
||||
padding: 0;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Force height for alternatives input types
|
||||
input:not([type="checkbox"], [type="radio"], [type="range"]) {
|
||||
height: calc(
|
||||
(1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) +
|
||||
(var(--border-width) * 2)
|
||||
);
|
||||
}
|
||||
|
||||
// Fieldset
|
||||
fieldset {
|
||||
margin: 0;
|
||||
margin-bottom: var(--spacing);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Label & legend
|
||||
label,
|
||||
fieldset legend {
|
||||
display: block;
|
||||
margin-bottom: calc(var(--spacing) * 0.25);
|
||||
font-weight: var(--form-label-font-weight, var(--font-weight));
|
||||
}
|
||||
|
||||
// Blocks, 100%
|
||||
input:not([type="checkbox"], [type="radio"]),
|
||||
select,
|
||||
textarea {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Reset appearance (Not Checkboxes, Radios, Range and File)
|
||||
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
|
||||
select,
|
||||
textarea {
|
||||
appearance: none;
|
||||
padding: var(--form-element-spacing-vertical)
|
||||
var(--form-element-spacing-horizontal);
|
||||
}
|
||||
|
||||
// Commons styles
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
--background-color: var(--form-element-background-color);
|
||||
--border-color: var(--form-element-border-color);
|
||||
--color: var(--form-element-color);
|
||||
--box-shadow: none;
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
outline: none;
|
||||
background-color: var(--background-color);
|
||||
box-shadow: var(--box-shadow);
|
||||
color: var(--color);
|
||||
font-weight: var(--font-weight);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition: background-color var(--transition),
|
||||
border-color var(--transition), color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
// Active & Focus
|
||||
input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [readonly]),
|
||||
:where(select, textarea) {
|
||||
&:is(:active, :focus) {
|
||||
--background-color: var(--form-element-active-background-color);
|
||||
}
|
||||
}
|
||||
|
||||
// Active & Focus
|
||||
input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]),
|
||||
:where(select, textarea) {
|
||||
&:is(:active, :focus) {
|
||||
--border-color: var(--form-element-active-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
// Focus
|
||||
input:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]),
|
||||
select,
|
||||
textarea {
|
||||
&:focus {
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled
|
||||
input:not([type="submit"], [type="button"], [type="reset"])[disabled],
|
||||
select[disabled],
|
||||
textarea[disabled],
|
||||
:where(fieldset[disabled]) :is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
|
||||
--background-color: var(--form-element-disabled-background-color);
|
||||
--border-color: var(--form-element-disabled-border-color);
|
||||
opacity: var(--form-element-disabled-opacity);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Aria-invalid
|
||||
:where(input, select, textarea) {
|
||||
&:not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
|
||||
&[aria-invalid] {
|
||||
@if $enable-important {
|
||||
padding-right: calc(
|
||||
var(--form-element-spacing-horizontal) + 1.5rem
|
||||
) !important;
|
||||
padding-left: var(--form-element-spacing-horizontal);
|
||||
padding-inline-start: var(--form-element-spacing-horizontal) !important;
|
||||
padding-inline-end: calc(
|
||||
var(--form-element-spacing-horizontal) + 1.5rem
|
||||
) !important;
|
||||
}
|
||||
@else {
|
||||
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||
padding-left: var(--form-element-spacing-horizontal);
|
||||
padding-inline-start: var(--form-element-spacing-horizontal);
|
||||
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||
}
|
||||
background-position: center right 0.75rem;
|
||||
background-size: 1rem auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
&[aria-invalid="false"] {
|
||||
background-image: var(--icon-valid);
|
||||
}
|
||||
|
||||
&[aria-invalid="true"] {
|
||||
background-image: var(--icon-invalid);
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-invalid="false"] {
|
||||
--border-color: var(--form-element-valid-border-color);
|
||||
|
||||
&:is(:active, :focus) {
|
||||
@if $enable-important {
|
||||
--border-color: var(--form-element-valid-active-border-color) !important;
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color) !important;
|
||||
}
|
||||
@else {
|
||||
--border-color: var(--form-element-valid-active-border-color);
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-invalid="true"] {
|
||||
--border-color: var(--form-element-invalid-border-color);
|
||||
|
||||
&:is(:active, :focus) {
|
||||
@if $enable-important {
|
||||
--border-color: var(--form-element-invalid-active-border-color) !important;
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important;
|
||||
}
|
||||
@else {
|
||||
--border-color: var(--form-element-invalid-active-border-color);
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
:where(input, select, textarea) {
|
||||
&:not([type="checkbox"], [type="radio"]) {
|
||||
&:is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"] ){
|
||||
background-position: center left 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Placeholder
|
||||
input::placeholder,
|
||||
input::-webkit-input-placeholder,
|
||||
textarea::placeholder,
|
||||
textarea::-webkit-input-placeholder,
|
||||
select:invalid {
|
||||
color: var(--form-element-placeholder-color);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Margin bottom (Not Checkboxes and Radios)
|
||||
input:not([type="checkbox"], [type="radio"]),
|
||||
select,
|
||||
textarea {
|
||||
margin-bottom: var(--spacing);
|
||||
}
|
||||
|
||||
// Select
|
||||
select {
|
||||
// Unstyle the caret on `<select>`s in IE10+.
|
||||
&::-ms-expand {
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:not([multiple], [size]) {
|
||||
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||
padding-left: var(--form-element-spacing-horizontal);
|
||||
padding-inline-start: var(--form-element-spacing-horizontal);
|
||||
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||
background-image: var(--icon-chevron);
|
||||
background-position: center right 0.75rem;
|
||||
background-size: 1rem auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
select {
|
||||
&:not([multiple], [size]) {
|
||||
background-position: center left 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Helper
|
||||
$inputs: "input, select, textarea";
|
||||
|
||||
@if ($enable-classes and $enable-grid) {
|
||||
$inputs: $inputs + ", .grid";
|
||||
}
|
||||
|
||||
:where(#{$inputs}) {
|
||||
+ small {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: calc(var(--spacing) * -0.75);
|
||||
margin-bottom: var(--spacing);
|
||||
color: var(--muted-color);
|
||||
}
|
||||
}
|
||||
|
||||
// Styles for Input inside a label
|
||||
label {
|
||||
> :where(input, select, textarea) {
|
||||
margin-top: calc(var(--spacing) * 0.25);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
/**
|
||||
* Miscs
|
||||
*/
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Correct the inheritance of border color in Firefox
|
||||
// 2. Add the correct box sizing in Firefox
|
||||
hr {
|
||||
height: 0; // 2
|
||||
border: 0;
|
||||
border-top: 1px solid var(--muted-border-color);
|
||||
color: inherit; // 1
|
||||
}
|
||||
|
||||
// Add the correct display in IE 10+
|
||||
[hidden],
|
||||
template {
|
||||
@if $enable-important {
|
||||
display: none !important;
|
||||
}
|
||||
@else {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Add the correct display in IE 9-
|
||||
canvas {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
/**
|
||||
* Table
|
||||
*/
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Collapse border spacing in all browsers (opinionated)
|
||||
// 2. Remove text indentation from table contents in Chrome, Edge, and Safari
|
||||
:where(table) {
|
||||
width: 100%;
|
||||
border-collapse: collapse; // 1
|
||||
border-spacing: 0;
|
||||
text-indent: 0; // 2
|
||||
}
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Cells
|
||||
th,
|
||||
td {
|
||||
padding: calc(var(--spacing) / 2) var(--spacing);
|
||||
border-bottom: var(--border-width) solid var(--table-border-color);
|
||||
color: var(--color);
|
||||
font-weight: var(--font-weight);
|
||||
font-size: var(--font-size);
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
// Footer
|
||||
tfoot {
|
||||
th,
|
||||
td {
|
||||
border-top: var(--border-width) solid var(--table-border-color);
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Striped
|
||||
table {
|
||||
&[role="grid"] {
|
||||
tbody tr:nth-child(odd) {
|
||||
background-color: var(--table-row-stripped-background-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,264 +0,0 @@
|
|||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Add the correct font weight in Chrome, Edge, and Safari
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
// Prevent `sub` and `sup` elements from affecting the line height in all browsers
|
||||
sub,
|
||||
sup {
|
||||
position: relative;
|
||||
font-size: 0.75em;
|
||||
line-height: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
address,
|
||||
blockquote,
|
||||
dl,
|
||||
figure,
|
||||
form,
|
||||
ol,
|
||||
p,
|
||||
pre,
|
||||
table,
|
||||
ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--typography-spacing-vertical);
|
||||
color: var(--color);
|
||||
font-style: normal;
|
||||
font-weight: var(--font-weight);
|
||||
font-size: var(--font-size);
|
||||
}
|
||||
|
||||
// Links
|
||||
// 1. Remove the gray background on active links in IE 10
|
||||
a,
|
||||
[role="link"] {
|
||||
--color: var(--primary);
|
||||
--background-color: transparent;
|
||||
outline: none;
|
||||
background-color: var(--background-color); // 1
|
||||
color: var(--color);
|
||||
text-decoration: var(--text-decoration);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition: background-color var(--transition), color var(--transition),
|
||||
text-decoration var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
--color: var(--primary-hover);
|
||||
--text-decoration: underline;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
--background-color: var(--primary-focus);
|
||||
}
|
||||
|
||||
@if $enable-classes {
|
||||
// Secondary
|
||||
&.secondary {
|
||||
--color: var(--secondary);
|
||||
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
--color: var(--secondary-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
--background-color: var(--secondary-focus);
|
||||
}
|
||||
}
|
||||
|
||||
// Contrast
|
||||
&.contrast {
|
||||
--color: var(--contrast);
|
||||
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
--color: var(--contrast-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
--background-color: var(--contrast-focus);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Headings
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--typography-spacing-vertical);
|
||||
color: var(--color);
|
||||
font-weight: var(--font-weight);
|
||||
font-size: var(--font-size);
|
||||
font-family: var(--font-family);
|
||||
}
|
||||
|
||||
h1 {
|
||||
--color: var(--h1-color);
|
||||
}
|
||||
h2 {
|
||||
--color: var(--h2-color);
|
||||
}
|
||||
h3 {
|
||||
--color: var(--h3-color);
|
||||
}
|
||||
h4 {
|
||||
--color: var(--h4-color);
|
||||
}
|
||||
h5 {
|
||||
--color: var(--h5-color);
|
||||
}
|
||||
h6 {
|
||||
--color: var(--h6-color);
|
||||
}
|
||||
|
||||
// Margin-top for headings after a typography block
|
||||
:where(address, blockquote, dl, figure, form, ol, p, pre, table, ul) {
|
||||
~ :is(h1, h2, h3, h4, h5, h6) {
|
||||
margin-top: var(--typography-spacing-vertical);
|
||||
}
|
||||
}
|
||||
|
||||
// Heading group
|
||||
@if $enable-classes == false {
|
||||
hgroup {
|
||||
margin-bottom: var(--typography-spacing-vertical);
|
||||
|
||||
> * {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
> *:last-child {
|
||||
--color: var(--muted-color);
|
||||
--font-weight: unset;
|
||||
font-size: 1rem;
|
||||
font-family: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $enable-classes {
|
||||
hgroup,
|
||||
.headings {
|
||||
margin-bottom: var(--typography-spacing-vertical);
|
||||
|
||||
> * {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
> *:last-child {
|
||||
--color: var(--muted-color);
|
||||
--font-weight: unset;
|
||||
font-size: 1rem;
|
||||
font-family: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Paragraphs
|
||||
p {
|
||||
margin-bottom: var(--typography-spacing-vertical);
|
||||
}
|
||||
|
||||
// Small
|
||||
small {
|
||||
font-size: var(--font-size);
|
||||
}
|
||||
|
||||
// Lists
|
||||
:where(dl, ol, ul) {
|
||||
padding-right: 0;
|
||||
padding-left: var(--spacing);
|
||||
padding-inline-start: var(--spacing);
|
||||
padding-inline-end: 0;
|
||||
|
||||
li {
|
||||
margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
// Margin-top for nested lists
|
||||
// 1. Remove the margin on nested lists in Chrome, Edge, IE, and Safari
|
||||
:where(dl, ol, ul) {
|
||||
:is(dl, ol, ul) {
|
||||
margin: 0; // 1
|
||||
margin-top: calc(var(--typography-spacing-vertical) * 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: square;
|
||||
}
|
||||
|
||||
// Highlighted text
|
||||
mark {
|
||||
padding: 0.125rem 0.25rem;
|
||||
background-color: var(--mark-background-color);
|
||||
color: var(--mark-color);
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
// Blockquote
|
||||
blockquote {
|
||||
display: block;
|
||||
margin: var(--typography-spacing-vertical) 0;
|
||||
padding: var(--spacing);
|
||||
border-right: none;
|
||||
border-left: 0.25rem solid var(--blockquote-border-color);
|
||||
border-inline-start: 0.25rem solid var(--blockquote-border-color);
|
||||
border-inline-end: none;
|
||||
|
||||
footer {
|
||||
margin-top: calc(var(--typography-spacing-vertical) * 0.5);
|
||||
color: var(--blockquote-footer-color);
|
||||
}
|
||||
}
|
||||
|
||||
// Abbreviations
|
||||
// 1. Remove underline decoration in Chrome, Edge, IE, Opera, and Safari
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
text-decoration: none; // 1
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
// Ins
|
||||
ins {
|
||||
color: var(--ins-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// del
|
||||
del {
|
||||
color: var(--del-color);
|
||||
}
|
||||
|
||||
// selection
|
||||
::selection {
|
||||
background-color: var(--primary-focus);
|
||||
}
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
@if ($enable-class-container and $enable-classes) {
|
||||
/**
|
||||
* Container
|
||||
*/
|
||||
|
||||
.container,
|
||||
.container-fluid {
|
||||
width: 100%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-right: var(--spacing);
|
||||
padding-left: var(--spacing);
|
||||
}
|
||||
|
||||
.container {
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
max-width: map-get($viewports, "sm");
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
max-width: map-get($viewports, "md");
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
max-width: map-get($viewports, "lg");
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") {
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
max-width: map-get($viewports, "xl");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
/**
|
||||
* Document
|
||||
* Content-box & Responsive typography
|
||||
*/
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Add border box sizing in all browsers (opinionated)
|
||||
// 2. Backgrounds do not repeat by default (opinionated)
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box; // 1
|
||||
background-repeat: no-repeat; // 2
|
||||
}
|
||||
|
||||
// 1. Add text decoration inheritance in all browsers (opinionated)
|
||||
// 2. Add vertical alignment inheritance in all browsers (opinionated)
|
||||
::before,
|
||||
::after {
|
||||
text-decoration: inherit; // 1
|
||||
vertical-align: inherit; // 2
|
||||
}
|
||||
|
||||
// 1. Use the default cursor in all browsers (opinionated)
|
||||
// 2. Change the line height in all browsers (opinionated)
|
||||
// 3. Breaks words to prevent overflow in all browsers (opinionated)
|
||||
// 4. Use a 4-space tab width in all browsers (opinionated)
|
||||
// 5. Remove the grey highlight on links in iOS (opinionated)
|
||||
// 6. Prevent adjustments of font size after orientation changes in iOS
|
||||
:where(:root) {
|
||||
-webkit-tap-highlight-color: transparent; // 5
|
||||
-webkit-text-size-adjust: 100%; // 6
|
||||
text-size-adjust: 100%; // 6
|
||||
background-color: var(--background-color);
|
||||
color: var(--color);
|
||||
font-weight: var(--font-weight);
|
||||
font-size: var(--font-size);
|
||||
line-height: var(--line-height); // 2
|
||||
font-family: var(--font-family);
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-wrap: break-word; // 3
|
||||
cursor: default; // 1
|
||||
tab-size: 4; // 4
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
@if ($enable-classes and $enable-grid) {
|
||||
/**
|
||||
* Grid
|
||||
* Minimal grid system with auto-layout columns
|
||||
*/
|
||||
|
||||
.grid {
|
||||
grid-column-gap: var(--grid-spacing-horizontal);
|
||||
grid-row-gap: var(--grid-spacing-vertical);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
margin: 0;
|
||||
|
||||
@if map-get($breakpoints, "lg") {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
& > * {
|
||||
min-width: 0; // HACK for childs in overflow
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
/**
|
||||
* Horizontal scroller (<figure>)
|
||||
*/
|
||||
|
||||
// Wrapper to make any content responsive across all viewports
|
||||
figure {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: auto;
|
||||
|
||||
figcaption {
|
||||
padding: calc(var(--spacing) * 0.5) 0;
|
||||
color: var(--muted-color);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
/**
|
||||
* Section
|
||||
* Responsive spacings for section
|
||||
*/
|
||||
|
||||
section {
|
||||
margin-bottom: var(--block-spacing-vertical);
|
||||
}
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
/**
|
||||
* Sectioning
|
||||
* Container and responsive spacings for header, main, footer
|
||||
*/
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Render the `main` element consistently in IE
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Remove the margin in all browsers (opinionated)
|
||||
#{$semantic-root-element} {
|
||||
width: 100%;
|
||||
margin: 0; // 1
|
||||
|
||||
> header,
|
||||
> main,
|
||||
> footer {
|
||||
width: 100%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
|
||||
// Semantic container
|
||||
@if $enable-semantic-container {
|
||||
padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
|
||||
|
||||
// Centered viewport
|
||||
@if $enable-viewport {
|
||||
@if map-get($breakpoints, "sm") and $enable-viewport {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
max-width: map-get($viewports, "sm");
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") and $enable-viewport {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
max-width: map-get($viewports, "md");
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") and $enable-viewport {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
max-width: map-get($viewports, "lg");
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") and $enable-viewport {
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
max-width: map-get($viewports, "xl");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Semantic container
|
||||
@else {
|
||||
padding: var(--block-spacing-vertical) 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
// Config
|
||||
// --------------------
|
||||
|
||||
// Enable <header>, <main>, <footer> inside $semantic-root-element as containers
|
||||
$enable-semantic-container: true;
|
||||
|
||||
// Enable .classes
|
||||
$enable-classes: false;
|
||||
|
||||
// Pico Lib
|
||||
// --------------------
|
||||
|
||||
@import "pico";
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
// Config
|
||||
// --------------------
|
||||
|
||||
// Enable <header>, <main>, <footer> inside $semantic-root-element as containers
|
||||
$enable-semantic-container: true;
|
||||
|
||||
// Enable a centered viewport for <header>, <main>, <footer> inside $enable-semantic-container
|
||||
$enable-viewport: false;
|
||||
|
||||
// Enable .classes
|
||||
$enable-classes: false;
|
||||
|
||||
// Pico Lib
|
||||
// --------------------
|
||||
|
||||
@import "pico";
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
/*!
|
||||
* Pico CSS v1.5.11 (https://picocss.com)
|
||||
* Copyright 2019-2023 - Licensed under MIT
|
||||
*/
|
||||
|
||||
// Config
|
||||
@import "variables";
|
||||
|
||||
// Theming
|
||||
@import "themes/default";
|
||||
|
||||
// Layout
|
||||
@import "layout/document"; // html
|
||||
@import "layout/sectioning"; // body, header, main, footer
|
||||
@import "layout/container"; // .container, .container-fluid
|
||||
@import "layout/section"; // section
|
||||
@import "layout/grid"; // .grid
|
||||
@import "layout/scroller"; // figure
|
||||
|
||||
// Content
|
||||
@import "content/typography"; // a, headings, p, ul, blockquote, ...
|
||||
@import "content/embedded"; // audio, canvas, iframe, img, svg, video
|
||||
@import "content/button"; // button, a[role=button], type=button, type=submit ...
|
||||
@import "content/form"; // input, select, textarea, label, fieldset, legend
|
||||
@import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch
|
||||
@import "content/form-alt-input-types"; // type=color, type=date, type=file, type=search, ...
|
||||
@import "content/table"; // table, tr, td, ...
|
||||
@import "content/code"; // pre, code, ...
|
||||
@import "content/miscs"; // hr, template, [hidden], dialog, canvas
|
||||
|
||||
// Components
|
||||
@import "components/accordion"; // details, summary
|
||||
@import "components/card"; // article
|
||||
@import "components/modal"; // dialog
|
||||
@import "components/nav"; // nav
|
||||
@import "components/progress"; // progress
|
||||
@import "components/dropdown"; // dropdown
|
||||
|
||||
// Utilities
|
||||
@import "utilities/loading"; // aria-busy=true
|
||||
@import "utilities/tooltip"; // data-tooltip
|
||||
@import "utilities/accessibility"; // -ms-touch-action, aria-*
|
||||
@import "utilities/reduce-motion"; // prefers-reduced-motion
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
/*!
|
||||
* Pico CSS v1.5.11 (https://picocss.com)
|
||||
* Copyright 2019-2023 - Licensed under MIT
|
||||
*
|
||||
* Slim version example
|
||||
* You can export only the modules you need
|
||||
*/
|
||||
|
||||
// Config
|
||||
// --------------------
|
||||
|
||||
// Enable responsive spacings for <header>, <main>, <footer>, <section>, <article>
|
||||
$enable-responsive-spacings: false;
|
||||
|
||||
// Enable transitions
|
||||
$enable-transitions: false;
|
||||
|
||||
// Enable overriding with !important
|
||||
$enable-important: false;
|
||||
|
||||
// Pico Lib
|
||||
// --------------------
|
||||
|
||||
// Config
|
||||
@import "variables";
|
||||
|
||||
// Theming
|
||||
@import "themes/default";
|
||||
|
||||
// Layout
|
||||
@import "layout/document"; // html
|
||||
@import "layout/sectioning"; // body, header, main, footer
|
||||
@import "layout/container"; // .container, .container-fluid
|
||||
@import "layout/section"; // section
|
||||
@import "layout/grid"; // .grid
|
||||
@import "layout/scroller"; // figure
|
||||
|
||||
// Content
|
||||
@import "content/typography"; // a, headings, p, ul, blockquote, ...
|
||||
@import "content/embedded"; // audio, canvas, iframe, img, svg, video
|
||||
@import "content/button"; // button, a[role=button], type=button, type=submit ...
|
||||
@import "content/form"; // input, select, textarea, label, fieldset, legend
|
||||
@import "content/table"; // table, tr, td, ...
|
||||
|
||||
// Utilities
|
||||
@import "utilities/accessibility"; // -ms-touch-action, aria-*
|
||||
@import "utilities/reduce-motion"; // prefers-reduced-motion
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
/**
|
||||
* Theme: default
|
||||
*/
|
||||
|
||||
// Variables
|
||||
@import "../variables";
|
||||
@import "default/colors";
|
||||
|
||||
// Commons styles
|
||||
@import "default/styles";
|
||||
|
||||
// Light theme (Default)
|
||||
// Can be forced with data-theme="light"
|
||||
@import "default/light";
|
||||
|
||||
// Dark theme (Auto)
|
||||
// Automatically enabled if user has Dark mode enabled
|
||||
@import "default/dark";
|
||||
@media only screen and (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme]) {
|
||||
@include dark;
|
||||
}
|
||||
}
|
||||
|
||||
// Dark theme (Forced)
|
||||
// Enabled if forced with data-theme="dark"
|
||||
[data-theme="dark"] {
|
||||
@include dark;
|
||||
}
|
||||
|
||||
// Accent-color
|
||||
progress,
|
||||
[type="checkbox"],
|
||||
[type="radio"],
|
||||
[type="range"] {
|
||||
accent-color: var(--primary);
|
||||
}
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
// Navy-Grey
|
||||
$grey-hue: 205 !default;
|
||||
$grey-50: hsl($grey-hue, 20%, 94%) !default;
|
||||
$grey-100: hsl($grey-hue, 18%, 86%) !default;
|
||||
$grey-200: hsl($grey-hue, 16%, 77%) !default;
|
||||
$grey-300: hsl($grey-hue, 14%, 68%) !default;
|
||||
$grey-400: hsl($grey-hue, 12%, 59%) !default;
|
||||
$grey-500: hsl($grey-hue, 10%, 50%) !default;
|
||||
$grey-600: hsl($grey-hue, 15%, 41%) !default;
|
||||
$grey-700: hsl($grey-hue, 20%, 32%) !default;
|
||||
$grey-800: hsl($grey-hue, 25%, 23%) !default;
|
||||
$grey-900: hsl($grey-hue, 30%, 15%) !default;
|
||||
|
||||
// Light Blue
|
||||
$primary-hue: 195 !default;
|
||||
$primary-50: hsl($primary-hue, 90%, 94%) !default;
|
||||
$primary-100: hsl($primary-hue, 88%, 86%) !default;
|
||||
$primary-200: hsl($primary-hue, 86%, 77%) !default;
|
||||
$primary-300: hsl($primary-hue, 84%, 68%) !default;
|
||||
$primary-400: hsl($primary-hue, 82%, 59%) !default;
|
||||
$primary-500: hsl($primary-hue, 80%, 50%) !default;
|
||||
$primary-600: hsl($primary-hue, 85%, 41%) !default;
|
||||
$primary-700: hsl($primary-hue, 90%, 32%) !default;
|
||||
$primary-800: hsl($primary-hue, 95%, 23%) !default;
|
||||
$primary-900: hsl($primary-hue, 100%, 15%) !default;
|
||||
|
||||
// Black & White
|
||||
$black: #000 !default;
|
||||
$white: #fff !default;
|
||||
|
||||
// Amber
|
||||
$amber-50: #fff8e1 !default;
|
||||
$amber-100: #ffecb3 !default;
|
||||
$amber-200: #ffe082 !default;
|
||||
$amber-300: #ffd54f !default;
|
||||
$amber-400: #ffca28 !default;
|
||||
$amber-500: #ffc107 !default;
|
||||
$amber-600: #ffb300 !default;
|
||||
$amber-700: #ffa000 !default;
|
||||
$amber-800: #ff8f00 !default;
|
||||
$amber-900: #ff6f00 !default;
|
||||
|
||||
// Green
|
||||
$green-50: #e8f5e9 !default;
|
||||
$green-100: #c8e6c9 !default;
|
||||
$green-200: #a5d6a7 !default;
|
||||
$green-300: #81c784 !default;
|
||||
$green-400: #66bb6a !default;
|
||||
$green-500: #4caf50 !default;
|
||||
$green-600: #43a047 !default;
|
||||
$green-700: #388e3c !default;
|
||||
$green-800: #2e7d32 !default;
|
||||
$green-900: #1b5e20 !default;
|
||||
|
||||
// Red
|
||||
$red-50: #ffebee !default;
|
||||
$red-100: #ffcdd2 !default;
|
||||
$red-200: #ef9a9a !default;
|
||||
$red-300: #e57373 !default;
|
||||
$red-400: #ef5350 !default;
|
||||
$red-500: #f44336 !default;
|
||||
$red-600: #e53935 !default;
|
||||
$red-700: #d32f2f !default;
|
||||
$red-800: #c62828 !default;
|
||||
$red-900: #b71c1c !default;
|
||||
|
|
@ -1,159 +0,0 @@
|
|||
@import "../../functions";
|
||||
|
||||
// Default: Dark theme
|
||||
@mixin dark {
|
||||
--background-color: #{mix($black, $grey-900, 37.5%)};
|
||||
|
||||
// Texts colors
|
||||
--color: #{$grey-200};
|
||||
--h1-color: #{$grey-50};
|
||||
--h2-color: #{mix($grey-100, $grey-50)};
|
||||
--h3-color: #{$grey-100};
|
||||
--h4-color: #{mix($grey-200, $grey-100)};
|
||||
--h5-color: #{$grey-200};
|
||||
--h6-color: #{mix($grey-300, $grey-200)};
|
||||
|
||||
// Muted colors
|
||||
--muted-color: #{$grey-500};
|
||||
--muted-border-color: #{mix($grey-900, $grey-800, 75%)};
|
||||
|
||||
// Primary colors
|
||||
--primary: #{$primary-600};
|
||||
--primary-hover: #{$primary-500};
|
||||
--primary-focus: #{rgba($primary-600, 0.25)};
|
||||
--primary-inverse: #{$white};
|
||||
|
||||
// Secondary colors
|
||||
--secondary: #{$grey-600};
|
||||
--secondary-hover: #{$grey-500};
|
||||
--secondary-focus: #{rgba($grey-500, 0.25)};
|
||||
--secondary-inverse: #{$white};
|
||||
|
||||
// Contrast colors
|
||||
--contrast: #{$grey-50};
|
||||
--contrast-hover: #{$white};
|
||||
--contrast-focus: #{rgba($grey-500, 0.25)};
|
||||
--contrast-inverse: #{$black};
|
||||
|
||||
// Highlighted text (<mark>)
|
||||
--mark-background-color: #{mix($grey-300, $amber-300)};
|
||||
--mark-color: #{mix($black, $grey-900, 37.5%)};
|
||||
|
||||
// Inserted (<ins>) & Deleted (<ins>)
|
||||
--ins-color: #{$green-700};
|
||||
--del-color: #{$red-800};
|
||||
|
||||
// Blockquote
|
||||
--blockquote-border-color: var(--muted-border-color);
|
||||
--blockquote-footer-color: var(--muted-color);
|
||||
|
||||
// Button
|
||||
// To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)'
|
||||
// Don't use, 'none, 'false, 'null', '0', etc.
|
||||
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
|
||||
// Form elements
|
||||
--form-element-background-color: #{mix($black, $grey-900, 37.5%)};
|
||||
--form-element-border-color: #{mix($grey-800, $grey-700)};
|
||||
--form-element-color: var(--color);
|
||||
--form-element-placeholder-color: var(--muted-color);
|
||||
--form-element-active-background-color: var(--form-element-background-color);
|
||||
--form-element-active-border-color: var(--primary);
|
||||
--form-element-focus-color: var(--primary-focus);
|
||||
--form-element-disabled-background-color: #{$grey-800};
|
||||
--form-element-disabled-border-color: #{$grey-700};
|
||||
--form-element-disabled-opacity: 0.5;
|
||||
--form-element-invalid-border-color: #{$red-900};
|
||||
--form-element-invalid-active-border-color: #{$red-800};
|
||||
--form-element-invalid-focus-color: #{rgba($red-800, 0.25)};
|
||||
--form-element-valid-border-color: #{$green-800};
|
||||
--form-element-valid-active-border-color: #{$green-700};
|
||||
--form-element-valid-focus-color: #{rgba($green-700, 0.25)};
|
||||
|
||||
// Switch (input[type="checkbox"][role="switch"])
|
||||
--switch-background-color: #{mix($grey-800, $grey-700)};
|
||||
--switch-color: var(--primary-inverse);
|
||||
--switch-checked-background-color: var(--primary);
|
||||
|
||||
// Range (input[type="range"])
|
||||
--range-border-color: #{mix($grey-900, $grey-800)};
|
||||
--range-active-border-color: #{$grey-800};
|
||||
--range-thumb-border-color: var(--background-color);
|
||||
--range-thumb-color: var(--secondary);
|
||||
--range-thumb-hover-color: var(--secondary-hover);
|
||||
--range-thumb-active-color: var(--primary);
|
||||
|
||||
// Table
|
||||
--table-border-color: var(--muted-border-color);
|
||||
--table-row-stripped-background-color: #{rgba($grey-500, 0.05)};
|
||||
|
||||
// Code
|
||||
--code-background-color: #{mix($black, $grey-900, 12.5%)};
|
||||
--code-color: var(--muted-color);
|
||||
--code-kbd-background-color: var(--contrast);
|
||||
--code-kbd-color: var(--contrast-inverse);
|
||||
--code-tag-color: #{hsl(330, 30%, 50%)};
|
||||
--code-property-color: #{hsl(185, 30%, 50%)};
|
||||
--code-value-color: #{hsl(40, 10%, 50%)};
|
||||
--code-comment-color: #{mix($grey-700, $grey-600)};
|
||||
|
||||
// Accordion (<details>)
|
||||
--accordion-border-color: var(--muted-border-color);
|
||||
--accordion-active-summary-color: var(--primary);
|
||||
--accordion-close-summary-color: var(--color);
|
||||
--accordion-open-summary-color: var(--muted-color);
|
||||
|
||||
// Card (<article>)
|
||||
$box-shadow-elevation: 1rem;
|
||||
$box-shadow-blur-strengh: 6rem;
|
||||
$box-shadow-opacity: 0.06;
|
||||
--card-background-color: #{mix($black, $grey-900, 25%)};
|
||||
--card-border-color: var(--card-background-color);
|
||||
--card-box-shadow:
|
||||
#{($box-shadow-elevation * 0.5 * 0.029)} #{($box-shadow-elevation * 0.029)} #{($box-shadow-blur-strengh * 0.029)} #{rgba($black, ($box-shadow-opacity * 0.283))},
|
||||
#{($box-shadow-elevation * 0.5 * 0.067)} #{($box-shadow-elevation * 0.067)} #{($box-shadow-blur-strengh * 0.067)} #{rgba($black, ($box-shadow-opacity * 0.4))},
|
||||
#{($box-shadow-elevation * 0.5 * 0.125)} #{($box-shadow-elevation * 0.125)} #{($box-shadow-blur-strengh * 0.125)} #{rgba($black, ($box-shadow-opacity * 0.5))},
|
||||
#{($box-shadow-elevation * 0.5 * 0.225)} #{($box-shadow-elevation * 0.225)} #{($box-shadow-blur-strengh * 0.225)} #{rgba($black, ($box-shadow-opacity * 0.6))},
|
||||
#{($box-shadow-elevation * 0.5 * 0.417)} #{($box-shadow-elevation * 0.417)} #{($box-shadow-blur-strengh * 0.417)} #{rgba($black, ($box-shadow-opacity * 0.717))},
|
||||
#{($box-shadow-elevation * 0.5)} #{$box-shadow-elevation} #{$box-shadow-blur-strengh} #{rgba($black, $box-shadow-opacity)},
|
||||
0 0 0 0.0625rem #{rgba($black, ($box-shadow-opacity * 0.25) )};
|
||||
--card-sectionning-background-color: #{mix($black, $grey-900, 12.5%)};
|
||||
|
||||
// Dropdown (<details role="list">)
|
||||
--dropdown-background-color: #{$grey-900};
|
||||
--dropdown-border-color: #{mix($grey-900, $grey-800)};
|
||||
--dropdown-box-shadow: var(--card-box-shadow);
|
||||
--dropdown-color: var(--color);
|
||||
--dropdown-hover-background-color: #{rgba(mix($grey-900, $grey-800), 0.75)};
|
||||
|
||||
// Modal (<dialog>)
|
||||
--modal-overlay-background-color: #{rgba(mix($grey-900, $grey-800), 0.8)};
|
||||
|
||||
// Progress
|
||||
--progress-background-color: #{mix($grey-900, $grey-800)};
|
||||
--progress-color: var(--primary);
|
||||
|
||||
// Loading ([aria-busy=true])
|
||||
--loading-spinner-opacity: 0.5;
|
||||
|
||||
// Tooltip ([data-tooltip])
|
||||
--tooltip-background-color: var(--contrast);
|
||||
--tooltip-color: var(--contrast-inverse);
|
||||
|
||||
// Icons
|
||||
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-300)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($white)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($black)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-500)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-300)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($red-900)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-300)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-300)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($green-800)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
|
||||
// Document
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
|
@ -1,159 +0,0 @@
|
|||
@import "../../functions";
|
||||
|
||||
// Default: Light theme
|
||||
[data-theme="light"],
|
||||
:root:not([data-theme="dark"]) {
|
||||
--background-color: #{$white};
|
||||
|
||||
// Texts colors
|
||||
--color: #{$grey-700};
|
||||
--h1-color: #{$grey-900};
|
||||
--h2-color: #{mix($grey-900, $grey-800)};
|
||||
--h3-color: #{$grey-800};
|
||||
--h4-color: #{mix($grey-800, $grey-700)};
|
||||
--h5-color: #{$grey-700};
|
||||
--h6-color: #{mix($grey-700, $grey-600)};
|
||||
|
||||
// Muted colors
|
||||
--muted-color: #{$grey-500};
|
||||
--muted-border-color: #{$grey-50};
|
||||
|
||||
// Primary colors
|
||||
--primary: #{$primary-600};
|
||||
--primary-hover: #{$primary-700};
|
||||
--primary-focus: #{rgba($primary-600, 0.125)};
|
||||
--primary-inverse: #{$white};
|
||||
|
||||
// Secondary colors
|
||||
--secondary: #{$grey-600};
|
||||
--secondary-hover: #{$grey-700};
|
||||
--secondary-focus: #{rgba($grey-600, 0.125)};
|
||||
--secondary-inverse: #{$white};
|
||||
|
||||
// Contrast colors
|
||||
--contrast: #{$grey-900};
|
||||
--contrast-hover: #{$black};
|
||||
--contrast-focus: #{rgba($grey-600, 0.125)};
|
||||
--contrast-inverse: #{$white};
|
||||
|
||||
// Highlighted text (<mark>)
|
||||
--mark-background-color: #{mix($amber-100, $amber-50)};
|
||||
--mark-color: #{mix($grey-900, $amber-900, 75%)};
|
||||
|
||||
// Inserted (<ins>) & Deleted (<ins>)
|
||||
--ins-color: #{$green-700};
|
||||
--del-color: #{$red-800};
|
||||
|
||||
// Blockquote
|
||||
--blockquote-border-color: var(--muted-border-color);
|
||||
--blockquote-footer-color: var(--muted-color);
|
||||
|
||||
// Button
|
||||
// To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)'
|
||||
// Don't use, 'none, 'false, 'null', '0', etc.
|
||||
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
|
||||
// Form elements
|
||||
--form-element-background-color: transparent;
|
||||
--form-element-border-color: #{$grey-300};
|
||||
--form-element-color: var(--color);
|
||||
--form-element-placeholder-color: var(--muted-color);
|
||||
--form-element-active-background-color: transparent;
|
||||
--form-element-active-border-color: var(--primary);
|
||||
--form-element-focus-color: var(--primary-focus);
|
||||
--form-element-disabled-background-color: #{$grey-100};
|
||||
--form-element-disabled-border-color: #{$grey-300};
|
||||
--form-element-disabled-opacity: 0.5;
|
||||
--form-element-invalid-border-color: #{$red-800};
|
||||
--form-element-invalid-active-border-color: #{$red-700};
|
||||
--form-element-invalid-focus-color: #{rgba($red-700, 0.125)};
|
||||
--form-element-valid-border-color: #{$green-700};
|
||||
--form-element-valid-active-border-color: #{$green-600};
|
||||
--form-element-valid-focus-color: #{rgba($green-600, 0.125)};
|
||||
|
||||
// Switch (input[type="checkbox"][role="switch"])
|
||||
--switch-background-color: #{$grey-200};
|
||||
--switch-color: var(--primary-inverse);
|
||||
--switch-checked-background-color: var(--primary);
|
||||
|
||||
// Range (input[type="range"])
|
||||
--range-border-color: #{$grey-100};
|
||||
--range-active-border-color: #{$grey-200};
|
||||
--range-thumb-border-color: var(--background-color);
|
||||
--range-thumb-color: var(--secondary);
|
||||
--range-thumb-hover-color: var(--secondary-hover);
|
||||
--range-thumb-active-color: var(--primary);
|
||||
|
||||
// Table
|
||||
--table-border-color: var(--muted-border-color);
|
||||
--table-row-stripped-background-color: #{mix($grey-50, $white)};
|
||||
|
||||
// Code
|
||||
--code-background-color: #{$grey-50};
|
||||
--code-color: var(--muted-color);
|
||||
--code-kbd-background-color: var(--contrast);
|
||||
--code-kbd-color: var(--contrast-inverse);
|
||||
--code-tag-color: #{hsl(330, 40%, 50%)};
|
||||
--code-property-color: #{hsl(185, 40%, 40%)};
|
||||
--code-value-color: #{hsl(40, 20%, 50%)};
|
||||
--code-comment-color: #{$grey-300};
|
||||
|
||||
// Accordion (<details>)
|
||||
--accordion-border-color: var(--muted-border-color);
|
||||
--accordion-close-summary-color: var(--color);
|
||||
--accordion-open-summary-color: var(--muted-color);
|
||||
|
||||
// Card (<article>)
|
||||
$box-shadow-elevation: 1rem;
|
||||
$box-shadow-blur-strengh: 6rem;
|
||||
$box-shadow-opacity: 0.06;
|
||||
--card-background-color: var(--background-color);
|
||||
--card-border-color: var(--muted-border-color);
|
||||
--card-box-shadow:
|
||||
#{($box-shadow-elevation * 0.5 * 0.029)} #{($box-shadow-elevation * 0.029)} #{($box-shadow-blur-strengh * 0.029)} #{rgba($grey-900, ($box-shadow-opacity * 0.283))},
|
||||
#{($box-shadow-elevation * 0.5 * 0.067)} #{($box-shadow-elevation * 0.067)} #{($box-shadow-blur-strengh * 0.067)} #{rgba($grey-900, ($box-shadow-opacity * 0.4))},
|
||||
#{($box-shadow-elevation * 0.5 * 0.125)} #{($box-shadow-elevation * 0.125)} #{($box-shadow-blur-strengh * 0.125)} #{rgba($grey-900, ($box-shadow-opacity * 0.5))},
|
||||
#{($box-shadow-elevation * 0.5 * 0.225)} #{($box-shadow-elevation * 0.225)} #{($box-shadow-blur-strengh * 0.225)} #{rgba($grey-900, ($box-shadow-opacity * 0.6))},
|
||||
#{($box-shadow-elevation * 0.5 * 0.417)} #{($box-shadow-elevation * 0.417)} #{($box-shadow-blur-strengh * 0.417)} #{rgba($grey-900, ($box-shadow-opacity * 0.717))},
|
||||
#{($box-shadow-elevation * 0.5)} #{$box-shadow-elevation} #{$box-shadow-blur-strengh} #{rgba($grey-900, $box-shadow-opacity)},
|
||||
0 0 0 0.0625rem #{rgba($grey-900, ($box-shadow-opacity * 0.25) )};
|
||||
--card-sectionning-background-color: #{mix($grey-50, $white, 25%)};
|
||||
|
||||
// Dropdown (<details role="list">)
|
||||
--dropdown-background-color: #{mix($grey-50, $white, 25%)};
|
||||
--dropdown-border-color: #{mix($grey-100, $grey-50)};
|
||||
--dropdown-box-shadow: var(--card-box-shadow);
|
||||
--dropdown-color: var(--color);
|
||||
--dropdown-hover-background-color: #{$grey-50};
|
||||
|
||||
// Modal (<dialog>)
|
||||
--modal-overlay-background-color: #{rgba($grey-100, 0.7)};
|
||||
|
||||
// Progress
|
||||
--progress-background-color: #{$grey-100};
|
||||
--progress-color: var(--primary);
|
||||
|
||||
// Loading ([aria-busy=true])
|
||||
--loading-spinner-opacity: 0.5;
|
||||
|
||||
// Tooltip ([data-tooltip])
|
||||
--tooltip-background-color: var(--contrast);
|
||||
--tooltip-color: var(--contrast-inverse);
|
||||
|
||||
// Icons
|
||||
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-700)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($white)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($white)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-500)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-700)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($red-800)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-700)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($grey-700)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($green-700)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
|
||||
// Document
|
||||
color-scheme: light;
|
||||
}
|
||||
|
|
@ -1,247 +0,0 @@
|
|||
// Commons Styles
|
||||
:root {
|
||||
// Typography
|
||||
--font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
|
||||
"Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
|
||||
"Segoe UI Symbol", "Noto Color Emoji";
|
||||
--line-height: 1.5;
|
||||
--font-weight: 400;
|
||||
--font-size: 16px;
|
||||
|
||||
// Responsive typography
|
||||
@if $enable-responsive-typography {
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
--font-size: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
--font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
--font-size: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") {
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
--font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Borders
|
||||
--border-radius: 0.25rem;
|
||||
--border-width: 1px;
|
||||
--outline-width: 3px;
|
||||
|
||||
// Spacings
|
||||
--spacing: 1rem;
|
||||
|
||||
// Spacings for typography elements
|
||||
--typography-spacing-vertical: 1.5rem;
|
||||
|
||||
// Spacings for body > header, body > main, body > footer, section, article
|
||||
--block-spacing-vertical: calc(var(--spacing) * 2);
|
||||
--block-spacing-horizontal: var(--spacing);
|
||||
|
||||
@if ($enable-classes and $enable-grid) {
|
||||
--grid-spacing-vertical: 0;
|
||||
--grid-spacing-horizontal: var(--spacing);
|
||||
}
|
||||
|
||||
// Spacings for form elements and button
|
||||
--form-element-spacing-vertical: 0.75rem;
|
||||
--form-element-spacing-horizontal: 1rem;
|
||||
|
||||
// Spacings for nav component
|
||||
--nav-element-spacing-vertical: 1rem;
|
||||
--nav-element-spacing-horizontal: 0.5rem;
|
||||
--nav-link-spacing-vertical: 0.5rem;
|
||||
--nav-link-spacing-horizontal: 0.5rem;
|
||||
|
||||
// Font weight for form labels & fieldsets legend
|
||||
--form-label-font-weight: var(--font-weight);
|
||||
|
||||
// Transitions
|
||||
--transition: 0.2s ease-in-out;
|
||||
|
||||
// Modal (<dialog>)
|
||||
--modal-overlay-backdrop-filter: blur(0.25rem);
|
||||
}
|
||||
|
||||
// Responsives spacings
|
||||
@if $enable-responsive-spacings {
|
||||
// Sectioning
|
||||
#{$semantic-root-element} > header,
|
||||
#{$semantic-root-element} > main,
|
||||
#{$semantic-root-element} > footer,
|
||||
section {
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
--block-spacing-vertical: calc(var(--spacing) * 2.5);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
--block-spacing-vertical: calc(var(--spacing) * 3);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
--block-spacing-vertical: calc(var(--spacing) * 3.5);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") {
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
--block-spacing-vertical: calc(var(--spacing) * 4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Card (<article>)
|
||||
article {
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 1.25);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") {
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Modal
|
||||
dialog > article {
|
||||
|
||||
--block-spacing-vertical: calc(var(--spacing) * 2);
|
||||
--block-spacing-horizontal: var(--spacing);
|
||||
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
--block-spacing-vertical: calc(var(--spacing) * 2.5);
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 1.25);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
--block-spacing-vertical: calc(var(--spacing) * 3);
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Link
|
||||
a {
|
||||
--text-decoration: none;
|
||||
|
||||
// Secondary & Contrast
|
||||
@if $enable-classes {
|
||||
&.secondary,
|
||||
&.contrast {
|
||||
--text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Small
|
||||
small {
|
||||
--font-size: 0.875em;
|
||||
}
|
||||
|
||||
// Headings
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
--font-weight: 700;
|
||||
}
|
||||
|
||||
h1 {
|
||||
--font-size: 2rem;
|
||||
--typography-spacing-vertical: 3rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
--font-size: 1.75rem;
|
||||
--typography-spacing-vertical: 2.625rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
--font-size: 1.5rem;
|
||||
--typography-spacing-vertical: 2.25rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
--font-size: 1.25rem;
|
||||
--typography-spacing-vertical: 1.874rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
--font-size: 1.125rem;
|
||||
--typography-spacing-vertical: 1.6875rem;
|
||||
}
|
||||
|
||||
// Forms elements
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
--border-width: 2px;
|
||||
}
|
||||
|
||||
[type="checkbox"][role="switch"] {
|
||||
--border-width: 3px;
|
||||
}
|
||||
|
||||
// Table
|
||||
thead,
|
||||
tfoot {
|
||||
th,
|
||||
td {
|
||||
--border-width: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
:not(thead, tfoot) > * > td {
|
||||
--font-size: 0.875em;
|
||||
}
|
||||
|
||||
// Code
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
--font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace",
|
||||
"Noto Mono", "Oxygen Mono", "Liberation Mono", monospace,
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
}
|
||||
|
||||
kbd {
|
||||
--font-weight: bolder;
|
||||
}
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
/**
|
||||
* Accessibility & User interaction
|
||||
*/
|
||||
|
||||
// Based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Accessibility
|
||||
|
||||
// Change the cursor on control elements in all browsers (opinionated)
|
||||
[aria-controls] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Change the cursor on disabled, not-editable, or otherwise inoperable elements in all browsers (opinionated)
|
||||
[aria-disabled="true"],
|
||||
[disabled] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
// Change the display on visually hidden accessible elements in all browsers (opinionated)
|
||||
[aria-hidden="false"][hidden] {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
[aria-hidden="false"][hidden]:not(:focus) {
|
||||
clip: rect(0, 0, 0, 0);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
// User interaction
|
||||
// Remove the tapping delay in IE 10
|
||||
a,
|
||||
area,
|
||||
button,
|
||||
input,
|
||||
label,
|
||||
select,
|
||||
summary,
|
||||
textarea,
|
||||
[tabindex] {
|
||||
-ms-touch-action: manipulation;
|
||||
}
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
[dir="rtl"] {
|
||||
direction: rtl;
|
||||
}
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
/**
|
||||
* Loading ([aria-busy=true])
|
||||
*/
|
||||
|
||||
|
||||
// Cursor
|
||||
[aria-busy="true"] {
|
||||
cursor: progress;
|
||||
}
|
||||
|
||||
// Everyting except form elements
|
||||
[aria-busy="true"]:not(input, select, textarea, html) {
|
||||
|
||||
&::before {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
border: 0.1875em solid currentColor;
|
||||
border-radius: 1em;
|
||||
border-right-color: transparent;
|
||||
content: "";
|
||||
vertical-align: text-bottom;
|
||||
vertical-align: -.125em; // Visual alignment
|
||||
animation: spinner 0.75s linear infinite;
|
||||
opacity: var(--loading-spinner-opacity);
|
||||
}
|
||||
|
||||
&:not(:empty) {
|
||||
&::before {
|
||||
margin-right: calc(var(--spacing) * 0.5);
|
||||
margin-left: 0;
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
&:empty {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons and links
|
||||
button,
|
||||
input[type="submit"],
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
a {
|
||||
&[aria-busy="true"] {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Animation: rotate
|
||||
@keyframes spinner {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
@if $enable-transitions and $enable-important {
|
||||
/**
|
||||
* Reduce Motion Features
|
||||
*/
|
||||
|
||||
// Based on :
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Remove animations when motion is reduced (opinionated)
|
||||
// 2. Remove fixed background attachments when motion is reduced (opinionated)
|
||||
// 3. Remove timed scrolling behaviors when motion is reduced (opinionated)
|
||||
// 4. Remove transitions when motion is reduced (opinionated)
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*:not([aria-busy="true"]),
|
||||
:not([aria-busy="true"])::before,
|
||||
:not([aria-busy="true"])::after {
|
||||
background-attachment: initial !important; // 2
|
||||
animation-duration: 1ms !important; // 1
|
||||
animation-delay: -1ms !important; // 1
|
||||
animation-iteration-count: 1 !important; // 1
|
||||
scroll-behavior: auto !important; // 3
|
||||
transition-delay: 0s !important; // 4
|
||||
transition-duration: 0s !important; // 4
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,278 +0,0 @@
|
|||
/**
|
||||
* Tooltip ([data-tooltip])
|
||||
*/
|
||||
|
||||
[data-tooltip] {
|
||||
position: relative;
|
||||
|
||||
&:not(a, button, input) {
|
||||
border-bottom: 1px dotted;
|
||||
text-decoration: none;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
&[data-placement="top"]::before,
|
||||
&[data-placement="top"]::after,
|
||||
&::before,
|
||||
&::after {
|
||||
display: block;
|
||||
z-index: 99;
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
padding: .25rem .5rem;
|
||||
overflow: hidden;
|
||||
transform: translate(-50%, -.25rem);
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--tooltip-background-color);
|
||||
content: attr(data-tooltip);
|
||||
color: var(--tooltip-color);
|
||||
font-style: normal;
|
||||
font-weight: var(--font-weight);
|
||||
font-size: .875rem;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Caret
|
||||
&[data-placement="top"]::after,
|
||||
&::after {
|
||||
padding: 0;
|
||||
transform: translate(-50%, 0rem);
|
||||
border-top: .3rem solid;
|
||||
border-right: .3rem solid transparent;
|
||||
border-left: .3rem solid transparent;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
content: "";
|
||||
color: var(--tooltip-background-color);
|
||||
}
|
||||
|
||||
&[data-placement="bottom"] {
|
||||
&::before,
|
||||
&::after {
|
||||
top: 100%;
|
||||
bottom: auto;
|
||||
transform: translate(-50%, .25rem);
|
||||
}
|
||||
|
||||
&:after{
|
||||
transform: translate(-50%, -.3rem);
|
||||
border: .3rem solid transparent;
|
||||
border-bottom: .3rem solid;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-placement="left"] {
|
||||
&::before,
|
||||
&::after {
|
||||
top: 50%;
|
||||
right: 100%;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
transform: translate(-.25rem, -50%);
|
||||
}
|
||||
|
||||
&:after{
|
||||
transform: translate(.3rem, -50%);
|
||||
border: .3rem solid transparent;
|
||||
border-left: .3rem solid;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-placement="right"] {
|
||||
&::before,
|
||||
&::after {
|
||||
top: 50%;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: 100%;
|
||||
transform: translate(.25rem, -50%);
|
||||
}
|
||||
|
||||
&:after{
|
||||
transform: translate(-.3rem, -50%);
|
||||
border: .3rem solid transparent;
|
||||
border-right: .3rem solid;
|
||||
}
|
||||
}
|
||||
|
||||
// Display
|
||||
&:focus,
|
||||
&:hover {
|
||||
&::before,
|
||||
&::after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@if $enable-transitions {
|
||||
|
||||
// Animations, excluding touch devices
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
&[data-placement="bottom"]:focus,
|
||||
&[data-placement="bottom"]:hover
|
||||
&:focus,
|
||||
&:hover {
|
||||
&::before,
|
||||
&::after {
|
||||
animation-duration: .2s;
|
||||
animation-name: tooltip-slide-top;
|
||||
}
|
||||
|
||||
&::after {
|
||||
animation-name: tooltip-caret-slide-top;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-placement="bottom"] {
|
||||
&:focus,
|
||||
&:hover {
|
||||
&::before,
|
||||
&::after {
|
||||
animation-duration: .2s;
|
||||
animation-name: tooltip-slide-bottom;
|
||||
}
|
||||
|
||||
&::after {
|
||||
animation-name: tooltip-caret-slide-bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[data-placement="left"] {
|
||||
&:focus,
|
||||
&:hover {
|
||||
&::before,
|
||||
&::after {
|
||||
animation-duration: .2s;
|
||||
animation-name: tooltip-slide-left;
|
||||
}
|
||||
|
||||
&::after {
|
||||
animation-name: tooltip-caret-slide-left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[data-placement="right"] {
|
||||
&:focus,
|
||||
&:hover {
|
||||
&::before,
|
||||
&::after {
|
||||
animation-duration: .2s;
|
||||
animation-name: tooltip-slide-right;
|
||||
}
|
||||
|
||||
&::after {
|
||||
animation-name: tooltip-caret-slide-right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tooltip-slide-top {
|
||||
from {
|
||||
transform: translate(-50%, .75rem);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translate(-50%, -.25rem);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tooltip-caret-slide-top {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: translate(-50%, -.25rem);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translate(-50%, 0rem);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tooltip-slide-bottom {
|
||||
from {
|
||||
transform: translate(-50%, -.75rem);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translate(-50%, .25rem);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tooltip-caret-slide-bottom {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: translate(-50%, -.5rem);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translate(-50%, -.3rem);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tooltip-slide-left {
|
||||
from {
|
||||
transform: translate(.75rem, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translate(-.25rem, -50%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tooltip-caret-slide-left {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: translate(.05rem, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translate(.3rem, -50%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tooltip-slide-right {
|
||||
from {
|
||||
transform: translate(-.75rem, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translate(.25rem, -50%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tooltip-caret-slide-right {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: translate(-.05rem, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translate(-.3rem, -50%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -128,7 +128,6 @@ body>main {
|
|||
line-height: 1.0em;
|
||||
max-width: 8em;
|
||||
padding: 5px;
|
||||
white-space: nowrap;
|
||||
|
||||
color: $roomstate_color_unknown;
|
||||
|
||||
|
|
@ -145,7 +144,7 @@ body>main {
|
|||
}
|
||||
}
|
||||
|
||||
// CCCHH icon & hamburger menu in header
|
||||
// CCCHH Icon in Menu
|
||||
@media only screen and (prefers-color-scheme: light) {
|
||||
.invert-on-light {
|
||||
filter: invert(1);
|
||||
|
|
@ -254,167 +253,6 @@ body>main {
|
|||
box-shadow: var(--card-box-shadow);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
--main-header-content-height: calc(var(--font-size) * var(--line-height));
|
||||
|
||||
.container {
|
||||
display: block flex;
|
||||
position: relative;
|
||||
flex-direction: row;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
column-gap: var(--spacing);
|
||||
}
|
||||
|
||||
.menu-button,
|
||||
.hamburger,
|
||||
.in-nav-home {
|
||||
// Don't display, when not in mobile mode.
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu {
|
||||
// Set this to 100% to force the roomstate to "right-align".
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ccchh-logo {
|
||||
padding-top: var(--nav-element-spacing-vertical);
|
||||
padding-bottom: var(--nav-element-spacing-vertical);
|
||||
|
||||
img {
|
||||
height: var(--main-header-content-height);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// When the header content doesn't display nicely anymore, switch to mobile mode.
|
||||
@import "../pico-1.5.11/scss/variables";
|
||||
|
||||
@media (max-width: map-get($breakpoints, md)) {
|
||||
.hamburger-button {
|
||||
display: unset;
|
||||
position: absolute;
|
||||
top: calc(var(--nav-element-spacing-vertical));
|
||||
right: var(--spacing);
|
||||
height: var(--main-header-content-height);
|
||||
// To have an attempt at a good-looking cross, when converting the burger
|
||||
// stack to one, set the width to the height / sin(45).
|
||||
width: calc(var(--main-header-content-height) / 0.707106781);
|
||||
}
|
||||
|
||||
.menu-button {
|
||||
z-index: 3;
|
||||
opacity: 0%;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.hamburger-line {
|
||||
height: 4px;
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.in-nav-home {
|
||||
display: unset;
|
||||
}
|
||||
|
||||
// Don't display the menu per default in mobile mode.
|
||||
.menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-button:checked~.menu {
|
||||
display: unset;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: calc(var(--main-header-content-height) + (var(--nav-element-spacing-vertical) * 2) + 3px);
|
||||
left: 0;
|
||||
background-color: var(--background-color);
|
||||
|
||||
ul,
|
||||
li {
|
||||
display: block;
|
||||
padding-top: calc(var(--nav-element-spacing-vertical) * 0.5);
|
||||
padding-bottom: calc(var(--nav-element-spacing-vertical) * 0.5);
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: var(--spacing);
|
||||
padding-right: var(--spacing);
|
||||
}
|
||||
|
||||
li {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
border-bottom: 0.2em solid var(--muted-border-color);
|
||||
display: flex;
|
||||
|
||||
// borrowed form pico css for li
|
||||
margin-bottom: calc(var(--typography-spacing-vertical) * .25);
|
||||
}
|
||||
|
||||
a {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
// Use the media queries, which we need, from here:
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
ul {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
max-width: map-get($viewports, "sm");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hamburger-line-top {
|
||||
transform-origin: top right;
|
||||
transition: all 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
.hamburger-line-middle {
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.hamburger-line-bottom {
|
||||
transform-origin: bottom right;
|
||||
transition: all 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
.menu-button:checked~.hamburger {
|
||||
.hamburger-line-top {
|
||||
// After some adjustments to make the cross look decent, rotate -45deg.
|
||||
transform: translateX(-1.5px) translateY(-1.5px) rotate(-45deg);
|
||||
}
|
||||
|
||||
.hamburger-line-middle {
|
||||
transform: scaleY(0);
|
||||
}
|
||||
|
||||
.hamburger-line-bottom {
|
||||
// After some adjustments to make the cross look decent, rotate 45deg.
|
||||
transform: translateX(-1.5px) translateY(1.5px) rotate(45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,68 +0,0 @@
|
|||
/*!
|
||||
* Pico CSS v1.5.11 (https://picocss.com)
|
||||
* Copyright 2019-2023 - Licensed under MIT
|
||||
*/
|
||||
|
||||
// Config
|
||||
@import "../pico-1.5.11/scss/variables";
|
||||
|
||||
// Theming
|
||||
@import "../pico-1.5.11/scss/themes/default";
|
||||
|
||||
h1 {
|
||||
--font-size: 2rem;
|
||||
--typography-spacing-vertical: 1rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
--font-size: 1.75rem;
|
||||
--typography-spacing-vertical: 0.875rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
--font-size: 1.5rem;
|
||||
--typography-spacing-vertical: 0.75rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
--font-size: 1.25rem;
|
||||
--typography-spacing-vertical: 0.625rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
--font-size: 1.125rem;
|
||||
--typography-spacing-vertical: 0.5rem;
|
||||
}
|
||||
|
||||
// Layout
|
||||
@import "../pico-1.5.11/scss/layout/document"; // html
|
||||
@import "../pico-1.5.11/scss/layout/sectioning"; // body, header, main, footer
|
||||
@import "../pico-1.5.11/scss/layout/container"; // .container, .container-fluid
|
||||
@import "../pico-1.5.11/scss/layout/section"; // section
|
||||
@import "../pico-1.5.11/scss/layout/grid"; // .grid
|
||||
@import "../pico-1.5.11/scss/layout/scroller"; // figure
|
||||
|
||||
// Content
|
||||
@import "../pico-1.5.11/scss/content/typography"; // a, headings, p, ul, blockquote, ...
|
||||
@import "../pico-1.5.11/scss/content/embedded"; // audio, canvas, iframe, img, svg, video
|
||||
@import "../pico-1.5.11/scss/content/button"; // button, a[role=button], type=button, type=submit ...
|
||||
@import "../pico-1.5.11/scss/content/form"; // input, select, textarea, label, fieldset, legend
|
||||
@import "../pico-1.5.11/scss/content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch
|
||||
@import "../pico-1.5.11/scss/content/form-alt-input-types"; // type=color, type=date, type=file, type=search, ...
|
||||
@import "../pico-1.5.11/scss/content/table"; // table, tr, td, ...
|
||||
@import "../pico-1.5.11/scss/content/code"; // pre, code, ...
|
||||
@import "../pico-1.5.11/scss/content/miscs"; // hr, template, [hidden], dialog, canvas
|
||||
|
||||
// Components
|
||||
@import "../pico-1.5.11/scss/components/accordion"; // details, summary
|
||||
@import "../pico-1.5.11/scss/components/card"; // article
|
||||
@import "../pico-1.5.11/scss/components/modal"; // dialog
|
||||
@import "../pico-1.5.11/scss/components/nav"; // nav
|
||||
@import "../pico-1.5.11/scss/components/progress"; // progress
|
||||
@import "../pico-1.5.11/scss/components/dropdown"; // dropdown
|
||||
|
||||
// Utilities
|
||||
// @import "../pico-1.5.11/scss/utilities/loading"; // aria-busy=true
|
||||
// @import "../pico-1.5.11/scss/utilities/tooltip"; // data-tooltip
|
||||
@import "../pico-1.5.11/scss/utilities/accessibility"; // -ms-touch-action, aria-*
|
||||
@import "../pico-1.5.11/scss/utilities/reduce-motion"; // prefers-reduced-motion
|
||||
|
|
@ -61,11 +61,6 @@
|
|||
<item>
|
||||
<title>{{ .Title }}</title>
|
||||
<link>{{ .Permalink }}</link>
|
||||
<author>{{ with .GetTerms "authors" }}
|
||||
{{- range $i, $pageAuthor := . }}
|
||||
{{- if $i }}, {{ end }}{{ .Title }}
|
||||
{{- end }}
|
||||
{{- end }}</author>
|
||||
<pubDate>{{ .PublishDate.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
|
||||
{{- with $authorEmail }}<author>{{ . }}{{ with $authorName }} ({{ . }}){{ end }}</author>{{ end }}
|
||||
<guid>{{ .Permalink }}</guid>
|
||||
|
|
|
|||
|
|
@ -8,11 +8,11 @@
|
|||
</section>
|
||||
|
||||
<div class="meta">
|
||||
{{- with .PublishDate }}
|
||||
{{- with .Params.publishDate }}
|
||||
<small class="li-comma">Veröffentlicht: {{ .Format "2006-01-02 15:04" }}</small>
|
||||
{{- end }}
|
||||
{{- if .Lastmod.After .PublishDate }}
|
||||
{{- with .Lastmod }}
|
||||
{{- if .Params.lastmod.After .Params.publishDate }}
|
||||
{{- with .Params.lastmod }}
|
||||
<small class="li-comma">letzte Änderung: {{ .Format "2006-01-02 15:04" }}</small>
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
|
|
|
|||
|
|
@ -5,8 +5,7 @@
|
|||
</div>
|
||||
|
||||
{{- $events := where (.Site.GetPage "blog").Pages ".Params.categories" "event" }}
|
||||
{{- $lookback := time.ParseDuration "-6h" }}
|
||||
{{- $upcoming := where $events ".Params.date" "ge" (time.Now.Add $lookback) }}
|
||||
{{- $upcoming := where $events ".Params.date" "ge" now }}
|
||||
{{ if $upcoming }}
|
||||
<div class="announcements">
|
||||
<h2 id="neuigkeiten" class="on-hover-trg">Neuigkeiten <a href="#neuigkeiten" class="on-hover"><i class="fa-solid fa-link small"></i></a></h2>
|
||||
|
|
@ -19,9 +18,6 @@
|
|||
{{- else }}
|
||||
<p>{{ .Summary | safeHTML }}</p>
|
||||
{{- end }}
|
||||
{{- if .Truncated }}
|
||||
<p class="ellipsis"><a href="{{ .RelPermalink }}">mehr lesen</a></p>
|
||||
{{- end }}
|
||||
</div>
|
||||
{{- end }}
|
||||
</div>
|
||||
|
|
@ -43,11 +39,7 @@
|
|||
{{- range $subsecs }}
|
||||
{{- $link := .Params.link }}
|
||||
<div class="wide">
|
||||
{{- if eq $link nil }}
|
||||
<h4>{{ .Title }}</h4>
|
||||
{{- else }}
|
||||
<h4><a href="{{ $link }}">{{ .Title }}</a></h4>
|
||||
{{- end }}
|
||||
{{- $img_path := printf "%s%s" $subsec_dir .Params.Image }}
|
||||
{{- with $home.Resources.Get $img_path }}
|
||||
<a href="{{ $link }}"><img class="groups-img" src="{{ .RelPermalink }}"></a>
|
||||
|
|
|
|||
|
|
@ -1,25 +1,16 @@
|
|||
{{- $cssOptionsMain := dict "transpiler" "libsass" "targetPath" "css/style.css" -}}
|
||||
{{- $cssOptionsPico := dict "transpiler" "libsass" "targetPath" "css/pico.css" -}}
|
||||
{{- $options := dict "transpiler" "libsass" "targetPath" "css/style.css" -}}
|
||||
{{- $jsResources := resources.Match "js/*.js" }}
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta charset="utf-8">
|
||||
{{- partial "robots.html" . -}}
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="{{ relURL "apple-touch-icon.png" }}">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="{{ relURL "favicon-32x32.png" }}">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="{{ relURL "favicon-16x16.png" }}">
|
||||
<link rel="manifest" href="{{ relURL "site.webmanifest" }}">
|
||||
<link rel="mask-icon" href="{{ relURL "safari-pinned-tab.svg" }}" color="#000000">
|
||||
<meta name="msapplication-TileColor" content="#ffffff">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
{{ with resources.Get "sass/pico-ccchh.scss" | toCSS $cssOptionsPico | minify | fingerprint -}}
|
||||
{{- with resources.GetRemote "https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css" }}
|
||||
<link rel="stylesheet" href="{{ .RelPermalink }}" crossorigin="anonymous">
|
||||
{{ end }}
|
||||
{{ with resources.Get "sass/main.scss" | toCSS $options | minify | fingerprint -}}
|
||||
<link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
|
||||
{{- end }}
|
||||
{{ with resources.Get "sass/main.scss" | toCSS $cssOptionsMain | minify | fingerprint -}}
|
||||
<link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
|
||||
{{- end }}
|
||||
<link rel="stylesheet" href="{{ relURL "thirdparty/fontawesome6/css/all.min.css" }}" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="{{ .Site.BaseURL }}thirdparty/fontawesome6/css/all.min.css" crossorigin="anonymous">
|
||||
|
||||
{{- range $jsResources }}
|
||||
{{- with . | js.Build | minify | fingerprint }}
|
||||
|
|
@ -32,3 +23,4 @@
|
|||
{{- end }}
|
||||
|
||||
<title>{{ .Title }}</title>
|
||||
<!-- TODO: Favicon -->
|
||||
|
|
|
|||
|
|
@ -1,21 +1,8 @@
|
|||
|
||||
<header class="main-header header">
|
||||
<div class="container">
|
||||
{{ $image := resources.Get "images/logo.svg" }}
|
||||
<a href="{{ .Site.Home.RelPermalink }}" class="ccchh-logo">
|
||||
<img src="{{ $image.RelPermalink }}" class="invert-on-light" alt="CCCHH Icon">
|
||||
</a>
|
||||
<input class="menu-button hamburger-button" type="checkbox">
|
||||
<div class="hamburger hamburger-button invert-on-light">
|
||||
<div class="hamburger-line hamburger-line-top"></div>
|
||||
<div class="hamburger-line hamburger-line-middle"></div>
|
||||
<div class="hamburger-line hamburger-line-bottom"></div>
|
||||
</div>
|
||||
<nav class="menu">
|
||||
{{- partial "menu.html" (dict "menuID" "main" "page" . ) -}}
|
||||
</nav>
|
||||
<div class="roomstate" id="roomstate">
|
||||
<span class="state">unbekannt</span><br><span class="duration">(seit )</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -2,9 +2,10 @@
|
|||
{{- $menuID := .menuID -}}
|
||||
{{- $menuContent := index site.Menus .menuID -}}
|
||||
|
||||
<ul class="main-nav">
|
||||
<ul>
|
||||
{{- if compare.Eq $menuID "main" -}}
|
||||
<li><a href="/{{ .Site.Home.RelPermalink }}" class="in-nav-home">Home</a></li>
|
||||
{{- $image := resources.Get "images/logo.svg" }}
|
||||
<li><a href="/{{ .Site.Home.URL }}"><img src="{{ $image.RelPermalink }}" class="invert-on-light" width="150px" alt="CCCHH Icon"></a></li>
|
||||
{{- end }}
|
||||
{{- range $menuContent }}
|
||||
<li>
|
||||
|
|
@ -21,3 +22,10 @@
|
|||
>{{ or (T .Identifier) .Name | safeHTML }}</a></li>
|
||||
{{- end }}
|
||||
</ul>
|
||||
{{ if compare.Eq $menuID "main" -}}
|
||||
<ul>
|
||||
<li class="roomstate" id="roomstate">
|
||||
<span class="state">unbekannt</span><br><span class="duration">(seit )</span>
|
||||
</li>
|
||||
</ul>
|
||||
{{- end -}}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{{ $robotsGenerate := false -}}
|
||||
{{- if and (isset $.Params "robots") (or (isset $.Params.robots "index") (isset $.Params.robots "follow")) }}
|
||||
{{- if or (isset $.Params.robots "index") (isset $.Params.robots "follow") }}
|
||||
{{- $robotsGenerate = true -}}
|
||||
{{- else if or (isset $.Site.Params.robots "index") (isset $.Site.Params.robots "follow") -}}
|
||||
{{- $robotsGenerate = true -}}
|
||||
|
|
|
|||
|
|
@ -12,18 +12,9 @@
|
|||
{{- if eq ._type "vevent"}}
|
||||
<tr>
|
||||
{{- $start := time .dtstart }}
|
||||
<td style="font-variant-numeric: tabular-nums;">{{ time.Format "Mon, 2006-01-02 15:04" $start.Local }}</td>
|
||||
{{- $potentialUrl := index (findRE `https?://\S*` .description 1) 0 }}
|
||||
{{- if eq $potentialUrl nil }}
|
||||
<td style="font-variant-numeric: tabular-nums;">{{ $start.Local.Format "Mon, 2006-01-02 15:04" }}</td>
|
||||
<td>{{ .summary }}</td>
|
||||
{{- else }}
|
||||
<td><a href="{{ $potentialUrl }}">{{ .summary }}</a></td>
|
||||
{{- end }}
|
||||
{{- if eq .location "Z9" }}
|
||||
<td><a href="https://wiki.hamburg.ccc.de/club:z9:start">Z9</a></td>
|
||||
{{- else }}
|
||||
<td>{{ .location }}</td>
|
||||
{{- end }}
|
||||
</tr>
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
|
|
@ -1,9 +0,0 @@
|
|||
<?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.
|
Before Width: | Height: | Size: 353 B |
Binary file not shown.
|
Before Width: | Height: | Size: 514 B |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
|
|
@ -1,228 +0,0 @@
|
|||
<?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>
|
||||
|
Before Width: | Height: | Size: 16 KiB |
|
|
@ -1,19 +0,0 @@
|
|||
{
|
||||
"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"
|
||||
}
|
||||
Loading…
Reference in a new issue