From 8eb4dc9ea279335fa6b7db1bc3cdfee5b914fd40 Mon Sep 17 00:00:00 2001 From: hedy Date: Sat, 23 Mar 2024 19:48:41 +0800 Subject: Timeline: Migrate to Markdown source files - initial implementation - The timeline app is introduced, moved from the home app. - Add a basic README.md to illustrate the overall code breakdown of the app as it is in the current stage. - Two entries are added for now. - Add ability to link headers using the slug portion of the filename. - The way markdown files are fetched is similar to that of the resources app - using the AppConfig ready() function, all resources are ensured to be only fetched once when the app is first laoded. I debated whether to introduce the new functionality in the home app instead, without creating a new app. Eventually I decided extracting it to a standalone app now is better as it allows easier extension of functionality in the future. The home app can remain as it is to only server the `/` homepage. The timeline CSS is kept the same, as with the structure of the timeline HTML template. Once the CSS rewrite PR is merged, it's relatively easy to fix conflicts here (again, since timeline is now its own app, with the CSS file and HTML template moved - extra advantage). References to `home:timeline` are updated to use `timeline:index` throughout the codebase, as far as my ripgrep search could go. The format of the markdown + YAML entries are still up for debate, so I've only added the first two entries for now. They can be completely overwritten in the future once the formats are decided by using a script to convert all the data from my JSON file into individual markdown files: http://0x0.st/Xr78.txt This link should last for at least a few months. (Originally saved on https://paste.pythondiscord.com/KPJA, but it expires on 12th April 2024.) --- pydis_site/apps/home/README.md | 3 +- pydis_site/apps/home/urls.py | 3 +- pydis_site/apps/home/views.py | 5 - pydis_site/apps/timeline/README.md | 44 + pydis_site/apps/timeline/__init__.py | 0 pydis_site/apps/timeline/apps.py | 45 + .../2023-01-30_retirement-of-joe-and-sebastiaan.md | 12 + .../entries/2023-07-11_new-paste-service.md | 12 + pydis_site/apps/timeline/urls.py | 9 + pydis_site/apps/timeline/views.py | 20 + pydis_site/settings.py | 1 + pydis_site/static/css/timeline/timeline.css | 3826 ++++++++++++++++++++ pydis_site/templates/base/navbar.html | 2 +- pydis_site/templates/home/index.html | 2 +- pydis_site/templates/timeline/timeline.html | 42 + pydis_site/urls.py | 1 + 16 files changed, 4016 insertions(+), 11 deletions(-) create mode 100644 pydis_site/apps/timeline/README.md create mode 100644 pydis_site/apps/timeline/__init__.py create mode 100644 pydis_site/apps/timeline/apps.py create mode 100644 pydis_site/apps/timeline/entries/2023-01-30_retirement-of-joe-and-sebastiaan.md create mode 100644 pydis_site/apps/timeline/entries/2023-07-11_new-paste-service.md create mode 100644 pydis_site/apps/timeline/urls.py create mode 100644 pydis_site/apps/timeline/views.py create mode 100644 pydis_site/static/css/timeline/timeline.css create mode 100644 pydis_site/templates/timeline/timeline.html diff --git a/pydis_site/apps/home/README.md b/pydis_site/apps/home/README.md index 34c1e367..1296ea3f 100644 --- a/pydis_site/apps/home/README.md +++ b/pydis_site/apps/home/README.md @@ -1,8 +1,7 @@ # The "home" app This Django application takes care of serving the homepage of our website, that -is, the first page that you see when you open pythondiscord.com. It also -manages the timeline page showcasing the history of our community. +is, the first page that you see when you open pythondiscord.com. ## Directory structure diff --git a/pydis_site/apps/home/urls.py b/pydis_site/apps/home/urls.py index 30321ece..ccbb5824 100644 --- a/pydis_site/apps/home/urls.py +++ b/pydis_site/apps/home/urls.py @@ -1,9 +1,8 @@ from django_distill import distill_path -from .views import HomeView, timeline +from .views import HomeView app_name = 'home' urlpatterns = [ distill_path('', HomeView.as_view(), name='home'), - distill_path('timeline/', timeline, name="timeline"), ] diff --git a/pydis_site/apps/home/views.py b/pydis_site/apps/home/views.py index bfa9e02d..71f95293 100644 --- a/pydis_site/apps/home/views.py +++ b/pydis_site/apps/home/views.py @@ -153,8 +153,3 @@ class HomeView(View): """Collect repo data and render the homepage view.""" repo_data = self._get_repo_data() return render(request, "home/index.html", {"repo_data": repo_data}) - - -def timeline(request: WSGIRequest) -> HttpResponse: - """Render timeline view.""" - return render(request, 'home/timeline.html') diff --git a/pydis_site/apps/timeline/README.md b/pydis_site/apps/timeline/README.md new file mode 100644 index 00000000..a4272c4d --- /dev/null +++ b/pydis_site/apps/timeline/README.md @@ -0,0 +1,44 @@ +# The "timeline" app + +The [timeline page](https://www.pythondiscord.com/timeline/) on our website is +powered by this Django application. + +## The entries + +Timeline entries are written in markdown files with YAML frontmatter under the +`entries` directory. + +Each file represents a timeline entry. The files are named with the format +`_.md`: +- `date`: The date is in the `YYYY-MM-DD` format, intended for easy sorting in + editor/shell command directory listings. It's also used to sort the entries + before rendering the timeline page. +- `name`: The name component is an arbitrary slug in **kebab-case**. This is used + for linking to individual timeline entries on the page, and will be set in + the `id` attribute. + +Each file contains: +- YAML frontmatter. This defines some metadata shown next to each entry in + the timeline, including: + - Date: User-facing date label. + - Icon: The CSS class to be used for the icon. Set to `pydis` to use the + pydis logo image. + - Icon color: The CSS class that sets the background color of the icon. Leave + empty if the pydis logo is used. +- Markdown content. + + +## Directory structure + +The app has a single view in `views.py` that takes care of reading the `.md` +files in the `entires` directory. This is a standard Django view, mounted in +`urls.py` as usual. + +The `tests` directory validates that our redirects and helper functions work as +expected. If you made changes to the app and are looking for guidance on adding +new tests, the [Django tutorial introducing automated +testing](https://docs.djangoproject.com/en/dev/intro/tutorial05/) is a good +place to start. + +This application does not use the database and as such does not have models nor +migrations. diff --git a/pydis_site/apps/timeline/__init__.py b/pydis_site/apps/timeline/__init__.py new file mode 100644 index 00000000..e69de29b diff --git a/pydis_site/apps/timeline/apps.py b/pydis_site/apps/timeline/apps.py new file mode 100644 index 00000000..8f27297f --- /dev/null +++ b/pydis_site/apps/timeline/apps.py @@ -0,0 +1,45 @@ +from pathlib import Path + +from django.apps import AppConfig +import frontmatter +import markdown + +from pydis_site import settings + + +ENTRIES_PATH = Path(settings.BASE_DIR, "pydis_site", "apps", "timeline", "entries") + + +class TimelineConfig(AppConfig): + """AppConfig instance for Timeline app.""" + + name = 'pydis_site.apps.timeline' + + def ready(self) -> None: + """Fetch all the timeline entries.""" + self.entries = [] + + for path in ENTRIES_PATH.rglob("*.md"): + metadata, content = frontmatter.parse(path.read_text(encoding="utf-8")) + + md = markdown.Markdown() + html = str(md.convert(content)) + + # Strip `.md` file extension from filename and split it into the + # date (for sorting) and slug (for linking). + key, slug = path.name[:-3].split("_") + entry = { + "key": key, + "slug": slug, + "title": metadata["title"], + "date": metadata["date"], + "icon": metadata["icon"], + # This key might not be used if the icon uses the pydis logo. + "icon_color": metadata.get("icon_color"), + "content": html, + } + + self.entries.append(entry) + + # Sort the entries in reverse-chronological order. + self.entries.sort(key=lambda e: e['key'], reverse=True) diff --git a/pydis_site/apps/timeline/entries/2023-01-30_retirement-of-joe-and-sebastiaan.md b/pydis_site/apps/timeline/entries/2023-01-30_retirement-of-joe-and-sebastiaan.md new file mode 100644 index 00000000..1629c1f5 --- /dev/null +++ b/pydis_site/apps/timeline/entries/2023-01-30_retirement-of-joe-and-sebastiaan.md @@ -0,0 +1,12 @@ +--- +title: Retirement of Joe and Sebastiaan +date: 2023-01-30 +icon: pydis +--- + +Having been at the helm of Python Discord for over 5 and 3 years respectively, +Joe and Sebastiaan retire and step down. They gain the **@Founders** role and +continue as advisors to the **@Directors**, the new name of the original +**@Owners** role. + +At the same time, Mina and Zig join Leon as co-directors. diff --git a/pydis_site/apps/timeline/entries/2023-07-11_new-paste-service.md b/pydis_site/apps/timeline/entries/2023-07-11_new-paste-service.md new file mode 100644 index 00000000..818fa2f9 --- /dev/null +++ b/pydis_site/apps/timeline/entries/2023-07-11_new-paste-service.md @@ -0,0 +1,12 @@ +--- +title: Switch to new paste service +date: 2023-07-11 +icon: fa-regular fa-clipboard +icon_color: pastel-pink +--- + +We migrate over to [pinnwand](https://github.com/supakeen/pinnwand) as the +service that powers our paste bin over at . +We made the switch as it comes with native light/dark modes, support for +multi-file pastes, additional support for text highlighting languages, and +plus, it's written in Python! diff --git a/pydis_site/apps/timeline/urls.py b/pydis_site/apps/timeline/urls.py new file mode 100644 index 00000000..e4f1d6c6 --- /dev/null +++ b/pydis_site/apps/timeline/urls.py @@ -0,0 +1,9 @@ +from django_distill import distill_path + +from .views import TimelineView + +app_name = "timeline" + +urlpatterns = [ + distill_path("", TimelineView.as_view(), name="index"), +] diff --git a/pydis_site/apps/timeline/views.py b/pydis_site/apps/timeline/views.py new file mode 100644 index 00000000..380dfe53 --- /dev/null +++ b/pydis_site/apps/timeline/views.py @@ -0,0 +1,20 @@ +from django.apps import apps +from django.core.handlers.wsgi import WSGIRequest +from django.http import HttpResponse +from django.shortcuts import render +from django.views import View + +APP_NAME = "timeline" + +class TimelineView(View): + """A vertical timeline showcasing milestones in the history of Python Discord.""" + + def get(self, request: WSGIRequest) -> HttpResponse: + """Render the timeline.""" + app = apps.get_app_config(APP_NAME) + + return render( + request, + template_name="timeline/timeline.html", + context={ "entries": app.entries }, + ) diff --git a/pydis_site/settings.py b/pydis_site/settings.py index f5851edb..86804f33 100644 --- a/pydis_site/settings.py +++ b/pydis_site/settings.py @@ -115,6 +115,7 @@ NON_STATIC_APPS = [ INSTALLED_APPS = [ *NON_STATIC_APPS, 'pydis_site.apps.home', + 'pydis_site.apps.timeline', 'pydis_site.apps.resources', 'pydis_site.apps.content', 'pydis_site.apps.events', diff --git a/pydis_site/static/css/timeline/timeline.css b/pydis_site/static/css/timeline/timeline.css new file mode 100644 index 00000000..d42bbfc0 --- /dev/null +++ b/pydis_site/static/css/timeline/timeline.css @@ -0,0 +1,3826 @@ +h2 { + font-size: 2em; +} + +@media (max-width: 500px) { + h2 { + font-size: 1em; + } +} + +article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main, form legend { + display: block +} + +ol, ul { + list-style: none +} + +blockquote, q { + quotes: none +} + +button, input, textarea, select { + margin: 0 +} + +.pastel-red { + background-color: #FF7878 !important; +} + +.pastel-orange { + background-color: #FFBF76 !important; +} + +.pastel-green { + background-color: #8bd6a7 !important; +} + +.pastel-blue { + background-color: #8edbec !important; +} + +.pastel-purple { + background-color: #CBB1FF !important; +} + +.pastel-pink { + background-color: #F6ACFF !important; +} + +.pastel-lime { + background-color: #b6df3a !important; +} + +.pastel-dark-blue { + background-color: #576297 !important; +} + +.pydis-logo-banner { + background-color: #7289DA !important; + border-radius: 10px; +} + +.pydis-logo-banner img { + padding-right: 20px; +} + +.btn, .form-control, .link, .reset { + background-color: transparent; + padding: 0; + border: 0; + border-radius: 0; + color: inherit; + line-height: inherit; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none +} + +select.form-control::-ms-expand { + display: none +} + +textarea { + resize: vertical; + overflow: auto; + vertical-align: top +} + +input::-ms-clear { + display: none +} + +table { + border-collapse: collapse; + border-spacing: 0 +} + +img, video, svg { + max-width: 100% +} + +[data-theme] { + background-color: hsl(0, 0%, 100%); + background-color: var(--color-bg, #fff); + color: hsl(240, 4%, 20%); + color: var(--color-contrast-high, #313135) +} + +:root { + --space-unit: 1em; + --space-xxxxs: calc(0.125*var(--space-unit)); + --space-xxxs: calc(0.25*var(--space-unit)); + --space-xxs: calc(0.375*var(--space-unit)); + --space-xs: calc(0.5*var(--space-unit)); + --space-sm: calc(0.75*var(--space-unit)); + --space-md: calc(1.25*var(--space-unit)); + --space-lg: calc(2*var(--space-unit)); + --space-xl: calc(3.25*var(--space-unit)); + --space-xxl: calc(5.25*var(--space-unit)); + --space-xxxl: calc(8.5*var(--space-unit)); + --space-xxxxl: calc(13.75*var(--space-unit)); + --component-padding: var(--space-md) +} + +:root { + --max-width-xxs: 32rem; + --max-width-xs: 38rem; + --max-width-sm: 48rem; + --max-width-md: 64rem; + --max-width-lg: 80rem; + --max-width-xl: 90rem; + --max-width-xxl: 120rem +} + +.container { + width: calc(100% - 1.25em); + width: calc(100% - 2*var(--component-padding)); + margin-left: auto; + margin-right: auto +} + +.max-width-xxs { + max-width: 32rem; + max-width: var(--max-width-xxs) +} + +.max-width-xs { + max-width: 38rem; + max-width: var(--max-width-xs) +} + +.max-width-sm { + max-width: 48rem; + max-width: var(--max-width-sm) +} + +.max-width-md { + max-width: 64rem; + max-width: var(--max-width-md) +} + +.max-width-lg { + max-width: 80rem; + max-width: var(--max-width-lg) +} + +.max-width-xl { + max-width: 90rem; + max-width: var(--max-width-xl) +} + +.max-width-xxl { + max-width: 120rem; + max-width: var(--max-width-xxl) +} + +.max-width-adaptive-sm { + max-width: 38rem; + max-width: var(--max-width-xs) +} + +@media (min-width: 64rem) { + .max-width-adaptive-sm { + max-width: 48rem; + max-width: var(--max-width-sm) + } +} + +.max-width-adaptive-md { + max-width: 38rem; + max-width: var(--max-width-xs) +} + +@media (min-width: 64rem) { + .max-width-adaptive-md { + max-width: 64rem; + max-width: var(--max-width-md) + } +} + +.max-width-adaptive, .max-width-adaptive-lg { + max-width: 38rem; + max-width: var(--max-width-xs) +} + +@media (min-width: 64rem) { + .max-width-adaptive, .max-width-adaptive-lg { + max-width: 64rem; + max-width: var(--max-width-md) + } +} + +@media (min-width: 90rem) { + .max-width-adaptive, .max-width-adaptive-lg { + max-width: 80rem; + max-width: var(--max-width-lg) + } +} + +.max-width-adaptive-xl { + max-width: 38rem; + max-width: var(--max-width-xs) +} + +@media (min-width: 64rem) { + .max-width-adaptive-xl { + max-width: 64rem; + max-width: var(--max-width-md) + } +} + +@media (min-width: 90rem) { + .max-width-adaptive-xl { + max-width: 90rem; + max-width: var(--max-width-xl) + } +} + +.grid { + --grid-gap: 0px; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap +} + +.grid>* { + -ms-flex-preferred-size: 100%; + flex-basis: 100% +} + +[class*="grid-gap"] { + margin-bottom: 1em * -1; + margin-bottom: calc(var(--grid-gap, 1em)*-1); + margin-right: 1em * -1; + margin-right: calc(var(--grid-gap, 1em)*-1) +} + +[class*="grid-gap"]>* { + margin-bottom: 1em; + margin-bottom: var(--grid-gap, 1em); + margin-right: 1em; + margin-right: var(--grid-gap, 1em) +} + +.grid-gap-xxxxs { + --grid-gap: var(--space-xxxxs) +} + +.grid-gap-xxxs { + --grid-gap: var(--space-xxxs) +} + +.grid-gap-xxs { + --grid-gap: var(--space-xxs) +} + +.grid-gap-xs { + --grid-gap: var(--space-xs) +} + +.grid-gap-sm { + --grid-gap: var(--space-sm) +} + +.grid-gap-md { + --grid-gap: var(--space-md) +} + +.grid-gap-lg { + --grid-gap: var(--space-lg) +} + +.grid-gap-xl { + --grid-gap: var(--space-xl) +} + +.grid-gap-xxl { + --grid-gap: var(--space-xxl) +} + +.grid-gap-xxxl { + --grid-gap: var(--space-xxxl) +} + +.grid-gap-xxxxl { + --grid-gap: var(--space-xxxxl) +} + +.col { + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100% +} + +.col-1 { + -ms-flex-preferred-size: calc(8.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(8.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(8.33% - 0.01px - 1em); + flex-basis: calc(8.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(8.33% - 0.01px - 1em); + max-width: calc(8.33% - 0.01px - var(--grid-gap, 1em)) +} + +.col-2 { + -ms-flex-preferred-size: calc(16.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(16.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(16.66% - 0.01px - 1em); + flex-basis: calc(16.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(16.66% - 0.01px - 1em); + max-width: calc(16.66% - 0.01px - var(--grid-gap, 1em)) +} + +.col-3 { + -ms-flex-preferred-size: calc(25% - 0.01px - 1em); + -ms-flex-preferred-size: calc(25% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(25% - 0.01px - 1em); + flex-basis: calc(25% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(25% - 0.01px - 1em); + max-width: calc(25% - 0.01px - var(--grid-gap, 1em)) +} + +.col-4 { + -ms-flex-preferred-size: calc(33.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(33.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(33.33% - 0.01px - 1em); + flex-basis: calc(33.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(33.33% - 0.01px - 1em); + max-width: calc(33.33% - 0.01px - var(--grid-gap, 1em)) +} + +.col-5 { + -ms-flex-preferred-size: calc(41.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(41.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(41.66% - 0.01px - 1em); + flex-basis: calc(41.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(41.66% - 0.01px - 1em); + max-width: calc(41.66% - 0.01px - var(--grid-gap, 1em)) +} + +.col-6 { + -ms-flex-preferred-size: calc(50% - 0.01px - 1em); + -ms-flex-preferred-size: calc(50% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(50% - 0.01px - 1em); + flex-basis: calc(50% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(50% - 0.01px - 1em); + max-width: calc(50% - 0.01px - var(--grid-gap, 1em)) +} + +.col-7 { + -ms-flex-preferred-size: calc(58.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(58.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(58.33% - 0.01px - 1em); + flex-basis: calc(58.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(58.33% - 0.01px - 1em); + max-width: calc(58.33% - 0.01px - var(--grid-gap, 1em)) +} + +.col-8 { + -ms-flex-preferred-size: calc(66.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(66.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(66.66% - 0.01px - 1em); + flex-basis: calc(66.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(66.66% - 0.01px - 1em); + max-width: calc(66.66% - 0.01px - var(--grid-gap, 1em)) +} + +.col-9 { + -ms-flex-preferred-size: calc(75% - 0.01px - 1em); + -ms-flex-preferred-size: calc(75% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(75% - 0.01px - 1em); + flex-basis: calc(75% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(75% - 0.01px - 1em); + max-width: calc(75% - 0.01px - var(--grid-gap, 1em)) +} + +.col-10 { + -ms-flex-preferred-size: calc(83.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(83.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(83.33% - 0.01px - 1em); + flex-basis: calc(83.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(83.33% - 0.01px - 1em); + max-width: calc(83.33% - 0.01px - var(--grid-gap, 1em)) +} + +.col-11 { + -ms-flex-preferred-size: calc(91.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(91.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(91.66% - 0.01px - 1em); + flex-basis: calc(91.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(91.66% - 0.01px - 1em); + max-width: calc(91.66% - 0.01px - var(--grid-gap, 1em)) +} + +.col-12 { + -ms-flex-preferred-size: calc(100% - 0.01px - 1em); + -ms-flex-preferred-size: calc(100% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(100% - 0.01px - 1em); + flex-basis: calc(100% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(100% - 0.01px - 1em); + max-width: calc(100% - 0.01px - var(--grid-gap, 1em)) +} + +@media (min-width: 32rem) { + .col\@xs { + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100% + } + .col-1\@xs { + -ms-flex-preferred-size: calc(8.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(8.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(8.33% - 0.01px - 1em); + flex-basis: calc(8.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(8.33% - 0.01px - 1em); + max-width: calc(8.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-2\@xs { + -ms-flex-preferred-size: calc(16.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(16.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(16.66% - 0.01px - 1em); + flex-basis: calc(16.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(16.66% - 0.01px - 1em); + max-width: calc(16.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-3\@xs { + -ms-flex-preferred-size: calc(25% - 0.01px - 1em); + -ms-flex-preferred-size: calc(25% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(25% - 0.01px - 1em); + flex-basis: calc(25% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(25% - 0.01px - 1em); + max-width: calc(25% - 0.01px - var(--grid-gap, 1em)) + } + .col-4\@xs { + -ms-flex-preferred-size: calc(33.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(33.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(33.33% - 0.01px - 1em); + flex-basis: calc(33.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(33.33% - 0.01px - 1em); + max-width: calc(33.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-5\@xs { + -ms-flex-preferred-size: calc(41.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(41.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(41.66% - 0.01px - 1em); + flex-basis: calc(41.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(41.66% - 0.01px - 1em); + max-width: calc(41.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-6\@xs { + -ms-flex-preferred-size: calc(50% - 0.01px - 1em); + -ms-flex-preferred-size: calc(50% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(50% - 0.01px - 1em); + flex-basis: calc(50% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(50% - 0.01px - 1em); + max-width: calc(50% - 0.01px - var(--grid-gap, 1em)) + } + .col-7\@xs { + -ms-flex-preferred-size: calc(58.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(58.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(58.33% - 0.01px - 1em); + flex-basis: calc(58.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(58.33% - 0.01px - 1em); + max-width: calc(58.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-8\@xs { + -ms-flex-preferred-size: calc(66.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(66.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(66.66% - 0.01px - 1em); + flex-basis: calc(66.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(66.66% - 0.01px - 1em); + max-width: calc(66.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-9\@xs { + -ms-flex-preferred-size: calc(75% - 0.01px - 1em); + -ms-flex-preferred-size: calc(75% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(75% - 0.01px - 1em); + flex-basis: calc(75% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(75% - 0.01px - 1em); + max-width: calc(75% - 0.01px - var(--grid-gap, 1em)) + } + .col-10\@xs { + -ms-flex-preferred-size: calc(83.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(83.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(83.33% - 0.01px - 1em); + flex-basis: calc(83.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(83.33% - 0.01px - 1em); + max-width: calc(83.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-11\@xs { + -ms-flex-preferred-size: calc(91.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(91.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(91.66% - 0.01px - 1em); + flex-basis: calc(91.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(91.66% - 0.01px - 1em); + max-width: calc(91.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-12\@xs { + -ms-flex-preferred-size: calc(100% - 0.01px - 1em); + -ms-flex-preferred-size: calc(100% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(100% - 0.01px - 1em); + flex-basis: calc(100% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(100% - 0.01px - 1em); + max-width: calc(100% - 0.01px - var(--grid-gap, 1em)) + } +} + +@media (min-width: 48rem) { + .col\@sm { + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100% + } + .col-1\@sm { + -ms-flex-preferred-size: calc(8.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(8.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(8.33% - 0.01px - 1em); + flex-basis: calc(8.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(8.33% - 0.01px - 1em); + max-width: calc(8.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-2\@sm { + -ms-flex-preferred-size: calc(16.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(16.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(16.66% - 0.01px - 1em); + flex-basis: calc(16.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(16.66% - 0.01px - 1em); + max-width: calc(16.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-3\@sm { + -ms-flex-preferred-size: calc(25% - 0.01px - 1em); + -ms-flex-preferred-size: calc(25% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(25% - 0.01px - 1em); + flex-basis: calc(25% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(25% - 0.01px - 1em); + max-width: calc(25% - 0.01px - var(--grid-gap, 1em)) + } + .col-4\@sm { + -ms-flex-preferred-size: calc(33.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(33.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(33.33% - 0.01px - 1em); + flex-basis: calc(33.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(33.33% - 0.01px - 1em); + max-width: calc(33.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-5\@sm { + -ms-flex-preferred-size: calc(41.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(41.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(41.66% - 0.01px - 1em); + flex-basis: calc(41.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(41.66% - 0.01px - 1em); + max-width: calc(41.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-6\@sm { + -ms-flex-preferred-size: calc(50% - 0.01px - 1em); + -ms-flex-preferred-size: calc(50% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(50% - 0.01px - 1em); + flex-basis: calc(50% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(50% - 0.01px - 1em); + max-width: calc(50% - 0.01px - var(--grid-gap, 1em)) + } + .col-7\@sm { + -ms-flex-preferred-size: calc(58.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(58.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(58.33% - 0.01px - 1em); + flex-basis: calc(58.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(58.33% - 0.01px - 1em); + max-width: calc(58.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-8\@sm { + -ms-flex-preferred-size: calc(66.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(66.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(66.66% - 0.01px - 1em); + flex-basis: calc(66.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(66.66% - 0.01px - 1em); + max-width: calc(66.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-9\@sm { + -ms-flex-preferred-size: calc(75% - 0.01px - 1em); + -ms-flex-preferred-size: calc(75% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(75% - 0.01px - 1em); + flex-basis: calc(75% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(75% - 0.01px - 1em); + max-width: calc(75% - 0.01px - var(--grid-gap, 1em)) + } + .col-10\@sm { + -ms-flex-preferred-size: calc(83.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(83.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(83.33% - 0.01px - 1em); + flex-basis: calc(83.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(83.33% - 0.01px - 1em); + max-width: calc(83.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-11\@sm { + -ms-flex-preferred-size: calc(91.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(91.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(91.66% - 0.01px - 1em); + flex-basis: calc(91.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(91.66% - 0.01px - 1em); + max-width: calc(91.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-12\@sm { + -ms-flex-preferred-size: calc(100% - 0.01px - 1em); + -ms-flex-preferred-size: calc(100% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(100% - 0.01px - 1em); + flex-basis: calc(100% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(100% - 0.01px - 1em); + max-width: calc(100% - 0.01px - var(--grid-gap, 1em)) + } +} + +@media (min-width: 64rem) { + .col\@md { + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100% + } + .col-1\@md { + -ms-flex-preferred-size: calc(8.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(8.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(8.33% - 0.01px - 1em); + flex-basis: calc(8.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(8.33% - 0.01px - 1em); + max-width: calc(8.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-2\@md { + -ms-flex-preferred-size: calc(16.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(16.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(16.66% - 0.01px - 1em); + flex-basis: calc(16.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(16.66% - 0.01px - 1em); + max-width: calc(16.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-3\@md { + -ms-flex-preferred-size: calc(25% - 0.01px - 1em); + -ms-flex-preferred-size: calc(25% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(25% - 0.01px - 1em); + flex-basis: calc(25% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(25% - 0.01px - 1em); + max-width: calc(25% - 0.01px - var(--grid-gap, 1em)) + } + .col-4\@md { + -ms-flex-preferred-size: calc(33.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(33.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(33.33% - 0.01px - 1em); + flex-basis: calc(33.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(33.33% - 0.01px - 1em); + max-width: calc(33.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-5\@md { + -ms-flex-preferred-size: calc(41.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(41.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(41.66% - 0.01px - 1em); + flex-basis: calc(41.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(41.66% - 0.01px - 1em); + max-width: calc(41.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-6\@md { + -ms-flex-preferred-size: calc(50% - 0.01px - 1em); + -ms-flex-preferred-size: calc(50% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(50% - 0.01px - 1em); + flex-basis: calc(50% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(50% - 0.01px - 1em); + max-width: calc(50% - 0.01px - var(--grid-gap, 1em)) + } + .col-7\@md { + -ms-flex-preferred-size: calc(58.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(58.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(58.33% - 0.01px - 1em); + flex-basis: calc(58.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(58.33% - 0.01px - 1em); + max-width: calc(58.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-8\@md { + -ms-flex-preferred-size: calc(66.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(66.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(66.66% - 0.01px - 1em); + flex-basis: calc(66.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(66.66% - 0.01px - 1em); + max-width: calc(66.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-9\@md { + -ms-flex-preferred-size: calc(75% - 0.01px - 1em); + -ms-flex-preferred-size: calc(75% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(75% - 0.01px - 1em); + flex-basis: calc(75% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(75% - 0.01px - 1em); + max-width: calc(75% - 0.01px - var(--grid-gap, 1em)) + } + .col-10\@md { + -ms-flex-preferred-size: calc(83.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(83.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(83.33% - 0.01px - 1em); + flex-basis: calc(83.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(83.33% - 0.01px - 1em); + max-width: calc(83.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-11\@md { + -ms-flex-preferred-size: calc(91.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(91.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(91.66% - 0.01px - 1em); + flex-basis: calc(91.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(91.66% - 0.01px - 1em); + max-width: calc(91.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-12\@md { + -ms-flex-preferred-size: calc(100% - 0.01px - 1em); + -ms-flex-preferred-size: calc(100% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(100% - 0.01px - 1em); + flex-basis: calc(100% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(100% - 0.01px - 1em); + max-width: calc(100% - 0.01px - var(--grid-gap, 1em)) + } +} + +@media (min-width: 80rem) { + .col\@lg { + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100% + } + .col-1\@lg { + -ms-flex-preferred-size: calc(8.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(8.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(8.33% - 0.01px - 1em); + flex-basis: calc(8.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(8.33% - 0.01px - 1em); + max-width: calc(8.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-2\@lg { + -ms-flex-preferred-size: calc(16.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(16.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(16.66% - 0.01px - 1em); + flex-basis: calc(16.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(16.66% - 0.01px - 1em); + max-width: calc(16.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-3\@lg { + -ms-flex-preferred-size: calc(25% - 0.01px - 1em); + -ms-flex-preferred-size: calc(25% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(25% - 0.01px - 1em); + flex-basis: calc(25% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(25% - 0.01px - 1em); + max-width: calc(25% - 0.01px - var(--grid-gap, 1em)) + } + .col-4\@lg { + -ms-flex-preferred-size: calc(33.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(33.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(33.33% - 0.01px - 1em); + flex-basis: calc(33.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(33.33% - 0.01px - 1em); + max-width: calc(33.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-5\@lg { + -ms-flex-preferred-size: calc(41.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(41.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(41.66% - 0.01px - 1em); + flex-basis: calc(41.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(41.66% - 0.01px - 1em); + max-width: calc(41.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-6\@lg { + -ms-flex-preferred-size: calc(50% - 0.01px - 1em); + -ms-flex-preferred-size: calc(50% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(50% - 0.01px - 1em); + flex-basis: calc(50% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(50% - 0.01px - 1em); + max-width: calc(50% - 0.01px - var(--grid-gap, 1em)) + } + .col-7\@lg { + -ms-flex-preferred-size: calc(58.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(58.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(58.33% - 0.01px - 1em); + flex-basis: calc(58.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(58.33% - 0.01px - 1em); + max-width: calc(58.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-8\@lg { + -ms-flex-preferred-size: calc(66.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(66.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(66.66% - 0.01px - 1em); + flex-basis: calc(66.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(66.66% - 0.01px - 1em); + max-width: calc(66.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-9\@lg { + -ms-flex-preferred-size: calc(75% - 0.01px - 1em); + -ms-flex-preferred-size: calc(75% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(75% - 0.01px - 1em); + flex-basis: calc(75% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(75% - 0.01px - 1em); + max-width: calc(75% - 0.01px - var(--grid-gap, 1em)) + } + .col-10\@lg { + -ms-flex-preferred-size: calc(83.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(83.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(83.33% - 0.01px - 1em); + flex-basis: calc(83.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(83.33% - 0.01px - 1em); + max-width: calc(83.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-11\@lg { + -ms-flex-preferred-size: calc(91.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(91.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(91.66% - 0.01px - 1em); + flex-basis: calc(91.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(91.66% - 0.01px - 1em); + max-width: calc(91.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-12\@lg { + -ms-flex-preferred-size: calc(100% - 0.01px - 1em); + -ms-flex-preferred-size: calc(100% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(100% - 0.01px - 1em); + flex-basis: calc(100% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(100% - 0.01px - 1em); + max-width: calc(100% - 0.01px - var(--grid-gap, 1em)) + } +} + +@media (min-width: 90rem) { + .col\@xl { + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100% + } + .col-1\@xl { + -ms-flex-preferred-size: calc(8.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(8.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(8.33% - 0.01px - 1em); + flex-basis: calc(8.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(8.33% - 0.01px - 1em); + max-width: calc(8.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-2\@xl { + -ms-flex-preferred-size: calc(16.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(16.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(16.66% - 0.01px - 1em); + flex-basis: calc(16.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(16.66% - 0.01px - 1em); + max-width: calc(16.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-3\@xl { + -ms-flex-preferred-size: calc(25% - 0.01px - 1em); + -ms-flex-preferred-size: calc(25% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(25% - 0.01px - 1em); + flex-basis: calc(25% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(25% - 0.01px - 1em); + max-width: calc(25% - 0.01px - var(--grid-gap, 1em)) + } + .col-4\@xl { + -ms-flex-preferred-size: calc(33.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(33.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(33.33% - 0.01px - 1em); + flex-basis: calc(33.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(33.33% - 0.01px - 1em); + max-width: calc(33.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-5\@xl { + -ms-flex-preferred-size: calc(41.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(41.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(41.66% - 0.01px - 1em); + flex-basis: calc(41.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(41.66% - 0.01px - 1em); + max-width: calc(41.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-6\@xl { + -ms-flex-preferred-size: calc(50% - 0.01px - 1em); + -ms-flex-preferred-size: calc(50% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(50% - 0.01px - 1em); + flex-basis: calc(50% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(50% - 0.01px - 1em); + max-width: calc(50% - 0.01px - var(--grid-gap, 1em)) + } + .col-7\@xl { + -ms-flex-preferred-size: calc(58.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(58.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(58.33% - 0.01px - 1em); + flex-basis: calc(58.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(58.33% - 0.01px - 1em); + max-width: calc(58.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-8\@xl { + -ms-flex-preferred-size: calc(66.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(66.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(66.66% - 0.01px - 1em); + flex-basis: calc(66.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(66.66% - 0.01px - 1em); + max-width: calc(66.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-9\@xl { + -ms-flex-preferred-size: calc(75% - 0.01px - 1em); + -ms-flex-preferred-size: calc(75% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(75% - 0.01px - 1em); + flex-basis: calc(75% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(75% - 0.01px - 1em); + max-width: calc(75% - 0.01px - var(--grid-gap, 1em)) + } + .col-10\@xl { + -ms-flex-preferred-size: calc(83.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(83.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(83.33% - 0.01px - 1em); + flex-basis: calc(83.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(83.33% - 0.01px - 1em); + max-width: calc(83.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-11\@xl { + -ms-flex-preferred-size: calc(91.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(91.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(91.66% - 0.01px - 1em); + flex-basis: calc(91.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(91.66% - 0.01px - 1em); + max-width: calc(91.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-12\@xl { + -ms-flex-preferred-size: calc(100% - 0.01px - 1em); + -ms-flex-preferred-size: calc(100% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(100% - 0.01px - 1em); + flex-basis: calc(100% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(100% - 0.01px - 1em); + max-width: calc(100% - 0.01px - var(--grid-gap, 1em)) + } +} + +:root { + --radius-sm: calc(var(--radius, 0.25em)/2); + --radius-md: var(--radius, 0.25em); + --radius-lg: calc(var(--radius, 0.25em)*2); + --shadow-sm: 0 1px 2px rgba(0, 0, 0, .085), 0 1px 8px rgba(0, 0, 0, .1); + --shadow-md: 0 1px 8px rgba(0, 0, 0, .1), 0 8px 24px rgba(0, 0, 0, .15); + --shadow-lg: 0 1px 8px rgba(0, 0, 0, .1), 0 16px 48px rgba(0, 0, 0, .1), 0 24px 60px rgba(0, 0, 0, .1); + --bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275); + --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1); + --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19); + --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1) +} + +:root { + --body-line-height: 1.4; + --heading-line-height: 1.2 +} + +body { + color: hsl(240, 4%, 20%); + color: var(--color-contrast-high, #313135) +} + +h1, h2, h3, h4 { + color: hsl(240, 8%, 12%); + color: var(--color-contrast-higher, #1c1c21); + line-height: 1.2; + line-height: var(--heading-line-height, 1.2) +} + +.text-xxxl { + font-size: 2.48832em; + font-size: var(--text-xxxl, 2.488em) +} + +small, .text-sm { + font-size: 0.83333em; + font-size: var(--text-sm, 0.833em) +} + +.text-xs { + font-size: 0.69444em; + font-size: var(--text-xs, 0.694em) +} + +strong, .text-bold { + font-weight: bold +} + +s { + text-decoration: line-through +} + +u, .text-underline { + text-decoration: underline +} + + +.text-component h1, .text-component h2, .text-component h3, .text-component h4 { + line-height: 1.2; + line-height: var(--component-heading-line-height, 1.2); + margin-bottom: 0.25em; + margin-bottom: calc(var(--space-xxxs)*var(--text-vspace-multiplier, 1)) +} + +.text-component h2, .text-component h3, .text-component h4 { + margin-top: 0.75em; + margin-top: calc(var(--space-sm)*var(--text-vspace-multiplier, 1)) +} + +.text-component p, .text-component blockquote, .text-component ul li, .text-component ol li { + line-height: 1.4; + line-height: var(--component-body-line-height) +} + +.text-component ul, .text-component ol, .text-component p, .text-component blockquote, .text-component .text-component__block { + margin-bottom: 0.75em; + margin-bottom: calc(var(--space-sm)*var(--text-vspace-multiplier, 1)) +} + +.text-component ul, .text-component ol { + padding-left: 1em +} + +.text-component ul { + list-style-type: disc +} + +.text-component ol { + list-style-type: decimal +} + +.text-component img { + display: block; + margin: 0 auto +} + +.text-component figcaption { + text-align: center; + margin-top: 0.5em; + margin-top: var(--space-xs) +} + +.text-component em { + font-style: italic +} + +.text-component hr { + margin-top: 2em; + margin-top: calc(var(--space-lg)*var(--text-vspace-multiplier, 1)); + margin-bottom: 2em; + margin-bottom: calc(var(--space-lg)*var(--text-vspace-multiplier, 1)); + margin-left: auto; + margin-right: auto +} + +.text-component>*:first-child { + margin-top: 0 +} + +.text-component>*:last-child { + margin-bottom: 0 +} + +.text-component__block--full-width { + width: 100vw; + margin-left: calc(50% - 50vw) +} + +@media (min-width: 48rem) { + .text-component__block--left, .text-component__block--right { + width: 45% + } + .text-component__block--left img, .text-component__block--right img { + width: 100% + } + .text-component__block--left { + float: left; + margin-right: 0.75em; + margin-right: calc(var(--space-sm)*var(--text-vspace-multiplier, 1)) + } + .text-component__block--right { + float: right; + margin-left: 0.75em; + margin-left: calc(var(--space-sm)*var(--text-vspace-multiplier, 1)) + } +} + +@media (min-width: 90rem) { + .text-component__block--outset { + width: calc(100% + 10.5em); + width: calc(100% + 2*var(--space-xxl)) + } + .text-component__block--outset img { + width: 100% + } + .text-component__block--outset:not(.text-component__block--right) { + margin-left: -5.25em; + margin-left: calc(-1*var(--space-xxl)) + } + .text-component__block--left, .text-component__block--right { + width: 50% + } + .text-component__block--right.text-component__block--outset { + margin-right: -5.25em; + margin-right: calc(-1*var(--space-xxl)) + } +} + +:root { + --icon-xxs: 12px; + --icon-xs: 16px; + --icon-sm: 24px; + --icon-md: 32px; + --icon-lg: 48px; + --icon-xl: 64px; + --icon-xxl: 128px +} + +.icon--xxs { + font-size: 12px; + font-size: var(--icon-xxs) +} + +.icon--xs { + font-size: 16px; + font-size: var(--icon-xs) +} + +.icon--sm { + font-size: 24px; + font-size: var(--icon-sm) +} + +.icon--md { + font-size: 32px; + font-size: var(--icon-md) +} + +.icon--lg { + font-size: 48px; + font-size: var(--icon-lg) +} + +.icon--xl { + font-size: 64px; + font-size: var(--icon-xl) +} + +.icon--xxl { + font-size: 128px; + font-size: var(--icon-xxl) +} + +.icon--is-spinning { + -webkit-animation: icon-spin 1s infinite linear; + animation: icon-spin 1s infinite linear +} + +@-webkit-keyframes icon-spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg) + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg) + } +} + +@keyframes icon-spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg) + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg) + } +} + +.icon use { + color: inherit; + fill: currentColor +} + +.btn { + position: relative; + display: -ms-inline-flexbox; + display: inline-flex; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center; + white-space: nowrap; + text-decoration: none; + line-height: 1; + font-size: 1em; + font-size: var(--btn-font-size, 1em); + padding-top: 0.5em; + padding-top: var(--btn-padding-y, 0.5em); + padding-bottom: 0.5em; + padding-bottom: var(--btn-padding-y, 0.5em); + padding-left: 0.75em; + padding-left: var(--btn-padding-x, 0.75em); + padding-right: 0.75em; + padding-right: var(--btn-padding-x, 0.75em); + border-radius: 0.25em; + border-radius: var(--btn-radius, 0.25em) +} + +.btn--primary { + background-color: hsl(220, 90%, 56%); + background-color: var(--color-primary, #2a6df4); + color: hsl(0, 0%, 100%); + color: var(--color-white, #fff) +} + +.btn--subtle { + background-color: hsl(240, 1%, 83%); + background-color: var(--color-contrast-low, #d3d3d4); + color: hsl(240, 8%, 12%); + color: var(--color-contrast-higher, #1c1c21) +} + +.btn--accent { + background-color: hsl(355, 90%, 61%); + background-color: var(--color-accent, #f54251); + color: hsl(0, 0%, 100%); + color: var(--color-white, #fff) +} + +.btn--disabled { + cursor: not-allowed +} + +.btn--sm { + font-size: 0.8em; + font-size: var(--btn-font-size-sm, 0.8em) +} + +.btn--md { + font-size: 1.2em; + font-size: var(--btn-font-size-md, 1.2em) +} + +.btn--lg { + font-size: 1.4em; + font-size: var(--btn-font-size-lg, 1.4em) +} + +.btn--icon { + padding: 0.5em; + padding: var(--btn-padding-y, 0.5em) +} + +.form-control { + background-color: hsl(0, 0%, 100%); + background-color: var(--color-bg, #f2f2f2); + padding-top: 0.5em; + padding-top: var(--form-control-padding-y, 0.5em); + padding-bottom: 0.5em; + padding-bottom: var(--form-control-padding-y, 0.5em); + padding-left: 0.75em; + padding-left: var(--form-control-padding-x, 0.75em); + padding-right: 0.75em; + padding-right: var(--form-control-padding-x, 0.75em); + border-radius: 0.25em; + border-radius: var(--form-control-radius, 0.25em) +} + +.form-control::-webkit-input-placeholder { + color: hsl(240, 1%, 48%); + color: var(--color-contrast-medium, #79797c) +} + +.form-control::-moz-placeholder { + opacity: 1; + color: hsl(240, 1%, 48%); + color: var(--color-contrast-medium, #79797c) +} + +.form-control:-ms-input-placeholder { + color: hsl(240, 1%, 48%); + color: var(--color-contrast-medium, #79797c) +} + +.form-control:-moz-placeholder { + color: hsl(240, 1%, 48%); + color: var(--color-contrast-medium, #79797c) +} + +.form-control[disabled], .form-control[readonly] { + cursor: not-allowed +} + +.form-legend { + color: hsl(240, 8%, 12%); + color: var(--color-contrast-higher, #1c1c21); + line-height: 1.2; + font-size: 1.2em; + font-size: var(--text-md, 1.2em); + margin-bottom: 0.375em; + margin-bottom: var(--space-xxs) +} + +.form-label { + display: inline-block +} + +.form__msg-error { + background-color: hsl(355, 90%, 61%); + background-color: var(--color-error, #f54251); + color: hsl(0, 0%, 100%); + color: var(--color-white, #fff); + font-size: 0.83333em; + font-size: var(--text-sm, 0.833em); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + padding: 0.5em; + padding: var(--space-xs); + margin-top: 0.75em; + margin-top: var(--space-sm); + border-radius: 0.25em; + border-radius: var(--radius-md, 0.25em); + position: absolute; + clip: rect(1px, 1px, 1px, 1px) +} + +.form__msg-error::before { + content: ''; + position: absolute; + left: 0.75em; + left: var(--space-sm); + top: 0; + -webkit-transform: translateY(-100%); + -ms-transform: translateY(-100%); + transform: translateY(-100%); + width: 0; + height: 0; + border: 8px solid transparent; + border-bottom-color: hsl(355, 90%, 61%); + border-bottom-color: var(--color-error) +} + +.form__msg-error--is-visible { + position: relative; + clip: auto +} + +.radio-list>*, .checkbox-list>* { + position: relative; + display: -ms-flexbox; + display: flex; + -ms-flex-align: baseline; + align-items: baseline; + margin-bottom: 0.375em; + margin-bottom: var(--space-xxs) +} + +.radio-list>*:last-of-type, .checkbox-list>*:last-of-type { + margin-bottom: 0 +} + +.radio-list label, .checkbox-list label { + line-height: 1.4; + line-height: var(--body-line-height); + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none +} + +.radio-list input, .checkbox-list input { + vertical-align: top; + margin-right: 0.25em; + margin-right: var(--space-xxxs); + -ms-flex-negative: 0; + flex-shrink: 0 +} + +:root { + --zindex-header: 2; + --zindex-popover: 5; + --zindex-fixed-element: 10; + --zindex-overlay: 15 +} + +@media not all and (min-width: 32rem) { + .display\@xs { + display: none !important + } +} + +@media (min-width: 32rem) { + .hide\@xs { + display: none !important + } +} + +@media not all and (min-width: 48rem) { + .display\@sm { + display: none !important + } +} + +@media (min-width: 48rem) { + .hide\@sm { + display: none !important + } +} + +@media not all and (min-width: 64rem) { + .display\@md { + display: none !important + } +} + +@media (min-width: 64rem) { + .hide\@md { + display: none !important + } +} + +@media not all and (min-width: 80rem) { + .display\@lg { + display: none !important + } +} + +@media (min-width: 80rem) { + .hide\@lg { + display: none !important + } +} + +@media not all and (min-width: 90rem) { + .display\@xl { + display: none !important + } +} + +@media (min-width: 90rem) { + .hide\@xl { + display: none !important + } +} + +:root { + --display: block +} + +.is-visible { + display: block !important; + display: var(--display) !important +} + +.is-hidden { + display: none !important +} + +.sr-only { + position: absolute; + clip: rect(1px, 1px, 1px, 1px); + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + width: 1px; + height: 1px; + overflow: hidden; + padding: 0; + border: 0; + white-space: nowrap +} + +.flex { + display: -ms-flexbox; + display: flex +} + +.inline-flex { + display: -ms-inline-flexbox; + display: inline-flex +} + +.flex-wrap { + -ms-flex-wrap: wrap; + flex-wrap: wrap +} + +.flex-column { + -ms-flex-direction: column; + flex-direction: column +} + +.flex-row { + -ms-flex-direction: row; + flex-direction: row +} + +.flex-center { + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center +} + +.justify-start { + -ms-flex-pack: start; + justify-content: flex-start +} + +.justify-end { + -ms-flex-pack: end; + justify-content: flex-end +} + +.justify-center { + -ms-flex-pack: center; + justify-content: center +} + +.justify-between { + -ms-flex-pack: justify; + justify-content: space-between +} + +.items-center { + -ms-flex-align: center; + align-items: center +} + +.items-start { + -ms-flex-align: start; + align-items: flex-start +} + +.items-end { + -ms-flex-align: end; + align-items: flex-end +} + +@media (min-width: 32rem) { + .flex-wrap\@xs { + -ms-flex-wrap: wrap; + flex-wrap: wrap + } + .flex-column\@xs { + -ms-flex-direction: column; + flex-direction: column + } + .flex-row\@xs { + -ms-flex-direction: row; + flex-direction: row + } + .flex-center\@xs { + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center + } + .justify-start\@xs { + -ms-flex-pack: start; + justify-content: flex-start + } + .justify-end\@xs { + -ms-flex-pack: end; + justify-content: flex-end + } + .justify-center\@xs { + -ms-flex-pack: center; + justify-content: center + } + .justify-between\@xs { + -ms-flex-pack: justify; + justify-content: space-between + } + .items-center\@xs { + -ms-flex-align: center; + align-items: center + } + .items-start\@xs { + -ms-flex-align: start; + align-items: flex-start + } + .items-end\@xs { + -ms-flex-align: end; + align-items: flex-end + } +} + +@media (min-width: 48rem) { + .flex-wrap\@sm { + -ms-flex-wrap: wrap; + flex-wrap: wrap + } + .flex-column\@sm { + -ms-flex-direction: column; + flex-direction: column + } + .flex-row\@sm { + -ms-flex-direction: row; + flex-direction: row + } + .flex-center\@sm { + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center + } + .justify-start\@sm { + -ms-flex-pack: start; + justify-content: flex-start + } + .justify-end\@sm { + -ms-flex-pack: end; + justify-content: flex-end + } + .justify-center\@sm { + -ms-flex-pack: center; + justify-content: center + } + .justify-between\@sm { + -ms-flex-pack: justify; + justify-content: space-between + } + .items-center\@sm { + -ms-flex-align: center; + align-items: center + } + .items-start\@sm { + -ms-flex-align: start; + align-items: flex-start + } + .items-end\@sm { + -ms-flex-align: end; + align-items: flex-end + } +} + +@media (min-width: 64rem) { + .flex-wrap\@md { + -ms-flex-wrap: wrap; + flex-wrap: wrap + } + .flex-column\@md { + -ms-flex-direction: column; + flex-direction: column + } + .flex-row\@md { + -ms-flex-direction: row; + flex-direction: row + } + .flex-center\@md { + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center + } + .justify-start\@md { + -ms-flex-pack: start; + justify-content: flex-start + } + .justify-end\@md { + -ms-flex-pack: end; + justify-content: flex-end + } + .justify-center\@md { + -ms-flex-pack: center; + justify-content: center + } + .justify-between\@md { + -ms-flex-pack: justify; + justify-content: space-between + } + .items-center\@md { + -ms-flex-align: center; + align-items: center + } + .items-start\@md { + -ms-flex-align: start; + align-items: flex-start + } + .items-end\@md { + -ms-flex-align: end; + align-items: flex-end + } +} + +@media (min-width: 80rem) { + .flex-wrap\@lg { + -ms-flex-wrap: wrap; + flex-wrap: wrap + } + .flex-column\@lg { + -ms-flex-direction: column; + flex-direction: column + } + .flex-row\@lg { + -ms-flex-direction: row; + flex-direction: row + } + .flex-center\@lg { + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center + } + .justify-start\@lg { + -ms-flex-pack: start; + justify-content: flex-start + } + .justify-end\@lg { + -ms-flex-pack: end; + justify-content: flex-end + } + .justify-center\@lg { + -ms-flex-pack: center; + justify-content: center + } + .justify-between\@lg { + -ms-flex-pack: justify; + justify-content: space-between + } + .items-center\@lg { + -ms-flex-align: center; + align-items: center + } + .items-start\@lg { + -ms-flex-align: start; + align-items: flex-start + } + .items-end\@lg { + -ms-flex-align: end; + align-items: flex-end + } +} + +@media (min-width: 90rem) { + .flex-wrap\@xl { + -ms-flex-wrap: wrap; + flex-wrap: wrap + } + .flex-column\@xl { + -ms-flex-direction: column; + flex-direction: column + } + .flex-row\@xl { + -ms-flex-direction: row; + flex-direction: row + } + .flex-center\@xl { + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center + } + .justify-start\@xl { + -ms-flex-pack: start; + justify-content: flex-start + } + .justify-end\@xl { + -ms-flex-pack: end; + justify-content: flex-end + } + .justify-center\@xl { + -ms-flex-pack: center; + justify-content: center + } + .justify-between\@xl { + -ms-flex-pack: justify; + justify-content: space-between + } + .items-center\@xl { + -ms-flex-align: center; + align-items: center + } + .items-start\@xl { + -ms-flex-align: start; + align-items: flex-start + } + .items-end\@xl { + -ms-flex-align: end; + align-items: flex-end + } +} + +.flex-grow { + -ms-flex-positive: 1; + flex-grow: 1 +} + +.flex-shrink-0 { + -ms-flex-negative: 0; + flex-shrink: 0 +} + +.flex-gap-xxxs { + margin-bottom: -0.25em; + margin-bottom: calc(-1*var(--space-xxxs)); + margin-right: -0.25em; + margin-right: calc(-1*var(--space-xxxs)) +} + +.flex-gap-xxxs>* { + margin-bottom: 0.25em; + margin-bottom: var(--space-xxxs); + margin-right: 0.25em; + margin-right: var(--space-xxxs) +} + +.flex-gap-xxs { + margin-bottom: -0.375em; + margin-bottom: calc(-1*var(--space-xxs)); + margin-right: -0.375em; + margin-right: calc(-1*var(--space-xxs)) +} + +.flex-gap-xxs>* { + margin-bottom: 0.375em; + margin-bottom: var(--space-xxs); + margin-right: 0.375em; + margin-right: var(--space-xxs) +} + +.flex-gap-xs { + margin-bottom: -0.5em; + margin-bottom: calc(-1*var(--space-xs)); + margin-right: -0.5em; + margin-right: calc(-1*var(--space-xs)) +} + +.flex-gap-xs>* { + margin-bottom: 0.5em; + margin-bottom: var(--space-xs); + margin-right: 0.5em; + margin-right: var(--space-xs) +} + +.flex-gap-sm { + margin-bottom: -0.75em; + margin-bottom: calc(-1*var(--space-sm)); + margin-right: -0.75em; + margin-right: calc(-1*var(--space-sm)) +} + +.flex-gap-sm>* { + margin-bottom: 0.75em; + margin-bottom: var(--space-sm); + margin-right: 0.75em; + margin-right: var(--space-sm) +} + +.flex-gap-md { + margin-bottom: -1.25em; + margin-bottom: calc(-1*var(--space-md)); + margin-right: -1.25em; + margin-right: calc(-1*var(--space-md)) +} + +.flex-gap-md>* { + margin-bottom: 1.25em; + margin-bottom: var(--space-md); + margin-right: 1.25em; + margin-right: var(--space-md) +} + +.flex-gap-lg { + margin-bottom: -2em; + margin-bottom: calc(-1*var(--space-lg)); + margin-right: -2em; + margin-right: calc(-1*var(--space-lg)) +} + +.flex-gap-lg>* { + margin-bottom: 2em; + margin-bottom: var(--space-lg); + margin-right: 2em; + margin-right: var(--space-lg) +} + +.flex-gap-xl { + margin-bottom: -3.25em; + margin-bottom: calc(-1*var(--space-xl)); + margin-right: -3.25em; + margin-right: calc(-1*var(--space-xl)) +} + +.flex-gap-xl>* { + margin-bottom: 3.25em; + margin-bottom: var(--space-xl); + margin-right: 3.25em; + margin-right: var(--space-xl) +} + +.flex-gap-xxl { + margin-bottom: -5.25em; + margin-bottom: calc(-1*var(--space-xxl)); + margin-right: -5.25em; + margin-right: calc(-1*var(--space-xxl)) +} + +.flex-gap-xxl>* { + margin-bottom: 5.25em; + margin-bottom: var(--space-xxl); + margin-right: 5.25em; + margin-right: var(--space-xxl) +} + +.margin-xxxxs { + margin: 0.125em; + margin: var(--space-xxxxs) +} + +.margin-xxxs { + margin: 0.25em; + margin: var(--space-xxxs) +} + +.margin-xxs { + margin: 0.375em; + margin: var(--space-xxs) +} + +.margin-xs { + margin: 0.5em; + margin: var(--space-xs) +} + +.margin-sm { + margin: 0.75em; + margin: var(--space-sm) +} + +.margin-md { + margin: 1.25em; + margin: var(--space-md) +} + +.margin-lg { + margin: 2em; + margin: var(--space-lg) +} + +.margin-xl { + margin: 3.25em; + margin: var(--space-xl) +} + +.margin-xxl { + margin: 5.25em; + margin: var(--space-xxl) +} + +.margin-xxxl { + margin: 8.5em; + margin: var(--space-xxxl) +} + +.margin-xxxxl { + margin: 13.75em; + margin: var(--space-xxxxl) +} + +.margin-auto { + margin: auto +} + +.margin-top-xxxxs { + margin-top: 0.125em; + margin-top: var(--space-xxxxs) +} + +.margin-top-xxxs { + margin-top: 0.25em; + margin-top: var(--space-xxxs) +} + +.margin-top-xxs { + margin-top: 0.375em; + margin-top: var(--space-xxs) +} + +.margin-top-xs { + margin-top: 0.5em; + margin-top: var(--space-xs) +} + +.margin-top-sm { + margin-top: 0.75em; + margin-top: var(--space-sm) +} + +.margin-top-md { + margin-top: 1.25em; + margin-top: var(--space-md) +} + +.margin-top-lg { + margin-top: 2em; + margin-top: var(--space-lg) +} + +.margin-top-xl { + margin-top: 3.25em; + margin-top: var(--space-xl) +} + +.margin-top-xxl { + margin-top: 5.25em; + margin-top: var(--space-xxl) +} + +.margin-top-xxxl { + margin-top: 8.5em; + margin-top: var(--space-xxxl) +} + +.margin-top-xxxxl { + margin-top: 13.75em; + margin-top: var(--space-xxxxl) +} + +.margin-top-auto { + margin-top: auto +} + +.margin-bottom-xxxxs { + margin-bottom: 0.125em; + margin-bottom: var(--space-xxxxs) +} + +.margin-bottom-xxxs { + margin-bottom: 0.25em; + margin-bottom: var(--space-xxxs) +} + +.margin-bottom-xxs { + margin-bottom: 0.375em; + margin-bottom: var(--space-xxs) +} + +.margin-bottom-xs { + margin-bottom: 0.5em; + margin-bottom: var(--space-xs) +} + +.margin-bottom-sm { + margin-bottom: 0.75em; + margin-bottom: var(--space-sm) +} + +.margin-bottom-md { + margin-bottom: 1.25em; + margin-bottom: var(--space-md) +} + +.margin-bottom-lg { + margin-bottom: 2em; + margin-bottom: var(--space-lg) +} + +.margin-bottom-xl { + margin-bottom: 3.25em; + margin-bottom: var(--space-xl) +} + +.margin-bottom-xxl { + margin-bottom: 5.25em; + margin-bottom: var(--space-xxl) +} + +.margin-bottom-xxxl { + margin-bottom: 8.5em; + margin-bottom: var(--space-xxxl) +} + +.margin-bottom-xxxxl { + margin-bottom: 13.75em; + margin-bottom: var(--space-xxxxl) +} + +.margin-bottom-auto { + margin-bottom: auto +} + +.margin-right-xxxxs { + margin-right: 0.125em; + margin-right: var(--space-xxxxs) +} + +.margin-right-xxxs { + margin-right: 0.25em; + margin-right: var(--space-xxxs) +} + +.margin-right-xxs { + margin-right: 0.375em; + margin-right: var(--space-xxs) +} + +.margin-right-xs { + margin-right: 0.5em; + margin-right: var(--space-xs) +} + +.margin-right-sm { + margin-right: 0.75em; + margin-right: var(--space-sm) +} + +.margin-right-md { + margin-right: 1.25em; + margin-right: var(--space-md) +} + +.margin-right-lg { + margin-right: 2em; + margin-right: var(--space-lg) +} + +.margin-right-xl { + margin-right: 3.25em; + margin-right: var(--space-xl) +} + +.margin-right-xxl { + margin-right: 5.25em; + margin-right: var(--space-xxl) +} + +.margin-right-xxxl { + margin-right: 8.5em; + margin-right: var(--space-xxxl) +} + +.margin-right-xxxxl { + margin-right: 13.75em; + margin-right: var(--space-xxxxl) +} + +.margin-right-auto { + margin-right: auto +} + +.margin-left-xxxxs { + margin-left: 0.125em; + margin-left: var(--space-xxxxs) +} + +.margin-left-xxxs { + margin-left: 0.25em; + margin-left: var(--space-xxxs) +} + +.margin-left-xxs { + margin-left: 0.375em; + margin-left: var(--space-xxs) +} + +.margin-left-xs { + margin-left: 0.5em; + margin-left: var(--space-xs) +} + +.margin-left-sm { + margin-left: 0.75em; + margin-left: var(--space-sm) +} + +.margin-left-md { + margin-left: 1.25em; + margin-left: var(--space-md) +} + +.margin-left-lg { + margin-left: 2em; + margin-left: var(--space-lg) +} + +.margin-left-xl { + margin-left: 3.25em; + margin-left: var(--space-xl) +} + +.margin-left-xxl { + margin-left: 5.25em; + margin-left: var(--space-xxl) +} + +.margin-left-xxxl { + margin-left: 8.5em; + margin-left: var(--space-xxxl) +} + +.margin-left-xxxxl { + margin-left: 13.75em; + margin-left: var(--space-xxxxl) +} + +.margin-left-auto { + margin-left: auto +} + +.margin-x-xxxxs { + margin-left: 0.125em; + margin-left: var(--space-xxxxs); + margin-right: 0.125em; + margin-right: var(--space-xxxxs) +} + +.margin-x-xxxs { + margin-left: 0.25em; + margin-left: var(--space-xxxs); + margin-right: 0.25em; + margin-right: var(--space-xxxs) +} + +.margin-x-xxs { + margin-left: 0.375em; + margin-left: var(--space-xxs); + margin-right: 0.375em; + margin-right: var(--space-xxs) +} + +.margin-x-xs { + margin-left: 0.5em; + margin-left: var(--space-xs); + margin-right: 0.5em; + margin-right: var(--space-xs) +} + +.margin-x-sm { + margin-left: 0.75em; + margin-left: var(--space-sm); + margin-right: 0.75em; + margin-right: var(--space-sm) +} + +.margin-x-md { + margin-left: 1.25em; + margin-left: var(--space-md); + margin-right: 1.25em; + margin-right: var(--space-md) +} + +.margin-x-lg { + margin-left: 2em; + margin-left: var(--space-lg); + margin-right: 2em; + margin-right: var(--space-lg) +} + +.margin-x-xl { + margin-left: 3.25em; + margin-left: var(--space-xl); + margin-right: 3.25em; + margin-right: var(--space-xl) +} + +.margin-x-xxl { + margin-left: 5.25em; + margin-left: var(--space-xxl); + margin-right: 5.25em; + margin-right: var(--space-xxl) +} + +.margin-x-xxxl { + margin-left: 8.5em; + margin-left: var(--space-xxxl); + margin-right: 8.5em; + margin-right: var(--space-xxxl) +} + +.margin-x-xxxxl { + margin-left: 13.75em; + margin-left: var(--space-xxxxl); + margin-right: 13.75em; + margin-right: var(--space-xxxxl) +} + +.margin-x-auto { + margin-left: auto; + margin-right: auto +} + +.margin-y-xxxxs { + margin-top: 0.125em; + margin-top: var(--space-xxxxs); + margin-bottom: 0.125em; + margin-bottom: var(--space-xxxxs) +} + +.margin-y-xxxs { + margin-top: 0.25em; + margin-top: var(--space-xxxs); + margin-bottom: 0.25em; + margin-bottom: var(--space-xxxs) +} + +.margin-y-xxs { + margin-top: 0.375em; + margin-top: var(--space-xxs); + margin-bottom: 0.375em; + margin-bottom: var(--space-xxs) +} + +.margin-y-xs { + margin-top: 0.5em; + margin-top: var(--space-xs); + margin-bottom: 0.5em; + margin-bottom: var(--space-xs) +} + +.margin-y-sm { + margin-top: 0.75em; + margin-top: var(--space-sm); + margin-bottom: 0.75em; + margin-bottom: var(--space-sm) +} + +.margin-y-md { + margin-top: 1.25em; + margin-top: var(--space-md); + margin-bottom: 1.25em; + margin-bottom: var(--space-md) +} + +.margin-y-lg { + margin-top: 2em; + margin-top: var(--space-lg); + margin-bottom: 2em; + margin-bottom: var(--space-lg) +} + +.margin-y-xl { + margin-top: 3.25em; + margin-top: var(--space-xl); + margin-bottom: 3.25em; + margin-bottom: var(--space-xl) +} + +.margin-y-xxl { + margin-top: 5.25em; + margin-top: var(--space-xxl); + margin-bottom: 5.25em; + margin-bottom: var(--space-xxl) +} + +.margin-y-xxxl { + margin-top: 8.5em; + margin-top: var(--space-xxxl); + margin-bottom: 8.5em; + margin-bottom: var(--space-xxxl) +} + +.margin-y-xxxxl { + margin-top: 13.75em; + margin-top: var(--space-xxxxl); + margin-bottom: 13.75em; + margin-bottom: var(--space-xxxxl) +} + +.margin-y-auto { + margin-top: auto; + margin-bottom: auto +} + +@media not all and (min-width: 32rem) { + .has-margin\@xs { + margin: 0 !important + } +} + +@media not all and (min-width: 48rem) { + .has-margin\@sm { + margin: 0 !important + } +} + +@media not all and (min-width: 64rem) { + .has-margin\@md { + margin: 0 !important + } +} + +@media not all and (min-width: 80rem) { + .has-margin\@lg { + margin: 0 !important + } +} + +@media not all and (min-width: 90rem) { + .has-margin\@xl { + margin: 0 !important + } +} + +.padding-md { + padding: 1.25em; + padding: var(--space-md) +} + +.padding-xxxxs { + padding: 0.125em; + padding: var(--space-xxxxs) +} + +.padding-xxxs { + padding: 0.25em; + padding: var(--space-xxxs) +} + +.padding-xxs { + padding: 0.375em; + padding: var(--space-xxs) +} + +.padding-xs { + padding: 0.5em; + padding: var(--space-xs) +} + +.padding-sm { + padding: 0.75em; + padding: var(--space-sm) +} + +.padding-lg { + padding: 2em; + padding: var(--space-lg) +} + +.padding-xl { + padding: 3.25em; + padding: var(--space-xl) +} + +.padding-xxl { + padding: 5.25em; + padding: var(--space-xxl) +} + +.padding-xxxl { + padding: 8.5em; + padding: var(--space-xxxl) +} + +.padding-xxxxl { + padding: 13.75em; + padding: var(--space-xxxxl) +} + +.padding-component { + padding: 1.25em; + padding: var(--component-padding) +} + +.padding-top-md { + padding-top: 1.25em; + padding-top: var(--space-md) +} + +.padding-top-xxxxs { + padding-top: 0.125em; + padding-top: var(--space-xxxxs) +} + +.padding-top-xxxs { + padding-top: 0.25em; + padding-top: var(--space-xxxs) +} + +.padding-top-xxs { + padding-top: 0.375em; + padding-top: var(--space-xxs) +} + +.padding-top-xs { + padding-top: 0.5em; + padding-top: var(--space-xs) +} + +.padding-top-sm { + padding-top: 0.75em; + padding-top: var(--space-sm) +} + +.padding-top-lg { + padding-top: 2em; + padding-top: var(--space-lg) +} + +.padding-top-xl { + padding-top: 3.25em; + padding-top: var(--space-xl) +} + +.padding-top-xxl { + padding-top: 5.25em; + padding-top: var(--space-xxl) +} + +.padding-top-xxxl { + padding-top: 8.5em; + padding-top: var(--space-xxxl) +} + +.padding-top-xxxxl { + padding-top: 13.75em; + padding-top: var(--space-xxxxl) +} + +.padding-top-component { + padding-top: 1.25em; + padding-top: var(--component-padding) +} + +.padding-bottom-md { + padding-bottom: 1.25em; + padding-bottom: var(--space-md) +} + +.padding-bottom-xxxxs { + padding-bottom: 0.125em; + padding-bottom: var(--space-xxxxs) +} + +.padding-bottom-xxxs { + padding-bottom: 0.25em; + padding-bottom: var(--space-xxxs) +} + +.padding-bottom-xxs { + padding-bottom: 0.375em; + padding-bottom: var(--space-xxs) +} + +.padding-bottom-xs { + padding-bottom: 0.5em; + padding-bottom: var(--space-xs) +} + +.padding-bottom-sm { + padding-bottom: 0.75em; + padding-bottom: var(--space-sm) +} + +.padding-bottom-lg { + padding-bottom: 2em; + padding-bottom: var(--space-lg) +} + +.padding-bottom-xl { + padding-bottom: 3.25em; + padding-bottom: var(--space-xl) +} + +.padding-bottom-xxl { + padding-bottom: 5.25em; + padding-bottom: var(--space-xxl) +} + +.padding-bottom-xxxl { + padding-bottom: 8.5em; + padding-bottom: var(--space-xxxl) +} + +.padding-bottom-xxxxl { + padding-bottom: 13.75em; + padding-bottom: var(--space-xxxxl) +} + +.padding-bottom-component { + padding-bottom: 1.25em; + padding-bottom: var(--component-padding) +} + +.padding-right-md { + padding-right: 1.25em; + padding-right: var(--space-md) +} + +.padding-right-xxxxs { + padding-right: 0.125em; + padding-right: var(--space-xxxxs) +} + +.padding-right-xxxs { + padding-right: 0.25em; + padding-right: var(--space-xxxs) +} + +.padding-right-xxs { + padding-right: 0.375em; + padding-right: var(--space-xxs) +} + +.padding-right-xs { + padding-right: 0.5em; + padding-right: var(--space-xs) +} + +.padding-right-sm { + padding-right: 0.75em; + padding-right: var(--space-sm) +} + +.padding-right-lg { + padding-right: 2em; + padding-right: var(--space-lg) +} + +.padding-right-xl { + padding-right: 3.25em; + padding-right: var(--space-xl) +} + +.padding-right-xxl { + padding-right: 5.25em; + padding-right: var(--space-xxl) +} + +.padding-right-xxxl { + padding-right: 8.5em; + padding-right: var(--space-xxxl) +} + +.padding-right-xxxxl { + padding-right: 13.75em; + padding-right: var(--space-xxxxl) +} + +.padding-right-component { + padding-right: 1.25em; + padding-right: var(--component-padding) +} + +.padding-left-md { + padding-left: 1.25em; + padding-left: var(--space-md) +} + +.padding-left-xxxxs { + padding-left: 0.125em; + padding-left: var(--space-xxxxs) +} + +.padding-left-xxxs { + padding-left: 0.25em; + padding-left: var(--space-xxxs) +} + +.padding-left-xxs { + padding-left: 0.375em; + padding-left: var(--space-xxs) +} + +.padding-left-xs { + padding-left: 0.5em; + padding-left: var(--space-xs) +} + +.padding-left-sm { + padding-left: 0.75em; + padding-left: var(--space-sm) +} + +.padding-left-lg { + padding-left: 2em; + padding-left: var(--space-lg) +} + +.padding-left-xl { + padding-left: 3.25em; + padding-left: var(--space-xl) +} + +.padding-left-xxl { + padding-left: 5.25em; + padding-left: var(--space-xxl) +} + +.padding-left-xxxl { + padding-left: 8.5em; + padding-left: var(--space-xxxl) +} + +.padding-left-xxxxl { + padding-left: 13.75em; + padding-left: var(--space-xxxxl) +} + +.padding-left-component { + padding-left: 1.25em; + padding-left: var(--component-padding) +} + +.padding-x-md { + padding-left: 1.25em; + padding-left: var(--space-md); + padding-right: 1.25em; + padding-right: var(--space-md) +} + +.padding-x-xxxxs { + padding-left: 0.125em; + padding-left: var(--space-xxxxs); + padding-right: 0.125em; + padding-right: var(--space-xxxxs) +} + +.padding-x-xxxs { + padding-left: 0.25em; + padding-left: var(--space-xxxs); + padding-right: 0.25em; + padding-right: var(--space-xxxs) +} + +.padding-x-xxs { + padding-left: 0.375em; + padding-left: var(--space-xxs); + padding-right: 0.375em; + padding-right: var(--space-xxs) +} + +.padding-x-xs { + padding-left: 0.5em; + padding-left: var(--space-xs); + padding-right: 0.5em; + padding-right: var(--space-xs) +} + +.padding-x-sm { + padding-left: 0.75em; + padding-left: var(--space-sm); + padding-right: 0.75em; + padding-right: var(--space-sm) +} + +.padding-x-lg { + padding-left: 2em; + padding-left: var(--space-lg); + padding-right: 2em; + padding-right: var(--space-lg) +} + +.padding-x-xl { + padding-left: 3.25em; + padding-left: var(--space-xl); + padding-right: 3.25em; + padding-right: var(--space-xl) +} + +.padding-x-xxl { + padding-left: 5.25em; + padding-left: var(--space-xxl); + padding-right: 5.25em; + padding-right: var(--space-xxl) +} + +.padding-x-xxxl { + padding-left: 8.5em; + padding-left: var(--space-xxxl); + padding-right: 8.5em; + padding-right: var(--space-xxxl) +} + +.padding-x-xxxxl { + padding-left: 13.75em; + padding-left: var(--space-xxxxl); + padding-right: 13.75em; + padding-right: var(--space-xxxxl) +} + +.padding-x-component { + padding-left: 1.25em; + padding-left: var(--component-padding); + padding-right: 1.25em; + padding-right: var(--component-padding) +} + +.padding-y-md { + padding-top: 1.25em; + padding-top: var(--space-md); + padding-bottom: 1.25em; + padding-bottom: var(--space-md) +} + +.padding-y-xxxxs { + padding-top: 0.125em; + padding-top: var(--space-xxxxs); + padding-bottom: 0.125em; + padding-bottom: var(--space-xxxxs) +} + +.padding-y-xxxs { + padding-top: 0.25em; + padding-top: var(--space-xxxs); + padding-bottom: 0.25em; + padding-bottom: var(--space-xxxs) +} + +.padding-y-xxs { + padding-top: 0.375em; + padding-top: var(--space-xxs); + padding-bottom: 0.375em; + padding-bottom: var(--space-xxs) +} + +.padding-y-xs { + padding-top: 0.5em; + padding-top: var(--space-xs); + padding-bottom: 0.5em; + padding-bottom: var(--space-xs) +} + +.padding-y-sm { + padding-top: 0.75em; + padding-top: var(--space-sm); + padding-bottom: 0.75em; + padding-bottom: var(--space-sm) +} + +.padding-y-lg { + padding-top: 2em; + padding-top: var(--space-lg); + padding-bottom: 2em; + padding-bottom: var(--space-lg) +} + +.padding-y-xl { + padding-top: 3.25em; + padding-top: var(--space-xl); + padding-bottom: 3.25em; + padding-bottom: var(--space-xl) +} + +.padding-y-xxl { + padding-top: 5.25em; + padding-top: var(--space-xxl); + padding-bottom: 5.25em; + padding-bottom: var(--space-xxl) +} + +.padding-y-xxxl { + padding-top: 8.5em; + padding-top: var(--space-xxxl); + padding-bottom: 8.5em; + padding-bottom: var(--space-xxxl) +} + +.padding-y-xxxxl { + padding-top: 13.75em; + padding-top: var(--space-xxxxl); + padding-bottom: 13.75em; + padding-bottom: var(--space-xxxxl) +} + +.padding-y-component { + padding-top: 1.25em; + padding-top: var(--component-padding); + padding-bottom: 1.25em; + padding-bottom: var(--component-padding) +} + +@media not all and (min-width: 32rem) { + .has-padding\@xs { + padding: 0 !important + } +} + +@media not all and (min-width: 48rem) { + .has-padding\@sm { + padding: 0 !important + } +} + +@media not all and (min-width: 64rem) { + .has-padding\@md { + padding: 0 !important + } +} + +@media not all and (min-width: 80rem) { + .has-padding\@lg { + padding: 0 !important + } +} + +@media not all and (min-width: 90rem) { + .has-padding\@xl { + padding: 0 !important + } +} + +.truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap +} + +.text-replace { + overflow: hidden; + color: transparent; + text-indent: 100%; + white-space: nowrap +} + +.text-center { + text-align: center +} + +.text-left { + text-align: left +} + +.text-right { + text-align: right +} + +@media (min-width: 32rem) { + .text-center\@xs { + text-align: center + } + .text-left\@xs { + text-align: left + } + .text-right\@xs { + text-align: right + } +} + +@media (min-width: 48rem) { + .text-center\@sm { + text-align: center + } + .text-left\@sm { + text-align: left + } + .text-right\@sm { + text-align: right + } +} + +@media (min-width: 64rem) { + .text-center\@md { + text-align: center + } + .text-left\@md { + text-align: left + } + .text-right\@md { + text-align: right + } +} + +@media (min-width: 80rem) { + .text-center\@lg { + text-align: center + } + .text-left\@lg { + text-align: left + } + .text-right\@lg { + text-align: right + } +} + +@media (min-width: 90rem) { + .text-center\@xl { + text-align: center + } + .text-left\@xl { + text-align: left + } + .text-right\@xl { + text-align: right + } +} + +.color-inherit { + color: inherit +} + +.color-contrast-medium { + color: hsl(240, 1%, 48%); + color: var(--color-contrast-medium, #79797c) +} + +.color-contrast-high { + color: hsl(240, 4%, 20%); + color: var(--color-contrast-high, #313135) +} + +.color-contrast-higher { + color: hsl(240, 8%, 12%); + color: var(--color-contrast-higher, #1c1c21) +} + +.color-primary { + color: hsl(220, 90%, 56%); + color: var(--color-primary, #2a6df4) +} + +.color-accent { + color: hsl(355, 90%, 61%); + color: var(--color-accent, #f54251) +} + +.color-success { + color: hsl(94, 48%, 56%); + color: var(--color-success, #88c559) +} + +.color-warning { + color: hsl(46, 100%, 61%); + color: var(--color-warning, #ffd138) +} + +.color-error { + color: hsl(355, 90%, 61%); + color: var(--color-error, #f54251) +} + +.width-100\% { + width: 100% +} + +.height-100\% { + height: 100% +} + +.media-wrapper { + position: relative; + height: 0; + padding-bottom: 56.25% +} + +.media-wrapper iframe, .media-wrapper video, .media-wrapper img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100% +} + +.media-wrapper video, .media-wrapper img { + -o-object-fit: cover; + object-fit: cover +} + +.media-wrapper--4\:3 { + padding-bottom: 75% +} + +:root, [data-theme="default"] { + --color-primary-darker: hsl(220, 90%, 36%); + --color-primary-darker-h: 220; + --color-primary-darker-s: 90%; + --color-primary-darker-l: 36%; + --color-primary-dark: hsl(220, 90%, 46%); + --color-primary-dark-h: 220; + --color-primary-dark-s: 90%; + --color-primary-dark-l: 46%; + --color-primary: hsl(220, 90%, 56%); + --color-primary-h: 220; + --color-primary-s: 90%; + --color-primary-l: 56%; + --color-primary-light: hsl(220, 90%, 66%); + --color-primary-light-h: 220; + --color-primary-light-s: 90%; + --color-primary-light-l: 66%; + --color-primary-lighter: hsl(220, 90%, 76%); + --color-primary-lighter-h: 220; + --color-primary-lighter-s: 90%; + --color-primary-lighter-l: 76%; + --color-accent-darker: hsl(355, 90%, 41%); + --color-accent-darker-h: 355; + --color-accent-darker-s: 90%; + --color-accent-darker-l: 41%; + --color-accent-dark: hsl(355, 90%, 51%); + --color-accent-dark-h: 355; + --color-accent-dark-s: 90%; + --color-accent-dark-l: 51%; + --color-accent: hsl(355, 90%, 61%); + --color-accent-h: 355; + --color-accent-s: 90%; + --color-accent-l: 61%; + --color-accent-light: hsl(355, 90%, 71%); + --color-accent-light-h: 355; + --color-accent-light-s: 90%; + --color-accent-light-l: 71%; + --color-accent-lighter: hsl(355, 90%, 81%); + --color-accent-lighter-h: 355; + --color-accent-lighter-s: 90%; + --color-accent-lighter-l: 81%; + --color-black: hsl(240, 8%, 12%); + --color-black-h: 240; + --color-black-s: 8%; + --color-black-l: 12%; + --color-white: hsl(0, 0%, 100%); + --color-white-h: 0; + --color-white-s: 0%; + --color-white-l: 100%; + --color-success-darker: hsl(94, 48%, 36%); + --color-success-darker-h: 94; + --color-success-darker-s: 48%; + --color-success-darker-l: 36%; + --color-success-dark: hsl(94, 48%, 46%); + --color-success-dark-h: 94; + --color-success-dark-s: 48%; + --color-success-dark-l: 46%; + --color-success: hsl(94, 48%, 56%); + --color-success-h: 94; + --color-success-s: 48%; + --color-success-l: 56%; + --color-success-light: hsl(94, 48%, 66%); + --color-success-light-h: 94; + --color-success-light-s: 48%; + --color-success-light-l: 66%; + --color-success-lighter: hsl(94, 48%, 76%); + --color-success-lighter-h: 94; + --color-success-lighter-s: 48%; + --color-success-lighter-l: 76%; + --color-error-darker: hsl(355, 90%, 41%); + --color-error-darker-h: 355; + --color-error-darker-s: 90%; + --color-error-darker-l: 41%; + --color-error-dark: hsl(355, 90%, 51%); + --color-error-dark-h: 355; + --color-error-dark-s: 90%; + --color-error-dark-l: 51%; + --color-error: hsl(355, 90%, 61%); + --color-error-h: 355; + --color-error-s: 90%; + --color-error-l: 61%; + --color-error-light: hsl(355, 90%, 71%); + --color-error-light-h: 355; + --color-error-light-s: 90%; + --color-error-light-l: 71%; + --color-error-lighter: hsl(355, 90%, 81%); + --color-error-lighter-h: 355; + --color-error-lighter-s: 90%; + --color-error-lighter-l: 81%; + --color-warning-darker: hsl(46, 100%, 41%); + --color-warning-darker-h: 46; + --color-warning-darker-s: 100%; + --color-warning-darker-l: 41%; + --color-warning-dark: hsl(46, 100%, 51%); + --color-warning-dark-h: 46; + --color-warning-dark-s: 100%; + --color-warning-dark-l: 51%; + --color-warning: hsl(46, 100%, 61%); + --color-warning-h: 46; + --color-warning-s: 100%; + --color-warning-l: 61%; + --color-warning-light: hsl(46, 100%, 71%); + --color-warning-light-h: 46; + --color-warning-light-s: 100%; + --color-warning-light-l: 71%; + --color-warning-lighter: hsl(46, 100%, 81%); + --color-warning-lighter-h: 46; + --color-warning-lighter-s: 100%; + --color-warning-lighter-l: 81%; + --color-bg: hsl(0, 0%, 100%); + --color-bg-h: 0; + --color-bg-s: 0%; + --color-bg-l: 100%; + --color-contrast-lower: hsl(0, 0%, 95%); + --color-contrast-lower-h: 0; + --color-contrast-lower-s: 0%; + --color-contrast-lower-l: 95%; + --color-contrast-low: hsl(240, 1%, 83%); + --color-contrast-low-h: 240; + --color-contrast-low-s: 1%; + --color-contrast-low-l: 83%; + --color-contrast-medium: hsl(240, 1%, 48%); + --color-contrast-medium-h: 240; + --color-contrast-medium-s: 1%; + --color-contrast-medium-l: 48%; + --color-contrast-high: hsl(240, 4%, 20%); + --color-contrast-high-h: 240; + --color-contrast-high-s: 4%; + --color-contrast-high-l: 20%; + --color-contrast-higher: hsl(240, 8%, 12%); + --color-contrast-higher-h: 240; + --color-contrast-higher-s: 8%; + --color-contrast-higher-l: 12% +} + +@supports (--css: variables) { + @media (min-width: 64rem) { + :root { + --space-unit: 1.25em + } + } +} + +:root { + --radius: 0.25em +} + +:root { + --font-primary: sans-serif; + --text-base-size: 1em; + --text-scale-ratio: 1.2; + --text-xs: calc(1em/var(--text-scale-ratio)/var(--text-scale-ratio)); + --text-sm: calc(var(--text-xs)*var(--text-scale-ratio)); + --text-md: calc(var(--text-sm)*var(--text-scale-ratio)*var(--text-scale-ratio)); + --text-lg: calc(var(--text-md)*var(--text-scale-ratio)); + --text-xl: calc(var(--text-lg)*var(--text-scale-ratio)); + --text-xxl: calc(var(--text-xl)*var(--text-scale-ratio)); + --text-xxxl: calc(var(--text-xxl)*var(--text-scale-ratio)); + --body-line-height: 1.4; + --heading-line-height: 1.2; + --font-primary-capital-letter: 1 +} + +@supports (--css: variables) { + @media (min-width: 64rem) { + :root { + --text-base-size: 1.25em; + --text-scale-ratio: 1.25 + } + } +} + +mark { + background-color: hsla(355, 90%, 61%, 0.2); + background-color: hsla(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), 0.2); + color: inherit +} + +.text-component { + --line-height-multiplier: 1; + --text-vspace-multiplier: 1 +} + +.text-component blockquote { + padding-left: 1em; + border-left: 4px solid hsl(240, 1%, 83%); + border-left: 4px solid var(--color-contrast-low) +} + +.text-component hr { + background: hsl(240, 1%, 83%); + background: var(--color-contrast-low); + height: 1px +} + +.text-component figcaption { + font-size: 0.83333em; + font-size: var(--text-sm); + color: hsl(240, 1%, 48%); + color: var(--color-contrast-medium) +} + +.article.text-component { + --line-height-multiplier: 1.13; + --text-vspace-multiplier: 1.2 +} + +:root { + --btn-font-size: 1em; + --btn-font-size-sm: calc(var(--btn-font-size) - 0.2em); + --btn-font-size-md: calc(var(--btn-font-size) + 0.2em); + --btn-font-size-lg: calc(var(--btn-font-size) + 0.4em); + --btn-radius: 0.25em; + --btn-padding-x: var(--space-sm); + --btn-padding-y: var(--space-xs) +} + +.btn { + --color-shadow: hsla(240, 8%, 12%, 0.15); + --color-shadow: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.15); + box-shadow: 0 4px 16px hsla(240, 8%, 12%, 0.15); + box-shadow: 0 4px 16px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.15); + cursor: pointer +} + +.btn--primary { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale +} + +.btn--accent { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale +} + +.btn--disabled { + opacity: 0.6 +} + +:root { + --form-control-padding-x: var(--space-sm); + --form-control-padding-y: var(--space-xs); + --form-control-radius: 0.25em +} + +.form-control { + border: 2px solid hsl(240, 1%, 83%); + border: 2px solid var(--color-contrast-low) +} + +.form-control:focus { + outline: none; + border-color: hsl(220, 90%, 56%); + border-color: var(--color-primary); + --color-shadow: hsla(220, 90%, 56%, 0.2); + --color-shadow: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2); + box-shadow: undefined; + box-shadow: 0 0 0 3px var(--color-shadow) +} + +.form-control:focus:focus { + box-shadow: 0 0 0 3px hsla(220, 90%, 56%, 0.2); + box-shadow: 0 0 0 3px var(--color-shadow) +} + +.form-control[aria-invalid="true"] { + border-color: hsl(355, 90%, 61%); + border-color: var(--color-error) +} + +.form-control[aria-invalid="true"]:focus { + --color-shadow: hsla(355, 90%, 61%, 0.2); + --color-shadow: hsla(var(--color-error-h), var(--color-error-s), var(--color-error-l), 0.2); + box-shadow: undefined; + box-shadow: 0 0 0 3px var(--color-shadow) +} + +.form-control[aria-invalid="true"]:focus:focus { + box-shadow: 0 0 0 3px hsla(355, 90%, 61%, 0.2); + box-shadow: 0 0 0 3px var(--color-shadow) +} + +.form-label { + font-size: 0.83333em; + font-size: var(--text-sm) +} + +:root { + --cd-color-1: hsl(206, 21%, 24%); + --cd-color-1-h: 206; + --cd-color-1-s: 21%; + --cd-color-1-l: 24%; + --cd-color-2: hsl(205, 38%, 89%); + --cd-color-2-h: 205; + --cd-color-2-s: 38%; + --cd-color-2-l: 89%; + --cd-color-3: hsl(207, 10%, 55%); + --cd-color-3-h: 207; + --cd-color-3-s: 10%; + --cd-color-3-l: 55%; + --cd-color-4: hsl(111, 51%, 60%); + --cd-color-4-h: 111; + --cd-color-4-s: 51%; + --cd-color-4-l: 60%; + --cd-color-5: hsl(356, 53%, 49%); + --cd-color-5-h: 356; + --cd-color-5-s: 53%; + --cd-color-5-l: 49%; + --cd-color-6: hsl(47, 85%, 61%); + --cd-color-6-h: 47; + --cd-color-6-s: 85%; + --cd-color-6-l: 61%; + --cd-header-height: 200px; + --font-primary: 'Droid Serif', serif; + --font-secondary: 'Open Sans', sans-serif +} + +[data-theme="dark"] { + --cd-color-2: hsl(0, 0%, 34%); + --cd-color-2-h: 0; + --cd-color-2-s: 0%; + --cd-color-2-l: 34%; +} + +@supports (--css: variables) { + @media (min-width: 64rem) { + :root { + --cd-header-height: 300px + } + } +} + +.cd-main-header { + height: 200px; + height: var(--cd-header-height); + background: hsl(206, 21%, 24%); + background: var(--cd-color-1); + color: hsl(0, 0%, 100%); + color: var(--color-white); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale +} + +.cd-main-header h1 { + color: inherit +} + +.cd-timeline { + overflow: hidden; + padding: 2em 0; + padding: var(--space-lg) 0; + color: hsl(207, 10%, 55%); + color: var(--cd-color-3); + background-color: hsl(205, 38%, 93.45%); + background-color: hsl(var(--cd-color-2-h), var(--cd-color-2-s), calc(var(--cd-color-2-l)*1.05)); +} + +[data-theme="dark"] .cd-timeline { + background-color: #2C2F33; +} + +.cd-timeline h2 { + font-weight: 700 +} + +.cd-timeline__container { + position: relative; + padding: 1.25em 0; + padding: var(--space-md) 0 +} + +.cd-timeline__container::before { + content: ''; + position: absolute; + top: 0; + left: 18px; + height: 100%; + width: 4px; + background: hsl(205, 38%, 89%); + background: var(--cd-color-2) +} + +@media (min-width: 64rem) { + .cd-timeline__container::before { + left: 50%; + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%) + } +} + +.cd-timeline__block { + display: -ms-flexbox; + display: flex; + position: relative; + z-index: 1; + margin-bottom: 2em; + margin-bottom: var(--space-lg) +} + +.cd-timeline__block:last-child { + margin-bottom: 0 +} + +@media (min-width: 64rem) { + .cd-timeline__block:nth-child(even) { + -ms-flex-direction: row-reverse; + flex-direction: row-reverse + } +} + +.cd-timeline__img { + display: -ms-flexbox; + display: flex; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center; + -ms-flex-negative: 0; + flex-shrink: 0; + width: 30px; + height: 30px; + border-radius: 50%; + box-shadow: 0 0 0 4px hsl(0, 0%, 100%), inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 0 4px var(--color-white), inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05) +} + +[data-theme="dark"] .cd-timeline__img { + box-shadow: 0 0 0 4px var(--cd-color-2), inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05) +} + +.cd-timeline__img i { + font-size: 1.5em; + color: white; +} + +@media (max-width: 64rem) { + .cd-timeline__img i { + font-size: 0.9em; + } +} + +.cd-timeline__img img { + width: 40px; + height: 40px; + margin-left: 2px; + margin-top: 2px; +} + +@media (max-width: 64rem) { + .cd-timeline__img img { + width: 20px; + height: 20px; + margin-left: 2px; + margin-top: 2px; + } +} + +@media (min-width: 64rem) { + .cd-timeline__img { + width: 60px; + height: 60px; + -ms-flex-order: 1; + order: 1; + margin-left: calc(5% - 30px); + will-change: transform; + } + + .cd-timeline__block:nth-child(even) .cd-timeline__img { + margin-right: calc(5% - 30px) + } +} + +.cd-timeline__img--picture { + background-color: #7289DA; +} + +.cd-timeline__img--movie { + background-color: hsl(356, 53%, 49%); + background-color: var(--cd-color-5) +} + +.cd-timeline__img--location { + background-color: hsl(47, 85%, 61%); + background-color: var(--cd-color-6) +} + +.cd-timeline__content { + -ms-flex-positive: 1; + flex-grow: 1; + position: relative; + margin-left: 1.25em; + margin-left: var(--space-md); + border-radius: 0.25em; + border-radius: var(--radius-md); + padding: 1.25em; + padding: var(--space-md); + box-shadow: 0 3px 0 hsl(205, 38%, 89%); + box-shadow: 0 3px 0 var(--cd-color-2) +} + +.cd-timeline__content::before { + content: ''; + position: absolute; + top: 16px; + right: 100%; + width: 0; + height: 0; + border: 7px solid transparent; + border-right-color: hsl(0, 0%, 100%); + border-right-color: var(--cd-color-2) +} + +.cd-timeline__content h2 { + color: hsl(206, 21%, 24%); + color: var(--cd-color-1) +} + +@media (min-width: 64rem) { + .cd-timeline__content { + width: 45%; + -ms-flex-positive: 0; + flex-grow: 0; + will-change: transform; + margin: 0; + font-size: 0.9em; + --line-height-multiplier: 1.2 + } + .cd-timeline__content::before { + top: 24px + } + .cd-timeline__block:nth-child(odd) .cd-timeline__content::before { + right: auto; + left: 100%; + width: 0; + height: 0; + border: 7px solid transparent; + border-left-color: hsl(0, 0%, 100%); + border-left-color: var(--cd-color-2) + } +} + +@media (min-width: 64rem) { + .cd-timeline__date { + position: absolute; + width: 100%; + left: 120%; + top: 20px + } + .cd-timeline__block:nth-child(even) .cd-timeline__date { + left: auto; + right: 120%; + text-align: right + } +} + +@media (min-width: 64rem) { + .cd-timeline__img--hidden, .cd-timeline__content--hidden { + visibility: hidden + } + .cd-timeline__img--bounce-in { + -webkit-animation: cd-bounce-1 0.6s; + animation: cd-bounce-1 0.6s + } + .cd-timeline__content--bounce-in { + -webkit-animation: cd-bounce-2 0.6s; + animation: cd-bounce-2 0.6s + } + .cd-timeline__block:nth-child(even) .cd-timeline__content--bounce-in { + -webkit-animation-name: cd-bounce-2-inverse; + animation-name: cd-bounce-2-inverse + } + .cd-timeline__img--bounce-out { + -webkit-animation: cd-bounce-out-1 0.6s; + animation: cd-bounce-out-1 0.6s; + } + .cd-timeline__content--bounce-out { + -webkit-animation: cd-bounce-out-2 0.6s; + animation: cd-bounce-out-2 0.6s; + } +} + +@-webkit-keyframes cd-bounce-1 { + 0% { + opacity: 0; + -webkit-transform: scale(0.5); + transform: scale(0.5) + } + 60% { + opacity: 1; + -webkit-transform: scale(1.2); + transform: scale(1.2) + } + 100% { + -webkit-transform: scale(1); + transform: scale(1) + } +} + +@keyframes cd-bounce-1 { + 0% { + opacity: 0; + -webkit-transform: scale(0.5); + transform: scale(0.5) + } + 60% { + opacity: 1; + -webkit-transform: scale(1.2); + transform: scale(1.2) + } + 100% { + -webkit-transform: scale(1); + transform: scale(1) + } +} + +@-webkit-keyframes cd-bounce-2 { + 0% { + opacity: 0; + -webkit-transform: translateX(-100px); + transform: translateX(-100px) + } + 60% { + opacity: 1; + -webkit-transform: translateX(20px); + transform: translateX(20px) + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0) + } +} + +@keyframes cd-bounce-2 { + 0% { + opacity: 0; + -webkit-transform: translateX(-100px); + transform: translateX(-100px) + } + 60% { + opacity: 1; + -webkit-transform: translateX(20px); + transform: translateX(20px) + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0) + } +} + +@-webkit-keyframes cd-bounce-2-inverse { + 0% { + opacity: 0; + -webkit-transform: translateX(100px); + transform: translateX(100px) + } + 60% { + opacity: 1; + -webkit-transform: translateX(-20px); + transform: translateX(-20px) + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0) + } +} + +@keyframes cd-bounce-2-inverse { + 0% { + opacity: 0; + -webkit-transform: translateX(100px); + transform: translateX(100px) + } + 60% { + opacity: 1; + -webkit-transform: translateX(-20px); + transform: translateX(-20px) + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0) + } +} + +@-webkit-keyframes cd-bounce-out-1 { + 0% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1) + } + + 60% { + -webkit-transform: scale(1.2); + transform: scale(1.2) + } + + 100% { + opacity: 0; + -webkit-transform: scale(0.5); + transform: scale(0.5) + } +} + +@keyframes cd-bounce-out-1 { + 0% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } + + 60% { + -webkit-transform: scale(1.2); + transform: scale(1.2); + } + + 100% { + opacity: 0; + -webkit-transform: scale(0.5); + transform: scale(0.5); + } +} + +@-webkit-keyframes cd-bounce-out-2 { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0) + } + 60% { + -webkit-transform: translateX(20px); + transform: translateX(20px) + } + 100% { + opacity: 0; + -webkit-transform: translateX(-100px); + transform: translateX(-100px) + } +} + +@keyframes cd-bounce-out-2 { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0) + } + 60% { + -webkit-transform: translateX(20px); + transform: translateX(20px) + } + 100% { + opacity: 0; + -webkit-transform: translateX(-100px); + transform: translateX(-100px) + } +} diff --git a/pydis_site/templates/base/navbar.html b/pydis_site/templates/base/navbar.html index 2fcd8ad8..41f5fa10 100644 --- a/pydis_site/templates/base/navbar.html +++ b/pydis_site/templates/base/navbar.html @@ -88,7 +88,7 @@ Guides - + Timeline diff --git a/pydis_site/templates/home/index.html b/pydis_site/templates/home/index.html index 393e7c19..036a785c 100644 --- a/pydis_site/templates/home/index.html +++ b/pydis_site/templates/home/index.html @@ -110,7 +110,7 @@

- + Check it out! diff --git a/pydis_site/templates/timeline/timeline.html b/pydis_site/templates/timeline/timeline.html new file mode 100644 index 00000000..8f746b6e --- /dev/null +++ b/pydis_site/templates/timeline/timeline.html @@ -0,0 +1,42 @@ +{% extends 'base/base.html' %} +{% load static %} + +{% block title %}Timeline{% endblock %} +{% block head %} + + +{% endblock %} + +{% block content %} + {% include "base/navbar.html" %} + +
+ +
+ + +{% endblock %} diff --git a/pydis_site/urls.py b/pydis_site/urls.py index 0f2f6aeb..799e8600 100644 --- a/pydis_site/urls.py +++ b/pydis_site/urls.py @@ -25,6 +25,7 @@ urlpatterns = ( path('pages/', include('pydis_site.apps.content.urls', namespace='content')), path('resources/', include('pydis_site.apps.resources.urls')), path('events/', include('pydis_site.apps.events.urls', namespace='events')), + path('timeline/', include('pydis_site.apps.timeline.urls', namespace='timeline')), path('', include('pydis_site.apps.home.urls', namespace='home')), ) -- cgit v1.2.3 From 07e5006996e2d9e6182934d7f666772d09b0c72f Mon Sep 17 00:00:00 2001 From: hedy Date: Sat, 6 Apr 2024 12:47:58 +0800 Subject: Timeline: Remove files from old implementation --- pydis_site/static/css/timeline/timeline.css | 3826 --------------------------- pydis_site/templates/home/timeline.html | 983 ------- pydis_site/templates/timeline/timeline.html | 31 +- 3 files changed, 14 insertions(+), 4826 deletions(-) delete mode 100644 pydis_site/static/css/timeline/timeline.css delete mode 100644 pydis_site/templates/home/timeline.html diff --git a/pydis_site/static/css/timeline/timeline.css b/pydis_site/static/css/timeline/timeline.css deleted file mode 100644 index d42bbfc0..00000000 --- a/pydis_site/static/css/timeline/timeline.css +++ /dev/null @@ -1,3826 +0,0 @@ -h2 { - font-size: 2em; -} - -@media (max-width: 500px) { - h2 { - font-size: 1em; - } -} - -article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main, form legend { - display: block -} - -ol, ul { - list-style: none -} - -blockquote, q { - quotes: none -} - -button, input, textarea, select { - margin: 0 -} - -.pastel-red { - background-color: #FF7878 !important; -} - -.pastel-orange { - background-color: #FFBF76 !important; -} - -.pastel-green { - background-color: #8bd6a7 !important; -} - -.pastel-blue { - background-color: #8edbec !important; -} - -.pastel-purple { - background-color: #CBB1FF !important; -} - -.pastel-pink { - background-color: #F6ACFF !important; -} - -.pastel-lime { - background-color: #b6df3a !important; -} - -.pastel-dark-blue { - background-color: #576297 !important; -} - -.pydis-logo-banner { - background-color: #7289DA !important; - border-radius: 10px; -} - -.pydis-logo-banner img { - padding-right: 20px; -} - -.btn, .form-control, .link, .reset { - background-color: transparent; - padding: 0; - border: 0; - border-radius: 0; - color: inherit; - line-height: inherit; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none -} - -select.form-control::-ms-expand { - display: none -} - -textarea { - resize: vertical; - overflow: auto; - vertical-align: top -} - -input::-ms-clear { - display: none -} - -table { - border-collapse: collapse; - border-spacing: 0 -} - -img, video, svg { - max-width: 100% -} - -[data-theme] { - background-color: hsl(0, 0%, 100%); - background-color: var(--color-bg, #fff); - color: hsl(240, 4%, 20%); - color: var(--color-contrast-high, #313135) -} - -:root { - --space-unit: 1em; - --space-xxxxs: calc(0.125*var(--space-unit)); - --space-xxxs: calc(0.25*var(--space-unit)); - --space-xxs: calc(0.375*var(--space-unit)); - --space-xs: calc(0.5*var(--space-unit)); - --space-sm: calc(0.75*var(--space-unit)); - --space-md: calc(1.25*var(--space-unit)); - --space-lg: calc(2*var(--space-unit)); - --space-xl: calc(3.25*var(--space-unit)); - --space-xxl: calc(5.25*var(--space-unit)); - --space-xxxl: calc(8.5*var(--space-unit)); - --space-xxxxl: calc(13.75*var(--space-unit)); - --component-padding: var(--space-md) -} - -:root { - --max-width-xxs: 32rem; - --max-width-xs: 38rem; - --max-width-sm: 48rem; - --max-width-md: 64rem; - --max-width-lg: 80rem; - --max-width-xl: 90rem; - --max-width-xxl: 120rem -} - -.container { - width: calc(100% - 1.25em); - width: calc(100% - 2*var(--component-padding)); - margin-left: auto; - margin-right: auto -} - -.max-width-xxs { - max-width: 32rem; - max-width: var(--max-width-xxs) -} - -.max-width-xs { - max-width: 38rem; - max-width: var(--max-width-xs) -} - -.max-width-sm { - max-width: 48rem; - max-width: var(--max-width-sm) -} - -.max-width-md { - max-width: 64rem; - max-width: var(--max-width-md) -} - -.max-width-lg { - max-width: 80rem; - max-width: var(--max-width-lg) -} - -.max-width-xl { - max-width: 90rem; - max-width: var(--max-width-xl) -} - -.max-width-xxl { - max-width: 120rem; - max-width: var(--max-width-xxl) -} - -.max-width-adaptive-sm { - max-width: 38rem; - max-width: var(--max-width-xs) -} - -@media (min-width: 64rem) { - .max-width-adaptive-sm { - max-width: 48rem; - max-width: var(--max-width-sm) - } -} - -.max-width-adaptive-md { - max-width: 38rem; - max-width: var(--max-width-xs) -} - -@media (min-width: 64rem) { - .max-width-adaptive-md { - max-width: 64rem; - max-width: var(--max-width-md) - } -} - -.max-width-adaptive, .max-width-adaptive-lg { - max-width: 38rem; - max-width: var(--max-width-xs) -} - -@media (min-width: 64rem) { - .max-width-adaptive, .max-width-adaptive-lg { - max-width: 64rem; - max-width: var(--max-width-md) - } -} - -@media (min-width: 90rem) { - .max-width-adaptive, .max-width-adaptive-lg { - max-width: 80rem; - max-width: var(--max-width-lg) - } -} - -.max-width-adaptive-xl { - max-width: 38rem; - max-width: var(--max-width-xs) -} - -@media (min-width: 64rem) { - .max-width-adaptive-xl { - max-width: 64rem; - max-width: var(--max-width-md) - } -} - -@media (min-width: 90rem) { - .max-width-adaptive-xl { - max-width: 90rem; - max-width: var(--max-width-xl) - } -} - -.grid { - --grid-gap: 0px; - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap -} - -.grid>* { - -ms-flex-preferred-size: 100%; - flex-basis: 100% -} - -[class*="grid-gap"] { - margin-bottom: 1em * -1; - margin-bottom: calc(var(--grid-gap, 1em)*-1); - margin-right: 1em * -1; - margin-right: calc(var(--grid-gap, 1em)*-1) -} - -[class*="grid-gap"]>* { - margin-bottom: 1em; - margin-bottom: var(--grid-gap, 1em); - margin-right: 1em; - margin-right: var(--grid-gap, 1em) -} - -.grid-gap-xxxxs { - --grid-gap: var(--space-xxxxs) -} - -.grid-gap-xxxs { - --grid-gap: var(--space-xxxs) -} - -.grid-gap-xxs { - --grid-gap: var(--space-xxs) -} - -.grid-gap-xs { - --grid-gap: var(--space-xs) -} - -.grid-gap-sm { - --grid-gap: var(--space-sm) -} - -.grid-gap-md { - --grid-gap: var(--space-md) -} - -.grid-gap-lg { - --grid-gap: var(--space-lg) -} - -.grid-gap-xl { - --grid-gap: var(--space-xl) -} - -.grid-gap-xxl { - --grid-gap: var(--space-xxl) -} - -.grid-gap-xxxl { - --grid-gap: var(--space-xxxl) -} - -.grid-gap-xxxxl { - --grid-gap: var(--space-xxxxl) -} - -.col { - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-preferred-size: 0; - flex-basis: 0; - max-width: 100% -} - -.col-1 { - -ms-flex-preferred-size: calc(8.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(8.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(8.33% - 0.01px - 1em); - flex-basis: calc(8.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(8.33% - 0.01px - 1em); - max-width: calc(8.33% - 0.01px - var(--grid-gap, 1em)) -} - -.col-2 { - -ms-flex-preferred-size: calc(16.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(16.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(16.66% - 0.01px - 1em); - flex-basis: calc(16.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(16.66% - 0.01px - 1em); - max-width: calc(16.66% - 0.01px - var(--grid-gap, 1em)) -} - -.col-3 { - -ms-flex-preferred-size: calc(25% - 0.01px - 1em); - -ms-flex-preferred-size: calc(25% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(25% - 0.01px - 1em); - flex-basis: calc(25% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(25% - 0.01px - 1em); - max-width: calc(25% - 0.01px - var(--grid-gap, 1em)) -} - -.col-4 { - -ms-flex-preferred-size: calc(33.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(33.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(33.33% - 0.01px - 1em); - flex-basis: calc(33.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(33.33% - 0.01px - 1em); - max-width: calc(33.33% - 0.01px - var(--grid-gap, 1em)) -} - -.col-5 { - -ms-flex-preferred-size: calc(41.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(41.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(41.66% - 0.01px - 1em); - flex-basis: calc(41.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(41.66% - 0.01px - 1em); - max-width: calc(41.66% - 0.01px - var(--grid-gap, 1em)) -} - -.col-6 { - -ms-flex-preferred-size: calc(50% - 0.01px - 1em); - -ms-flex-preferred-size: calc(50% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(50% - 0.01px - 1em); - flex-basis: calc(50% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(50% - 0.01px - 1em); - max-width: calc(50% - 0.01px - var(--grid-gap, 1em)) -} - -.col-7 { - -ms-flex-preferred-size: calc(58.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(58.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(58.33% - 0.01px - 1em); - flex-basis: calc(58.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(58.33% - 0.01px - 1em); - max-width: calc(58.33% - 0.01px - var(--grid-gap, 1em)) -} - -.col-8 { - -ms-flex-preferred-size: calc(66.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(66.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(66.66% - 0.01px - 1em); - flex-basis: calc(66.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(66.66% - 0.01px - 1em); - max-width: calc(66.66% - 0.01px - var(--grid-gap, 1em)) -} - -.col-9 { - -ms-flex-preferred-size: calc(75% - 0.01px - 1em); - -ms-flex-preferred-size: calc(75% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(75% - 0.01px - 1em); - flex-basis: calc(75% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(75% - 0.01px - 1em); - max-width: calc(75% - 0.01px - var(--grid-gap, 1em)) -} - -.col-10 { - -ms-flex-preferred-size: calc(83.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(83.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(83.33% - 0.01px - 1em); - flex-basis: calc(83.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(83.33% - 0.01px - 1em); - max-width: calc(83.33% - 0.01px - var(--grid-gap, 1em)) -} - -.col-11 { - -ms-flex-preferred-size: calc(91.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(91.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(91.66% - 0.01px - 1em); - flex-basis: calc(91.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(91.66% - 0.01px - 1em); - max-width: calc(91.66% - 0.01px - var(--grid-gap, 1em)) -} - -.col-12 { - -ms-flex-preferred-size: calc(100% - 0.01px - 1em); - -ms-flex-preferred-size: calc(100% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(100% - 0.01px - 1em); - flex-basis: calc(100% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(100% - 0.01px - 1em); - max-width: calc(100% - 0.01px - var(--grid-gap, 1em)) -} - -@media (min-width: 32rem) { - .col\@xs { - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-preferred-size: 0; - flex-basis: 0; - max-width: 100% - } - .col-1\@xs { - -ms-flex-preferred-size: calc(8.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(8.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(8.33% - 0.01px - 1em); - flex-basis: calc(8.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(8.33% - 0.01px - 1em); - max-width: calc(8.33% - 0.01px - var(--grid-gap, 1em)) - } - .col-2\@xs { - -ms-flex-preferred-size: calc(16.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(16.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(16.66% - 0.01px - 1em); - flex-basis: calc(16.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(16.66% - 0.01px - 1em); - max-width: calc(16.66% - 0.01px - var(--grid-gap, 1em)) - } - .col-3\@xs { - -ms-flex-preferred-size: calc(25% - 0.01px - 1em); - -ms-flex-preferred-size: calc(25% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(25% - 0.01px - 1em); - flex-basis: calc(25% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(25% - 0.01px - 1em); - max-width: calc(25% - 0.01px - var(--grid-gap, 1em)) - } - .col-4\@xs { - -ms-flex-preferred-size: calc(33.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(33.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(33.33% - 0.01px - 1em); - flex-basis: calc(33.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(33.33% - 0.01px - 1em); - max-width: calc(33.33% - 0.01px - var(--grid-gap, 1em)) - } - .col-5\@xs { - -ms-flex-preferred-size: calc(41.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(41.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(41.66% - 0.01px - 1em); - flex-basis: calc(41.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(41.66% - 0.01px - 1em); - max-width: calc(41.66% - 0.01px - var(--grid-gap, 1em)) - } - .col-6\@xs { - -ms-flex-preferred-size: calc(50% - 0.01px - 1em); - -ms-flex-preferred-size: calc(50% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(50% - 0.01px - 1em); - flex-basis: calc(50% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(50% - 0.01px - 1em); - max-width: calc(50% - 0.01px - var(--grid-gap, 1em)) - } - .col-7\@xs { - -ms-flex-preferred-size: calc(58.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(58.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(58.33% - 0.01px - 1em); - flex-basis: calc(58.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(58.33% - 0.01px - 1em); - max-width: calc(58.33% - 0.01px - var(--grid-gap, 1em)) - } - .col-8\@xs { - -ms-flex-preferred-size: calc(66.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(66.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(66.66% - 0.01px - 1em); - flex-basis: calc(66.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(66.66% - 0.01px - 1em); - max-width: calc(66.66% - 0.01px - var(--grid-gap, 1em)) - } - .col-9\@xs { - -ms-flex-preferred-size: calc(75% - 0.01px - 1em); - -ms-flex-preferred-size: calc(75% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(75% - 0.01px - 1em); - flex-basis: calc(75% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(75% - 0.01px - 1em); - max-width: calc(75% - 0.01px - var(--grid-gap, 1em)) - } - .col-10\@xs { - -ms-flex-preferred-size: calc(83.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(83.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(83.33% - 0.01px - 1em); - flex-basis: calc(83.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(83.33% - 0.01px - 1em); - max-width: calc(83.33% - 0.01px - var(--grid-gap, 1em)) - } - .col-11\@xs { - -ms-flex-preferred-size: calc(91.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(91.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(91.66% - 0.01px - 1em); - flex-basis: calc(91.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(91.66% - 0.01px - 1em); - max-width: calc(91.66% - 0.01px - var(--grid-gap, 1em)) - } - .col-12\@xs { - -ms-flex-preferred-size: calc(100% - 0.01px - 1em); - -ms-flex-preferred-size: calc(100% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(100% - 0.01px - 1em); - flex-basis: calc(100% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(100% - 0.01px - 1em); - max-width: calc(100% - 0.01px - var(--grid-gap, 1em)) - } -} - -@media (min-width: 48rem) { - .col\@sm { - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-preferred-size: 0; - flex-basis: 0; - max-width: 100% - } - .col-1\@sm { - -ms-flex-preferred-size: calc(8.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(8.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(8.33% - 0.01px - 1em); - flex-basis: calc(8.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(8.33% - 0.01px - 1em); - max-width: calc(8.33% - 0.01px - var(--grid-gap, 1em)) - } - .col-2\@sm { - -ms-flex-preferred-size: calc(16.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(16.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(16.66% - 0.01px - 1em); - flex-basis: calc(16.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(16.66% - 0.01px - 1em); - max-width: calc(16.66% - 0.01px - var(--grid-gap, 1em)) - } - .col-3\@sm { - -ms-flex-preferred-size: calc(25% - 0.01px - 1em); - -ms-flex-preferred-size: calc(25% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(25% - 0.01px - 1em); - flex-basis: calc(25% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(25% - 0.01px - 1em); - max-width: calc(25% - 0.01px - var(--grid-gap, 1em)) - } - .col-4\@sm { - -ms-flex-preferred-size: calc(33.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(33.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(33.33% - 0.01px - 1em); - flex-basis: calc(33.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(33.33% - 0.01px - 1em); - max-width: calc(33.33% - 0.01px - var(--grid-gap, 1em)) - } - .col-5\@sm { - -ms-flex-preferred-size: calc(41.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(41.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(41.66% - 0.01px - 1em); - flex-basis: calc(41.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(41.66% - 0.01px - 1em); - max-width: calc(41.66% - 0.01px - var(--grid-gap, 1em)) - } - .col-6\@sm { - -ms-flex-preferred-size: calc(50% - 0.01px - 1em); - -ms-flex-preferred-size: calc(50% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(50% - 0.01px - 1em); - flex-basis: calc(50% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(50% - 0.01px - 1em); - max-width: calc(50% - 0.01px - var(--grid-gap, 1em)) - } - .col-7\@sm { - -ms-flex-preferred-size: calc(58.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(58.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(58.33% - 0.01px - 1em); - flex-basis: calc(58.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(58.33% - 0.01px - 1em); - max-width: calc(58.33% - 0.01px - var(--grid-gap, 1em)) - } - .col-8\@sm { - -ms-flex-preferred-size: calc(66.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(66.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(66.66% - 0.01px - 1em); - flex-basis: calc(66.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(66.66% - 0.01px - 1em); - max-width: calc(66.66% - 0.01px - var(--grid-gap, 1em)) - } - .col-9\@sm { - -ms-flex-preferred-size: calc(75% - 0.01px - 1em); - -ms-flex-preferred-size: calc(75% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(75% - 0.01px - 1em); - flex-basis: calc(75% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(75% - 0.01px - 1em); - max-width: calc(75% - 0.01px - var(--grid-gap, 1em)) - } - .col-10\@sm { - -ms-flex-preferred-size: calc(83.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(83.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(83.33% - 0.01px - 1em); - flex-basis: calc(83.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(83.33% - 0.01px - 1em); - max-width: calc(83.33% - 0.01px - var(--grid-gap, 1em)) - } - .col-11\@sm { - -ms-flex-preferred-size: calc(91.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(91.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(91.66% - 0.01px - 1em); - flex-basis: calc(91.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(91.66% - 0.01px - 1em); - max-width: calc(91.66% - 0.01px - var(--grid-gap, 1em)) - } - .col-12\@sm { - -ms-flex-preferred-size: calc(100% - 0.01px - 1em); - -ms-flex-preferred-size: calc(100% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(100% - 0.01px - 1em); - flex-basis: calc(100% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(100% - 0.01px - 1em); - max-width: calc(100% - 0.01px - var(--grid-gap, 1em)) - } -} - -@media (min-width: 64rem) { - .col\@md { - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-preferred-size: 0; - flex-basis: 0; - max-width: 100% - } - .col-1\@md { - -ms-flex-preferred-size: calc(8.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(8.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(8.33% - 0.01px - 1em); - flex-basis: calc(8.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(8.33% - 0.01px - 1em); - max-width: calc(8.33% - 0.01px - var(--grid-gap, 1em)) - } - .col-2\@md { - -ms-flex-preferred-size: calc(16.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(16.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(16.66% - 0.01px - 1em); - flex-basis: calc(16.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(16.66% - 0.01px - 1em); - max-width: calc(16.66% - 0.01px - var(--grid-gap, 1em)) - } - .col-3\@md { - -ms-flex-preferred-size: calc(25% - 0.01px - 1em); - -ms-flex-preferred-size: calc(25% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(25% - 0.01px - 1em); - flex-basis: calc(25% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(25% - 0.01px - 1em); - max-width: calc(25% - 0.01px - var(--grid-gap, 1em)) - } - .col-4\@md { - -ms-flex-preferred-size: calc(33.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(33.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(33.33% - 0.01px - 1em); - flex-basis: calc(33.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(33.33% - 0.01px - 1em); - max-width: calc(33.33% - 0.01px - var(--grid-gap, 1em)) - } - .col-5\@md { - -ms-flex-preferred-size: calc(41.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(41.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(41.66% - 0.01px - 1em); - flex-basis: calc(41.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(41.66% - 0.01px - 1em); - max-width: calc(41.66% - 0.01px - var(--grid-gap, 1em)) - } - .col-6\@md { - -ms-flex-preferred-size: calc(50% - 0.01px - 1em); - -ms-flex-preferred-size: calc(50% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(50% - 0.01px - 1em); - flex-basis: calc(50% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(50% - 0.01px - 1em); - max-width: calc(50% - 0.01px - var(--grid-gap, 1em)) - } - .col-7\@md { - -ms-flex-preferred-size: calc(58.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(58.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(58.33% - 0.01px - 1em); - flex-basis: calc(58.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(58.33% - 0.01px - 1em); - max-width: calc(58.33% - 0.01px - var(--grid-gap, 1em)) - } - .col-8\@md { - -ms-flex-preferred-size: calc(66.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(66.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(66.66% - 0.01px - 1em); - flex-basis: calc(66.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(66.66% - 0.01px - 1em); - max-width: calc(66.66% - 0.01px - var(--grid-gap, 1em)) - } - .col-9\@md { - -ms-flex-preferred-size: calc(75% - 0.01px - 1em); - -ms-flex-preferred-size: calc(75% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(75% - 0.01px - 1em); - flex-basis: calc(75% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(75% - 0.01px - 1em); - max-width: calc(75% - 0.01px - var(--grid-gap, 1em)) - } - .col-10\@md { - -ms-flex-preferred-size: calc(83.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(83.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(83.33% - 0.01px - 1em); - flex-basis: calc(83.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(83.33% - 0.01px - 1em); - max-width: calc(83.33% - 0.01px - var(--grid-gap, 1em)) - } - .col-11\@md { - -ms-flex-preferred-size: calc(91.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(91.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(91.66% - 0.01px - 1em); - flex-basis: calc(91.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(91.66% - 0.01px - 1em); - max-width: calc(91.66% - 0.01px - var(--grid-gap, 1em)) - } - .col-12\@md { - -ms-flex-preferred-size: calc(100% - 0.01px - 1em); - -ms-flex-preferred-size: calc(100% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(100% - 0.01px - 1em); - flex-basis: calc(100% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(100% - 0.01px - 1em); - max-width: calc(100% - 0.01px - var(--grid-gap, 1em)) - } -} - -@media (min-width: 80rem) { - .col\@lg { - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-preferred-size: 0; - flex-basis: 0; - max-width: 100% - } - .col-1\@lg { - -ms-flex-preferred-size: calc(8.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(8.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(8.33% - 0.01px - 1em); - flex-basis: calc(8.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(8.33% - 0.01px - 1em); - max-width: calc(8.33% - 0.01px - var(--grid-gap, 1em)) - } - .col-2\@lg { - -ms-flex-preferred-size: calc(16.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(16.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(16.66% - 0.01px - 1em); - flex-basis: calc(16.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(16.66% - 0.01px - 1em); - max-width: calc(16.66% - 0.01px - var(--grid-gap, 1em)) - } - .col-3\@lg { - -ms-flex-preferred-size: calc(25% - 0.01px - 1em); - -ms-flex-preferred-size: calc(25% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(25% - 0.01px - 1em); - flex-basis: calc(25% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(25% - 0.01px - 1em); - max-width: calc(25% - 0.01px - var(--grid-gap, 1em)) - } - .col-4\@lg { - -ms-flex-preferred-size: calc(33.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(33.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(33.33% - 0.01px - 1em); - flex-basis: calc(33.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(33.33% - 0.01px - 1em); - max-width: calc(33.33% - 0.01px - var(--grid-gap, 1em)) - } - .col-5\@lg { - -ms-flex-preferred-size: calc(41.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(41.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(41.66% - 0.01px - 1em); - flex-basis: calc(41.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(41.66% - 0.01px - 1em); - max-width: calc(41.66% - 0.01px - var(--grid-gap, 1em)) - } - .col-6\@lg { - -ms-flex-preferred-size: calc(50% - 0.01px - 1em); - -ms-flex-preferred-size: calc(50% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(50% - 0.01px - 1em); - flex-basis: calc(50% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(50% - 0.01px - 1em); - max-width: calc(50% - 0.01px - var(--grid-gap, 1em)) - } - .col-7\@lg { - -ms-flex-preferred-size: calc(58.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(58.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(58.33% - 0.01px - 1em); - flex-basis: calc(58.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(58.33% - 0.01px - 1em); - max-width: calc(58.33% - 0.01px - var(--grid-gap, 1em)) - } - .col-8\@lg { - -ms-flex-preferred-size: calc(66.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(66.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(66.66% - 0.01px - 1em); - flex-basis: calc(66.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(66.66% - 0.01px - 1em); - max-width: calc(66.66% - 0.01px - var(--grid-gap, 1em)) - } - .col-9\@lg { - -ms-flex-preferred-size: calc(75% - 0.01px - 1em); - -ms-flex-preferred-size: calc(75% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(75% - 0.01px - 1em); - flex-basis: calc(75% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(75% - 0.01px - 1em); - max-width: calc(75% - 0.01px - var(--grid-gap, 1em)) - } - .col-10\@lg { - -ms-flex-preferred-size: calc(83.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(83.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(83.33% - 0.01px - 1em); - flex-basis: calc(83.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(83.33% - 0.01px - 1em); - max-width: calc(83.33% - 0.01px - var(--grid-gap, 1em)) - } - .col-11\@lg { - -ms-flex-preferred-size: calc(91.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(91.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(91.66% - 0.01px - 1em); - flex-basis: calc(91.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(91.66% - 0.01px - 1em); - max-width: calc(91.66% - 0.01px - var(--grid-gap, 1em)) - } - .col-12\@lg { - -ms-flex-preferred-size: calc(100% - 0.01px - 1em); - -ms-flex-preferred-size: calc(100% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(100% - 0.01px - 1em); - flex-basis: calc(100% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(100% - 0.01px - 1em); - max-width: calc(100% - 0.01px - var(--grid-gap, 1em)) - } -} - -@media (min-width: 90rem) { - .col\@xl { - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-preferred-size: 0; - flex-basis: 0; - max-width: 100% - } - .col-1\@xl { - -ms-flex-preferred-size: calc(8.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(8.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(8.33% - 0.01px - 1em); - flex-basis: calc(8.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(8.33% - 0.01px - 1em); - max-width: calc(8.33% - 0.01px - var(--grid-gap, 1em)) - } - .col-2\@xl { - -ms-flex-preferred-size: calc(16.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(16.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(16.66% - 0.01px - 1em); - flex-basis: calc(16.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(16.66% - 0.01px - 1em); - max-width: calc(16.66% - 0.01px - var(--grid-gap, 1em)) - } - .col-3\@xl { - -ms-flex-preferred-size: calc(25% - 0.01px - 1em); - -ms-flex-preferred-size: calc(25% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(25% - 0.01px - 1em); - flex-basis: calc(25% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(25% - 0.01px - 1em); - max-width: calc(25% - 0.01px - var(--grid-gap, 1em)) - } - .col-4\@xl { - -ms-flex-preferred-size: calc(33.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(33.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(33.33% - 0.01px - 1em); - flex-basis: calc(33.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(33.33% - 0.01px - 1em); - max-width: calc(33.33% - 0.01px - var(--grid-gap, 1em)) - } - .col-5\@xl { - -ms-flex-preferred-size: calc(41.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(41.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(41.66% - 0.01px - 1em); - flex-basis: calc(41.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(41.66% - 0.01px - 1em); - max-width: calc(41.66% - 0.01px - var(--grid-gap, 1em)) - } - .col-6\@xl { - -ms-flex-preferred-size: calc(50% - 0.01px - 1em); - -ms-flex-preferred-size: calc(50% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(50% - 0.01px - 1em); - flex-basis: calc(50% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(50% - 0.01px - 1em); - max-width: calc(50% - 0.01px - var(--grid-gap, 1em)) - } - .col-7\@xl { - -ms-flex-preferred-size: calc(58.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(58.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(58.33% - 0.01px - 1em); - flex-basis: calc(58.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(58.33% - 0.01px - 1em); - max-width: calc(58.33% - 0.01px - var(--grid-gap, 1em)) - } - .col-8\@xl { - -ms-flex-preferred-size: calc(66.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(66.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(66.66% - 0.01px - 1em); - flex-basis: calc(66.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(66.66% - 0.01px - 1em); - max-width: calc(66.66% - 0.01px - var(--grid-gap, 1em)) - } - .col-9\@xl { - -ms-flex-preferred-size: calc(75% - 0.01px - 1em); - -ms-flex-preferred-size: calc(75% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(75% - 0.01px - 1em); - flex-basis: calc(75% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(75% - 0.01px - 1em); - max-width: calc(75% - 0.01px - var(--grid-gap, 1em)) - } - .col-10\@xl { - -ms-flex-preferred-size: calc(83.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(83.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(83.33% - 0.01px - 1em); - flex-basis: calc(83.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(83.33% - 0.01px - 1em); - max-width: calc(83.33% - 0.01px - var(--grid-gap, 1em)) - } - .col-11\@xl { - -ms-flex-preferred-size: calc(91.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(91.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(91.66% - 0.01px - 1em); - flex-basis: calc(91.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(91.66% - 0.01px - 1em); - max-width: calc(91.66% - 0.01px - var(--grid-gap, 1em)) - } - .col-12\@xl { - -ms-flex-preferred-size: calc(100% - 0.01px - 1em); - -ms-flex-preferred-size: calc(100% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(100% - 0.01px - 1em); - flex-basis: calc(100% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(100% - 0.01px - 1em); - max-width: calc(100% - 0.01px - var(--grid-gap, 1em)) - } -} - -:root { - --radius-sm: calc(var(--radius, 0.25em)/2); - --radius-md: var(--radius, 0.25em); - --radius-lg: calc(var(--radius, 0.25em)*2); - --shadow-sm: 0 1px 2px rgba(0, 0, 0, .085), 0 1px 8px rgba(0, 0, 0, .1); - --shadow-md: 0 1px 8px rgba(0, 0, 0, .1), 0 8px 24px rgba(0, 0, 0, .15); - --shadow-lg: 0 1px 8px rgba(0, 0, 0, .1), 0 16px 48px rgba(0, 0, 0, .1), 0 24px 60px rgba(0, 0, 0, .1); - --bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275); - --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1); - --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19); - --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1) -} - -:root { - --body-line-height: 1.4; - --heading-line-height: 1.2 -} - -body { - color: hsl(240, 4%, 20%); - color: var(--color-contrast-high, #313135) -} - -h1, h2, h3, h4 { - color: hsl(240, 8%, 12%); - color: var(--color-contrast-higher, #1c1c21); - line-height: 1.2; - line-height: var(--heading-line-height, 1.2) -} - -.text-xxxl { - font-size: 2.48832em; - font-size: var(--text-xxxl, 2.488em) -} - -small, .text-sm { - font-size: 0.83333em; - font-size: var(--text-sm, 0.833em) -} - -.text-xs { - font-size: 0.69444em; - font-size: var(--text-xs, 0.694em) -} - -strong, .text-bold { - font-weight: bold -} - -s { - text-decoration: line-through -} - -u, .text-underline { - text-decoration: underline -} - - -.text-component h1, .text-component h2, .text-component h3, .text-component h4 { - line-height: 1.2; - line-height: var(--component-heading-line-height, 1.2); - margin-bottom: 0.25em; - margin-bottom: calc(var(--space-xxxs)*var(--text-vspace-multiplier, 1)) -} - -.text-component h2, .text-component h3, .text-component h4 { - margin-top: 0.75em; - margin-top: calc(var(--space-sm)*var(--text-vspace-multiplier, 1)) -} - -.text-component p, .text-component blockquote, .text-component ul li, .text-component ol li { - line-height: 1.4; - line-height: var(--component-body-line-height) -} - -.text-component ul, .text-component ol, .text-component p, .text-component blockquote, .text-component .text-component__block { - margin-bottom: 0.75em; - margin-bottom: calc(var(--space-sm)*var(--text-vspace-multiplier, 1)) -} - -.text-component ul, .text-component ol { - padding-left: 1em -} - -.text-component ul { - list-style-type: disc -} - -.text-component ol { - list-style-type: decimal -} - -.text-component img { - display: block; - margin: 0 auto -} - -.text-component figcaption { - text-align: center; - margin-top: 0.5em; - margin-top: var(--space-xs) -} - -.text-component em { - font-style: italic -} - -.text-component hr { - margin-top: 2em; - margin-top: calc(var(--space-lg)*var(--text-vspace-multiplier, 1)); - margin-bottom: 2em; - margin-bottom: calc(var(--space-lg)*var(--text-vspace-multiplier, 1)); - margin-left: auto; - margin-right: auto -} - -.text-component>*:first-child { - margin-top: 0 -} - -.text-component>*:last-child { - margin-bottom: 0 -} - -.text-component__block--full-width { - width: 100vw; - margin-left: calc(50% - 50vw) -} - -@media (min-width: 48rem) { - .text-component__block--left, .text-component__block--right { - width: 45% - } - .text-component__block--left img, .text-component__block--right img { - width: 100% - } - .text-component__block--left { - float: left; - margin-right: 0.75em; - margin-right: calc(var(--space-sm)*var(--text-vspace-multiplier, 1)) - } - .text-component__block--right { - float: right; - margin-left: 0.75em; - margin-left: calc(var(--space-sm)*var(--text-vspace-multiplier, 1)) - } -} - -@media (min-width: 90rem) { - .text-component__block--outset { - width: calc(100% + 10.5em); - width: calc(100% + 2*var(--space-xxl)) - } - .text-component__block--outset img { - width: 100% - } - .text-component__block--outset:not(.text-component__block--right) { - margin-left: -5.25em; - margin-left: calc(-1*var(--space-xxl)) - } - .text-component__block--left, .text-component__block--right { - width: 50% - } - .text-component__block--right.text-component__block--outset { - margin-right: -5.25em; - margin-right: calc(-1*var(--space-xxl)) - } -} - -:root { - --icon-xxs: 12px; - --icon-xs: 16px; - --icon-sm: 24px; - --icon-md: 32px; - --icon-lg: 48px; - --icon-xl: 64px; - --icon-xxl: 128px -} - -.icon--xxs { - font-size: 12px; - font-size: var(--icon-xxs) -} - -.icon--xs { - font-size: 16px; - font-size: var(--icon-xs) -} - -.icon--sm { - font-size: 24px; - font-size: var(--icon-sm) -} - -.icon--md { - font-size: 32px; - font-size: var(--icon-md) -} - -.icon--lg { - font-size: 48px; - font-size: var(--icon-lg) -} - -.icon--xl { - font-size: 64px; - font-size: var(--icon-xl) -} - -.icon--xxl { - font-size: 128px; - font-size: var(--icon-xxl) -} - -.icon--is-spinning { - -webkit-animation: icon-spin 1s infinite linear; - animation: icon-spin 1s infinite linear -} - -@-webkit-keyframes icon-spin { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg) - } - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg) - } -} - -@keyframes icon-spin { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg) - } - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg) - } -} - -.icon use { - color: inherit; - fill: currentColor -} - -.btn { - position: relative; - display: -ms-inline-flexbox; - display: inline-flex; - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; - align-items: center; - white-space: nowrap; - text-decoration: none; - line-height: 1; - font-size: 1em; - font-size: var(--btn-font-size, 1em); - padding-top: 0.5em; - padding-top: var(--btn-padding-y, 0.5em); - padding-bottom: 0.5em; - padding-bottom: var(--btn-padding-y, 0.5em); - padding-left: 0.75em; - padding-left: var(--btn-padding-x, 0.75em); - padding-right: 0.75em; - padding-right: var(--btn-padding-x, 0.75em); - border-radius: 0.25em; - border-radius: var(--btn-radius, 0.25em) -} - -.btn--primary { - background-color: hsl(220, 90%, 56%); - background-color: var(--color-primary, #2a6df4); - color: hsl(0, 0%, 100%); - color: var(--color-white, #fff) -} - -.btn--subtle { - background-color: hsl(240, 1%, 83%); - background-color: var(--color-contrast-low, #d3d3d4); - color: hsl(240, 8%, 12%); - color: var(--color-contrast-higher, #1c1c21) -} - -.btn--accent { - background-color: hsl(355, 90%, 61%); - background-color: var(--color-accent, #f54251); - color: hsl(0, 0%, 100%); - color: var(--color-white, #fff) -} - -.btn--disabled { - cursor: not-allowed -} - -.btn--sm { - font-size: 0.8em; - font-size: var(--btn-font-size-sm, 0.8em) -} - -.btn--md { - font-size: 1.2em; - font-size: var(--btn-font-size-md, 1.2em) -} - -.btn--lg { - font-size: 1.4em; - font-size: var(--btn-font-size-lg, 1.4em) -} - -.btn--icon { - padding: 0.5em; - padding: var(--btn-padding-y, 0.5em) -} - -.form-control { - background-color: hsl(0, 0%, 100%); - background-color: var(--color-bg, #f2f2f2); - padding-top: 0.5em; - padding-top: var(--form-control-padding-y, 0.5em); - padding-bottom: 0.5em; - padding-bottom: var(--form-control-padding-y, 0.5em); - padding-left: 0.75em; - padding-left: var(--form-control-padding-x, 0.75em); - padding-right: 0.75em; - padding-right: var(--form-control-padding-x, 0.75em); - border-radius: 0.25em; - border-radius: var(--form-control-radius, 0.25em) -} - -.form-control::-webkit-input-placeholder { - color: hsl(240, 1%, 48%); - color: var(--color-contrast-medium, #79797c) -} - -.form-control::-moz-placeholder { - opacity: 1; - color: hsl(240, 1%, 48%); - color: var(--color-contrast-medium, #79797c) -} - -.form-control:-ms-input-placeholder { - color: hsl(240, 1%, 48%); - color: var(--color-contrast-medium, #79797c) -} - -.form-control:-moz-placeholder { - color: hsl(240, 1%, 48%); - color: var(--color-contrast-medium, #79797c) -} - -.form-control[disabled], .form-control[readonly] { - cursor: not-allowed -} - -.form-legend { - color: hsl(240, 8%, 12%); - color: var(--color-contrast-higher, #1c1c21); - line-height: 1.2; - font-size: 1.2em; - font-size: var(--text-md, 1.2em); - margin-bottom: 0.375em; - margin-bottom: var(--space-xxs) -} - -.form-label { - display: inline-block -} - -.form__msg-error { - background-color: hsl(355, 90%, 61%); - background-color: var(--color-error, #f54251); - color: hsl(0, 0%, 100%); - color: var(--color-white, #fff); - font-size: 0.83333em; - font-size: var(--text-sm, 0.833em); - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - padding: 0.5em; - padding: var(--space-xs); - margin-top: 0.75em; - margin-top: var(--space-sm); - border-radius: 0.25em; - border-radius: var(--radius-md, 0.25em); - position: absolute; - clip: rect(1px, 1px, 1px, 1px) -} - -.form__msg-error::before { - content: ''; - position: absolute; - left: 0.75em; - left: var(--space-sm); - top: 0; - -webkit-transform: translateY(-100%); - -ms-transform: translateY(-100%); - transform: translateY(-100%); - width: 0; - height: 0; - border: 8px solid transparent; - border-bottom-color: hsl(355, 90%, 61%); - border-bottom-color: var(--color-error) -} - -.form__msg-error--is-visible { - position: relative; - clip: auto -} - -.radio-list>*, .checkbox-list>* { - position: relative; - display: -ms-flexbox; - display: flex; - -ms-flex-align: baseline; - align-items: baseline; - margin-bottom: 0.375em; - margin-bottom: var(--space-xxs) -} - -.radio-list>*:last-of-type, .checkbox-list>*:last-of-type { - margin-bottom: 0 -} - -.radio-list label, .checkbox-list label { - line-height: 1.4; - line-height: var(--body-line-height); - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none -} - -.radio-list input, .checkbox-list input { - vertical-align: top; - margin-right: 0.25em; - margin-right: var(--space-xxxs); - -ms-flex-negative: 0; - flex-shrink: 0 -} - -:root { - --zindex-header: 2; - --zindex-popover: 5; - --zindex-fixed-element: 10; - --zindex-overlay: 15 -} - -@media not all and (min-width: 32rem) { - .display\@xs { - display: none !important - } -} - -@media (min-width: 32rem) { - .hide\@xs { - display: none !important - } -} - -@media not all and (min-width: 48rem) { - .display\@sm { - display: none !important - } -} - -@media (min-width: 48rem) { - .hide\@sm { - display: none !important - } -} - -@media not all and (min-width: 64rem) { - .display\@md { - display: none !important - } -} - -@media (min-width: 64rem) { - .hide\@md { - display: none !important - } -} - -@media not all and (min-width: 80rem) { - .display\@lg { - display: none !important - } -} - -@media (min-width: 80rem) { - .hide\@lg { - display: none !important - } -} - -@media not all and (min-width: 90rem) { - .display\@xl { - display: none !important - } -} - -@media (min-width: 90rem) { - .hide\@xl { - display: none !important - } -} - -:root { - --display: block -} - -.is-visible { - display: block !important; - display: var(--display) !important -} - -.is-hidden { - display: none !important -} - -.sr-only { - position: absolute; - clip: rect(1px, 1px, 1px, 1px); - -webkit-clip-path: inset(50%); - clip-path: inset(50%); - width: 1px; - height: 1px; - overflow: hidden; - padding: 0; - border: 0; - white-space: nowrap -} - -.flex { - display: -ms-flexbox; - display: flex -} - -.inline-flex { - display: -ms-inline-flexbox; - display: inline-flex -} - -.flex-wrap { - -ms-flex-wrap: wrap; - flex-wrap: wrap -} - -.flex-column { - -ms-flex-direction: column; - flex-direction: column -} - -.flex-row { - -ms-flex-direction: row; - flex-direction: row -} - -.flex-center { - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; - align-items: center -} - -.justify-start { - -ms-flex-pack: start; - justify-content: flex-start -} - -.justify-end { - -ms-flex-pack: end; - justify-content: flex-end -} - -.justify-center { - -ms-flex-pack: center; - justify-content: center -} - -.justify-between { - -ms-flex-pack: justify; - justify-content: space-between -} - -.items-center { - -ms-flex-align: center; - align-items: center -} - -.items-start { - -ms-flex-align: start; - align-items: flex-start -} - -.items-end { - -ms-flex-align: end; - align-items: flex-end -} - -@media (min-width: 32rem) { - .flex-wrap\@xs { - -ms-flex-wrap: wrap; - flex-wrap: wrap - } - .flex-column\@xs { - -ms-flex-direction: column; - flex-direction: column - } - .flex-row\@xs { - -ms-flex-direction: row; - flex-direction: row - } - .flex-center\@xs { - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; - align-items: center - } - .justify-start\@xs { - -ms-flex-pack: start; - justify-content: flex-start - } - .justify-end\@xs { - -ms-flex-pack: end; - justify-content: flex-end - } - .justify-center\@xs { - -ms-flex-pack: center; - justify-content: center - } - .justify-between\@xs { - -ms-flex-pack: justify; - justify-content: space-between - } - .items-center\@xs { - -ms-flex-align: center; - align-items: center - } - .items-start\@xs { - -ms-flex-align: start; - align-items: flex-start - } - .items-end\@xs { - -ms-flex-align: end; - align-items: flex-end - } -} - -@media (min-width: 48rem) { - .flex-wrap\@sm { - -ms-flex-wrap: wrap; - flex-wrap: wrap - } - .flex-column\@sm { - -ms-flex-direction: column; - flex-direction: column - } - .flex-row\@sm { - -ms-flex-direction: row; - flex-direction: row - } - .flex-center\@sm { - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; - align-items: center - } - .justify-start\@sm { - -ms-flex-pack: start; - justify-content: flex-start - } - .justify-end\@sm { - -ms-flex-pack: end; - justify-content: flex-end - } - .justify-center\@sm { - -ms-flex-pack: center; - justify-content: center - } - .justify-between\@sm { - -ms-flex-pack: justify; - justify-content: space-between - } - .items-center\@sm { - -ms-flex-align: center; - align-items: center - } - .items-start\@sm { - -ms-flex-align: start; - align-items: flex-start - } - .items-end\@sm { - -ms-flex-align: end; - align-items: flex-end - } -} - -@media (min-width: 64rem) { - .flex-wrap\@md { - -ms-flex-wrap: wrap; - flex-wrap: wrap - } - .flex-column\@md { - -ms-flex-direction: column; - flex-direction: column - } - .flex-row\@md { - -ms-flex-direction: row; - flex-direction: row - } - .flex-center\@md { - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; - align-items: center - } - .justify-start\@md { - -ms-flex-pack: start; - justify-content: flex-start - } - .justify-end\@md { - -ms-flex-pack: end; - justify-content: flex-end - } - .justify-center\@md { - -ms-flex-pack: center; - justify-content: center - } - .justify-between\@md { - -ms-flex-pack: justify; - justify-content: space-between - } - .items-center\@md { - -ms-flex-align: center; - align-items: center - } - .items-start\@md { - -ms-flex-align: start; - align-items: flex-start - } - .items-end\@md { - -ms-flex-align: end; - align-items: flex-end - } -} - -@media (min-width: 80rem) { - .flex-wrap\@lg { - -ms-flex-wrap: wrap; - flex-wrap: wrap - } - .flex-column\@lg { - -ms-flex-direction: column; - flex-direction: column - } - .flex-row\@lg { - -ms-flex-direction: row; - flex-direction: row - } - .flex-center\@lg { - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; - align-items: center - } - .justify-start\@lg { - -ms-flex-pack: start; - justify-content: flex-start - } - .justify-end\@lg { - -ms-flex-pack: end; - justify-content: flex-end - } - .justify-center\@lg { - -ms-flex-pack: center; - justify-content: center - } - .justify-between\@lg { - -ms-flex-pack: justify; - justify-content: space-between - } - .items-center\@lg { - -ms-flex-align: center; - align-items: center - } - .items-start\@lg { - -ms-flex-align: start; - align-items: flex-start - } - .items-end\@lg { - -ms-flex-align: end; - align-items: flex-end - } -} - -@media (min-width: 90rem) { - .flex-wrap\@xl { - -ms-flex-wrap: wrap; - flex-wrap: wrap - } - .flex-column\@xl { - -ms-flex-direction: column; - flex-direction: column - } - .flex-row\@xl { - -ms-flex-direction: row; - flex-direction: row - } - .flex-center\@xl { - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; - align-items: center - } - .justify-start\@xl { - -ms-flex-pack: start; - justify-content: flex-start - } - .justify-end\@xl { - -ms-flex-pack: end; - justify-content: flex-end - } - .justify-center\@xl { - -ms-flex-pack: center; - justify-content: center - } - .justify-between\@xl { - -ms-flex-pack: justify; - justify-content: space-between - } - .items-center\@xl { - -ms-flex-align: center; - align-items: center - } - .items-start\@xl { - -ms-flex-align: start; - align-items: flex-start - } - .items-end\@xl { - -ms-flex-align: end; - align-items: flex-end - } -} - -.flex-grow { - -ms-flex-positive: 1; - flex-grow: 1 -} - -.flex-shrink-0 { - -ms-flex-negative: 0; - flex-shrink: 0 -} - -.flex-gap-xxxs { - margin-bottom: -0.25em; - margin-bottom: calc(-1*var(--space-xxxs)); - margin-right: -0.25em; - margin-right: calc(-1*var(--space-xxxs)) -} - -.flex-gap-xxxs>* { - margin-bottom: 0.25em; - margin-bottom: var(--space-xxxs); - margin-right: 0.25em; - margin-right: var(--space-xxxs) -} - -.flex-gap-xxs { - margin-bottom: -0.375em; - margin-bottom: calc(-1*var(--space-xxs)); - margin-right: -0.375em; - margin-right: calc(-1*var(--space-xxs)) -} - -.flex-gap-xxs>* { - margin-bottom: 0.375em; - margin-bottom: var(--space-xxs); - margin-right: 0.375em; - margin-right: var(--space-xxs) -} - -.flex-gap-xs { - margin-bottom: -0.5em; - margin-bottom: calc(-1*var(--space-xs)); - margin-right: -0.5em; - margin-right: calc(-1*var(--space-xs)) -} - -.flex-gap-xs>* { - margin-bottom: 0.5em; - margin-bottom: var(--space-xs); - margin-right: 0.5em; - margin-right: var(--space-xs) -} - -.flex-gap-sm { - margin-bottom: -0.75em; - margin-bottom: calc(-1*var(--space-sm)); - margin-right: -0.75em; - margin-right: calc(-1*var(--space-sm)) -} - -.flex-gap-sm>* { - margin-bottom: 0.75em; - margin-bottom: var(--space-sm); - margin-right: 0.75em; - margin-right: var(--space-sm) -} - -.flex-gap-md { - margin-bottom: -1.25em; - margin-bottom: calc(-1*var(--space-md)); - margin-right: -1.25em; - margin-right: calc(-1*var(--space-md)) -} - -.flex-gap-md>* { - margin-bottom: 1.25em; - margin-bottom: var(--space-md); - margin-right: 1.25em; - margin-right: var(--space-md) -} - -.flex-gap-lg { - margin-bottom: -2em; - margin-bottom: calc(-1*var(--space-lg)); - margin-right: -2em; - margin-right: calc(-1*var(--space-lg)) -} - -.flex-gap-lg>* { - margin-bottom: 2em; - margin-bottom: var(--space-lg); - margin-right: 2em; - margin-right: var(--space-lg) -} - -.flex-gap-xl { - margin-bottom: -3.25em; - margin-bottom: calc(-1*var(--space-xl)); - margin-right: -3.25em; - margin-right: calc(-1*var(--space-xl)) -} - -.flex-gap-xl>* { - margin-bottom: 3.25em; - margin-bottom: var(--space-xl); - margin-right: 3.25em; - margin-right: var(--space-xl) -} - -.flex-gap-xxl { - margin-bottom: -5.25em; - margin-bottom: calc(-1*var(--space-xxl)); - margin-right: -5.25em; - margin-right: calc(-1*var(--space-xxl)) -} - -.flex-gap-xxl>* { - margin-bottom: 5.25em; - margin-bottom: var(--space-xxl); - margin-right: 5.25em; - margin-right: var(--space-xxl) -} - -.margin-xxxxs { - margin: 0.125em; - margin: var(--space-xxxxs) -} - -.margin-xxxs { - margin: 0.25em; - margin: var(--space-xxxs) -} - -.margin-xxs { - margin: 0.375em; - margin: var(--space-xxs) -} - -.margin-xs { - margin: 0.5em; - margin: var(--space-xs) -} - -.margin-sm { - margin: 0.75em; - margin: var(--space-sm) -} - -.margin-md { - margin: 1.25em; - margin: var(--space-md) -} - -.margin-lg { - margin: 2em; - margin: var(--space-lg) -} - -.margin-xl { - margin: 3.25em; - margin: var(--space-xl) -} - -.margin-xxl { - margin: 5.25em; - margin: var(--space-xxl) -} - -.margin-xxxl { - margin: 8.5em; - margin: var(--space-xxxl) -} - -.margin-xxxxl { - margin: 13.75em; - margin: var(--space-xxxxl) -} - -.margin-auto { - margin: auto -} - -.margin-top-xxxxs { - margin-top: 0.125em; - margin-top: var(--space-xxxxs) -} - -.margin-top-xxxs { - margin-top: 0.25em; - margin-top: var(--space-xxxs) -} - -.margin-top-xxs { - margin-top: 0.375em; - margin-top: var(--space-xxs) -} - -.margin-top-xs { - margin-top: 0.5em; - margin-top: var(--space-xs) -} - -.margin-top-sm { - margin-top: 0.75em; - margin-top: var(--space-sm) -} - -.margin-top-md { - margin-top: 1.25em; - margin-top: var(--space-md) -} - -.margin-top-lg { - margin-top: 2em; - margin-top: var(--space-lg) -} - -.margin-top-xl { - margin-top: 3.25em; - margin-top: var(--space-xl) -} - -.margin-top-xxl { - margin-top: 5.25em; - margin-top: var(--space-xxl) -} - -.margin-top-xxxl { - margin-top: 8.5em; - margin-top: var(--space-xxxl) -} - -.margin-top-xxxxl { - margin-top: 13.75em; - margin-top: var(--space-xxxxl) -} - -.margin-top-auto { - margin-top: auto -} - -.margin-bottom-xxxxs { - margin-bottom: 0.125em; - margin-bottom: var(--space-xxxxs) -} - -.margin-bottom-xxxs { - margin-bottom: 0.25em; - margin-bottom: var(--space-xxxs) -} - -.margin-bottom-xxs { - margin-bottom: 0.375em; - margin-bottom: var(--space-xxs) -} - -.margin-bottom-xs { - margin-bottom: 0.5em; - margin-bottom: var(--space-xs) -} - -.margin-bottom-sm { - margin-bottom: 0.75em; - margin-bottom: var(--space-sm) -} - -.margin-bottom-md { - margin-bottom: 1.25em; - margin-bottom: var(--space-md) -} - -.margin-bottom-lg { - margin-bottom: 2em; - margin-bottom: var(--space-lg) -} - -.margin-bottom-xl { - margin-bottom: 3.25em; - margin-bottom: var(--space-xl) -} - -.margin-bottom-xxl { - margin-bottom: 5.25em; - margin-bottom: var(--space-xxl) -} - -.margin-bottom-xxxl { - margin-bottom: 8.5em; - margin-bottom: var(--space-xxxl) -} - -.margin-bottom-xxxxl { - margin-bottom: 13.75em; - margin-bottom: var(--space-xxxxl) -} - -.margin-bottom-auto { - margin-bottom: auto -} - -.margin-right-xxxxs { - margin-right: 0.125em; - margin-right: var(--space-xxxxs) -} - -.margin-right-xxxs { - margin-right: 0.25em; - margin-right: var(--space-xxxs) -} - -.margin-right-xxs { - margin-right: 0.375em; - margin-right: var(--space-xxs) -} - -.margin-right-xs { - margin-right: 0.5em; - margin-right: var(--space-xs) -} - -.margin-right-sm { - margin-right: 0.75em; - margin-right: var(--space-sm) -} - -.margin-right-md { - margin-right: 1.25em; - margin-right: var(--space-md) -} - -.margin-right-lg { - margin-right: 2em; - margin-right: var(--space-lg) -} - -.margin-right-xl { - margin-right: 3.25em; - margin-right: var(--space-xl) -} - -.margin-right-xxl { - margin-right: 5.25em; - margin-right: var(--space-xxl) -} - -.margin-right-xxxl { - margin-right: 8.5em; - margin-right: var(--space-xxxl) -} - -.margin-right-xxxxl { - margin-right: 13.75em; - margin-right: var(--space-xxxxl) -} - -.margin-right-auto { - margin-right: auto -} - -.margin-left-xxxxs { - margin-left: 0.125em; - margin-left: var(--space-xxxxs) -} - -.margin-left-xxxs { - margin-left: 0.25em; - margin-left: var(--space-xxxs) -} - -.margin-left-xxs { - margin-left: 0.375em; - margin-left: var(--space-xxs) -} - -.margin-left-xs { - margin-left: 0.5em; - margin-left: var(--space-xs) -} - -.margin-left-sm { - margin-left: 0.75em; - margin-left: var(--space-sm) -} - -.margin-left-md { - margin-left: 1.25em; - margin-left: var(--space-md) -} - -.margin-left-lg { - margin-left: 2em; - margin-left: var(--space-lg) -} - -.margin-left-xl { - margin-left: 3.25em; - margin-left: var(--space-xl) -} - -.margin-left-xxl { - margin-left: 5.25em; - margin-left: var(--space-xxl) -} - -.margin-left-xxxl { - margin-left: 8.5em; - margin-left: var(--space-xxxl) -} - -.margin-left-xxxxl { - margin-left: 13.75em; - margin-left: var(--space-xxxxl) -} - -.margin-left-auto { - margin-left: auto -} - -.margin-x-xxxxs { - margin-left: 0.125em; - margin-left: var(--space-xxxxs); - margin-right: 0.125em; - margin-right: var(--space-xxxxs) -} - -.margin-x-xxxs { - margin-left: 0.25em; - margin-left: var(--space-xxxs); - margin-right: 0.25em; - margin-right: var(--space-xxxs) -} - -.margin-x-xxs { - margin-left: 0.375em; - margin-left: var(--space-xxs); - margin-right: 0.375em; - margin-right: var(--space-xxs) -} - -.margin-x-xs { - margin-left: 0.5em; - margin-left: var(--space-xs); - margin-right: 0.5em; - margin-right: var(--space-xs) -} - -.margin-x-sm { - margin-left: 0.75em; - margin-left: var(--space-sm); - margin-right: 0.75em; - margin-right: var(--space-sm) -} - -.margin-x-md { - margin-left: 1.25em; - margin-left: var(--space-md); - margin-right: 1.25em; - margin-right: var(--space-md) -} - -.margin-x-lg { - margin-left: 2em; - margin-left: var(--space-lg); - margin-right: 2em; - margin-right: var(--space-lg) -} - -.margin-x-xl { - margin-left: 3.25em; - margin-left: var(--space-xl); - margin-right: 3.25em; - margin-right: var(--space-xl) -} - -.margin-x-xxl { - margin-left: 5.25em; - margin-left: var(--space-xxl); - margin-right: 5.25em; - margin-right: var(--space-xxl) -} - -.margin-x-xxxl { - margin-left: 8.5em; - margin-left: var(--space-xxxl); - margin-right: 8.5em; - margin-right: var(--space-xxxl) -} - -.margin-x-xxxxl { - margin-left: 13.75em; - margin-left: var(--space-xxxxl); - margin-right: 13.75em; - margin-right: var(--space-xxxxl) -} - -.margin-x-auto { - margin-left: auto; - margin-right: auto -} - -.margin-y-xxxxs { - margin-top: 0.125em; - margin-top: var(--space-xxxxs); - margin-bottom: 0.125em; - margin-bottom: var(--space-xxxxs) -} - -.margin-y-xxxs { - margin-top: 0.25em; - margin-top: var(--space-xxxs); - margin-bottom: 0.25em; - margin-bottom: var(--space-xxxs) -} - -.margin-y-xxs { - margin-top: 0.375em; - margin-top: var(--space-xxs); - margin-bottom: 0.375em; - margin-bottom: var(--space-xxs) -} - -.margin-y-xs { - margin-top: 0.5em; - margin-top: var(--space-xs); - margin-bottom: 0.5em; - margin-bottom: var(--space-xs) -} - -.margin-y-sm { - margin-top: 0.75em; - margin-top: var(--space-sm); - margin-bottom: 0.75em; - margin-bottom: var(--space-sm) -} - -.margin-y-md { - margin-top: 1.25em; - margin-top: var(--space-md); - margin-bottom: 1.25em; - margin-bottom: var(--space-md) -} - -.margin-y-lg { - margin-top: 2em; - margin-top: var(--space-lg); - margin-bottom: 2em; - margin-bottom: var(--space-lg) -} - -.margin-y-xl { - margin-top: 3.25em; - margin-top: var(--space-xl); - margin-bottom: 3.25em; - margin-bottom: var(--space-xl) -} - -.margin-y-xxl { - margin-top: 5.25em; - margin-top: var(--space-xxl); - margin-bottom: 5.25em; - margin-bottom: var(--space-xxl) -} - -.margin-y-xxxl { - margin-top: 8.5em; - margin-top: var(--space-xxxl); - margin-bottom: 8.5em; - margin-bottom: var(--space-xxxl) -} - -.margin-y-xxxxl { - margin-top: 13.75em; - margin-top: var(--space-xxxxl); - margin-bottom: 13.75em; - margin-bottom: var(--space-xxxxl) -} - -.margin-y-auto { - margin-top: auto; - margin-bottom: auto -} - -@media not all and (min-width: 32rem) { - .has-margin\@xs { - margin: 0 !important - } -} - -@media not all and (min-width: 48rem) { - .has-margin\@sm { - margin: 0 !important - } -} - -@media not all and (min-width: 64rem) { - .has-margin\@md { - margin: 0 !important - } -} - -@media not all and (min-width: 80rem) { - .has-margin\@lg { - margin: 0 !important - } -} - -@media not all and (min-width: 90rem) { - .has-margin\@xl { - margin: 0 !important - } -} - -.padding-md { - padding: 1.25em; - padding: var(--space-md) -} - -.padding-xxxxs { - padding: 0.125em; - padding: var(--space-xxxxs) -} - -.padding-xxxs { - padding: 0.25em; - padding: var(--space-xxxs) -} - -.padding-xxs { - padding: 0.375em; - padding: var(--space-xxs) -} - -.padding-xs { - padding: 0.5em; - padding: var(--space-xs) -} - -.padding-sm { - padding: 0.75em; - padding: var(--space-sm) -} - -.padding-lg { - padding: 2em; - padding: var(--space-lg) -} - -.padding-xl { - padding: 3.25em; - padding: var(--space-xl) -} - -.padding-xxl { - padding: 5.25em; - padding: var(--space-xxl) -} - -.padding-xxxl { - padding: 8.5em; - padding: var(--space-xxxl) -} - -.padding-xxxxl { - padding: 13.75em; - padding: var(--space-xxxxl) -} - -.padding-component { - padding: 1.25em; - padding: var(--component-padding) -} - -.padding-top-md { - padding-top: 1.25em; - padding-top: var(--space-md) -} - -.padding-top-xxxxs { - padding-top: 0.125em; - padding-top: var(--space-xxxxs) -} - -.padding-top-xxxs { - padding-top: 0.25em; - padding-top: var(--space-xxxs) -} - -.padding-top-xxs { - padding-top: 0.375em; - padding-top: var(--space-xxs) -} - -.padding-top-xs { - padding-top: 0.5em; - padding-top: var(--space-xs) -} - -.padding-top-sm { - padding-top: 0.75em; - padding-top: var(--space-sm) -} - -.padding-top-lg { - padding-top: 2em; - padding-top: var(--space-lg) -} - -.padding-top-xl { - padding-top: 3.25em; - padding-top: var(--space-xl) -} - -.padding-top-xxl { - padding-top: 5.25em; - padding-top: var(--space-xxl) -} - -.padding-top-xxxl { - padding-top: 8.5em; - padding-top: var(--space-xxxl) -} - -.padding-top-xxxxl { - padding-top: 13.75em; - padding-top: var(--space-xxxxl) -} - -.padding-top-component { - padding-top: 1.25em; - padding-top: var(--component-padding) -} - -.padding-bottom-md { - padding-bottom: 1.25em; - padding-bottom: var(--space-md) -} - -.padding-bottom-xxxxs { - padding-bottom: 0.125em; - padding-bottom: var(--space-xxxxs) -} - -.padding-bottom-xxxs { - padding-bottom: 0.25em; - padding-bottom: var(--space-xxxs) -} - -.padding-bottom-xxs { - padding-bottom: 0.375em; - padding-bottom: var(--space-xxs) -} - -.padding-bottom-xs { - padding-bottom: 0.5em; - padding-bottom: var(--space-xs) -} - -.padding-bottom-sm { - padding-bottom: 0.75em; - padding-bottom: var(--space-sm) -} - -.padding-bottom-lg { - padding-bottom: 2em; - padding-bottom: var(--space-lg) -} - -.padding-bottom-xl { - padding-bottom: 3.25em; - padding-bottom: var(--space-xl) -} - -.padding-bottom-xxl { - padding-bottom: 5.25em; - padding-bottom: var(--space-xxl) -} - -.padding-bottom-xxxl { - padding-bottom: 8.5em; - padding-bottom: var(--space-xxxl) -} - -.padding-bottom-xxxxl { - padding-bottom: 13.75em; - padding-bottom: var(--space-xxxxl) -} - -.padding-bottom-component { - padding-bottom: 1.25em; - padding-bottom: var(--component-padding) -} - -.padding-right-md { - padding-right: 1.25em; - padding-right: var(--space-md) -} - -.padding-right-xxxxs { - padding-right: 0.125em; - padding-right: var(--space-xxxxs) -} - -.padding-right-xxxs { - padding-right: 0.25em; - padding-right: var(--space-xxxs) -} - -.padding-right-xxs { - padding-right: 0.375em; - padding-right: var(--space-xxs) -} - -.padding-right-xs { - padding-right: 0.5em; - padding-right: var(--space-xs) -} - -.padding-right-sm { - padding-right: 0.75em; - padding-right: var(--space-sm) -} - -.padding-right-lg { - padding-right: 2em; - padding-right: var(--space-lg) -} - -.padding-right-xl { - padding-right: 3.25em; - padding-right: var(--space-xl) -} - -.padding-right-xxl { - padding-right: 5.25em; - padding-right: var(--space-xxl) -} - -.padding-right-xxxl { - padding-right: 8.5em; - padding-right: var(--space-xxxl) -} - -.padding-right-xxxxl { - padding-right: 13.75em; - padding-right: var(--space-xxxxl) -} - -.padding-right-component { - padding-right: 1.25em; - padding-right: var(--component-padding) -} - -.padding-left-md { - padding-left: 1.25em; - padding-left: var(--space-md) -} - -.padding-left-xxxxs { - padding-left: 0.125em; - padding-left: var(--space-xxxxs) -} - -.padding-left-xxxs { - padding-left: 0.25em; - padding-left: var(--space-xxxs) -} - -.padding-left-xxs { - padding-left: 0.375em; - padding-left: var(--space-xxs) -} - -.padding-left-xs { - padding-left: 0.5em; - padding-left: var(--space-xs) -} - -.padding-left-sm { - padding-left: 0.75em; - padding-left: var(--space-sm) -} - -.padding-left-lg { - padding-left: 2em; - padding-left: var(--space-lg) -} - -.padding-left-xl { - padding-left: 3.25em; - padding-left: var(--space-xl) -} - -.padding-left-xxl { - padding-left: 5.25em; - padding-left: var(--space-xxl) -} - -.padding-left-xxxl { - padding-left: 8.5em; - padding-left: var(--space-xxxl) -} - -.padding-left-xxxxl { - padding-left: 13.75em; - padding-left: var(--space-xxxxl) -} - -.padding-left-component { - padding-left: 1.25em; - padding-left: var(--component-padding) -} - -.padding-x-md { - padding-left: 1.25em; - padding-left: var(--space-md); - padding-right: 1.25em; - padding-right: var(--space-md) -} - -.padding-x-xxxxs { - padding-left: 0.125em; - padding-left: var(--space-xxxxs); - padding-right: 0.125em; - padding-right: var(--space-xxxxs) -} - -.padding-x-xxxs { - padding-left: 0.25em; - padding-left: var(--space-xxxs); - padding-right: 0.25em; - padding-right: var(--space-xxxs) -} - -.padding-x-xxs { - padding-left: 0.375em; - padding-left: var(--space-xxs); - padding-right: 0.375em; - padding-right: var(--space-xxs) -} - -.padding-x-xs { - padding-left: 0.5em; - padding-left: var(--space-xs); - padding-right: 0.5em; - padding-right: var(--space-xs) -} - -.padding-x-sm { - padding-left: 0.75em; - padding-left: var(--space-sm); - padding-right: 0.75em; - padding-right: var(--space-sm) -} - -.padding-x-lg { - padding-left: 2em; - padding-left: var(--space-lg); - padding-right: 2em; - padding-right: var(--space-lg) -} - -.padding-x-xl { - padding-left: 3.25em; - padding-left: var(--space-xl); - padding-right: 3.25em; - padding-right: var(--space-xl) -} - -.padding-x-xxl { - padding-left: 5.25em; - padding-left: var(--space-xxl); - padding-right: 5.25em; - padding-right: var(--space-xxl) -} - -.padding-x-xxxl { - padding-left: 8.5em; - padding-left: var(--space-xxxl); - padding-right: 8.5em; - padding-right: var(--space-xxxl) -} - -.padding-x-xxxxl { - padding-left: 13.75em; - padding-left: var(--space-xxxxl); - padding-right: 13.75em; - padding-right: var(--space-xxxxl) -} - -.padding-x-component { - padding-left: 1.25em; - padding-left: var(--component-padding); - padding-right: 1.25em; - padding-right: var(--component-padding) -} - -.padding-y-md { - padding-top: 1.25em; - padding-top: var(--space-md); - padding-bottom: 1.25em; - padding-bottom: var(--space-md) -} - -.padding-y-xxxxs { - padding-top: 0.125em; - padding-top: var(--space-xxxxs); - padding-bottom: 0.125em; - padding-bottom: var(--space-xxxxs) -} - -.padding-y-xxxs { - padding-top: 0.25em; - padding-top: var(--space-xxxs); - padding-bottom: 0.25em; - padding-bottom: var(--space-xxxs) -} - -.padding-y-xxs { - padding-top: 0.375em; - padding-top: var(--space-xxs); - padding-bottom: 0.375em; - padding-bottom: var(--space-xxs) -} - -.padding-y-xs { - padding-top: 0.5em; - padding-top: var(--space-xs); - padding-bottom: 0.5em; - padding-bottom: var(--space-xs) -} - -.padding-y-sm { - padding-top: 0.75em; - padding-top: var(--space-sm); - padding-bottom: 0.75em; - padding-bottom: var(--space-sm) -} - -.padding-y-lg { - padding-top: 2em; - padding-top: var(--space-lg); - padding-bottom: 2em; - padding-bottom: var(--space-lg) -} - -.padding-y-xl { - padding-top: 3.25em; - padding-top: var(--space-xl); - padding-bottom: 3.25em; - padding-bottom: var(--space-xl) -} - -.padding-y-xxl { - padding-top: 5.25em; - padding-top: var(--space-xxl); - padding-bottom: 5.25em; - padding-bottom: var(--space-xxl) -} - -.padding-y-xxxl { - padding-top: 8.5em; - padding-top: var(--space-xxxl); - padding-bottom: 8.5em; - padding-bottom: var(--space-xxxl) -} - -.padding-y-xxxxl { - padding-top: 13.75em; - padding-top: var(--space-xxxxl); - padding-bottom: 13.75em; - padding-bottom: var(--space-xxxxl) -} - -.padding-y-component { - padding-top: 1.25em; - padding-top: var(--component-padding); - padding-bottom: 1.25em; - padding-bottom: var(--component-padding) -} - -@media not all and (min-width: 32rem) { - .has-padding\@xs { - padding: 0 !important - } -} - -@media not all and (min-width: 48rem) { - .has-padding\@sm { - padding: 0 !important - } -} - -@media not all and (min-width: 64rem) { - .has-padding\@md { - padding: 0 !important - } -} - -@media not all and (min-width: 80rem) { - .has-padding\@lg { - padding: 0 !important - } -} - -@media not all and (min-width: 90rem) { - .has-padding\@xl { - padding: 0 !important - } -} - -.truncate { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap -} - -.text-replace { - overflow: hidden; - color: transparent; - text-indent: 100%; - white-space: nowrap -} - -.text-center { - text-align: center -} - -.text-left { - text-align: left -} - -.text-right { - text-align: right -} - -@media (min-width: 32rem) { - .text-center\@xs { - text-align: center - } - .text-left\@xs { - text-align: left - } - .text-right\@xs { - text-align: right - } -} - -@media (min-width: 48rem) { - .text-center\@sm { - text-align: center - } - .text-left\@sm { - text-align: left - } - .text-right\@sm { - text-align: right - } -} - -@media (min-width: 64rem) { - .text-center\@md { - text-align: center - } - .text-left\@md { - text-align: left - } - .text-right\@md { - text-align: right - } -} - -@media (min-width: 80rem) { - .text-center\@lg { - text-align: center - } - .text-left\@lg { - text-align: left - } - .text-right\@lg { - text-align: right - } -} - -@media (min-width: 90rem) { - .text-center\@xl { - text-align: center - } - .text-left\@xl { - text-align: left - } - .text-right\@xl { - text-align: right - } -} - -.color-inherit { - color: inherit -} - -.color-contrast-medium { - color: hsl(240, 1%, 48%); - color: var(--color-contrast-medium, #79797c) -} - -.color-contrast-high { - color: hsl(240, 4%, 20%); - color: var(--color-contrast-high, #313135) -} - -.color-contrast-higher { - color: hsl(240, 8%, 12%); - color: var(--color-contrast-higher, #1c1c21) -} - -.color-primary { - color: hsl(220, 90%, 56%); - color: var(--color-primary, #2a6df4) -} - -.color-accent { - color: hsl(355, 90%, 61%); - color: var(--color-accent, #f54251) -} - -.color-success { - color: hsl(94, 48%, 56%); - color: var(--color-success, #88c559) -} - -.color-warning { - color: hsl(46, 100%, 61%); - color: var(--color-warning, #ffd138) -} - -.color-error { - color: hsl(355, 90%, 61%); - color: var(--color-error, #f54251) -} - -.width-100\% { - width: 100% -} - -.height-100\% { - height: 100% -} - -.media-wrapper { - position: relative; - height: 0; - padding-bottom: 56.25% -} - -.media-wrapper iframe, .media-wrapper video, .media-wrapper img { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100% -} - -.media-wrapper video, .media-wrapper img { - -o-object-fit: cover; - object-fit: cover -} - -.media-wrapper--4\:3 { - padding-bottom: 75% -} - -:root, [data-theme="default"] { - --color-primary-darker: hsl(220, 90%, 36%); - --color-primary-darker-h: 220; - --color-primary-darker-s: 90%; - --color-primary-darker-l: 36%; - --color-primary-dark: hsl(220, 90%, 46%); - --color-primary-dark-h: 220; - --color-primary-dark-s: 90%; - --color-primary-dark-l: 46%; - --color-primary: hsl(220, 90%, 56%); - --color-primary-h: 220; - --color-primary-s: 90%; - --color-primary-l: 56%; - --color-primary-light: hsl(220, 90%, 66%); - --color-primary-light-h: 220; - --color-primary-light-s: 90%; - --color-primary-light-l: 66%; - --color-primary-lighter: hsl(220, 90%, 76%); - --color-primary-lighter-h: 220; - --color-primary-lighter-s: 90%; - --color-primary-lighter-l: 76%; - --color-accent-darker: hsl(355, 90%, 41%); - --color-accent-darker-h: 355; - --color-accent-darker-s: 90%; - --color-accent-darker-l: 41%; - --color-accent-dark: hsl(355, 90%, 51%); - --color-accent-dark-h: 355; - --color-accent-dark-s: 90%; - --color-accent-dark-l: 51%; - --color-accent: hsl(355, 90%, 61%); - --color-accent-h: 355; - --color-accent-s: 90%; - --color-accent-l: 61%; - --color-accent-light: hsl(355, 90%, 71%); - --color-accent-light-h: 355; - --color-accent-light-s: 90%; - --color-accent-light-l: 71%; - --color-accent-lighter: hsl(355, 90%, 81%); - --color-accent-lighter-h: 355; - --color-accent-lighter-s: 90%; - --color-accent-lighter-l: 81%; - --color-black: hsl(240, 8%, 12%); - --color-black-h: 240; - --color-black-s: 8%; - --color-black-l: 12%; - --color-white: hsl(0, 0%, 100%); - --color-white-h: 0; - --color-white-s: 0%; - --color-white-l: 100%; - --color-success-darker: hsl(94, 48%, 36%); - --color-success-darker-h: 94; - --color-success-darker-s: 48%; - --color-success-darker-l: 36%; - --color-success-dark: hsl(94, 48%, 46%); - --color-success-dark-h: 94; - --color-success-dark-s: 48%; - --color-success-dark-l: 46%; - --color-success: hsl(94, 48%, 56%); - --color-success-h: 94; - --color-success-s: 48%; - --color-success-l: 56%; - --color-success-light: hsl(94, 48%, 66%); - --color-success-light-h: 94; - --color-success-light-s: 48%; - --color-success-light-l: 66%; - --color-success-lighter: hsl(94, 48%, 76%); - --color-success-lighter-h: 94; - --color-success-lighter-s: 48%; - --color-success-lighter-l: 76%; - --color-error-darker: hsl(355, 90%, 41%); - --color-error-darker-h: 355; - --color-error-darker-s: 90%; - --color-error-darker-l: 41%; - --color-error-dark: hsl(355, 90%, 51%); - --color-error-dark-h: 355; - --color-error-dark-s: 90%; - --color-error-dark-l: 51%; - --color-error: hsl(355, 90%, 61%); - --color-error-h: 355; - --color-error-s: 90%; - --color-error-l: 61%; - --color-error-light: hsl(355, 90%, 71%); - --color-error-light-h: 355; - --color-error-light-s: 90%; - --color-error-light-l: 71%; - --color-error-lighter: hsl(355, 90%, 81%); - --color-error-lighter-h: 355; - --color-error-lighter-s: 90%; - --color-error-lighter-l: 81%; - --color-warning-darker: hsl(46, 100%, 41%); - --color-warning-darker-h: 46; - --color-warning-darker-s: 100%; - --color-warning-darker-l: 41%; - --color-warning-dark: hsl(46, 100%, 51%); - --color-warning-dark-h: 46; - --color-warning-dark-s: 100%; - --color-warning-dark-l: 51%; - --color-warning: hsl(46, 100%, 61%); - --color-warning-h: 46; - --color-warning-s: 100%; - --color-warning-l: 61%; - --color-warning-light: hsl(46, 100%, 71%); - --color-warning-light-h: 46; - --color-warning-light-s: 100%; - --color-warning-light-l: 71%; - --color-warning-lighter: hsl(46, 100%, 81%); - --color-warning-lighter-h: 46; - --color-warning-lighter-s: 100%; - --color-warning-lighter-l: 81%; - --color-bg: hsl(0, 0%, 100%); - --color-bg-h: 0; - --color-bg-s: 0%; - --color-bg-l: 100%; - --color-contrast-lower: hsl(0, 0%, 95%); - --color-contrast-lower-h: 0; - --color-contrast-lower-s: 0%; - --color-contrast-lower-l: 95%; - --color-contrast-low: hsl(240, 1%, 83%); - --color-contrast-low-h: 240; - --color-contrast-low-s: 1%; - --color-contrast-low-l: 83%; - --color-contrast-medium: hsl(240, 1%, 48%); - --color-contrast-medium-h: 240; - --color-contrast-medium-s: 1%; - --color-contrast-medium-l: 48%; - --color-contrast-high: hsl(240, 4%, 20%); - --color-contrast-high-h: 240; - --color-contrast-high-s: 4%; - --color-contrast-high-l: 20%; - --color-contrast-higher: hsl(240, 8%, 12%); - --color-contrast-higher-h: 240; - --color-contrast-higher-s: 8%; - --color-contrast-higher-l: 12% -} - -@supports (--css: variables) { - @media (min-width: 64rem) { - :root { - --space-unit: 1.25em - } - } -} - -:root { - --radius: 0.25em -} - -:root { - --font-primary: sans-serif; - --text-base-size: 1em; - --text-scale-ratio: 1.2; - --text-xs: calc(1em/var(--text-scale-ratio)/var(--text-scale-ratio)); - --text-sm: calc(var(--text-xs)*var(--text-scale-ratio)); - --text-md: calc(var(--text-sm)*var(--text-scale-ratio)*var(--text-scale-ratio)); - --text-lg: calc(var(--text-md)*var(--text-scale-ratio)); - --text-xl: calc(var(--text-lg)*var(--text-scale-ratio)); - --text-xxl: calc(var(--text-xl)*var(--text-scale-ratio)); - --text-xxxl: calc(var(--text-xxl)*var(--text-scale-ratio)); - --body-line-height: 1.4; - --heading-line-height: 1.2; - --font-primary-capital-letter: 1 -} - -@supports (--css: variables) { - @media (min-width: 64rem) { - :root { - --text-base-size: 1.25em; - --text-scale-ratio: 1.25 - } - } -} - -mark { - background-color: hsla(355, 90%, 61%, 0.2); - background-color: hsla(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), 0.2); - color: inherit -} - -.text-component { - --line-height-multiplier: 1; - --text-vspace-multiplier: 1 -} - -.text-component blockquote { - padding-left: 1em; - border-left: 4px solid hsl(240, 1%, 83%); - border-left: 4px solid var(--color-contrast-low) -} - -.text-component hr { - background: hsl(240, 1%, 83%); - background: var(--color-contrast-low); - height: 1px -} - -.text-component figcaption { - font-size: 0.83333em; - font-size: var(--text-sm); - color: hsl(240, 1%, 48%); - color: var(--color-contrast-medium) -} - -.article.text-component { - --line-height-multiplier: 1.13; - --text-vspace-multiplier: 1.2 -} - -:root { - --btn-font-size: 1em; - --btn-font-size-sm: calc(var(--btn-font-size) - 0.2em); - --btn-font-size-md: calc(var(--btn-font-size) + 0.2em); - --btn-font-size-lg: calc(var(--btn-font-size) + 0.4em); - --btn-radius: 0.25em; - --btn-padding-x: var(--space-sm); - --btn-padding-y: var(--space-xs) -} - -.btn { - --color-shadow: hsla(240, 8%, 12%, 0.15); - --color-shadow: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.15); - box-shadow: 0 4px 16px hsla(240, 8%, 12%, 0.15); - box-shadow: 0 4px 16px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.15); - cursor: pointer -} - -.btn--primary { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale -} - -.btn--accent { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale -} - -.btn--disabled { - opacity: 0.6 -} - -:root { - --form-control-padding-x: var(--space-sm); - --form-control-padding-y: var(--space-xs); - --form-control-radius: 0.25em -} - -.form-control { - border: 2px solid hsl(240, 1%, 83%); - border: 2px solid var(--color-contrast-low) -} - -.form-control:focus { - outline: none; - border-color: hsl(220, 90%, 56%); - border-color: var(--color-primary); - --color-shadow: hsla(220, 90%, 56%, 0.2); - --color-shadow: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2); - box-shadow: undefined; - box-shadow: 0 0 0 3px var(--color-shadow) -} - -.form-control:focus:focus { - box-shadow: 0 0 0 3px hsla(220, 90%, 56%, 0.2); - box-shadow: 0 0 0 3px var(--color-shadow) -} - -.form-control[aria-invalid="true"] { - border-color: hsl(355, 90%, 61%); - border-color: var(--color-error) -} - -.form-control[aria-invalid="true"]:focus { - --color-shadow: hsla(355, 90%, 61%, 0.2); - --color-shadow: hsla(var(--color-error-h), var(--color-error-s), var(--color-error-l), 0.2); - box-shadow: undefined; - box-shadow: 0 0 0 3px var(--color-shadow) -} - -.form-control[aria-invalid="true"]:focus:focus { - box-shadow: 0 0 0 3px hsla(355, 90%, 61%, 0.2); - box-shadow: 0 0 0 3px var(--color-shadow) -} - -.form-label { - font-size: 0.83333em; - font-size: var(--text-sm) -} - -:root { - --cd-color-1: hsl(206, 21%, 24%); - --cd-color-1-h: 206; - --cd-color-1-s: 21%; - --cd-color-1-l: 24%; - --cd-color-2: hsl(205, 38%, 89%); - --cd-color-2-h: 205; - --cd-color-2-s: 38%; - --cd-color-2-l: 89%; - --cd-color-3: hsl(207, 10%, 55%); - --cd-color-3-h: 207; - --cd-color-3-s: 10%; - --cd-color-3-l: 55%; - --cd-color-4: hsl(111, 51%, 60%); - --cd-color-4-h: 111; - --cd-color-4-s: 51%; - --cd-color-4-l: 60%; - --cd-color-5: hsl(356, 53%, 49%); - --cd-color-5-h: 356; - --cd-color-5-s: 53%; - --cd-color-5-l: 49%; - --cd-color-6: hsl(47, 85%, 61%); - --cd-color-6-h: 47; - --cd-color-6-s: 85%; - --cd-color-6-l: 61%; - --cd-header-height: 200px; - --font-primary: 'Droid Serif', serif; - --font-secondary: 'Open Sans', sans-serif -} - -[data-theme="dark"] { - --cd-color-2: hsl(0, 0%, 34%); - --cd-color-2-h: 0; - --cd-color-2-s: 0%; - --cd-color-2-l: 34%; -} - -@supports (--css: variables) { - @media (min-width: 64rem) { - :root { - --cd-header-height: 300px - } - } -} - -.cd-main-header { - height: 200px; - height: var(--cd-header-height); - background: hsl(206, 21%, 24%); - background: var(--cd-color-1); - color: hsl(0, 0%, 100%); - color: var(--color-white); - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale -} - -.cd-main-header h1 { - color: inherit -} - -.cd-timeline { - overflow: hidden; - padding: 2em 0; - padding: var(--space-lg) 0; - color: hsl(207, 10%, 55%); - color: var(--cd-color-3); - background-color: hsl(205, 38%, 93.45%); - background-color: hsl(var(--cd-color-2-h), var(--cd-color-2-s), calc(var(--cd-color-2-l)*1.05)); -} - -[data-theme="dark"] .cd-timeline { - background-color: #2C2F33; -} - -.cd-timeline h2 { - font-weight: 700 -} - -.cd-timeline__container { - position: relative; - padding: 1.25em 0; - padding: var(--space-md) 0 -} - -.cd-timeline__container::before { - content: ''; - position: absolute; - top: 0; - left: 18px; - height: 100%; - width: 4px; - background: hsl(205, 38%, 89%); - background: var(--cd-color-2) -} - -@media (min-width: 64rem) { - .cd-timeline__container::before { - left: 50%; - -webkit-transform: translateX(-50%); - -ms-transform: translateX(-50%); - transform: translateX(-50%) - } -} - -.cd-timeline__block { - display: -ms-flexbox; - display: flex; - position: relative; - z-index: 1; - margin-bottom: 2em; - margin-bottom: var(--space-lg) -} - -.cd-timeline__block:last-child { - margin-bottom: 0 -} - -@media (min-width: 64rem) { - .cd-timeline__block:nth-child(even) { - -ms-flex-direction: row-reverse; - flex-direction: row-reverse - } -} - -.cd-timeline__img { - display: -ms-flexbox; - display: flex; - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; - align-items: center; - -ms-flex-negative: 0; - flex-shrink: 0; - width: 30px; - height: 30px; - border-radius: 50%; - box-shadow: 0 0 0 4px hsl(0, 0%, 100%), inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05); - box-shadow: 0 0 0 4px var(--color-white), inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05) -} - -[data-theme="dark"] .cd-timeline__img { - box-shadow: 0 0 0 4px var(--cd-color-2), inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05) -} - -.cd-timeline__img i { - font-size: 1.5em; - color: white; -} - -@media (max-width: 64rem) { - .cd-timeline__img i { - font-size: 0.9em; - } -} - -.cd-timeline__img img { - width: 40px; - height: 40px; - margin-left: 2px; - margin-top: 2px; -} - -@media (max-width: 64rem) { - .cd-timeline__img img { - width: 20px; - height: 20px; - margin-left: 2px; - margin-top: 2px; - } -} - -@media (min-width: 64rem) { - .cd-timeline__img { - width: 60px; - height: 60px; - -ms-flex-order: 1; - order: 1; - margin-left: calc(5% - 30px); - will-change: transform; - } - - .cd-timeline__block:nth-child(even) .cd-timeline__img { - margin-right: calc(5% - 30px) - } -} - -.cd-timeline__img--picture { - background-color: #7289DA; -} - -.cd-timeline__img--movie { - background-color: hsl(356, 53%, 49%); - background-color: var(--cd-color-5) -} - -.cd-timeline__img--location { - background-color: hsl(47, 85%, 61%); - background-color: var(--cd-color-6) -} - -.cd-timeline__content { - -ms-flex-positive: 1; - flex-grow: 1; - position: relative; - margin-left: 1.25em; - margin-left: var(--space-md); - border-radius: 0.25em; - border-radius: var(--radius-md); - padding: 1.25em; - padding: var(--space-md); - box-shadow: 0 3px 0 hsl(205, 38%, 89%); - box-shadow: 0 3px 0 var(--cd-color-2) -} - -.cd-timeline__content::before { - content: ''; - position: absolute; - top: 16px; - right: 100%; - width: 0; - height: 0; - border: 7px solid transparent; - border-right-color: hsl(0, 0%, 100%); - border-right-color: var(--cd-color-2) -} - -.cd-timeline__content h2 { - color: hsl(206, 21%, 24%); - color: var(--cd-color-1) -} - -@media (min-width: 64rem) { - .cd-timeline__content { - width: 45%; - -ms-flex-positive: 0; - flex-grow: 0; - will-change: transform; - margin: 0; - font-size: 0.9em; - --line-height-multiplier: 1.2 - } - .cd-timeline__content::before { - top: 24px - } - .cd-timeline__block:nth-child(odd) .cd-timeline__content::before { - right: auto; - left: 100%; - width: 0; - height: 0; - border: 7px solid transparent; - border-left-color: hsl(0, 0%, 100%); - border-left-color: var(--cd-color-2) - } -} - -@media (min-width: 64rem) { - .cd-timeline__date { - position: absolute; - width: 100%; - left: 120%; - top: 20px - } - .cd-timeline__block:nth-child(even) .cd-timeline__date { - left: auto; - right: 120%; - text-align: right - } -} - -@media (min-width: 64rem) { - .cd-timeline__img--hidden, .cd-timeline__content--hidden { - visibility: hidden - } - .cd-timeline__img--bounce-in { - -webkit-animation: cd-bounce-1 0.6s; - animation: cd-bounce-1 0.6s - } - .cd-timeline__content--bounce-in { - -webkit-animation: cd-bounce-2 0.6s; - animation: cd-bounce-2 0.6s - } - .cd-timeline__block:nth-child(even) .cd-timeline__content--bounce-in { - -webkit-animation-name: cd-bounce-2-inverse; - animation-name: cd-bounce-2-inverse - } - .cd-timeline__img--bounce-out { - -webkit-animation: cd-bounce-out-1 0.6s; - animation: cd-bounce-out-1 0.6s; - } - .cd-timeline__content--bounce-out { - -webkit-animation: cd-bounce-out-2 0.6s; - animation: cd-bounce-out-2 0.6s; - } -} - -@-webkit-keyframes cd-bounce-1 { - 0% { - opacity: 0; - -webkit-transform: scale(0.5); - transform: scale(0.5) - } - 60% { - opacity: 1; - -webkit-transform: scale(1.2); - transform: scale(1.2) - } - 100% { - -webkit-transform: scale(1); - transform: scale(1) - } -} - -@keyframes cd-bounce-1 { - 0% { - opacity: 0; - -webkit-transform: scale(0.5); - transform: scale(0.5) - } - 60% { - opacity: 1; - -webkit-transform: scale(1.2); - transform: scale(1.2) - } - 100% { - -webkit-transform: scale(1); - transform: scale(1) - } -} - -@-webkit-keyframes cd-bounce-2 { - 0% { - opacity: 0; - -webkit-transform: translateX(-100px); - transform: translateX(-100px) - } - 60% { - opacity: 1; - -webkit-transform: translateX(20px); - transform: translateX(20px) - } - 100% { - -webkit-transform: translateX(0); - transform: translateX(0) - } -} - -@keyframes cd-bounce-2 { - 0% { - opacity: 0; - -webkit-transform: translateX(-100px); - transform: translateX(-100px) - } - 60% { - opacity: 1; - -webkit-transform: translateX(20px); - transform: translateX(20px) - } - 100% { - -webkit-transform: translateX(0); - transform: translateX(0) - } -} - -@-webkit-keyframes cd-bounce-2-inverse { - 0% { - opacity: 0; - -webkit-transform: translateX(100px); - transform: translateX(100px) - } - 60% { - opacity: 1; - -webkit-transform: translateX(-20px); - transform: translateX(-20px) - } - 100% { - -webkit-transform: translateX(0); - transform: translateX(0) - } -} - -@keyframes cd-bounce-2-inverse { - 0% { - opacity: 0; - -webkit-transform: translateX(100px); - transform: translateX(100px) - } - 60% { - opacity: 1; - -webkit-transform: translateX(-20px); - transform: translateX(-20px) - } - 100% { - -webkit-transform: translateX(0); - transform: translateX(0) - } -} - -@-webkit-keyframes cd-bounce-out-1 { - 0% { - opacity: 1; - -webkit-transform: scale(1); - transform: scale(1) - } - - 60% { - -webkit-transform: scale(1.2); - transform: scale(1.2) - } - - 100% { - opacity: 0; - -webkit-transform: scale(0.5); - transform: scale(0.5) - } -} - -@keyframes cd-bounce-out-1 { - 0% { - opacity: 1; - -webkit-transform: scale(1); - transform: scale(1); - } - - 60% { - -webkit-transform: scale(1.2); - transform: scale(1.2); - } - - 100% { - opacity: 0; - -webkit-transform: scale(0.5); - transform: scale(0.5); - } -} - -@-webkit-keyframes cd-bounce-out-2 { - 0% { - opacity: 1; - -webkit-transform: translateX(0); - transform: translateX(0) - } - 60% { - -webkit-transform: translateX(20px); - transform: translateX(20px) - } - 100% { - opacity: 0; - -webkit-transform: translateX(-100px); - transform: translateX(-100px) - } -} - -@keyframes cd-bounce-out-2 { - 0% { - opacity: 1; - -webkit-transform: translateX(0); - transform: translateX(0) - } - 60% { - -webkit-transform: translateX(20px); - transform: translateX(20px) - } - 100% { - opacity: 0; - -webkit-transform: translateX(-100px); - transform: translateX(-100px) - } -} diff --git a/pydis_site/templates/home/timeline.html b/pydis_site/templates/home/timeline.html deleted file mode 100644 index 6a7df522..00000000 --- a/pydis_site/templates/home/timeline.html +++ /dev/null @@ -1,983 +0,0 @@ -{% extends 'base/base.html' %} -{% load static %} - -{% block title %}Timeline{% endblock %} -{% block head %} - -{% endblock %} - -{% block content %} - {% include "base/navbar.html" %} - -
-
-
-
-
- -
- Jul 11th, 2023 -
- -
-

Switch to new paste service

-

- We migrate over to pinnwand - as the service that powers our paste bin over at - https://paste.pythondiscord.com/. - We made the switch as it comes with native light/dark modes, support for multi-file - pastes, additional support for text highlighting languages, and plus, it's written in - Python! -

-
-
- -
-
-
- Logo -
- Jan 30th, 2023 -
- -
-

Retirement of Joe and Sebastiaan

-

- Having been at the helm of Python Discord for over 5 and 3 years respectively, Joe and - Sebastiaan retire and step down. They gain the @Founders role and continue as advisors - to the @Directors, the new name of the original @Owners role. - - At the same time, Mina and Zig join Leon as co-directors. -

-
-
- -
-
-
- -
- Nov 25th, 2022 -
- -
-

Switch to forum-based help system

-

- We migrate our help system to use a forum channel, retiring our home-grown rotating help - system after 3 years of service and nearly 500,000 help sessions. Forum channels offer - a better experience as members can create their own dedicated thread in a discoverable place. -

-
-
- -
-
-
- Logo -
- Oct 24th, 2022 -
- -
-

Python 3.11 Release Stream

-

- With the Python 3.10 Release Stream being such a success, we brought it back for the - release of Python 3.11. Hosted by Leon, and CPython 3.11 Release Manager, Pablo Galindo, - they were joined by other CPython Core Developers. Together, they discuss the specific - features and the overall development process of the release. -

- -
- -
-
-
- -
-
-
- -
- July 21st, 2022 -
- -
-

Summer Code Jam 2022 (CJ9)

-

- We host the 9th Code Jam. This year, teams had to use websockets to create a - project based on the theme, It's not a bug, it's a feature. In all, 24 teams - submitted their projects. At the end, we held a livestream demoing the top 10 projects - and announcing the winner! -

- -
- -
-
-
- -
-
-
- -
- May 19th, 2022 -
- -
-

Partnership with pyqtgraph

-

- The #pyqtgraph channel is created for the Scientific Graphics and GUI - library pyqtgraph, joining #black-formatter. -

-
-
- -
-
-
- -
- Feb 21st, 2022 -
- -
-

Addition of @Sir Robin

-

- Our arsenal of bots grows! We add @Sir Robin to power and manage all of our future - events and to support the Events Team. -

-
-
- -
-
-
- -
- Feb 12th, 2022 -
- -
-

Trivia Night

-

- How well do you know Python inside out? Members got to find out in a Trivia Night event. - Contestants were given questions about Python's internals, its development, and more. - To win, contestants had to get the most questions right while being fast to answer. -

-
-
- -
-
-
- Logo -
- Feb 9th, 2022 -
- -
-

Creation of Events Team

-

- We form the Events Team to organise and run future events. Led by Kat and comprised by - staff members, the goal of the team is to ultimately host more events in a more - sustainable way. -

-
-
- - -
-
-
- -
- Feb 2nd, 2022 -
- -
-

Deployment of Smarter Resources

-

- We gave our resources pages some much needed love and - - reorganised them into a single page, - complete with a shiny new resource filter that allows you to more quickly find - ones that relate to your interests, experience, learning style, and ability to pay! -

-
-
- -
-
-
- -
- Jan 19, 2022 -
- -
-

We hit 300 000 members!

-

- Thanks to an increasing growth rate, Python Discord's membership count doubled from - 150,000 to 300,000 in less than a year! -

-
-
- -
-
-
- Logo -
- Oct 4th, 2021 -
- -
-

We host the Python 3.10 Release Stream

-

- Leon and Pablo Galindo, CPython Core Developer and Release Manager, host the Python 3.10 - Release Stream, joined by other core devs Carol Willing, Irit Katriel, Łukasz Langa, and - Brandt Bucher. They talked in-depth about the new features introduced in 3.10, the - development of those features, and more! -

- -
- -
-
-
- -
-
-
- -
- May 24th, 2021 -
- -
-

Partnership with Black

-

- We partner with the uncompromising code formatter project, Black, who were looking for a - new home for their real-time chat. Python Discord ended up being that home, resulting in - the creation of the #black-formatter channel. -

-
-
- -
-
-
- -
- July 9, 2021 -
- -
-

Summer Code Jam 2021 (CJ8)

-

- We host the 8th now-annual Code Jam. Teams had to create a program with an text-based user - interface (TUI), all designed around the theme of “think inside the box.” Ultimately, 51 - teams submitted projects. - - The winning submissions are listed on our website. - -

-
-
- -
-
-
- -
- May 24, 2021 -
- -
-

Inaugural run of Pixels

-

- Inspired by the subreddit, r/place, Pixels was our collaborative canvas event held - between May 25 to June 14, providing a beginner-friendly API to paint pixels on a - virtual canvas. -

-

- Later, we released a blog post - summarizing what happened, our motives, and some stories from during development. -

-
-
- -
-
-
- Logo -
- April 23, 2021 -
- -
-

Owners become PSF Fellows

-

Joe, Leon, and Sebastiaan - - are recognized as Python Software Foundation Fellows - - for their substantial contributions to the Python ecosystem by fostering - Python Discord. -

-
-
- -
-
-
- -
- Mar 21st, 2021 -
- -
-

Summer Code Jam 2020 Highlights

-

- We release a new video to our YouTube showing the best projects from the Summer Code Jam 2020. - Better late than never! -

- -
- -
-
-
- -
-
-
- -
- Mar 13th, 2021 -
- -
-

New feature: Weekly discussion channel

-

Every week (or two weeks), we'll be posting a new topic to discuss in a - channel called #weekly-topic-discussion. Our inaugural topic is a PyCon talk by Anthony Shaw called - Wily Python: Writing simpler and more maintainable Python.. -

- -
- -
-
-
- -
-
-
- -
- Mar 13th, 2021 -
- -
-

We're on the Teaching Python podcast!

-

Leon joins Sean and Kelly on the Teaching Python podcast to discuss how the pandemic has - changed the way we learn, and what role communities like Python Discord can play in this new world. - You can find the episode at teachingpython.fm. -

- - -
-
- -
-
-
- -
- Mar 1st, 2021 -
- -
-

Leon Sandøy appears on Talk Python To Me

-

Leon goes on the Talk Python to Me podcast with Michael Kennedy - to discuss the history of Python Discord, the critical importance of culture, and how to run a massive - community. You can find the episode at talkpython.fm. -

- - -
-
- -
-
-
- -
- Feb 18th, 2021 -
- -
-

We now have 150,000 members!

-

Our growth continues to accelerate.

- -
-
- -
-
-
- -
- February 8th, 2021 -
- -
-

We release The PEP 8 song

-

We release the PEP 8 song on our YouTube channel, which finds tens of - thousands of listeners!

- -
- -
-
-
- -
-
-
- -
- December 1st - 25th, 2020 -
- -
-

Advent of Code attracts hundreds of participants

-

- A total of 443 Python Discord members sign up to be part of - Eric Wastl's excellent Advent of Code event. - As always, we provide dedicated announcements, scoreboards, bot commands and channels for our members - to enjoy the event in. -

-
-
- -
-
-
- -
- Nov 29th, 2020 -
- -
-

We migrate all our infrastructure to Kubernetes

-

As our tech stack grows, we decide to migrate all our services over to a - container orchestration paradigm via Kubernetes. This gives us better control and scalability. - Joe Banks takes on the role as DevOps Lead. -

-
-
- -
-
-
- -
- Oct 22nd, 2020 -
- -
-

Python Discord hits 100,000 members!

-

Only six months after hitting 40,000 users, we hit 100,000 users. A - monumental milestone, and one we're very proud of. To commemorate - it, we create this timeline.

-
-
- -
-
-
- Logo -
- Oct 21st, 2020 -
- -
-

Python Discord hosts the 2020 CPython Core Developer Q&A

-
- -
- -
-
- -
-
-
- -
- Aug 16th, 2020 -
- -
-

Python Discord is now the new home of the PyWeek event!

-

PyWeek, a game jam that has been running since 2005, joins Python - Discord as one of our official events. Find more information about PyWeek on - their official website.

-
-
- -
-
-
- -
- Jul 31st, 2020 -
- -
-

PyDis summer code jam 2020 with the theme “Early Internet” and Django as the technology

-

Sponsored by the Django Software Foundation and JetBrains, the Summer - Code Jam for 2020 attracts hundreds of participants, and sees the creation of some fantastic - projects. Check them out in our judge stream below:

- -
- -
-
-
- -
-
-
- -
- Jun 4th, 2020 -
- -
-

Python Discord Public Statistics are now live

-

After getting numerous requests to publish beautiful data on member - count and channel use, we create stats.pythondiscord.com for - all to enjoy.

-
-
- -
-
-
- -
- May 28th, 2020 -
- -
-

Python Discord is now listed on python.org/community

-

After working towards this goal for months, we finally work out an - arrangement with the PSF that allows us to be listed on that most holiest of websites: - https://python.org/. There was much rejoicing. -

-
-
- -
-
-
- -
- May 25th, 2020 -
- -
-

ModMail is now live

-

- Having originally planned to write our own ModMail bot from scratch, we - come across an exceptionally good ModMail bot by - kyb3r and decide to just self-host that one instead. -

-
-
- -
-
-
- -
- Apr 17th, 2020 -
- -
-

PyDis Game Jam 2020 with the “Three of a Kind” theme and Arcade as the technology

-

The creator of Arcade, Paul Vincent Craven, joins us as a judge. - Several of the Code Jam participants also end up getting involved contributing to the Arcade - repository.

- -
- -
-
-
- -
-
-
- -
- Apr 14, 2020 -
- -
-

Python Discord hits 40,000 members, and is now bigger than Liechtenstein.

-

- -

-
-
- -
-
-
- -
- Apr 5th, 2020 -
- -
-

The new help channel system is live

-

We release our dynamic help-channel system, which allows you to claim - your very own help channel instead of fighting over the static help channels. We release a Help Channel Guide to - help our members fully understand how the system works.

-
-
- -
-
-
- -
- Jan 17, 2020 -
- -
-

PyDis sixth code jam with the theme “Ancient technology” and the technology Kivy

-

Our Code Jams are becoming an increasingly big deal, and the Kivy core - developers join us to judge the event and help out our members during the event. One of them, - @tshirtman, even joins our staff!

- -
- -
-
-
- -
-
-
- -
- Dec 22nd, 2019 -
- -
-

PyDis hits 30,000 members

-

More than tripling in size since the year before, the community hits - 30000 users. At this point, we're probably the largest Python chat community on the planet.

-
-
- -
-
-
- Logo -
- Sept 22nd, 2019 -
- -
-

Sebastiaan Zeef becomes an owner

-

After being a long time active contributor to our projects and the driving - force behind many of our events, Sebastiaan Zeef joins the Owners Team alongside Joe & Leon.

-
-
- -
-
-
- -
- Oct 26th, 2019 -
- -
-

The code of conduct is created

-

Inspired by the Adafruit, Rust and Django communities, an essential - community pillar is created; Our Code of - Conduct.

-
-
- -
-
-
- -
- Sep 15, 2019 -
- -
-

The Django rewrite of pythondiscord.com is now live!

-

The site is getting more and more complex, and it's time for a rewrite. - We decide to go for a different stack, and build a website based on Django, DRF, Bulma and - PostgreSQL.

-
-
- -
-
-
- -
- Apr 8th, 2019 -
- -
-

PyDis hits 15,000 members; the “hot ones special” video is released

-
- -
- -
-
- -
-
-
- -
- Dec 19th, 2018 -
- -
-

django-simple-bulma is released on PyPi

-

Our very first package on PyPI, django-simple-bulma is a package that - sets up the Bulma CSS framework for your Django application and lets you configure everything in - settings.py.

-
-
- -
-
-
- -
- Nov 24th, 2018 -
- -
-

PyDis hits 10,000 members

-

We partner with RLBot, move from GitLab to GitHub, and start putting - together the first Advent of Code event.

-
-
- -
-
-
- -
- Oct 1st, 2018 -
- -
-

First Hacktoberfest PyDis event; @Sir Lancebot is created

-

We create a second bot for our community and fill it up with simple, - fun and relatively easy issues. The idea is to create an approachable arena for our members to cut - their open-source teeth on, and to provide lots of help and hand-holding for those who get stuck. - We're training our members to be productive contributors in the open-source ecosystem.

-
-
- -
-
-
- -
- Jul 10th, 2018 -
- -
-

PyDis is now partnered with Discord; the vanity URL discord.gg/python is created

-

After being rejected for their Partner program several times, we - finally get approved. The recent partnership with the r/Python subreddit plays a significant role in - qualifying us for this partnership.

-
-
- -
-
-
- -
- Jun 20th, 2018 -
- -
-

PyDis hits 5,000 members and partners with r/Python

-

As we continue to grow, we approach the r/Python subreddit and ask to - become their official Discord community. They agree, and we become listed in their sidebar, giving - us yet another source of new members.

-
-
- -
-
-
- -
- Jun 9th, 2018 -
- -
-

Do You Even Python and PyDis merger

-

At this point in time, there are only two serious Python communities on - Discord - Ours, and one called Do You Even Python. We approach the owners of DYEP with a bold - proposal - let's shut down their community, replace it with links to ours, and in return we will let - their staff join our staff. This gives us a big boost in members, and eventually leads to @eivl and - @Mr. Hemlock joining our Admin team

-
-
- -
-
-
- -
- May 21st, 2018 -
- -
-

The privacy policy is created

-

Since data privacy is quite important to us, we create a privacy page - pretty much as soon as our new bot and site starts collecting some data. To this day, we keep our privacy policy up to date with all - changes, and since April 2020 we've started doing monthly data reviews. -

-
-
- -
-
-
- -
- Mar 23rd, 2018 -
- -
-

First code jam with the theme “snakes”

-

Our very first Code Jam attracts a handful of users who work in random - teams of 2. We ask our participants to write a snake-themed Discord bot. Most of the code written - for this jam still lives on in Sir Lancebot, and you can play with it by using the - .snakes command. For more information on this event, see the event page

-
-
- -
-
-
- -
- Mar 4th, 2018 -
- -
-

PyDis hits 2,000 members; pythondiscord.com and @Python are live

-

The public moderation bot we're using at the time, Rowboat, announces - it will be shutting down. We decide that we'll write our own bot to handle moderation, so that we - can have more control over its features. We also buy a domain and start making a website in Flask. -

-
-
- -
-
-
- Logo -
- Feb 3rd, 2018 -
- -
-

Our logo is born. Thanks @Aperture!

-

- -

-
-
- -
-
-
- -
- Nov 10th, 2017 -
- -
-

Python Discord hits 1,000 members

-

Our main source of new users at this point is a post on Reddit that - happens to get very good SEO. We are one of the top 10 search engine hits for the search term - "python discord".

-
-
- -
-
-
- Logo -
- Jan 8th, 2017 -
- -
-

Python Discord is created

-

Joe Banks becomes one of the owners around 3 days after it - is created, and Leon Sandøy (lemon) joins the owner team later in the year, - when the community has around 300 members.

-
-
- -
-
- - -{% endblock %} diff --git a/pydis_site/templates/timeline/timeline.html b/pydis_site/templates/timeline/timeline.html index 8f746b6e..6bd85f31 100644 --- a/pydis_site/templates/timeline/timeline.html +++ b/pydis_site/templates/timeline/timeline.html @@ -3,36 +3,33 @@ {% block title %}Timeline{% endblock %} {% block head %} - - + {% endblock %} {% block content %} {% include "base/navbar.html" %} -
-
+
+
{% for entry in entries %} - -
-
+
+
+
{% if entry.icon == "pydis" %} - Picture + Logo {% else %} - + {% endif %}
- -
-

{{ entry.title }}

- {{ entry.content|safe }} -
- {{ entry.date }} -
-
+ {{ entry.date }}
+
+

{{ entry.title }}

+ {{ entry.content|safe }} +
+
{% endfor %}
-- cgit v1.2.3 From 93c5ca6be9c62636a897a55a1c4ffe629025aa69 Mon Sep 17 00:00:00 2001 From: hedy Date: Sat, 6 Apr 2024 12:48:47 +0800 Subject: Timeline: Move the new timeline.css in and have git recognize the rename --- pydis_site/static/css/home/timeline.css | 432 ---------------------------- pydis_site/static/css/timeline/timeline.css | 432 ++++++++++++++++++++++++++++ 2 files changed, 432 insertions(+), 432 deletions(-) delete mode 100644 pydis_site/static/css/home/timeline.css create mode 100644 pydis_site/static/css/timeline/timeline.css diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css deleted file mode 100644 index 7f6c4160..00000000 --- a/pydis_site/static/css/home/timeline.css +++ /dev/null @@ -1,432 +0,0 @@ -/* Adapted from https://codyhouse.co/gem/vertical-timeline/ with significant - * modifications. - * */ - -:root { - --side-spacing: 0; - --background-color: rgb(232, 239, 245); - --accent: hsl(205, 26%, 84%); - - --timeline-line-color: hsl(205, 38%, 89%); - --timeline-line-width: 4px; - --timeline-line-half-width: calc(var(--timeline-line-width) / 2); - - --content-background-color: white; - --content-padding: 1.25rem; - - --icon-width: 60px; - --icon-half-width: calc(var(--icon-width) / 2); - --icon-border-width: 4px; - --icon-border-color: white; - --icon-color: white; - --icon-image-width: 40px; - --icon-size: 1.5rem; - --icon-side-spacing: 1.5rem; - - --date-color: hsl(0, 0%, 48%); - --arrow-size: 7px; -} - -[data-theme="dark"] { - --background-color: #2C2F33; - --content-background-color: #23272A; - --accent: hsl(0, 0%, 34%); - --timeline-line-color: var(--accent); - - --icon-border-color: hsl(0, 0%, 50%); -} - -@media (max-width: 1023px) { - :root { - --side-spacing: 1.25rem; - --icon-side-spacing: var(--side-spacing); - --icon-width: 40px; - --icon-image-width: 30px; - --icon-size: 1.1rem; - } -} - -/* Use a tighter margin and smaller icon dimensions on the most narrow screens. - * */ -@media (max-width: 600px) { - :root { - --side-spacing: .75rem; - --icon-side-spacing: .5rem; - --timeline-line-width: 3px; - --icon-width: 30px; - --icon-border-width: 3px; - --icon-image-width: 24px; - --icon-size: .9rem; - } -} - -/* Containers */ -.timeline { - overflow: hidden; - padding: 3rem 0; - background-color: var(--background-color); -} - -.timeline .container { - position: relative; - padding: 1rem var(--side-spacing); -} - -/* The line that goes through all the icons */ -.timeline .container::before { - content: ''; - position: absolute; - - height: 100%; - width: var(--timeline-line-width); - background-color: var(--timeline-line-color); - z-index: 1; -} - -@media (min-width: 1023px) { - .timeline .container::before { - left: calc(50% - var(--timeline-line-half-width)); - } -} - -@media (max-width: 1023px) { - .timeline .container::before { - margin-left: calc(var(--icon-half-width) - var(--timeline-line-half-width)); - } -} - -/* Each timeline item */ -.timeline-item { - display: flex; - align-items: flex-start; - margin-bottom: 2.5rem; -} - -/* Arrow indicator on the top left/right of each content box */ -.timeline-content::before { - content: ''; - position: absolute; - border: solid var(--arrow-size) transparent; - border-right-color: var(--accent); - height: 0; -} - -@media (max-width: 1023px) { - .timeline-content::before { - margin-left: calc(0px - var(--content-padding) - 14px); - margin-top: calc(0px - var(--arrow-size) / 2); - } -} - -@media (max-width: 600px) { - .timeline-content::before { - margin-top: calc(0px - var(--icon-half-width) + var(--arrow-size)); - } -} - -@media (min-width: 1023px) { - .timeline-content::before { - right: 100%; - margin-top: var(--arrow-size); - } - .timeline-item:nth-child(odd) .timeline-content::before { - border-left-color: var(--accent); - border-right-color: transparent; - left: 100%; - right: unset; - } -} - -/* Visual container of the timeline item */ -.timeline-content.box { - padding: var(--content-padding); - box-shadow: var(--accent) 0px 3px 0px 0px; - background-color: var(--content-background-color); - flex-grow: 1; -} - -@media (min-width: 1023px) { - .timeline-item:nth-child(odd) { - flex-direction: row-reverse; - } - /* On desktop, the content boxes are anchored with respect to the vertical - * center of the screen, set using `left`/`right` properties depending on - * even and odd children of timeline items. - * */ - .timeline-content.box { - width: 45%; - flex-grow: 0; - - position: relative; - - --content-position: calc(50% + var(--icon-border-width) + var(--icon-half-width)); - - left: var(--content-position); - margin-left: var(--icon-side-spacing); - } - .timeline-item:nth-child(odd) .timeline-content.box { - left: unset; - right: var(--content-position); - margin-right: var(--icon-side-spacing); - } -} - -@media (max-width: 1023px) { - .timeline-content.box { - margin-left: calc(var(--icon-side-spacing) + var(--arrow-size)); - } -} - -/* The icon and date components are grouped together in a flexbox to ensure - * there are center-aligned vertically on both desktop and mobile screens. This - * also makes it easy to both have dates' horizontal position follow that of - * the icon, and reverse their ordering for alternate timeline items on - * desktop. - * */ -.timeline-icon-date { - z-index: 4; - display: flex; - align-items: baseline; -} - -@media (min-width: 1023px) { - .timeline-icon-date { - order: 1; - - /* Arbitrary container width to prevent wrapping of the date text */ - width: 50%; - align-items: center; - gap: var(--icon-side-spacing); - - position: absolute; - left: calc(50% - var(--icon-half-width)); - } - - .timeline-item:nth-child(even) .timeline-icon-date { - flex-direction: row-reverse; - left: unset; - right: calc(50% - var(--icon-half-width)); - } -} - -/* Icon */ -.timeline-icon { - display: flex; - justify-content: center; - align-items: center; - flex-shrink: 0; - - border-radius: 50%; - height: var(--icon-width); - width: var(--icon-width); - /* The border does not actually use the border property because this border - * needs to cover the bottom box-shadow, which is easier if the border is - * implemented as a box-shadow. - * */ - box-shadow: 0 0 0 var(--icon-border-width) var(--icon-border-color), - inset 0 2px 0 rgba(0,0,0,.08), - 0 3px 0 4px rgba(0,0,0,.05); - margin-top: var(--icon-border-width); - - /* Font Awesome icon size and color */ - color: var(--icon-color); - font-size: var(--icon-size); -} - -/* Icons that use a custom image */ -.timeline-icon img { - width: var(--icon-image-width); - height: var(--icon-image-width); -} - -/* Icons that use the pydis logo */ -.timeline-icon img.pydis { - /* Visually centering the pydis logo requires a margin adjustment here - * due to the right and bottom box shadow on the logo which is not very - * visible on the page. - * - * XXX: Hardcoded; Unresponsive to actual image dimensions. - * */ - margin-top: 1px; - margin-left: 1px; -} - -.timeline-date { - font-size: .9rem; - color: var(--date-color); -} - -@media (min-width: 1023px) { - .timeline-item:nth-child(even) .timeline-date { - left: auto; - right: 50%; - text-align: right; - } -} - -@media (max-width: 1023px) { - .timeline-date { - position: absolute; - /* On mobile, place the date at the top of the text box left-aligned - * with the other text in the box. When margin-left is zero, the date - * is left-aligned to the left of the icon (right of box-shadow). - * */ - margin-left: calc(var(--icon-width) + var(--icon-side-spacing) - + var(--arrow-size) + var(--content-padding)); - margin-top: .75rem; - } - - .timeline-content.content h3 { - /* Make space for the date text */ - margin-top: 1.25rem; - } -} - -/* Icon background colors */ -.pastel-red { - background-color: #ff7878 !important; -} -[data-theme="dark"] .pastel-red { - background-color: #a44848 !important; -} -.pastel-orange { - background-color: #ffbf76 !important; -} -[data-theme="dark"] .pastel-orange { - background-color: #967147 !important; -} -.pastel-green { - background-color: #8bd6a7 !important; -} -[data-theme="dark"] .pastel-green { - background-color: #649f7a !important; -} -.pastel-blue { - background-color: #8edbec !important; -} -[data-theme="dark"] .pastel-blue { - background-color: #3d7986 !important; -} -.pastel-purple { - background-color: #cbb1ff !important; -} -[data-theme="dark"] .pastel-purple { - background-color: #8775ad !important; -} -.pastel-pink { - background-color: #f6acff !important; -} -[data-theme="dark"] .pastel-pink { - background-color: #79507e !important; -} -.pastel-lime { - background-color: #b6df3a !important; -} -[data-theme="dark"] .pastel-lime { - background-color: #7c9a21 !important; -} -.pastel-dark-blue { - /* Works well for both themes */ - background-color: #576297 !important; -} - -img, video, svg { - max-width: 100% -} - -/* Bounce-in and bounce-out animations, desktop-only */ -@media (min-width: 1023px) { - .timeline-icon--hidden, .timeline-content--hidden, .timeline-date--hidden { - visibility: hidden; - } - .timeline-icon--bounce-in { - animation: icon-bounce 0.6s; - } - .timeline-content--bounce-in, - .timeline-date--bounce-in { - animation: item-bounce-left 0.6s; - } - .timeline-item:nth-child(even) .timeline-content--bounce-in, - .timeline-item:nth-child(even) .timeline-date--bounce-in { - animation-name: item-bounce-right; - } - .timeline-icon--bounce-out { - animation: icon-bounce-out 0.6s; - } - .timeline-content--bounce-out, - .timeline-date--bounce-out { - animation: item-bounce-out 0.6s; - } -} - -@keyframes icon-bounce { - 0% { - opacity: 0; - transform: scale(0.5); - } - 60% { - opacity: 1; - transform: scale(1.2); - } - 100% { - transform: scale(1); - } -} - -@keyframes item-bounce-left { - 0% { - opacity: 0; - transform: translateX(-100px) - } - 60% { - opacity: 1; - transform: translateX(20px) - } - 100% { - transform: translateX(0) - } -} - -@keyframes item-bounce-right { - 0% { - opacity: 0; - transform: translateX(100px) - } - 60% { - opacity: 1; - transform: translateX(-20px) - } - 100% { - transform: translateX(0) - } -} - -@keyframes icon-bounce-out { - 0% { - opacity: 1; - transform: scale(1); - } - - 60% { - transform: scale(1.2); - } - - 100% { - opacity: 0; - transform: scale(0.5); - } -} - -@keyframes item-bounce-out { - 0% { - opacity: 1; - transform: translateX(0); - } - 60% { - transform: translateX(20px); - } - 100% { - opacity: 0; - transform: translateX(-100px); - } -} diff --git a/pydis_site/static/css/timeline/timeline.css b/pydis_site/static/css/timeline/timeline.css new file mode 100644 index 00000000..7f6c4160 --- /dev/null +++ b/pydis_site/static/css/timeline/timeline.css @@ -0,0 +1,432 @@ +/* Adapted from https://codyhouse.co/gem/vertical-timeline/ with significant + * modifications. + * */ + +:root { + --side-spacing: 0; + --background-color: rgb(232, 239, 245); + --accent: hsl(205, 26%, 84%); + + --timeline-line-color: hsl(205, 38%, 89%); + --timeline-line-width: 4px; + --timeline-line-half-width: calc(var(--timeline-line-width) / 2); + + --content-background-color: white; + --content-padding: 1.25rem; + + --icon-width: 60px; + --icon-half-width: calc(var(--icon-width) / 2); + --icon-border-width: 4px; + --icon-border-color: white; + --icon-color: white; + --icon-image-width: 40px; + --icon-size: 1.5rem; + --icon-side-spacing: 1.5rem; + + --date-color: hsl(0, 0%, 48%); + --arrow-size: 7px; +} + +[data-theme="dark"] { + --background-color: #2C2F33; + --content-background-color: #23272A; + --accent: hsl(0, 0%, 34%); + --timeline-line-color: var(--accent); + + --icon-border-color: hsl(0, 0%, 50%); +} + +@media (max-width: 1023px) { + :root { + --side-spacing: 1.25rem; + --icon-side-spacing: var(--side-spacing); + --icon-width: 40px; + --icon-image-width: 30px; + --icon-size: 1.1rem; + } +} + +/* Use a tighter margin and smaller icon dimensions on the most narrow screens. + * */ +@media (max-width: 600px) { + :root { + --side-spacing: .75rem; + --icon-side-spacing: .5rem; + --timeline-line-width: 3px; + --icon-width: 30px; + --icon-border-width: 3px; + --icon-image-width: 24px; + --icon-size: .9rem; + } +} + +/* Containers */ +.timeline { + overflow: hidden; + padding: 3rem 0; + background-color: var(--background-color); +} + +.timeline .container { + position: relative; + padding: 1rem var(--side-spacing); +} + +/* The line that goes through all the icons */ +.timeline .container::before { + content: ''; + position: absolute; + + height: 100%; + width: var(--timeline-line-width); + background-color: var(--timeline-line-color); + z-index: 1; +} + +@media (min-width: 1023px) { + .timeline .container::before { + left: calc(50% - var(--timeline-line-half-width)); + } +} + +@media (max-width: 1023px) { + .timeline .container::before { + margin-left: calc(var(--icon-half-width) - var(--timeline-line-half-width)); + } +} + +/* Each timeline item */ +.timeline-item { + display: flex; + align-items: flex-start; + margin-bottom: 2.5rem; +} + +/* Arrow indicator on the top left/right of each content box */ +.timeline-content::before { + content: ''; + position: absolute; + border: solid var(--arrow-size) transparent; + border-right-color: var(--accent); + height: 0; +} + +@media (max-width: 1023px) { + .timeline-content::before { + margin-left: calc(0px - var(--content-padding) - 14px); + margin-top: calc(0px - var(--arrow-size) / 2); + } +} + +@media (max-width: 600px) { + .timeline-content::before { + margin-top: calc(0px - var(--icon-half-width) + var(--arrow-size)); + } +} + +@media (min-width: 1023px) { + .timeline-content::before { + right: 100%; + margin-top: var(--arrow-size); + } + .timeline-item:nth-child(odd) .timeline-content::before { + border-left-color: var(--accent); + border-right-color: transparent; + left: 100%; + right: unset; + } +} + +/* Visual container of the timeline item */ +.timeline-content.box { + padding: var(--content-padding); + box-shadow: var(--accent) 0px 3px 0px 0px; + background-color: var(--content-background-color); + flex-grow: 1; +} + +@media (min-width: 1023px) { + .timeline-item:nth-child(odd) { + flex-direction: row-reverse; + } + /* On desktop, the content boxes are anchored with respect to the vertical + * center of the screen, set using `left`/`right` properties depending on + * even and odd children of timeline items. + * */ + .timeline-content.box { + width: 45%; + flex-grow: 0; + + position: relative; + + --content-position: calc(50% + var(--icon-border-width) + var(--icon-half-width)); + + left: var(--content-position); + margin-left: var(--icon-side-spacing); + } + .timeline-item:nth-child(odd) .timeline-content.box { + left: unset; + right: var(--content-position); + margin-right: var(--icon-side-spacing); + } +} + +@media (max-width: 1023px) { + .timeline-content.box { + margin-left: calc(var(--icon-side-spacing) + var(--arrow-size)); + } +} + +/* The icon and date components are grouped together in a flexbox to ensure + * there are center-aligned vertically on both desktop and mobile screens. This + * also makes it easy to both have dates' horizontal position follow that of + * the icon, and reverse their ordering for alternate timeline items on + * desktop. + * */ +.timeline-icon-date { + z-index: 4; + display: flex; + align-items: baseline; +} + +@media (min-width: 1023px) { + .timeline-icon-date { + order: 1; + + /* Arbitrary container width to prevent wrapping of the date text */ + width: 50%; + align-items: center; + gap: var(--icon-side-spacing); + + position: absolute; + left: calc(50% - var(--icon-half-width)); + } + + .timeline-item:nth-child(even) .timeline-icon-date { + flex-direction: row-reverse; + left: unset; + right: calc(50% - var(--icon-half-width)); + } +} + +/* Icon */ +.timeline-icon { + display: flex; + justify-content: center; + align-items: center; + flex-shrink: 0; + + border-radius: 50%; + height: var(--icon-width); + width: var(--icon-width); + /* The border does not actually use the border property because this border + * needs to cover the bottom box-shadow, which is easier if the border is + * implemented as a box-shadow. + * */ + box-shadow: 0 0 0 var(--icon-border-width) var(--icon-border-color), + inset 0 2px 0 rgba(0,0,0,.08), + 0 3px 0 4px rgba(0,0,0,.05); + margin-top: var(--icon-border-width); + + /* Font Awesome icon size and color */ + color: var(--icon-color); + font-size: var(--icon-size); +} + +/* Icons that use a custom image */ +.timeline-icon img { + width: var(--icon-image-width); + height: var(--icon-image-width); +} + +/* Icons that use the pydis logo */ +.timeline-icon img.pydis { + /* Visually centering the pydis logo requires a margin adjustment here + * due to the right and bottom box shadow on the logo which is not very + * visible on the page. + * + * XXX: Hardcoded; Unresponsive to actual image dimensions. + * */ + margin-top: 1px; + margin-left: 1px; +} + +.timeline-date { + font-size: .9rem; + color: var(--date-color); +} + +@media (min-width: 1023px) { + .timeline-item:nth-child(even) .timeline-date { + left: auto; + right: 50%; + text-align: right; + } +} + +@media (max-width: 1023px) { + .timeline-date { + position: absolute; + /* On mobile, place the date at the top of the text box left-aligned + * with the other text in the box. When margin-left is zero, the date + * is left-aligned to the left of the icon (right of box-shadow). + * */ + margin-left: calc(var(--icon-width) + var(--icon-side-spacing) + + var(--arrow-size) + var(--content-padding)); + margin-top: .75rem; + } + + .timeline-content.content h3 { + /* Make space for the date text */ + margin-top: 1.25rem; + } +} + +/* Icon background colors */ +.pastel-red { + background-color: #ff7878 !important; +} +[data-theme="dark"] .pastel-red { + background-color: #a44848 !important; +} +.pastel-orange { + background-color: #ffbf76 !important; +} +[data-theme="dark"] .pastel-orange { + background-color: #967147 !important; +} +.pastel-green { + background-color: #8bd6a7 !important; +} +[data-theme="dark"] .pastel-green { + background-color: #649f7a !important; +} +.pastel-blue { + background-color: #8edbec !important; +} +[data-theme="dark"] .pastel-blue { + background-color: #3d7986 !important; +} +.pastel-purple { + background-color: #cbb1ff !important; +} +[data-theme="dark"] .pastel-purple { + background-color: #8775ad !important; +} +.pastel-pink { + background-color: #f6acff !important; +} +[data-theme="dark"] .pastel-pink { + background-color: #79507e !important; +} +.pastel-lime { + background-color: #b6df3a !important; +} +[data-theme="dark"] .pastel-lime { + background-color: #7c9a21 !important; +} +.pastel-dark-blue { + /* Works well for both themes */ + background-color: #576297 !important; +} + +img, video, svg { + max-width: 100% +} + +/* Bounce-in and bounce-out animations, desktop-only */ +@media (min-width: 1023px) { + .timeline-icon--hidden, .timeline-content--hidden, .timeline-date--hidden { + visibility: hidden; + } + .timeline-icon--bounce-in { + animation: icon-bounce 0.6s; + } + .timeline-content--bounce-in, + .timeline-date--bounce-in { + animation: item-bounce-left 0.6s; + } + .timeline-item:nth-child(even) .timeline-content--bounce-in, + .timeline-item:nth-child(even) .timeline-date--bounce-in { + animation-name: item-bounce-right; + } + .timeline-icon--bounce-out { + animation: icon-bounce-out 0.6s; + } + .timeline-content--bounce-out, + .timeline-date--bounce-out { + animation: item-bounce-out 0.6s; + } +} + +@keyframes icon-bounce { + 0% { + opacity: 0; + transform: scale(0.5); + } + 60% { + opacity: 1; + transform: scale(1.2); + } + 100% { + transform: scale(1); + } +} + +@keyframes item-bounce-left { + 0% { + opacity: 0; + transform: translateX(-100px) + } + 60% { + opacity: 1; + transform: translateX(20px) + } + 100% { + transform: translateX(0) + } +} + +@keyframes item-bounce-right { + 0% { + opacity: 0; + transform: translateX(100px) + } + 60% { + opacity: 1; + transform: translateX(-20px) + } + 100% { + transform: translateX(0) + } +} + +@keyframes icon-bounce-out { + 0% { + opacity: 1; + transform: scale(1); + } + + 60% { + transform: scale(1.2); + } + + 100% { + opacity: 0; + transform: scale(0.5); + } +} + +@keyframes item-bounce-out { + 0% { + opacity: 1; + transform: translateX(0); + } + 60% { + transform: translateX(20px); + } + 100% { + opacity: 0; + transform: translateX(-100px); + } +} -- cgit v1.2.3 From 046199eb91008ba79170b58406a7fadc43f193ab Mon Sep 17 00:00:00 2001 From: hedy Date: Sat, 6 Apr 2024 12:56:13 +0800 Subject: Timeline: Use pydis blurple as default icon background color --- pydis_site/apps/timeline/apps.py | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/pydis_site/apps/timeline/apps.py b/pydis_site/apps/timeline/apps.py index 8f27297f..37a61e93 100644 --- a/pydis_site/apps/timeline/apps.py +++ b/pydis_site/apps/timeline/apps.py @@ -28,14 +28,19 @@ class TimelineConfig(AppConfig): # Strip `.md` file extension from filename and split it into the # date (for sorting) and slug (for linking). key, slug = path.name[:-3].split("_") + + icon_color = metadata.get("icon_color") + # Use the pydis blurple as the default background color. + if not icon_color or metadata["icon"] == "pydis": + icon_color = "has-background-primary" + entry = { "key": key, "slug": slug, "title": metadata["title"], "date": metadata["date"], "icon": metadata["icon"], - # This key might not be used if the icon uses the pydis logo. - "icon_color": metadata.get("icon_color"), + "icon_color": icon_color, "content": html, } -- cgit v1.2.3 From 0626af3afe33a579c42990f90b7f63ea8344a46b Mon Sep 17 00:00:00 2001 From: hedy Date: Sat, 6 Apr 2024 12:56:32 +0800 Subject: Timeline: More muted heading links for entries --- pydis_site/static/css/timeline/timeline.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/pydis_site/static/css/timeline/timeline.css b/pydis_site/static/css/timeline/timeline.css index 7f6c4160..a5072998 100644 --- a/pydis_site/static/css/timeline/timeline.css +++ b/pydis_site/static/css/timeline/timeline.css @@ -145,6 +145,15 @@ flex-grow: 1; } +/* Don't make the titles show up as the link colors before hover. */ +.timeline-content h3 a { + color: inherit; +} + +.timeline-content h3 a:hover { + color: #7289DA; +} + @media (min-width: 1023px) { .timeline-item:nth-child(odd) { flex-direction: row-reverse; -- cgit v1.2.3 From fe1f42d7930c7cb07dcf3621b3608d18d5a7cd06 Mon Sep 17 00:00:00 2001 From: hedy Date: Sat, 6 Apr 2024 13:06:25 +0800 Subject: Timeline: Add basic test for the timeline view --- pydis_site/apps/timeline/tests/__init__.py | 0 pydis_site/apps/timeline/tests/test_views.py | 10 ++++++++++ 2 files changed, 10 insertions(+) create mode 100644 pydis_site/apps/timeline/tests/__init__.py create mode 100644 pydis_site/apps/timeline/tests/test_views.py diff --git a/pydis_site/apps/timeline/tests/__init__.py b/pydis_site/apps/timeline/tests/__init__.py new file mode 100644 index 00000000..e69de29b diff --git a/pydis_site/apps/timeline/tests/test_views.py b/pydis_site/apps/timeline/tests/test_views.py new file mode 100644 index 00000000..a3e2e805 --- /dev/null +++ b/pydis_site/apps/timeline/tests/test_views.py @@ -0,0 +1,10 @@ +from django.test import TestCase +from django.urls import reverse + + +class TestIndexReturns200(TestCase): + def test_index_returns_200(self): + """Check that the index page returns a HTTP 200 response.""" + url = reverse('timeline:index') + resp = self.client.get(url) + self.assertEqual(resp.status_code, 200) -- cgit v1.2.3 From 40881cdd1021df462f8cd463f694f380c1f711e0 Mon Sep 17 00:00:00 2001 From: ~hedy Date: Fri, 3 May 2024 17:15:54 +0800 Subject: Timeline: Migrate content - There might be missing HTML that was stripped by `markdownify` - Slugs were converted from kebab-casing titles and editorizing to make everything shorter (thanks to oil.nvim) - I should've just used Python and arrow (for the dates), but before I realized arrow existed Nushell had the best built-in support. - Markdown is wrapped at 80 --- .../entries/2017-01-08_python-discord-is-created.md | 9 +++++++++ .../apps/timeline/entries/2017-11-10_1000-members.md | 10 ++++++++++ .../timeline/entries/2018-02-03_our-logo-is-born.md | 9 +++++++++ ...000-members-pythondiscord-com-and-python-are-live.md | 11 +++++++++++ .../2018-03-23_first-code-jam-with-the-theme-snakes.md | 12 ++++++++++++ .../entries/2018-05-21_privacy-policy-created.md | 12 ++++++++++++ .../2018-06-09_do-you-even-python-and-pydis-merger.md | 13 +++++++++++++ ...ydis-hits-5000-members-and-partners-with-r-python.md | 10 ++++++++++ .../2018-07-10_pydis-is-now-partnered-with-discord.md | 10 ++++++++++ .../2018-10-01_first-hacktoberfest-pydis-event.md | 12 ++++++++++++ .../apps/timeline/entries/2018-11-24_10000-members.md | 9 +++++++++ ...018-12-19_django-simple-bulma-is-released-on-pypi.md | 11 +++++++++++ .../apps/timeline/entries/2019-04-08_15000-members.md | 10 ++++++++++ ...019-09-15_the-django-rewrite-of-pythondiscord-com.md | 10 ++++++++++ .../2019-09-22_sebastiaan-zeef-becomes-an-owner.md | 9 +++++++++ .../entries/2019-10-26_code-of-conduct-created.md | 10 ++++++++++ .../apps/timeline/entries/2019-12-22_30000-members.md | 10 ++++++++++ .../timeline/entries/2020-01-17_pydis-sixth-code-jam.md | 16 ++++++++++++++++ .../entries/2020-04-05_new-help-channel-system.md | 11 +++++++++++ .../apps/timeline/entries/2020-04-14_40000-members.md | 8 ++++++++ .../timeline/entries/2020-04-17_pydis-game-jam-2020.md | 15 +++++++++++++++ .../timeline/entries/2020-05-25_modmail-is-now-live.md | 11 +++++++++++ ...-05-28_python-discord-is-now-listed-on-python-org.md | 11 +++++++++++ ...-04_python-discord-public-statistics-are-now-live.md | 10 ++++++++++ .../entries/2020-07-31_pydis-summer-code-jam-2020.md | 14 ++++++++++++++ ...n-discord-is-now-the-new-home-of-the-pyweek-event.md | 10 ++++++++++ .../2020-10-21_2020-cpython-core-developer-q-a.md | 9 +++++++++ .../apps/timeline/entries/2020-10-22_100000-members.md | 10 ++++++++++ ...9_we-migrate-all-our-infrastructure-to-kubernetes.md | 10 ++++++++++ .../apps/timeline/entries/2020-12-01_advent-of-code.md | 11 +++++++++++ .../entries/2021-02-08_we-release-the-pep-8-song.md | 14 ++++++++++++++ .../apps/timeline/entries/2021-02-18_150000-members.md | 8 ++++++++ ...21-03-01_leon-sandoy-appears-on-talk-python-to-me.md | 16 ++++++++++++++++ .../2021-03-13_new-feature-weekly-discussion-channel.md | 16 ++++++++++++++++ .../entries/2021-03-13_teaching-python-podcast.md | 14 ++++++++++++++ .../2021-03-21_summer-code-jam-2020-highlights.md | 15 +++++++++++++++ .../entries/2021-04-23_owners-become-psf-fellows.md | 10 ++++++++++ .../entries/2021-05-24_inaugural-run-of-pixels.md | 12 ++++++++++++ .../entries/2021-05-24_partnership-with-black.md | 10 ++++++++++ .../entries/2021-07-09_summer-code-jam-2021-cj8.md | 11 +++++++++++ .../entries/2021-10-04_python-310-release-stream.md | 16 ++++++++++++++++ .../apps/timeline/entries/2022-01-19_300000-members.md | 9 +++++++++ .../timeline/entries/2022-02-02_smarter-resources.md | 11 +++++++++++ .../apps/timeline/entries/2022-02-09_events-team.md | 9 +++++++++ .../apps/timeline/entries/2022-02-12_trivia-night.md | 11 +++++++++++ .../apps/timeline/entries/2022-02-21_sir-robin.md | 9 +++++++++ .../entries/2022-05-19_partnership-with-pyqtgraph.md | 9 +++++++++ .../entries/2022-07-21_summer-code-jam-2022-cj9.md | 17 +++++++++++++++++ .../entries/2022-10-24_python-311-release-stream.md | 17 +++++++++++++++++ .../2022-11-25_switch-to-forum-based-help-system.md | 11 +++++++++++ .../2023-01-30_retirement-of-joe-and-sebastiaan.md | 10 ++++------ .../timeline/entries/2023-07-11_new-paste-service.md | 11 ++++++----- 52 files changed, 578 insertions(+), 11 deletions(-) create mode 100644 pydis_site/apps/timeline/entries/2017-01-08_python-discord-is-created.md create mode 100644 pydis_site/apps/timeline/entries/2017-11-10_1000-members.md create mode 100644 pydis_site/apps/timeline/entries/2018-02-03_our-logo-is-born.md create mode 100644 pydis_site/apps/timeline/entries/2018-03-04_pydis-hits-2000-members-pythondiscord-com-and-python-are-live.md create mode 100644 pydis_site/apps/timeline/entries/2018-03-23_first-code-jam-with-the-theme-snakes.md create mode 100644 pydis_site/apps/timeline/entries/2018-05-21_privacy-policy-created.md create mode 100644 pydis_site/apps/timeline/entries/2018-06-09_do-you-even-python-and-pydis-merger.md create mode 100644 pydis_site/apps/timeline/entries/2018-06-20_pydis-hits-5000-members-and-partners-with-r-python.md create mode 100644 pydis_site/apps/timeline/entries/2018-07-10_pydis-is-now-partnered-with-discord.md create mode 100644 pydis_site/apps/timeline/entries/2018-10-01_first-hacktoberfest-pydis-event.md create mode 100644 pydis_site/apps/timeline/entries/2018-11-24_10000-members.md create mode 100644 pydis_site/apps/timeline/entries/2018-12-19_django-simple-bulma-is-released-on-pypi.md create mode 100644 pydis_site/apps/timeline/entries/2019-04-08_15000-members.md create mode 100644 pydis_site/apps/timeline/entries/2019-09-15_the-django-rewrite-of-pythondiscord-com.md create mode 100644 pydis_site/apps/timeline/entries/2019-09-22_sebastiaan-zeef-becomes-an-owner.md create mode 100644 pydis_site/apps/timeline/entries/2019-10-26_code-of-conduct-created.md create mode 100644 pydis_site/apps/timeline/entries/2019-12-22_30000-members.md create mode 100644 pydis_site/apps/timeline/entries/2020-01-17_pydis-sixth-code-jam.md create mode 100644 pydis_site/apps/timeline/entries/2020-04-05_new-help-channel-system.md create mode 100644 pydis_site/apps/timeline/entries/2020-04-14_40000-members.md create mode 100644 pydis_site/apps/timeline/entries/2020-04-17_pydis-game-jam-2020.md create mode 100644 pydis_site/apps/timeline/entries/2020-05-25_modmail-is-now-live.md create mode 100644 pydis_site/apps/timeline/entries/2020-05-28_python-discord-is-now-listed-on-python-org.md create mode 100644 pydis_site/apps/timeline/entries/2020-06-04_python-discord-public-statistics-are-now-live.md create mode 100644 pydis_site/apps/timeline/entries/2020-07-31_pydis-summer-code-jam-2020.md create mode 100644 pydis_site/apps/timeline/entries/2020-08-16_python-discord-is-now-the-new-home-of-the-pyweek-event.md create mode 100644 pydis_site/apps/timeline/entries/2020-10-21_2020-cpython-core-developer-q-a.md create mode 100644 pydis_site/apps/timeline/entries/2020-10-22_100000-members.md create mode 100644 pydis_site/apps/timeline/entries/2020-11-29_we-migrate-all-our-infrastructure-to-kubernetes.md create mode 100644 pydis_site/apps/timeline/entries/2020-12-01_advent-of-code.md create mode 100644 pydis_site/apps/timeline/entries/2021-02-08_we-release-the-pep-8-song.md create mode 100644 pydis_site/apps/timeline/entries/2021-02-18_150000-members.md create mode 100644 pydis_site/apps/timeline/entries/2021-03-01_leon-sandoy-appears-on-talk-python-to-me.md create mode 100644 pydis_site/apps/timeline/entries/2021-03-13_new-feature-weekly-discussion-channel.md create mode 100644 pydis_site/apps/timeline/entries/2021-03-13_teaching-python-podcast.md create mode 100644 pydis_site/apps/timeline/entries/2021-03-21_summer-code-jam-2020-highlights.md create mode 100644 pydis_site/apps/timeline/entries/2021-04-23_owners-become-psf-fellows.md create mode 100644 pydis_site/apps/timeline/entries/2021-05-24_inaugural-run-of-pixels.md create mode 100644 pydis_site/apps/timeline/entries/2021-05-24_partnership-with-black.md create mode 100644 pydis_site/apps/timeline/entries/2021-07-09_summer-code-jam-2021-cj8.md create mode 100644 pydis_site/apps/timeline/entries/2021-10-04_python-310-release-stream.md create mode 100644 pydis_site/apps/timeline/entries/2022-01-19_300000-members.md create mode 100644 pydis_site/apps/timeline/entries/2022-02-02_smarter-resources.md create mode 100644 pydis_site/apps/timeline/entries/2022-02-09_events-team.md create mode 100644 pydis_site/apps/timeline/entries/2022-02-12_trivia-night.md create mode 100644 pydis_site/apps/timeline/entries/2022-02-21_sir-robin.md create mode 100644 pydis_site/apps/timeline/entries/2022-05-19_partnership-with-pyqtgraph.md create mode 100644 pydis_site/apps/timeline/entries/2022-07-21_summer-code-jam-2022-cj9.md create mode 100644 pydis_site/apps/timeline/entries/2022-10-24_python-311-release-stream.md create mode 100644 pydis_site/apps/timeline/entries/2022-11-25_switch-to-forum-based-help-system.md diff --git a/pydis_site/apps/timeline/entries/2017-01-08_python-discord-is-created.md b/pydis_site/apps/timeline/entries/2017-01-08_python-discord-is-created.md new file mode 100644 index 00000000..31775b3b --- /dev/null +++ b/pydis_site/apps/timeline/entries/2017-01-08_python-discord-is-created.md @@ -0,0 +1,9 @@ +--- +title: Python Discord is created +date: Jan 8th, 2017 +icon: pydis +--- + +**Joe Banks** becomes one of the owners around 3 days after it is created, and +**Leon Sandøy** (lemon) joins the owner team later in the year, when the +community has around 300 members. diff --git a/pydis_site/apps/timeline/entries/2017-11-10_1000-members.md b/pydis_site/apps/timeline/entries/2017-11-10_1000-members.md new file mode 100644 index 00000000..dd4ec829 --- /dev/null +++ b/pydis_site/apps/timeline/entries/2017-11-10_1000-members.md @@ -0,0 +1,10 @@ +--- +title: Python Discord hits 1,000 members +date: Nov 10th, 2017 +icon: fa fa-users +icon_color: pastel-dark-blue +--- + +Our main source of new users at this point is a post on Reddit that happens to +get very good SEO. We are one of the top 10 search engine hits for the search +term "python discord". diff --git a/pydis_site/apps/timeline/entries/2018-02-03_our-logo-is-born.md b/pydis_site/apps/timeline/entries/2018-02-03_our-logo-is-born.md new file mode 100644 index 00000000..1cb2edb1 --- /dev/null +++ b/pydis_site/apps/timeline/entries/2018-02-03_our-logo-is-born.md @@ -0,0 +1,9 @@ +--- +title: Our logo is born. Thanks @Aperture! +date: Feb 3rd, 2018 +icon: pydis +--- + +

+ +

diff --git a/pydis_site/apps/timeline/entries/2018-03-04_pydis-hits-2000-members-pythondiscord-com-and-python-are-live.md b/pydis_site/apps/timeline/entries/2018-03-04_pydis-hits-2000-members-pythondiscord-com-and-python-are-live.md new file mode 100644 index 00000000..31ee1578 --- /dev/null +++ b/pydis_site/apps/timeline/entries/2018-03-04_pydis-hits-2000-members-pythondiscord-com-and-python-are-live.md @@ -0,0 +1,11 @@ +--- +title: PyDis hits 2,000 members; pythondiscord.com and @Python are live +date: Mar 4th, 2018 +icon: fa fa-users +icon_color: pastel-dark-blue +--- + +The public moderation bot we're using at the time, Rowboat, announces it will be +shutting down. We decide that we'll write our own bot to handle moderation, so +that we can have more control over its features. We also buy a domain and start +making a website in Flask. diff --git a/pydis_site/apps/timeline/entries/2018-03-23_first-code-jam-with-the-theme-snakes.md b/pydis_site/apps/timeline/entries/2018-03-23_first-code-jam-with-the-theme-snakes.md new file mode 100644 index 00000000..48b301e3 --- /dev/null +++ b/pydis_site/apps/timeline/entries/2018-03-23_first-code-jam-with-the-theme-snakes.md @@ -0,0 +1,12 @@ +--- +title: First code jam with the theme “snakes” +date: Mar 23rd, 2018 +icon: fa fa-dice +icon_color: pastel-blue +--- + +Our very first Code Jam attracts a handful of users who work in random teams of +2. We ask our participants to write a snake-themed Discord bot. Most of the code +written for this jam still lives on in Sir Lancebot, and you can play with it by +using the `.snakes` command. For more information on this event, see [the event +page](https://pythondiscord.com/pages/code-jams/code-jam-1-snakes-bot/) diff --git a/pydis_site/apps/timeline/entries/2018-05-21_privacy-policy-created.md b/pydis_site/apps/timeline/entries/2018-05-21_privacy-policy-created.md new file mode 100644 index 00000000..2202a5a8 --- /dev/null +++ b/pydis_site/apps/timeline/entries/2018-05-21_privacy-policy-created.md @@ -0,0 +1,12 @@ +--- +title: The privacy policy is created +date: May 21st, 2018 +icon: fa fa-scroll +icon_color: pastel-lime +--- + +Since data privacy is quite important to us, we create a privacy page pretty +much as soon as our new bot and site starts collecting some data. To this day, +we keep [our privacy policy](https://pythondiscord.com/pages/privacy/) up to +date with all changes, and since April 2020 we've started doing [monthly data +reviews](https://pythondiscord.notion.site/6784e3a9752444e89d19e65fd4510d8d). diff --git a/pydis_site/apps/timeline/entries/2018-06-09_do-you-even-python-and-pydis-merger.md b/pydis_site/apps/timeline/entries/2018-06-09_do-you-even-python-and-pydis-merger.md new file mode 100644 index 00000000..4390708e --- /dev/null +++ b/pydis_site/apps/timeline/entries/2018-06-09_do-you-even-python-and-pydis-merger.md @@ -0,0 +1,13 @@ +--- +title: Do You Even Python and PyDis merger +date: Jun 9th, 2018 +icon: fa fa-handshake +icon_color: pastel-pink +--- + +At this point in time, there are only two serious Python communities on Discord +- Ours, and one called Do You Even Python. We approach the owners of DYEP with a +bold proposal - let's shut down their community, replace it with links to ours, +and in return we will let their staff join our staff. This gives us a big boost +in members, and eventually leads to @eivl and @Mr. Hemlock joining our Admin +team diff --git a/pydis_site/apps/timeline/entries/2018-06-20_pydis-hits-5000-members-and-partners-with-r-python.md b/pydis_site/apps/timeline/entries/2018-06-20_pydis-hits-5000-members-and-partners-with-r-python.md new file mode 100644 index 00000000..c0a1d391 --- /dev/null +++ b/pydis_site/apps/timeline/entries/2018-06-20_pydis-hits-5000-members-and-partners-with-r-python.md @@ -0,0 +1,10 @@ +--- +title: PyDis hits 5,000 members and partners with r/Python +date: Jun 20th, 2018 +icon: fa fa-users +icon_color: pastel-dark-blue +--- + +As we continue to grow, we approach the r/Python subreddit and ask to become +their official Discord community. They agree, and we become listed in their +sidebar, giving us yet another source of new members. diff --git a/pydis_site/apps/timeline/entries/2018-07-10_pydis-is-now-partnered-with-discord.md b/pydis_site/apps/timeline/entries/2018-07-10_pydis-is-now-partnered-with-discord.md new file mode 100644 index 00000000..f8bf226f --- /dev/null +++ b/pydis_site/apps/timeline/entries/2018-07-10_pydis-is-now-partnered-with-discord.md @@ -0,0 +1,10 @@ +--- +title: PyDis is now partnered with Discord; the vanity URL discord.gg/python is created +date: Jul 10th, 2018 +icon: fa fa-handshake +icon_color: pastel-pink +--- + +After being rejected for their Partner program several times, we finally get +approved. The recent partnership with the r/Python subreddit plays a significant +role in qualifying us for this partnership. diff --git a/pydis_site/apps/timeline/entries/2018-10-01_first-hacktoberfest-pydis-event.md b/pydis_site/apps/timeline/entries/2018-10-01_first-hacktoberfest-pydis-event.md new file mode 100644 index 00000000..305bc8df --- /dev/null +++ b/pydis_site/apps/timeline/entries/2018-10-01_first-hacktoberfest-pydis-event.md @@ -0,0 +1,12 @@ +--- +title: First Hacktoberfest PyDis event; @Sir Lancebot is created +date: Oct 1st, 2018 +icon: fa fa-dice +icon_color: pastel-blue +--- + +We create a second bot for our community and fill it up with simple, fun and +relatively easy issues. The idea is to create an approachable arena for our +members to cut their open-source teeth on, and to provide lots of help and hand- +holding for those who get stuck. We're training our members to be productive +contributors in the open-source ecosystem. diff --git a/pydis_site/apps/timeline/entries/2018-11-24_10000-members.md b/pydis_site/apps/timeline/entries/2018-11-24_10000-members.md new file mode 100644 index 00000000..4eca7453 --- /dev/null +++ b/pydis_site/apps/timeline/entries/2018-11-24_10000-members.md @@ -0,0 +1,9 @@ +--- +title: PyDis hits 10,000 members +date: Nov 24th, 2018 +icon: fa fa-users +icon_color: pastel-dark-blue +--- + +We partner with RLBot, move from GitLab to GitHub, and start putting together +the first Advent of Code event. diff --git a/pydis_site/apps/timeline/entries/2018-12-19_django-simple-bulma-is-released-on-pypi.md b/pydis_site/apps/timeline/entries/2018-12-19_django-simple-bulma-is-released-on-pypi.md new file mode 100644 index 00000000..a262b000 --- /dev/null +++ b/pydis_site/apps/timeline/entries/2018-12-19_django-simple-bulma-is-released-on-pypi.md @@ -0,0 +1,11 @@ +--- +title: django-simple-bulma is released on PyPi +date: Dec 19th, 2018 +icon: fa fa-code +icon_color: pastel-orange +--- + +Our very first package on PyPI, [django-simple- +bulma](https://pypi.org/project/django-simple-bulma/) is a package that sets up +the Bulma CSS framework for your Django application and lets you configure +everything in settings.py. diff --git a/pydis_site/apps/timeline/entries/2019-04-08_15000-members.md b/pydis_site/apps/timeline/entries/2019-04-08_15000-members.md new file mode 100644 index 00000000..330bbd15 --- /dev/null +++ b/pydis_site/apps/timeline/entries/2019-04-08_15000-members.md @@ -0,0 +1,10 @@ +--- +title: PyDis hits 15,000 members; the “hot ones special” video is released +date: Apr 8th, 2019 +icon: fa fa-users +icon_color: pastel-dark-blue +--- + +
+ +
diff --git a/pydis_site/apps/timeline/entries/2019-09-15_the-django-rewrite-of-pythondiscord-com.md b/pydis_site/apps/timeline/entries/2019-09-15_the-django-rewrite-of-pythondiscord-com.md new file mode 100644 index 00000000..b18975a8 --- /dev/null +++ b/pydis_site/apps/timeline/entries/2019-09-15_the-django-rewrite-of-pythondiscord-com.md @@ -0,0 +1,10 @@ +--- +title: The Django rewrite of pythondiscord.com is now live! +date: Sep 15, 2019 +icon: fa fa-code +icon_color: pastel-orange +--- + +The site is getting more and more complex, and it's time for a rewrite. We +decide to go for a different stack, and build a website based on Django, DRF, +Bulma and PostgreSQL. diff --git a/pydis_site/apps/timeline/entries/2019-09-22_sebastiaan-zeef-becomes-an-owner.md b/pydis_site/apps/timeline/entries/2019-09-22_sebastiaan-zeef-becomes-an-owner.md new file mode 100644 index 00000000..504c06e1 --- /dev/null +++ b/pydis_site/apps/timeline/entries/2019-09-22_sebastiaan-zeef-becomes-an-owner.md @@ -0,0 +1,9 @@ +--- +title: Sebastiaan Zeef becomes an owner +date: Sept 22nd, 2019 +icon: pydis +--- + +After being a long time active contributor to our projects and the driving force +behind many of our events, Sebastiaan Zeef joins the Owners Team alongside Joe & +Leon. diff --git a/pydis_site/apps/timeline/entries/2019-10-26_code-of-conduct-created.md b/pydis_site/apps/timeline/entries/2019-10-26_code-of-conduct-created.md new file mode 100644 index 00000000..a4559c31 --- /dev/null +++ b/pydis_site/apps/timeline/entries/2019-10-26_code-of-conduct-created.md @@ -0,0 +1,10 @@ +--- +title: The code of conduct is created +date: Oct 26th, 2019 +icon: fa fa-scroll +icon_color: pastel-lime +--- + +Inspired by the Adafruit, Rust and Django communities, an essential community +pillar is created; Our [Code of Conduct.](https://pythondiscord.com/pages/code- +of-conduct/) diff --git a/pydis_site/apps/timeline/entries/2019-12-22_30000-members.md b/pydis_site/apps/timeline/entries/2019-12-22_30000-members.md new file mode 100644 index 00000000..273f46ad --- /dev/null +++ b/pydis_site/apps/timeline/entries/2019-12-22_30000-members.md @@ -0,0 +1,10 @@ +--- +title: PyDis hits 30,000 members +date: Dec 22nd, 2019 +icon: fa fa-users +icon_color: pastel-dark-blue +--- + +More than tripling in size since the year before, the community hits 30000 +users. At this point, we're probably the largest Python chat community on the +planet. diff --git a/pydis_site/apps/timeline/entries/2020-01-17_pydis-sixth-code-jam.md b/pydis_site/apps/timeline/entries/2020-01-17_pydis-sixth-code-jam.md new file mode 100644 index 00000000..45048a8f --- /dev/null +++ b/pydis_site/apps/timeline/entries/2020-01-17_pydis-sixth-code-jam.md @@ -0,0 +1,16 @@ +--- +title: PyDis sixth code jam with the theme “Ancient technology” and the technology Kivy +date: Jan 17, 2020 +icon: fa fa-dice +icon_color: pastel-blue +--- + +Our Code Jams are becoming an increasingly big deal, and the Kivy core +developers join us to judge the event and help out our members during the event. +One of them, @tshirtman, even joins our staff! + +
+ +
diff --git a/pydis_site/apps/timeline/entries/2020-04-05_new-help-channel-system.md b/pydis_site/apps/timeline/entries/2020-04-05_new-help-channel-system.md new file mode 100644 index 00000000..62db5434 --- /dev/null +++ b/pydis_site/apps/timeline/entries/2020-04-05_new-help-channel-system.md @@ -0,0 +1,11 @@ +--- +title: The new help channel system is live +date: Apr 5th, 2020 +icon: fa fa-comments +icon_color: pastel-green +--- + +We release our dynamic help-channel system, which allows you to claim your very +own help channel instead of fighting over the static help channels. We release a +[Help Channel Guide](https://pythondiscord.com/pages/resources/guides/help- +channels/) to help our members fully understand how the system works. diff --git a/pydis_site/apps/timeline/entries/2020-04-14_40000-members.md b/pydis_site/apps/timeline/entries/2020-04-14_40000-members.md new file mode 100644 index 00000000..9ebd7fe8 --- /dev/null +++ b/pydis_site/apps/timeline/entries/2020-04-14_40000-members.md @@ -0,0 +1,8 @@ +--- +title: Python Discord hits 40,000 members, and is now bigger than Liechtenstein. +date: Apr 14, 2020 +icon: fa fa-users +icon_color: pastel-dark-blue +--- + +![](https://cdn.discordapp.com/attachments/354619224620138496/699666518476324954/unknown.png) diff --git a/pydis_site/apps/timeline/entries/2020-04-17_pydis-game-jam-2020.md b/pydis_site/apps/timeline/entries/2020-04-17_pydis-game-jam-2020.md new file mode 100644 index 00000000..b3b215ac --- /dev/null +++ b/pydis_site/apps/timeline/entries/2020-04-17_pydis-game-jam-2020.md @@ -0,0 +1,15 @@ +--- +title: PyDis Game Jam 2020 with the “Three of a Kind” theme and Arcade as the technology +date: Apr 17th, 2020 +icon: fa fa-gamepad +icon_color: pastel-purple +--- + +The creator of Arcade, Paul Vincent Craven, joins us as a judge. Several of the +Code Jam participants also end up getting involved contributing to the Arcade +repository. + +
+ +
diff --git a/pydis_site/apps/timeline/entries/2020-05-25_modmail-is-now-live.md b/pydis_site/apps/timeline/entries/2020-05-25_modmail-is-now-live.md new file mode 100644 index 00000000..28a75d8b --- /dev/null +++ b/pydis_site/apps/timeline/entries/2020-05-25_modmail-is-now-live.md @@ -0,0 +1,11 @@ +--- +title: ModMail is now live +date: May 25th, 2020 +icon: fa fa-comments +icon_color: pastel-green +--- + +Having originally planned to write our own ModMail bot from scratch, we come +across an exceptionally good [ModMail bot by +kyb3r](https://github.com/kyb3r/modmail) and decide to just self-host that one +instead. diff --git a/pydis_site/apps/timeline/entries/2020-05-28_python-discord-is-now-listed-on-python-org.md b/pydis_site/apps/timeline/entries/2020-05-28_python-discord-is-now-listed-on-python-org.md new file mode 100644 index 00000000..e5b8f65f --- /dev/null +++ b/pydis_site/apps/timeline/entries/2020-05-28_python-discord-is-now-listed-on-python-org.md @@ -0,0 +1,11 @@ +--- +title: Python Discord is now listed on python.org/community +date: May 28th, 2020 +icon: fa fa-handshake +icon_color: pastel-pink +--- + +After working towards this goal for months, we finally work out an arrangement +with the PSF that allows us to be listed on that most holiest of websites: +https://python.org/. [There was much +rejoicing.](https://youtu.be/yciX2meIkXI?t=3) diff --git a/pydis_site/apps/timeline/entries/2020-06-04_python-discord-public-statistics-are-now-live.md b/pydis_site/apps/timeline/entries/2020-06-04_python-discord-public-statistics-are-now-live.md new file mode 100644 index 00000000..f92628d1 --- /dev/null +++ b/pydis_site/apps/timeline/entries/2020-06-04_python-discord-public-statistics-are-now-live.md @@ -0,0 +1,10 @@ +--- +title: Python Discord Public Statistics are now live +date: Jun 4th, 2020 +icon: fa fa-chart-bar +icon_color: pastel-red +--- + +After getting numerous requests to publish beautiful data on member count and +channel use, we create +[stats.pythondiscord.com](https://stats.pythondiscord.com/) for all to enjoy. diff --git a/pydis_site/apps/timeline/entries/2020-07-31_pydis-summer-code-jam-2020.md b/pydis_site/apps/timeline/entries/2020-07-31_pydis-summer-code-jam-2020.md new file mode 100644 index 00000000..0fe8df6b --- /dev/null +++ b/pydis_site/apps/timeline/entries/2020-07-31_pydis-summer-code-jam-2020.md @@ -0,0 +1,14 @@ +--- +title: PyDis summer code jam 2020 with the theme “Early Internet” and Django as the technology +date: Jul 31st, 2020 +icon: fa fa-dice +icon_color: pastel-blue +--- + +Sponsored by the Django Software Foundation and JetBrains, the Summer Code Jam +for 2020 attracts hundreds of participants, and sees the creation of some +fantastic projects. Check them out in our judge stream below: + +
+ +
diff --git a/pydis_site/apps/timeline/entries/2020-08-16_python-discord-is-now-the-new-home-of-the-pyweek-event.md b/pydis_site/apps/timeline/entries/2020-08-16_python-discord-is-now-the-new-home-of-the-pyweek-event.md new file mode 100644 index 00000000..2fcd7ec5 --- /dev/null +++ b/pydis_site/apps/timeline/entries/2020-08-16_python-discord-is-now-the-new-home-of-the-pyweek-event.md @@ -0,0 +1,10 @@ +--- +title: Python Discord is now the new home of the PyWeek event! +date: Aug 16th, 2020 +icon: fa fa-handshake +icon_color: pastel-pink +--- + +PyWeek, a game jam that has been running since 2005, joins Python Discord as one +of our official events. Find more information about PyWeek on [their official +website](https://pyweek.org/). diff --git a/pydis_site/apps/timeline/entries/2020-10-21_2020-cpython-core-developer-q-a.md b/pydis_site/apps/timeline/entries/2020-10-21_2020-cpython-core-developer-q-a.md new file mode 100644 index 00000000..a7ddef89 --- /dev/null +++ b/pydis_site/apps/timeline/entries/2020-10-21_2020-cpython-core-developer-q-a.md @@ -0,0 +1,9 @@ +--- +title: Python Discord hosts the 2020 CPython Core Developer Q&A +date: Oct 21st, 2020 +icon: pydis +--- + +
+ +
diff --git a/pydis_site/apps/timeline/entries/2020-10-22_100000-members.md b/pydis_site/apps/timeline/entries/2020-10-22_100000-members.md new file mode 100644 index 00000000..3f196f2c --- /dev/null +++ b/pydis_site/apps/timeline/entries/2020-10-22_100000-members.md @@ -0,0 +1,10 @@ +--- +title: Python Discord hits 100,000 members! +date: Oct 22nd, 2020 +icon: fa fa-users +icon_color: pastel-dark-blue +--- + +Only six months after hitting 40,000 users, we hit 100,000 users. A monumental +milestone, and one we're very proud of. To commemorate it, we create this +timeline. diff --git a/pydis_site/apps/timeline/entries/2020-11-29_we-migrate-all-our-infrastructure-to-kubernetes.md b/pydis_site/apps/timeline/entries/2020-11-29_we-migrate-all-our-infrastructure-to-kubernetes.md new file mode 100644 index 00000000..00916c2a --- /dev/null +++ b/pydis_site/apps/timeline/entries/2020-11-29_we-migrate-all-our-infrastructure-to-kubernetes.md @@ -0,0 +1,10 @@ +--- +title: We migrate all our infrastructure to Kubernetes +date: Nov 29th, 2020 +icon: fa fa-wrench +icon_color: pastel-orange +--- + +As our tech stack grows, we decide to migrate all our services over to a +container orchestration paradigm via Kubernetes. This gives us better control +and scalability. **Joe Banks** takes on the role as DevOps Lead. diff --git a/pydis_site/apps/timeline/entries/2020-12-01_advent-of-code.md b/pydis_site/apps/timeline/entries/2020-12-01_advent-of-code.md new file mode 100644 index 00000000..a4f0adda --- /dev/null +++ b/pydis_site/apps/timeline/entries/2020-12-01_advent-of-code.md @@ -0,0 +1,11 @@ +--- +title: Advent of Code attracts hundreds of participants +date: December 1st - 25th, 2020 +icon: fa fa-snowflake-o +icon_color: pastel-red +--- + +A total of 443 Python Discord members sign up to be part of [Eric Wastl's +excellent Advent of Code event](https://adventofcode.com/). As always, we +provide dedicated announcements, scoreboards, bot commands and channels for our +members to enjoy the event in. diff --git a/pydis_site/apps/timeline/entries/2021-02-08_we-release-the-pep-8-song.md b/pydis_site/apps/timeline/entries/2021-02-08_we-release-the-pep-8-song.md new file mode 100644 index 00000000..de97b1f4 --- /dev/null +++ b/pydis_site/apps/timeline/entries/2021-02-08_we-release-the-pep-8-song.md @@ -0,0 +1,14 @@ +--- +title: We release The PEP 8 song +date: February 8th, 2021 +icon: fa fa-music +icon_color: pastel-blue +--- + +We release the PEP 8 song on our YouTube channel, which finds tens of thousands +of listeners! + +
+ +
diff --git a/pydis_site/apps/timeline/entries/2021-02-18_150000-members.md b/pydis_site/apps/timeline/entries/2021-02-18_150000-members.md new file mode 100644 index 00000000..9a252255 --- /dev/null +++ b/pydis_site/apps/timeline/entries/2021-02-18_150000-members.md @@ -0,0 +1,8 @@ +--- +title: We now have 150,000 members! +date: Feb 18th, 2021 +icon: fa fa-users +icon_color: pastel-dark-blue +--- + +Our growth continues to accelerate. diff --git a/pydis_site/apps/timeline/entries/2021-03-01_leon-sandoy-appears-on-talk-python-to-me.md b/pydis_site/apps/timeline/entries/2021-03-01_leon-sandoy-appears-on-talk-python-to-me.md new file mode 100644 index 00000000..0ea1eeaa --- /dev/null +++ b/pydis_site/apps/timeline/entries/2021-03-01_leon-sandoy-appears-on-talk-python-to-me.md @@ -0,0 +1,16 @@ +--- +title: Leon Sandøy appears on Talk Python To Me +date: Mar 1st, 2021 +icon: fa fa-microphone +icon_color: pastel-green +--- + +Leon goes on the Talk Python to Me podcast with Michael Kennedy to discuss the +history of Python Discord, the critical importance of culture, and how to run a +massive community. You can find the episode [at +talkpython.fm](https://talkpython.fm/episodes/show/305/python-community-at- +python-discord). + + diff --git a/pydis_site/apps/timeline/entries/2021-03-13_new-feature-weekly-discussion-channel.md b/pydis_site/apps/timeline/entries/2021-03-13_new-feature-weekly-discussion-channel.md new file mode 100644 index 00000000..f037aeba --- /dev/null +++ b/pydis_site/apps/timeline/entries/2021-03-13_new-feature-weekly-discussion-channel.md @@ -0,0 +1,16 @@ +--- +title: "New feature: Weekly discussion channel" +date: Mar 13th, 2021 +icon: fa fa-comment +icon_color: pastel-purple +--- + +Every week (or two weeks), we'll be posting a new topic to discuss in a channel +called **#weekly-topic-discussion**. Our inaugural topic is a PyCon talk by +Anthony Shaw called **Wily Python: Writing simpler and more maintainable +Python.**. + +
+ +
diff --git a/pydis_site/apps/timeline/entries/2021-03-13_teaching-python-podcast.md b/pydis_site/apps/timeline/entries/2021-03-13_teaching-python-podcast.md new file mode 100644 index 00000000..ac2997d1 --- /dev/null +++ b/pydis_site/apps/timeline/entries/2021-03-13_teaching-python-podcast.md @@ -0,0 +1,14 @@ +--- +title: We're on the Teaching Python podcast! +date: Mar 13th, 2021 +icon: fa fa-microphone +icon_color: pastel-pink +--- + +Leon joins Sean and Kelly on the Teaching Python podcast to discuss how the +pandemic has changed the way we learn, and what role communities like Python +Discord can play in this new world. You can find the episode [at +teachingpython.fm](https://www.teachingpython.fm/63). + + diff --git a/pydis_site/apps/timeline/entries/2021-03-21_summer-code-jam-2020-highlights.md b/pydis_site/apps/timeline/entries/2021-03-21_summer-code-jam-2020-highlights.md new file mode 100644 index 00000000..c8febaac --- /dev/null +++ b/pydis_site/apps/timeline/entries/2021-03-21_summer-code-jam-2020-highlights.md @@ -0,0 +1,15 @@ +--- +title: Summer Code Jam 2020 Highlights +date: Mar 21st, 2021 +icon: fa fa-youtube-play +icon_color: pastel-red +--- + +We release a new video to our YouTube showing the best projects from the Summer +Code Jam 2020. Better late than never! + +
+ +
diff --git a/pydis_site/apps/timeline/entries/2021-04-23_owners-become-psf-fellows.md b/pydis_site/apps/timeline/entries/2021-04-23_owners-become-psf-fellows.md new file mode 100644 index 00000000..9db51ac7 --- /dev/null +++ b/pydis_site/apps/timeline/entries/2021-04-23_owners-become-psf-fellows.md @@ -0,0 +1,10 @@ +--- +title: Owners become PSF Fellows +date: April 23, 2021 +icon: pydis +--- + +Joe, Leon, and Sebastiaan [are recognized as Python Software Foundation +Fellows](https://pyfound.blogspot.com/2021/04/python-software-foundation- +fellow.html) for their substantial contributions to the Python ecosystem by +fostering Python Discord. diff --git a/pydis_site/apps/timeline/entries/2021-05-24_inaugural-run-of-pixels.md b/pydis_site/apps/timeline/entries/2021-05-24_inaugural-run-of-pixels.md new file mode 100644 index 00000000..85334049 --- /dev/null +++ b/pydis_site/apps/timeline/entries/2021-05-24_inaugural-run-of-pixels.md @@ -0,0 +1,12 @@ +--- +title: Inaugural run of Pixels +date: May 24, 2021 +icon: fa fa-palette +icon_color: pastel-purple +--- + +Inspired by the subreddit, r/place, Pixels was our collaborative canvas event +held between May 25 to June 14, providing a beginner-friendly API to paint +pixels on a virtual canvas. Later, we released [a blog +post](https://blog.pythondiscord.com/pixels-summer-2021/) summarizing what +happened, our motives, and some stories from during development. diff --git a/pydis_site/apps/timeline/entries/2021-05-24_partnership-with-black.md b/pydis_site/apps/timeline/entries/2021-05-24_partnership-with-black.md new file mode 100644 index 00000000..e2240b65 --- /dev/null +++ b/pydis_site/apps/timeline/entries/2021-05-24_partnership-with-black.md @@ -0,0 +1,10 @@ +--- +title: Partnership with Black +date: May 24th, 2021 +icon: fa fa-handshake + +--- + +We partner with the uncompromising code formatter project, Black, who were +looking for a new home for their real-time chat. Python Discord ended up being +that home, resulting in the creation of the `#black-formatter` channel. diff --git a/pydis_site/apps/timeline/entries/2021-07-09_summer-code-jam-2021-cj8.md b/pydis_site/apps/timeline/entries/2021-07-09_summer-code-jam-2021-cj8.md new file mode 100644 index 00000000..9a00a797 --- /dev/null +++ b/pydis_site/apps/timeline/entries/2021-07-09_summer-code-jam-2021-cj8.md @@ -0,0 +1,11 @@ +--- +title: Summer Code Jam 2021 (CJ8) +date: July 9, 2021 +icon: fa fa-dice +icon_color: pastel-orange +--- + +We host the 8th now-annual Code Jam. Teams had to create a program with an text- +based user interface (TUI), all designed around the theme of “think inside the +box.” Ultimately, 51 teams submitted projects. [The winning submissions are +listed on our website.](https://www.pythondiscord.com/events/code-jams/8/) diff --git a/pydis_site/apps/timeline/entries/2021-10-04_python-310-release-stream.md b/pydis_site/apps/timeline/entries/2021-10-04_python-310-release-stream.md new file mode 100644 index 00000000..3e7d3025 --- /dev/null +++ b/pydis_site/apps/timeline/entries/2021-10-04_python-310-release-stream.md @@ -0,0 +1,16 @@ +--- +title: We host the Python 3.10 Release Stream +date: Oct 4th, 2021 +icon: pydis +--- + +Leon and Pablo Galindo, CPython Core Developer and Release Manager, host the +Python 3.10 Release Stream, joined by other core devs Carol Willing, Irit +Katriel, Łukasz Langa, and Brandt Bucher. They talked in-depth about the new +features introduced in 3.10, the development of those features, and more! + +
+ +
diff --git a/pydis_site/apps/timeline/entries/2022-01-19_300000-members.md b/pydis_site/apps/timeline/entries/2022-01-19_300000-members.md new file mode 100644 index 00000000..9090a920 --- /dev/null +++ b/pydis_site/apps/timeline/entries/2022-01-19_300000-members.md @@ -0,0 +1,9 @@ +--- +title: We hit 300 000 members! +date: Jan 19, 2022 +icon: fa fa-users +icon_color: pastel-dark-blue +--- + +Thanks to an increasing growth rate, Python Discord's membership count doubled +from 150,000 to 300,000 in less than a year! diff --git a/pydis_site/apps/timeline/entries/2022-02-02_smarter-resources.md b/pydis_site/apps/timeline/entries/2022-02-02_smarter-resources.md new file mode 100644 index 00000000..137c0dab --- /dev/null +++ b/pydis_site/apps/timeline/entries/2022-02-02_smarter-resources.md @@ -0,0 +1,11 @@ +--- +title: Deployment of Smarter Resources +date: Feb 2nd, 2022 +icon: fa fa-code +icon_color: pastel-red +--- + +We gave our resources pages some much needed love and [reorganised them into a +single page](https://www.pythondiscord.com/resources/), complete with a shiny +new resource filter that allows you to more quickly find ones that relate to +your interests, experience, learning style, and ability to pay! diff --git a/pydis_site/apps/timeline/entries/2022-02-09_events-team.md b/pydis_site/apps/timeline/entries/2022-02-09_events-team.md new file mode 100644 index 00000000..51036918 --- /dev/null +++ b/pydis_site/apps/timeline/entries/2022-02-09_events-team.md @@ -0,0 +1,9 @@ +--- +title: Creation of Events Team +date: Feb 9th, 2022 +icon: pydis +--- + +We form the Events Team to organise and run future events. Led by Kat and +comprised by staff members, the goal of the team is to ultimately host more +events in a more sustainable way. diff --git a/pydis_site/apps/timeline/entries/2022-02-12_trivia-night.md b/pydis_site/apps/timeline/entries/2022-02-12_trivia-night.md new file mode 100644 index 00000000..7a4a1b8c --- /dev/null +++ b/pydis_site/apps/timeline/entries/2022-02-12_trivia-night.md @@ -0,0 +1,11 @@ +--- +title: Trivia Night +date: Feb 12th, 2022 +icon: fa fa-question +icon_color: pastel-green +--- + +How well do you know Python inside out? Members got to find out in a Trivia +Night event. Contestants were given questions about Python's internals, its +development, and more. To win, contestants had to get the most questions right +while being fast to answer. diff --git a/pydis_site/apps/timeline/entries/2022-02-21_sir-robin.md b/pydis_site/apps/timeline/entries/2022-02-21_sir-robin.md new file mode 100644 index 00000000..ac421acb --- /dev/null +++ b/pydis_site/apps/timeline/entries/2022-02-21_sir-robin.md @@ -0,0 +1,9 @@ +--- +title: Addition of @Sir Robin +date: Feb 21st, 2022 +icon: fa fa-robot +icon_color: pastel-blue +--- + +Our arsenal of bots grows! We add @Sir Robin to power and manage all of our +future events and to support the Events Team. diff --git a/pydis_site/apps/timeline/entries/2022-05-19_partnership-with-pyqtgraph.md b/pydis_site/apps/timeline/entries/2022-05-19_partnership-with-pyqtgraph.md new file mode 100644 index 00000000..7d738f4e --- /dev/null +++ b/pydis_site/apps/timeline/entries/2022-05-19_partnership-with-pyqtgraph.md @@ -0,0 +1,9 @@ +--- +title: Partnership with pyqtgraph +date: May 19th, 2022 +icon: fa fa-handshake + +--- + +The `#pyqtgraph` channel is created for the Scientific Graphics and GUI library +pyqtgraph, joining `#black-formatter`. diff --git a/pydis_site/apps/timeline/entries/2022-07-21_summer-code-jam-2022-cj9.md b/pydis_site/apps/timeline/entries/2022-07-21_summer-code-jam-2022-cj9.md new file mode 100644 index 00000000..a444338c --- /dev/null +++ b/pydis_site/apps/timeline/entries/2022-07-21_summer-code-jam-2022-cj9.md @@ -0,0 +1,17 @@ +--- +title: Summer Code Jam 2022 (CJ9) +date: July 21st, 2022 +icon: fa fa-dice +icon_color: pastel-lime +--- + +We host the 9th Code Jam. This year, teams had to use **websockets** to create a +project based on the theme, **It's not a bug, it's a feature**. In all, 24 teams +submitted their projects. At the end, we held a livestream demoing the top 10 +projects and announcing the winner! + +
+ +
diff --git a/pydis_site/apps/timeline/entries/2022-10-24_python-311-release-stream.md b/pydis_site/apps/timeline/entries/2022-10-24_python-311-release-stream.md new file mode 100644 index 00000000..21f6ab03 --- /dev/null +++ b/pydis_site/apps/timeline/entries/2022-10-24_python-311-release-stream.md @@ -0,0 +1,17 @@ +--- +title: Python 3.11 Release Stream +date: Oct 24th, 2022 +icon: pydis +--- + +With the Python 3.10 Release Stream being such a success, we brought it back for +the release of Python 3.11. Hosted by Leon, and CPython 3.11 Release Manager, +Pablo Galindo, they were joined by other CPython Core Developers. Together, they +discuss the specific features and the overall development process of the +release. + +
+ +
diff --git a/pydis_site/apps/timeline/entries/2022-11-25_switch-to-forum-based-help-system.md b/pydis_site/apps/timeline/entries/2022-11-25_switch-to-forum-based-help-system.md new file mode 100644 index 00000000..cfb920d2 --- /dev/null +++ b/pydis_site/apps/timeline/entries/2022-11-25_switch-to-forum-based-help-system.md @@ -0,0 +1,11 @@ +--- +title: Switch to forum-based help system +date: Nov 25th, 2022 +icon: fa fa-comments +icon_color: pastel-pink +--- + +We migrate our help system to use a forum channel, retiring our home-grown +rotating help system after 3 years of service and nearly 500,000 help sessions. +Forum channels offer a better experience as members can create their own +dedicated thread in a discoverable place. diff --git a/pydis_site/apps/timeline/entries/2023-01-30_retirement-of-joe-and-sebastiaan.md b/pydis_site/apps/timeline/entries/2023-01-30_retirement-of-joe-and-sebastiaan.md index 1629c1f5..b03cf580 100644 --- a/pydis_site/apps/timeline/entries/2023-01-30_retirement-of-joe-and-sebastiaan.md +++ b/pydis_site/apps/timeline/entries/2023-01-30_retirement-of-joe-and-sebastiaan.md @@ -1,12 +1,10 @@ --- title: Retirement of Joe and Sebastiaan -date: 2023-01-30 +date: Jan 30th, 2023 icon: pydis --- Having been at the helm of Python Discord for over 5 and 3 years respectively, -Joe and Sebastiaan retire and step down. They gain the **@Founders** role and -continue as advisors to the **@Directors**, the new name of the original -**@Owners** role. - -At the same time, Mina and Zig join Leon as co-directors. +Joe and Sebastiaan retire and step down. They gain the @Founders role and +continue as advisors to the @Directors, the new name of the original @Owners +role. At the same time, Mina and Zig join Leon as co-directors. diff --git a/pydis_site/apps/timeline/entries/2023-07-11_new-paste-service.md b/pydis_site/apps/timeline/entries/2023-07-11_new-paste-service.md index 818fa2f9..c5ae4450 100644 --- a/pydis_site/apps/timeline/entries/2023-07-11_new-paste-service.md +++ b/pydis_site/apps/timeline/entries/2023-07-11_new-paste-service.md @@ -1,12 +1,13 @@ --- title: Switch to new paste service -date: 2023-07-11 +date: Jul 11th, 2023 icon: fa-regular fa-clipboard icon_color: pastel-pink --- We migrate over to [pinnwand](https://github.com/supakeen/pinnwand) as the -service that powers our paste bin over at . -We made the switch as it comes with native light/dark modes, support for -multi-file pastes, additional support for text highlighting languages, and -plus, it's written in Python! +service that powers our paste bin over at +[https://paste.pythondiscord.com/](https://paste.pythondiscord.com). We made the +switch as it comes with native light/dark modes, support for multi-file pastes, +additional support for text highlighting languages, and plus, it's written in +Python! -- cgit v1.2.3 From c5082224438f05a73253f1b2f3c9dff593d9bf54 Mon Sep 17 00:00:00 2001 From: ~hedy Date: Fri, 24 May 2024 12:34:02 +0800 Subject: Timeline: Fix paragraph spacing of Pixels item --- .../apps/timeline/entries/2021-05-24_inaugural-run-of-pixels.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/pydis_site/apps/timeline/entries/2021-05-24_inaugural-run-of-pixels.md b/pydis_site/apps/timeline/entries/2021-05-24_inaugural-run-of-pixels.md index 85334049..66ecf82e 100644 --- a/pydis_site/apps/timeline/entries/2021-05-24_inaugural-run-of-pixels.md +++ b/pydis_site/apps/timeline/entries/2021-05-24_inaugural-run-of-pixels.md @@ -7,6 +7,8 @@ icon_color: pastel-purple Inspired by the subreddit, r/place, Pixels was our collaborative canvas event held between May 25 to June 14, providing a beginner-friendly API to paint -pixels on a virtual canvas. Later, we released [a blog +pixels on a virtual canvas. + +Later, we released [a blog post](https://blog.pythondiscord.com/pixels-summer-2021/) summarizing what happened, our motives, and some stories from during development. -- cgit v1.2.3 From 26f71cd25c0956393ca8386e6764eec467e6c126 Mon Sep 17 00:00:00 2001 From: ~hedy Date: Fri, 24 May 2024 12:41:39 +0800 Subject: Timeline: Fix icons and assets I fixed them in PRs that were merged after the JSON used for this conversion was generated. --- pydis_site/apps/timeline/entries/2020-04-14_40000-members.md | 2 +- pydis_site/apps/timeline/entries/2020-12-01_advent-of-code.md | 2 +- .../apps/timeline/entries/2021-03-21_summer-code-jam-2020-highlights.md | 2 +- pydis_site/apps/timeline/entries/2023-07-11_new-paste-service.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/pydis_site/apps/timeline/entries/2020-04-14_40000-members.md b/pydis_site/apps/timeline/entries/2020-04-14_40000-members.md index 9ebd7fe8..db9e40fe 100644 --- a/pydis_site/apps/timeline/entries/2020-04-14_40000-members.md +++ b/pydis_site/apps/timeline/entries/2020-04-14_40000-members.md @@ -5,4 +5,4 @@ icon: fa fa-users icon_color: pastel-dark-blue --- -![](https://cdn.discordapp.com/attachments/354619224620138496/699666518476324954/unknown.png) +![](https://raw.githubusercontent.com/python-discord/branding/main/wallpapers/bigger%20than%20liechtenstein/pydis%20postcard.png) diff --git a/pydis_site/apps/timeline/entries/2020-12-01_advent-of-code.md b/pydis_site/apps/timeline/entries/2020-12-01_advent-of-code.md index a4f0adda..d24e02a1 100644 --- a/pydis_site/apps/timeline/entries/2020-12-01_advent-of-code.md +++ b/pydis_site/apps/timeline/entries/2020-12-01_advent-of-code.md @@ -1,7 +1,7 @@ --- title: Advent of Code attracts hundreds of participants date: December 1st - 25th, 2020 -icon: fa fa-snowflake-o +icon: fa fa-snowflake icon_color: pastel-red --- diff --git a/pydis_site/apps/timeline/entries/2021-03-21_summer-code-jam-2020-highlights.md b/pydis_site/apps/timeline/entries/2021-03-21_summer-code-jam-2020-highlights.md index c8febaac..eebb69ff 100644 --- a/pydis_site/apps/timeline/entries/2021-03-21_summer-code-jam-2020-highlights.md +++ b/pydis_site/apps/timeline/entries/2021-03-21_summer-code-jam-2020-highlights.md @@ -1,7 +1,7 @@ --- title: Summer Code Jam 2020 Highlights date: Mar 21st, 2021 -icon: fa fa-youtube-play +icon: fab fa-youtube icon_color: pastel-red --- diff --git a/pydis_site/apps/timeline/entries/2023-07-11_new-paste-service.md b/pydis_site/apps/timeline/entries/2023-07-11_new-paste-service.md index c5ae4450..4cc7e7ce 100644 --- a/pydis_site/apps/timeline/entries/2023-07-11_new-paste-service.md +++ b/pydis_site/apps/timeline/entries/2023-07-11_new-paste-service.md @@ -1,7 +1,7 @@ --- title: Switch to new paste service date: Jul 11th, 2023 -icon: fa-regular fa-clipboard +icon: fa-solid fa-clipboard icon_color: pastel-pink --- -- cgit v1.2.3 From 9e18aabe33e859c85745ac1ad2b83e313b7e0121 Mon Sep 17 00:00:00 2001 From: ~hedy Date: Fri, 24 May 2024 13:00:51 +0800 Subject: Better readme for timeline app --- pydis_site/apps/timeline/README.md | 41 +++++++++++++++++++------------------- 1 file changed, 21 insertions(+), 20 deletions(-) diff --git a/pydis_site/apps/timeline/README.md b/pydis_site/apps/timeline/README.md index a4272c4d..0b639261 100644 --- a/pydis_site/apps/timeline/README.md +++ b/pydis_site/apps/timeline/README.md @@ -8,35 +8,36 @@ powered by this Django application. Timeline entries are written in markdown files with YAML frontmatter under the `entries` directory. -Each file represents a timeline entry. The files are named with the format -`_.md`: -- `date`: The date is in the `YYYY-MM-DD` format, intended for easy sorting in - editor/shell command directory listings. It's also used to sort the entries - before rendering the timeline page. -- `name`: The name component is an arbitrary slug in **kebab-case**. This is used - for linking to individual timeline entries on the page, and will be set in - the `id` attribute. +Each file represents a timeline entry. The file names have the format +`_.md`, where: +- `date` is in `YYYY-MM-DD` for easy sorting of files in directory listings, + also used for sorting of the entries displayed on the timeline page. +- `name` is an arbitrary slug in `kebab-case`, used for linking to individual + timeline entries on the page, which will be set in the `id` attribute for each + timeline item. Each file contains: -- YAML frontmatter. This defines some metadata shown next to each entry in +- A YAML frontmatter, which defines some metadata shown next to each entry in the timeline, including: - - Date: User-facing date label. - - Icon: The CSS class to be used for the icon. Set to `pydis` to use the - pydis logo image. - - Icon color: The CSS class that sets the background color of the icon. Leave - empty if the pydis logo is used. + - `date`: User-facing date label. + - `icon`: The CSS class used for the icon, e.g. "fa fa-snowflake". Set to + `pydis` to use the pydis logo image. + - `icon_color`: The CSS class that sets the background color of the icon, e.g. + "pastel-red". List of available colors can be found in [the CSS + file](../../static/css/timeline/timeline.css). This can be omitted if the + pydis logo is used. - Markdown content. ## Directory structure -The app has a single view in `views.py` that takes care of reading the `.md` -files in the `entires` directory. This is a standard Django view, mounted in -`urls.py` as usual. +The app has a single view in `views.py` that renders the template using the list +of parsed entries from `apps.py`, which reads the markdown files on startup. +This is a standard Django view, mounted in `urls.py` as usual. -The `tests` directory validates that our redirects and helper functions work as -expected. If you made changes to the app and are looking for guidance on adding -new tests, the [Django tutorial introducing automated +The `tests` directory validates that the page renders successfully as expected. +If you made changes to the app and are looking for guidance on adding new tests, +the [Django tutorial introducing automated testing](https://docs.djangoproject.com/en/dev/intro/tutorial05/) is a good place to start. -- cgit v1.2.3 From 37b18de185e2048e16270eb263befcfe92948d78 Mon Sep 17 00:00:00 2001 From: ~hedy Date: Fri, 24 May 2024 13:04:22 +0800 Subject: Timeline: Start a new paragraph for the @Directors (DWIM) A separate paragraph was used in the HTML, but another

was not actually used. --- .../timeline/entries/2023-01-30_retirement-of-joe-and-sebastiaan.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/pydis_site/apps/timeline/entries/2023-01-30_retirement-of-joe-and-sebastiaan.md b/pydis_site/apps/timeline/entries/2023-01-30_retirement-of-joe-and-sebastiaan.md index b03cf580..e1d699ed 100644 --- a/pydis_site/apps/timeline/entries/2023-01-30_retirement-of-joe-and-sebastiaan.md +++ b/pydis_site/apps/timeline/entries/2023-01-30_retirement-of-joe-and-sebastiaan.md @@ -7,4 +7,6 @@ icon: pydis Having been at the helm of Python Discord for over 5 and 3 years respectively, Joe and Sebastiaan retire and step down. They gain the @Founders role and continue as advisors to the @Directors, the new name of the original @Owners -role. At the same time, Mina and Zig join Leon as co-directors. +role. + +At the same time, Mina and Zig join Leon as co-directors. -- cgit v1.2.3 From e3c697f68cae63ea61dece3f0b74bbc4f16400e6 Mon Sep 17 00:00:00 2001 From: ~hedy Date: Fri, 24 May 2024 13:06:51 +0800 Subject: Timeline: Fix CSS comment --- pydis_site/static/css/timeline/timeline.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pydis_site/static/css/timeline/timeline.css b/pydis_site/static/css/timeline/timeline.css index a5072998..1970383f 100644 --- a/pydis_site/static/css/timeline/timeline.css +++ b/pydis_site/static/css/timeline/timeline.css @@ -145,7 +145,7 @@ flex-grow: 1; } -/* Don't make the titles show up as the link colors before hover. */ +/* Don't make the titles show up as link colors before hover. */ .timeline-content h3 a { color: inherit; } -- cgit v1.2.3 From 6cd6dfd756636cb401b7e4004d69586d2b17b0d1 Mon Sep 17 00:00:00 2001 From: ~hedy Date: Thu, 30 May 2024 08:23:27 +0800 Subject: Timeline: Fix word breaking on hyphenation in 8th Code Jam Co-authored-by: wookie184 --- .../apps/timeline/entries/2021-07-09_summer-code-jam-2021-cj8.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/pydis_site/apps/timeline/entries/2021-07-09_summer-code-jam-2021-cj8.md b/pydis_site/apps/timeline/entries/2021-07-09_summer-code-jam-2021-cj8.md index 9a00a797..a86f7da5 100644 --- a/pydis_site/apps/timeline/entries/2021-07-09_summer-code-jam-2021-cj8.md +++ b/pydis_site/apps/timeline/entries/2021-07-09_summer-code-jam-2021-cj8.md @@ -5,7 +5,7 @@ icon: fa fa-dice icon_color: pastel-orange --- -We host the 8th now-annual Code Jam. Teams had to create a program with an text- -based user interface (TUI), all designed around the theme of “think inside the -box.” Ultimately, 51 teams submitted projects. [The winning submissions are +We host the 8th now-annual Code Jam. Teams had to create a program with an +text-based user interface (TUI), all designed around the theme of “think inside +the box.” Ultimately, 51 teams submitted projects. [The winning submissions are listed on our website.](https://www.pythondiscord.com/events/code-jams/8/) -- cgit v1.2.3