From 2fbb5c4bda3b1e99ca1daa2a344e1132a0b7db1e Mon Sep 17 00:00:00 2001 From: hedy Date: Tue, 19 Mar 2024 16:26:55 +0800 Subject: Timeline: Initial rewrite of CSS --- pydis_site/static/css/home/timeline.css | 4030 +++---------------------------- 1 file changed, 289 insertions(+), 3741 deletions(-) (limited to 'pydis_site/static/css') diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css index d42bbfc0..b8fa02c9 100644 --- a/pydis_site/static/css/home/timeline.css +++ b/pydis_site/static/css/home/timeline.css @@ -1,3826 +1,374 @@ -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) +:root { + --background-color: rgb(232, 239, 245); + --accent: hsl(205, 38%, 89%); + --icon-border-color: white; + --content-background-color: white; } -.padding-y-xxl { - padding-top: 5.25em; - padding-top: var(--space-xxl); - padding-bottom: 5.25em; - padding-bottom: var(--space-xxl) +[data-theme="dark"] { + --background-color: #2C2F33; + --accent: hsl(0, 0%, 34%); + --icon-border-color: grey; + --content-background-color: #23272A; } -.padding-y-xxxl { - padding-top: 8.5em; - padding-top: var(--space-xxxl); - padding-bottom: 8.5em; - padding-bottom: var(--space-xxxl) +.cd-timeline { + overflow: hidden; + padding: 3rem 0; + background-color: var(--background-color); } -.padding-y-xxxxl { - padding-top: 13.75em; - padding-top: var(--space-xxxxl); - padding-bottom: 13.75em; - padding-bottom: var(--space-xxxxl) +.cd-timeline__container { + position: relative; + padding: 1rem 0; } -.padding-y-component { - padding-top: 1.25em; - padding-top: var(--component-padding); - padding-bottom: 1.25em; - padding-bottom: var(--component-padding) +.cd-timeline__container::before { + content: ''; + position: absolute; + top: 0; + left: 50%; + height: 100%; + width: 4px; + background-color: var(--accent); } -@media not all and (min-width: 32rem) { - .has-padding\@xs { - padding: 0 !important - } +.cd-timeline__block { + display: flex; + margin-bottom: 2rem; } -@media not all and (min-width: 48rem) { - .has-padding\@sm { - padding: 0 !important - } +.cd-timeline__content.box { + box-shadow: var(--accent) 0px 3px 0px 0px; + background-color: var(--content-background-color); } -@media not all and (min-width: 64rem) { - .has-padding\@md { - padding: 0 !important - } +@media (min-width: 768px) { + .cd-timeline__block:nth-child(even) { + flex-direction: row-reverse; + } } -@media not all and (min-width: 80rem) { - .has-padding\@lg { - padding: 0 !important - } -} +.cd-timeline__img { + display: flex; + justify-content: center; + align-items: center; + flex-shrink: 0; -@media not all and (min-width: 90rem) { - .has-padding\@xl { - padding: 0 !important - } -} + border-radius: 50%; + height: 60px; + width: 60px; -.truncate { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap -} + box-shadow: 0 0 0 4px var(--icon-border-color),inset 0 2px 0 rgba(0,0,0,.08),0 3px 0 4px rgba(0,0,0,.05); + color: var(--icon-outline-color); -.text-replace { - overflow: hidden; - color: transparent; - text-indent: 100%; - white-space: nowrap -} + font-size: 1.5em; -.text-center { - text-align: center + @media (min-width: 768px) { + order: 1; + } } -.text-left { - text-align: left +.cd-timeline__img img { + width: 40px; + height: 40px; + margin-left: 2px; + margin-top: 2px; } -.text-right { - text-align: right +.cd-timeline__date { + font-size: .9rem; } -@media (min-width: 32rem) { - .text-center\@xs { - text-align: center - } - .text-left\@xs { - text-align: left - } - .text-right\@xs { - text-align: right - } -} +.cd-timeline__content { + flex-grow: 1; -@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: 768px) { + width: 45%; + flex-grow: 0; + } } @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 { + .cd-timeline__date { 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; -} + left: 54%; + margin-top: 1rem; + } + .cd-timeline__block:nth-child(even) .cd-timeline__date { + left: auto; + right: 54%; + text-align: right + } -.cd-timeline h2 { - font-weight: 700 + .cd-timeline__img { + left: calc(50% - 30px); + position: absolute; + } } -.cd-timeline__container { - position: relative; - padding: 1.25em 0; - padding: var(--space-md) 0 +.pastel-red { + background-color: #ff7878 !important; } - -.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) +[data-theme="dark"] .pastel-red { + background-color: #a44848 !important; } - -@media (min-width: 64rem) { - .cd-timeline__container::before { - left: 50%; - -webkit-transform: translateX(-50%); - -ms-transform: translateX(-50%); - transform: translateX(-50%) - } +.pastel-orange { + background-color: #ffbf76 !important; } - -.cd-timeline__block { - display: -ms-flexbox; - display: flex; - position: relative; - z-index: 1; - margin-bottom: 2em; - margin-bottom: var(--space-lg) +[data-theme="dark"] .pastel-orange { + background-color: #967147 !important; } - -.cd-timeline__block:last-child { - margin-bottom: 0 +.pastel-green { + background-color: #8bd6a7 !important; } - -@media (min-width: 64rem) { - .cd-timeline__block:nth-child(even) { - -ms-flex-direction: row-reverse; - flex-direction: row-reverse - } +[data-theme="dark"] .pastel-green { + background-color: #649f7a !important; } - -.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) +.pastel-blue { + background-color: #8edbec !important; } - -[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) +[data-theme="dark"] .pastel-blue { + background-color: #3d7986 !important; } - -.cd-timeline__img i { - font-size: 1.5em; - color: white; +.pastel-purple { + background-color: #cbb1ff !important; } - -@media (max-width: 64rem) { - .cd-timeline__img i { - font-size: 0.9em; - } +[data-theme="dark"] .pastel-purple { + background-color: #8775ad !important; } - -.cd-timeline__img img { - width: 40px; - height: 40px; - margin-left: 2px; - margin-top: 2px; +.pastel-pink { + background-color: #f6acff !important; } - -@media (max-width: 64rem) { - .cd-timeline__img img { - width: 20px; - height: 20px; - margin-left: 2px; - margin-top: 2px; - } +[data-theme="dark"] .pastel-pink { + background-color: #79507e !important; } - -@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) - } +.pastel-lime { + background-color: #b6df3a !important; } - -.cd-timeline__img--picture { - background-color: #7289DA; +[data-theme="dark"] .pastel-lime { + background-color: #7c9a21 !important; } -.cd-timeline__img--movie { - background-color: hsl(356, 53%, 49%); - background-color: var(--cd-color-5) +.pastel-dark-blue { + background-color: #576297 !important; } -.cd-timeline__img--location { - background-color: hsl(47, 85%, 61%); - background-color: var(--cd-color-6) +.pydis-logo-banner { + background-color: #7289da !important; + border-radius: 10px; } - -.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) +[data-theme="dark"] .pydis-logo-banner { + background-color: #3B4774 !important; } - -.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) +.pydis-logo-banner img { + padding-right: 20px; } - -.cd-timeline__content h2 { - color: hsl(206, 21%, 24%); - color: var(--cd-color-1) +img, video, svg { + max-width: 100% } -@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 - } -} +/* ANIMATION */ @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) - } -} + .cd-timeline__img--hidden, .cd-timeline__content--hidden, .cd-timeline__date--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, + .cd-timeline__date--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, + .cd-timeline__block:nth-child(even) .cd-timeline__date--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, + .cd-timeline__date--bounce-out { + -webkit-animation: cd-bounce-out-3 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) - } -} + 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) - } + 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) - } + 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) - } + 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) - } + 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); - } + 0% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } - 60% { - -webkit-transform: scale(1.2); - transform: scale(1.2); - } + 60% { + -webkit-transform: scale(1.2); + transform: scale(1.2); + } - 100% { - opacity: 0; - -webkit-transform: scale(0.5); - transform: scale(0.5); - } + 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) - } + 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) - } + 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); + } } -- cgit v1.2.3 From 60095ef952444b5b5cb98c45f8b62f71789d5b91 Mon Sep 17 00:00:00 2001 From: hedy Date: Tue, 19 Mar 2024 16:35:05 +0800 Subject: Fix typo in timeline.css CSS-variable Unfortunately there is a merge commit (with merge conflicts) in between this change and the timeline commit before it. Perhaps in a few years time when I'm more confident in rebasing I'll be able to amend that commit to include this fix. --- pydis_site/static/css/home/timeline.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'pydis_site/static/css') diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css index b8fa02c9..d708a89b 100644 --- a/pydis_site/static/css/home/timeline.css +++ b/pydis_site/static/css/home/timeline.css @@ -2,6 +2,7 @@ --background-color: rgb(232, 239, 245); --accent: hsl(205, 38%, 89%); --icon-border-color: white; + --icon-color: white; --content-background-color: white; } @@ -60,7 +61,7 @@ width: 60px; box-shadow: 0 0 0 4px var(--icon-border-color),inset 0 2px 0 rgba(0,0,0,.08),0 3px 0 4px rgba(0,0,0,.05); - color: var(--icon-outline-color); + color: var(--icon-color); font-size: 1.5em; -- cgit v1.2.3 From 8dd3225893aad4dba14145a017903f637579f46b Mon Sep 17 00:00:00 2001 From: hedy Date: Tue, 19 Mar 2024 16:40:36 +0800 Subject: Center align the timeline line (container ::before pseudoelement) --- pydis_site/static/css/home/timeline.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'pydis_site/static/css') diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css index d708a89b..48e0de11 100644 --- a/pydis_site/static/css/home/timeline.css +++ b/pydis_site/static/css/home/timeline.css @@ -28,7 +28,7 @@ content: ''; position: absolute; top: 0; - left: 50%; + left: calc(50% - 2px); height: 100%; width: 4px; background-color: var(--accent); -- cgit v1.2.3 From 60f2bbcafd1cd19df2a6bd77eef00c44f9ba1e9d Mon Sep 17 00:00:00 2001 From: hedy Date: Tue, 19 Mar 2024 16:58:15 +0800 Subject: Timeline: Use Bulma has-background-primary class for PyDis logo --- pydis_site/static/css/home/timeline.css | 5 ----- pydis_site/templates/home/timeline.html | 2 +- 2 files changed, 1 insertion(+), 6 deletions(-) (limited to 'pydis_site/static/css') diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css index 48e0de11..cfdc6012 100644 --- a/pydis_site/static/css/home/timeline.css +++ b/pydis_site/static/css/home/timeline.css @@ -151,18 +151,13 @@ [data-theme="dark"] .pastel-lime { background-color: #7c9a21 !important; } - .pastel-dark-blue { background-color: #576297 !important; } .pydis-logo-banner { - background-color: #7289da !important; border-radius: 10px; } -[data-theme="dark"] .pydis-logo-banner { - background-color: #3B4774 !important; -} .pydis-logo-banner img { padding-right: 20px; } diff --git a/pydis_site/templates/home/timeline.html b/pydis_site/templates/home/timeline.html index b1e764b4..e555fc09 100644 --- a/pydis_site/templates/home/timeline.html +++ b/pydis_site/templates/home/timeline.html @@ -1103,7 +1103,7 @@

Our logo is born. Thanks @Aperture!

-

-- cgit v1.2.3 From ab51aa627f800dcdb7a6def5438b473b61fae996 Mon Sep 17 00:00:00 2001 From: hedy Date: Tue, 19 Mar 2024 16:59:38 +0800 Subject: Timeline: Use an accentuated grey border for icons The grey was there as a placeholder before this. --- pydis_site/static/css/home/timeline.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'pydis_site/static/css') diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css index cfdc6012..514d6906 100644 --- a/pydis_site/static/css/home/timeline.css +++ b/pydis_site/static/css/home/timeline.css @@ -9,7 +9,7 @@ [data-theme="dark"] { --background-color: #2C2F33; --accent: hsl(0, 0%, 34%); - --icon-border-color: grey; + --icon-border-color: hsl(0, 0%, 50%); --content-background-color: #23272A; } -- cgit v1.2.3 From 183330c9542867ed9e283c718e850a9411dbf992 Mon Sep 17 00:00:00 2001 From: hedy Date: Tue, 19 Mar 2024 17:01:58 +0800 Subject: Conform to 4-spaces indent for timeline.css --- pydis_site/static/css/home/timeline.css | 482 ++++++++++++++++---------------- 1 file changed, 241 insertions(+), 241 deletions(-) (limited to 'pydis_site/static/css') diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css index 514d6906..df72404b 100644 --- a/pydis_site/static/css/home/timeline.css +++ b/pydis_site/static/css/home/timeline.css @@ -1,112 +1,112 @@ :root { - --background-color: rgb(232, 239, 245); - --accent: hsl(205, 38%, 89%); - --icon-border-color: white; - --icon-color: white; - --content-background-color: white; + --background-color: rgb(232, 239, 245); + --accent: hsl(205, 38%, 89%); + --icon-border-color: white; + --icon-color: white; + --content-background-color: white; } [data-theme="dark"] { - --background-color: #2C2F33; - --accent: hsl(0, 0%, 34%); - --icon-border-color: hsl(0, 0%, 50%); - --content-background-color: #23272A; + --background-color: #2C2F33; + --accent: hsl(0, 0%, 34%); + --icon-border-color: hsl(0, 0%, 50%); + --content-background-color: #23272A; } .cd-timeline { - overflow: hidden; - padding: 3rem 0; - background-color: var(--background-color); + overflow: hidden; + padding: 3rem 0; + background-color: var(--background-color); } .cd-timeline__container { - position: relative; - padding: 1rem 0; + position: relative; + padding: 1rem 0; } .cd-timeline__container::before { - content: ''; - position: absolute; - top: 0; - left: calc(50% - 2px); - height: 100%; - width: 4px; - background-color: var(--accent); + content: ''; + position: absolute; + top: 0; + left: calc(50% - 2px); + height: 100%; + width: 4px; + background-color: var(--accent); } .cd-timeline__block { - display: flex; - margin-bottom: 2rem; + display: flex; + margin-bottom: 2rem; } .cd-timeline__content.box { - box-shadow: var(--accent) 0px 3px 0px 0px; - background-color: var(--content-background-color); + box-shadow: var(--accent) 0px 3px 0px 0px; + background-color: var(--content-background-color); } @media (min-width: 768px) { - .cd-timeline__block:nth-child(even) { - flex-direction: row-reverse; - } + .cd-timeline__block:nth-child(even) { + flex-direction: row-reverse; + } } .cd-timeline__img { - display: flex; - justify-content: center; - align-items: center; - flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + flex-shrink: 0; - border-radius: 50%; - height: 60px; - width: 60px; + border-radius: 50%; + height: 60px; + width: 60px; - box-shadow: 0 0 0 4px var(--icon-border-color),inset 0 2px 0 rgba(0,0,0,.08),0 3px 0 4px rgba(0,0,0,.05); - color: var(--icon-color); + box-shadow: 0 0 0 4px var(--icon-border-color),inset 0 2px 0 rgba(0,0,0,.08),0 3px 0 4px rgba(0,0,0,.05); + color: var(--icon-color); - font-size: 1.5em; + font-size: 1.5em; - @media (min-width: 768px) { - order: 1; - } + @media (min-width: 768px) { + order: 1; + } } .cd-timeline__img img { - width: 40px; - height: 40px; - margin-left: 2px; - margin-top: 2px; + width: 40px; + height: 40px; + margin-left: 2px; + margin-top: 2px; } .cd-timeline__date { - font-size: .9rem; + font-size: .9rem; } .cd-timeline__content { - flex-grow: 1; + flex-grow: 1; - @media (min-width: 768px) { - width: 45%; - flex-grow: 0; - } + @media (min-width: 768px) { + width: 45%; + flex-grow: 0; + } } @media (min-width: 64rem) { - .cd-timeline__date { - position: absolute; - width: 100%; - left: 54%; - margin-top: 1rem; - } - .cd-timeline__block:nth-child(even) .cd-timeline__date { - left: auto; - right: 54%; - text-align: right - } - - .cd-timeline__img { - left: calc(50% - 30px); - position: absolute; - } + .cd-timeline__date { + position: absolute; + width: 100%; + left: 54%; + margin-top: 1rem; + } + .cd-timeline__block:nth-child(even) .cd-timeline__date { + left: auto; + right: 54%; + text-align: right + } + + .cd-timeline__img { + left: calc(50% - 30px); + position: absolute; + } } .pastel-red { @@ -169,202 +169,202 @@ img, video, svg { /* ANIMATION */ @media (min-width: 64rem) { - .cd-timeline__img--hidden, .cd-timeline__content--hidden, .cd-timeline__date--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, - .cd-timeline__date--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, - .cd-timeline__block:nth-child(even) .cd-timeline__date--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, - .cd-timeline__date--bounce-out { - -webkit-animation: cd-bounce-out-3 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) */ -/* } */ -/* } */ + .cd-timeline__img--hidden, .cd-timeline__content--hidden, .cd-timeline__date--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, + .cd-timeline__date--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, + .cd-timeline__block:nth-child(even) .cd-timeline__date--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, + .cd-timeline__date--bounce-out { + -webkit-animation: cd-bounce-out-3 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) */ -/* } */ -/* } */ + 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) - } + 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) - } + 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) - } + 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) - } + 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); - } + 0% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } - 60% { - -webkit-transform: scale(1.2); - transform: scale(1.2); - } + 60% { + -webkit-transform: scale(1.2); + transform: scale(1.2); + } - 100% { - opacity: 0; - -webkit-transform: scale(0.5); - transform: scale(0.5); - } + 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) - } + 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); - } + 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); + } } -- cgit v1.2.3 From 5aae7f8636ac04a1ef1a2c2a2a51208942559ea4 Mon Sep 17 00:00:00 2001 From: hedy Date: Tue, 19 Mar 2024 17:07:43 +0800 Subject: Semantic animation names for timeline.css --- pydis_site/static/css/home/timeline.css | 49 +++++++++++++++++---------------- 1 file changed, 25 insertions(+), 24 deletions(-) (limited to 'pydis_site/static/css') diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css index df72404b..6e53eaa1 100644 --- a/pydis_site/static/css/home/timeline.css +++ b/pydis_site/static/css/home/timeline.css @@ -59,10 +59,10 @@ border-radius: 50%; height: 60px; width: 60px; - box-shadow: 0 0 0 4px var(--icon-border-color),inset 0 2px 0 rgba(0,0,0,.08),0 3px 0 4px rgba(0,0,0,.05); - color: var(--icon-color); + /* Font Awesome icon size and color */ + color: var(--icon-color); font-size: 1.5em; @media (min-width: 768px) { @@ -155,49 +155,50 @@ background-color: #576297 !important; } +/* Used for "Our logo is born" timeline item */ .pydis-logo-banner { border-radius: 10px; } .pydis-logo-banner img { padding-right: 20px; } + img, video, svg { max-width: 100% } -/* ANIMATION */ - +/* Bounce-in and bounce-out animations */ @media (min-width: 64rem) { .cd-timeline__img--hidden, .cd-timeline__content--hidden, .cd-timeline__date--hidden { visibility: hidden } .cd-timeline__img--bounce-in { - -webkit-animation: cd-bounce-1 0.6s; - animation: cd-bounce-1 0.6s; + -webkit-animation: icon-bounce 0.6s; + animation: icon-bounce 0.6s; } .cd-timeline__content--bounce-in, .cd-timeline__date--bounce-in { - -webkit-animation: cd-bounce-2 0.6s; - animation: cd-bounce-2 0.6s; + -webkit-animation: item-bounce-left 0.6s; + animation: item-bounce-left 0.6s; } .cd-timeline__block:nth-child(even) .cd-timeline__content--bounce-in, .cd-timeline__block:nth-child(even) .cd-timeline__date--bounce-in { - -webkit-animation-name: cd-bounce-2-inverse; - animation-name: cd-bounce-2-inverse; + -webkit-animation-name: item-bounce-right; + animation-name: item-bounce-right; } .cd-timeline__img--bounce-out { - -webkit-animation: cd-bounce-out-1 0.6s; - animation: cd-bounce-out-1 0.6s; + -webkit-animation: icon-bounce-out 0.6s; + animation: icon-bounce-out 0.6s; } .cd-timeline__content--bounce-out, .cd-timeline__date--bounce-out { - -webkit-animation: cd-bounce-out-3 0.6s; - animation: cd-bounce-out-2 0.6s; + -webkit-animation: item-bounce-out 0.6s; + animation: item-bounce-out 0.6s; } } -@-webkit-keyframes cd-bounce-1 { +@-webkit-keyframes icon-bounce { 0% { opacity: 0; -webkit-transform: scale(0.5); @@ -214,7 +215,7 @@ img, video, svg { } } -@keyframes cd-bounce-1 { +@keyframes icon-bounce { 0% { opacity: 0; -webkit-transform: scale(0.5); @@ -231,7 +232,7 @@ img, video, svg { } } -@-webkit-keyframes cd-bounce-2 { +@-webkit-keyframes item-bounce-left { 0% { opacity: 0; -webkit-transform: translateX(-100px); @@ -248,7 +249,7 @@ img, video, svg { } } -@keyframes cd-bounce-2 { +@keyframes item-bounce-left { 0% { opacity: 0; -webkit-transform: translateX(-100px); @@ -265,7 +266,7 @@ img, video, svg { } } -@-webkit-keyframes cd-bounce-2-inverse { +@-webkit-keyframes item-bounce-right { 0% { opacity: 0; -webkit-transform: translateX(100px); @@ -282,7 +283,7 @@ img, video, svg { } } -@keyframes cd-bounce-2-inverse { +@keyframes item-bounce-right { 0% { opacity: 0; -webkit-transform: translateX(100px); @@ -299,7 +300,7 @@ img, video, svg { } } -@-webkit-keyframes cd-bounce-out-1 { +@-webkit-keyframes icon-bounce-out { 0% { opacity: 1; -webkit-transform: scale(1); @@ -316,7 +317,7 @@ img, video, svg { } } -@keyframes cd-bounce-out-1 { +@keyframes icon-bounce-out { 0% { opacity: 1; -webkit-transform: scale(1); @@ -335,7 +336,7 @@ img, video, svg { } } -@-webkit-keyframes cd-bounce-out-2 { +@-webkit-keyframes item-bounce-out { 0% { opacity: 1; -webkit-transform: translateX(0); @@ -352,7 +353,7 @@ img, video, svg { } } -@keyframes cd-bounce-out-2 { +@keyframes item-bounce-out { 0% { opacity: 1; -webkit-transform: translateX(0); -- cgit v1.2.3 From ec4f8435d626777bf019660e386b0d9f98f35064 Mon Sep 17 00:00:00 2001 From: hedy Date: Tue, 19 Mar 2024 17:09:50 +0800 Subject: Timeline: Adjust spacing between timeline items --- pydis_site/static/css/home/timeline.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'pydis_site/static/css') diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css index 6e53eaa1..27d7c119 100644 --- a/pydis_site/static/css/home/timeline.css +++ b/pydis_site/static/css/home/timeline.css @@ -36,7 +36,7 @@ .cd-timeline__block { display: flex; - margin-bottom: 2rem; + margin-bottom: 2.5rem; } .cd-timeline__content.box { -- cgit v1.2.3 From 1d943b2051705b226b4d8924f9f38d171c910842 Mon Sep 17 00:00:00 2001 From: hedy Date: Tue, 19 Mar 2024 21:30:35 +0800 Subject: Timeline: Add mobile layout, support Safari Also - Add comments in CSS - Remove `-webkit` rules because most of them are deprecated And uh, I forgot, but the title summarises them! --- pydis_site/static/css/home/timeline.css | 268 +++++++++++++++----------------- pydis_site/templates/home/timeline.html | 104 ++++++------- 2 files changed, 179 insertions(+), 193 deletions(-) (limited to 'pydis_site/static/css') diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css index 27d7c119..bf57d56d 100644 --- a/pydis_site/static/css/home/timeline.css +++ b/pydis_site/static/css/home/timeline.css @@ -1,18 +1,43 @@ +/* Adapted from https://codyhouse.co/gem/vertical-timeline/ with significant + * modifications. + * */ + :root { + --side-padding: 0; --background-color: rgb(232, 239, 245); + --content-background-color: white; --accent: hsl(205, 38%, 89%); + + --timeline-line-width: 4px; + + --icon-width: 60px; + --icon-border-width: 4px; --icon-border-color: white; --icon-color: white; - --content-background-color: white; + --icon-image-width: 40px; + --icon-size: 1.5rem; + + --date-color: hsl(0, 0%, 48%); } [data-theme="dark"] { --background-color: #2C2F33; + --content-background-color: #23272A; --accent: hsl(0, 0%, 34%); + --icon-border-color: hsl(0, 0%, 50%); - --content-background-color: #23272A; } +@media (max-width: 1023px) { + :root { + --side-padding: 1.25rem; + --icon-width: 40px; + --icon-image-width: 30px; + --icon-size: 1.1rem; + } +} + +/* Containers */ .cd-timeline { overflow: hidden; padding: 3rem 0; @@ -21,35 +46,69 @@ .cd-timeline__container { position: relative; - padding: 1rem 0; + padding: 1rem var(--side-padding); } +/* Line that goes through all the icons */ .cd-timeline__container::before { content: ''; position: absolute; - top: 0; - left: calc(50% - 2px); + height: 100%; - width: 4px; + width: var(--timeline-line-width); background-color: var(--accent); + z-index: 1; } +@media (min-width: 1023px) { + .cd-timeline__container::before { + left: calc(50% - var(--timeline-line-width) / 2); + } +} + +@media (max-width: 1023px) { + .cd-timeline__container::before { + margin-left: calc(var(--icon-width) / 2 - var(--timeline-line-width) / 2); + } +} + +/* Each timeline item */ .cd-timeline__block { display: flex; margin-bottom: 2.5rem; } +/* Visual container of the timeline item */ .cd-timeline__content.box { box-shadow: var(--accent) 0px 3px 0px 0px; background-color: var(--content-background-color); } -@media (min-width: 768px) { +@media (max-width: 1023px) { + .cd-timeline__content.box { + margin-left: 1rem; + } +} + +@media (min-width: 1023px) { .cd-timeline__block:nth-child(even) { flex-direction: row-reverse; } } +/* The title and text */ +.cd-timeline__content { + flex-grow: 1; +} + +@media (min-width: 1023px) { + .cd-timeline__content { + width: 45%; + flex-grow: 0; + } +} + +/* Icon */ .cd-timeline__img { display: flex; justify-content: center; @@ -57,58 +116,90 @@ flex-shrink: 0; border-radius: 50%; - height: 60px; - width: 60px; - box-shadow: 0 0 0 4px var(--icon-border-color),inset 0 2px 0 rgba(0,0,0,.08),0 3px 0 4px rgba(0,0,0,.05); + height: var(--icon-width); + width: var(--icon-width); + 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); + z-index: 2; /* Font Awesome icon size and color */ color: var(--icon-color); - font-size: 1.5em; + font-size: var(--icon-size); +} - @media (min-width: 768px) { +@media (min-width: 1023px) { + .cd-timeline__img { order: 1; + + position: absolute; + left: calc(50% - var(--icon-width) / 2); } } +/* Icon that uses pydis logo */ .cd-timeline__img img { - width: 40px; - height: 40px; - margin-left: 2px; - margin-top: 2px; -} + /* 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. + * + * HACK: Hardcoded and specific to the pydis logo. + * */ + margin-top: 1px; + margin-left: 1px; -.cd-timeline__date { - font-size: .9rem; + width: var(--icon-image-width); + height: var(--icon-image-width); } -.cd-timeline__content { - flex-grow: 1; +/* Date next to icons */ +.cd-timeline__date { + position: absolute; + width: 100%; + margin-top: 1rem; + z-index: 3; - @media (min-width: 768px) { - width: 45%; - flex-grow: 0; - } + font-size: .9rem; + color: var(--date-color); } -@media (min-width: 64rem) { +@media (min-width: 1023px) { .cd-timeline__date { - position: absolute; - width: 100%; left: 54%; - margin-top: 1rem; } + .cd-timeline__block:nth-child(even) .cd-timeline__date { left: auto; right: 54%; - text-align: right + text-align: right; } +} - .cd-timeline__img { - left: calc(50% - 30px); - position: absolute; +@media (max-width: 1023px) { + .cd-timeline__date { + /* + * 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 right of the icon, but left of the icon's + * right box shadow. + * + * However, we're not adding --icon-border-width here because the + * 'margin-left: 1rem' for content boxes are aligned from before the + * left of the right icon-border. + * + * 1.25rem is the left padding of content boxes from Bulma. + * */ + margin-left: calc(1rem + 1.25rem); + margin-top: .75rem; + } + + .cd-timeline__content .title { + /* Make space for the date text */ + margin-top: 1.25rem; } } +/* Icon background colors */ .pastel-red { background-color: #ff7878 !important; } @@ -152,6 +243,7 @@ background-color: #7c9a21 !important; } .pastel-dark-blue { + /* Works well for both themes */ background-color: #576297 !important; } @@ -167,118 +259,55 @@ img, video, svg { max-width: 100% } - -/* Bounce-in and bounce-out animations */ -@media (min-width: 64rem) { +/* Bounce-in and bounce-out animations, desktop-only */ +@media (min-width: 1023px) { .cd-timeline__img--hidden, .cd-timeline__content--hidden, .cd-timeline__date--hidden { visibility: hidden } .cd-timeline__img--bounce-in { - -webkit-animation: icon-bounce 0.6s; animation: icon-bounce 0.6s; } .cd-timeline__content--bounce-in, .cd-timeline__date--bounce-in { - -webkit-animation: item-bounce-left 0.6s; animation: item-bounce-left 0.6s; } .cd-timeline__block:nth-child(even) .cd-timeline__content--bounce-in, .cd-timeline__block:nth-child(even) .cd-timeline__date--bounce-in { - -webkit-animation-name: item-bounce-right; animation-name: item-bounce-right; } .cd-timeline__img--bounce-out { - -webkit-animation: icon-bounce-out 0.6s; animation: icon-bounce-out 0.6s; } .cd-timeline__content--bounce-out, .cd-timeline__date--bounce-out { - -webkit-animation: item-bounce-out 0.6s; animation: item-bounce-out 0.6s; } } -@-webkit-keyframes icon-bounce { - 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 icon-bounce { 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 item-bounce-left { - 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 item-bounce-left { 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 item-bounce-right { - 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) } } @@ -286,86 +315,43 @@ img, video, svg { @keyframes item-bounce-right { 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 icon-bounce-out { - 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 icon-bounce-out { 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 item-bounce-out { - 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 item-bounce-out { 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 index b3c8dce1..7097d1f1 100644 --- a/pydis_site/templates/home/timeline.html +++ b/pydis_site/templates/home/timeline.html @@ -20,7 +20,7 @@
- Jul 11th, 2023 + Jul 11th, 2023
@@ -42,7 +42,7 @@
- Jan 30th, 2023 + Jan 30th, 2023
@@ -65,7 +65,7 @@
- Nov 25th, 2022 + Nov 25th, 2022
@@ -84,7 +84,7 @@
- Oct 24th, 2022 + Oct 24th, 2022
@@ -113,7 +113,7 @@
- July 21st, 2022 + July 21st, 2022
@@ -140,7 +140,7 @@
- May 19th, 2022 + May 19th, 2022
@@ -160,7 +160,7 @@
- Feb 21st, 2022 + Feb 21st, 2022
@@ -180,7 +180,7 @@
- Feb 12th, 2022 + Feb 12th, 2022
@@ -199,7 +199,7 @@
- Feb 9th, 2022 + Feb 9th, 2022
@@ -221,7 +221,7 @@
- Feb 2nd, 2022 + Feb 2nd, 2022
@@ -244,7 +244,7 @@
- Jan 19, 2022 + Jan 19, 2022
@@ -262,7 +262,7 @@
- Oct 4th, 2021 + Oct 4th, 2021
@@ -289,7 +289,7 @@
- May 24th, 2021 + May 24th, 2021
@@ -310,7 +310,7 @@
- July 9, 2021 + July 9, 2021
@@ -335,7 +335,7 @@
- May 24, 2021 + May 24, 2021
@@ -359,7 +359,7 @@
- April 23, 2021 + April 23, 2021
@@ -383,7 +383,7 @@
- Mar 21st, 2021 + Mar 21st, 2021
@@ -410,7 +410,7 @@
- Mar 13th, 2021 + Mar 13th, 2021
@@ -437,7 +437,7 @@
- Mar 13th, 2021 + Mar 13th, 2021
@@ -462,7 +462,7 @@
- Mar 1st, 2021 + Mar 1st, 2021
@@ -487,7 +487,7 @@
- Feb 18th, 2021 + Feb 18th, 2021
@@ -505,7 +505,7 @@
- February 8th, 2021 + February 8th, 2021
@@ -530,7 +530,7 @@
- December 1st - 25th, 2020 + December 1st - 25th, 2020
@@ -554,7 +554,7 @@
- Nov 29th, 2020 + Nov 29th, 2020
@@ -575,7 +575,7 @@
- Oct 22nd, 2020 + Oct 22nd, 2020
@@ -593,7 +593,7 @@
- Oct 21st, 2020 + Oct 21st, 2020
@@ -615,7 +615,7 @@
- Aug 16th, 2020 + Aug 16th, 2020
@@ -635,7 +635,7 @@
- Jul 31st, 2020 + Jul 31st, 2020
@@ -661,7 +661,7 @@
- Jun 4th, 2020 + Jun 4th, 2020
@@ -681,7 +681,7 @@
- May 28th, 2020 + May 28th, 2020
@@ -701,7 +701,7 @@
- May 25th, 2020 + May 25th, 2020
@@ -721,7 +721,7 @@
- Apr 17th, 2020 + Apr 17th, 2020
@@ -747,7 +747,7 @@
- Apr 14, 2020 + Apr 14, 2020
@@ -766,7 +766,7 @@
- Apr 5th, 2020 + Apr 5th, 2020
@@ -787,7 +787,7 @@
- Jan 17, 2020 + Jan 17, 2020
@@ -813,7 +813,7 @@
- Dec 22nd, 2019 + Dec 22nd, 2019
@@ -830,7 +830,7 @@
- Sept 22nd, 2019 + Sept 22nd, 2019
@@ -849,7 +849,7 @@
- Oct 26th, 2019 + Oct 26th, 2019
@@ -869,7 +869,7 @@
- Sep 15, 2019 + Sep 15, 2019
@@ -889,7 +889,7 @@
- Apr 8th, 2019 + Apr 8th, 2019
@@ -911,7 +911,7 @@
- Dec 19th, 2018 + Dec 19th, 2018
@@ -932,7 +932,7 @@
- Nov 24th, 2018 + Nov 24th, 2018
@@ -951,7 +951,7 @@
- Oct 1st, 2018 + Oct 1st, 2018
@@ -972,7 +972,7 @@
- Jul 10th, 2018 + Jul 10th, 2018
@@ -992,7 +992,7 @@
- Jun 20th, 2018 + Jun 20th, 2018
@@ -1012,7 +1012,7 @@
- Jun 9th, 2018 + Jun 9th, 2018
@@ -1034,7 +1034,7 @@
- May 21st, 2018 + May 21st, 2018
@@ -1056,7 +1056,7 @@
- Mar 23rd, 2018 + Mar 23rd, 2018
@@ -1078,7 +1078,7 @@
- Mar 4th, 2018 + Mar 4th, 2018
@@ -1097,7 +1097,7 @@
- Feb 3rd, 2018 + Feb 3rd, 2018
@@ -1117,7 +1117,7 @@
- Nov 10th, 2017 + Nov 10th, 2017
@@ -1135,7 +1135,7 @@
- Jan 8th, 2017 + Jan 8th, 2017
-- cgit v1.2.3 From 27650034085125f5d4b86ed9a581df4fad1e0d43 Mon Sep 17 00:00:00 2001 From: hedy Date: Wed, 20 Mar 2024 21:28:28 +0800 Subject: Timeline: Better design structure - Put CSS for the pydis banner item (Aperture's logo design) inline style rather than using a class. - Style icons that uses images separate from icons that uses the pydis logo image. - Rename the pydis logo image to be more descriptive. - Group the icon and date components together for easier and more robust styling (see CSS comments). - More descriptive alt text for pydis icons. - Added responsibility: EVEN smaller icons on mobile. - Align content boxes about the middle axis rather than relying on container padding. --- pydis_site/static/css/home/timeline.css | 164 ++++-- .../static/images/timeline/cd-icon-picture.svg | 72 --- .../static/images/timeline/cd-icon-pydis.svg | 72 +++ pydis_site/templates/home/timeline.html | 636 ++++++++++----------- 4 files changed, 469 insertions(+), 475 deletions(-) delete mode 100755 pydis_site/static/images/timeline/cd-icon-picture.svg create mode 100755 pydis_site/static/images/timeline/cd-icon-pydis.svg (limited to 'pydis_site/static/css') diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css index bf57d56d..04cc98bc 100644 --- a/pydis_site/static/css/home/timeline.css +++ b/pydis_site/static/css/home/timeline.css @@ -3,19 +3,25 @@ * */ :root { - --side-padding: 0; + --side-spacing: 0; --background-color: rgb(232, 239, 245); --content-background-color: white; --accent: hsl(205, 38%, 89%); --timeline-line-width: 4px; + --timeline-line-half-width: calc(var(--timeline-line-width) / 2); --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; + /* On desktop: Margin on the left and right of the icon. + * On mobile: Set to be consistent with --side-spacing. + * */ + --icon-side-spacing: 1.5rem; --date-color: hsl(0, 0%, 48%); } @@ -30,13 +36,27 @@ @media (max-width: 1023px) { :root { - --side-padding: 1.25rem; + --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; + --timeline-line-width: 3px; + --icon-width: 30px; + --icon-border-width: 3px; + --icon-image-width: 24px; + --icon-size: .9rem; + } +} + /* Containers */ .cd-timeline { overflow: hidden; @@ -46,10 +66,10 @@ .cd-timeline__container { position: relative; - padding: 1rem var(--side-padding); + padding: 1rem var(--side-spacing); } -/* Line that goes through all the icons */ +/* The line that goes through all the icons */ .cd-timeline__container::before { content: ''; position: absolute; @@ -62,19 +82,20 @@ @media (min-width: 1023px) { .cd-timeline__container::before { - left: calc(50% - var(--timeline-line-width) / 2); + left: calc(50% - var(--timeline-line-half-width)); } } @media (max-width: 1023px) { .cd-timeline__container::before { - margin-left: calc(var(--icon-width) / 2 - var(--timeline-line-width) / 2); + margin-left: calc(var(--icon-half-width) - var(--timeline-line-half-width)); } } /* Each timeline item */ .cd-timeline__block { display: flex; + align-items: flex-start; margin-bottom: 2.5rem; } @@ -82,29 +103,75 @@ .cd-timeline__content.box { box-shadow: var(--accent) 0px 3px 0px 0px; background-color: var(--content-background-color); + flex-grow: 1; +} + +@media (min-width: 1023px) { + .cd-timeline__block: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 cd-timeline__block items. + * */ + .cd-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); + } + .cd-timeline__block:nth-child(odd) .cd-timeline__content.box { + left: unset; + right: var(--content-position); + margin-right: var(--icon-side-spacing); + } } @media (max-width: 1023px) { .cd-timeline__content.box { - margin-left: 1rem; + margin-left: var(--icon-side-spacing); } } - -@media (min-width: 1023px) { - .cd-timeline__block:nth-child(even) { - flex-direction: row-reverse; +@media (max-width: 600px) { + .cd-timeline__content.box { + margin-left: var(--icon-side-spacing); } } -/* The title and text */ -.cd-timeline__content { - flex-grow: 1; +/* 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. + * */ +.icon-date { + z-index: 4; + display: flex; + align-items: baseline; } @media (min-width: 1023px) { - .cd-timeline__content { - width: 45%; - flex-grow: 0; + .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)); + } + + .cd-timeline__block:nth-child(even) .icon-date { + flex-direction: row-reverse; + left: unset; + right: calc(50% - var(--icon-half-width)); } } @@ -118,82 +185,69 @@ 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); - z-index: 2; + margin-top: var(--icon-border-width); /* Font Awesome icon size and color */ color: var(--icon-color); font-size: var(--icon-size); } -@media (min-width: 1023px) { - .cd-timeline__img { - order: 1; - - position: absolute; - left: calc(50% - var(--icon-width) / 2); - } +/* Icons that use a custom image */ +.cd-timeline__img img { + width: var(--icon-image-width); + height: var(--icon-image-width); } -/* Icon that uses pydis logo */ -.cd-timeline__img img { +/* Icons that use the pydis logo */ +.cd-timeline__img 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. * - * HACK: Hardcoded and specific to the pydis logo. + * HACK: Harcoded; Unresponsive to actual image dimensions. * */ margin-top: 1px; margin-left: 1px; - - width: var(--icon-image-width); - height: var(--icon-image-width); } -/* Date next to icons */ .cd-timeline__date { - position: absolute; - width: 100%; - margin-top: 1rem; - z-index: 3; - font-size: .9rem; color: var(--date-color); } @media (min-width: 1023px) { - .cd-timeline__date { - left: 54%; - } - .cd-timeline__block:nth-child(even) .cd-timeline__date { left: auto; - right: 54%; + right: 50%; text-align: right; } } @media (max-width: 1023px) { .cd-timeline__date { - /* - * On mobile, place the date at the top of the text box left-aligned + 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 right of the icon, but left of the icon's - * right box shadow. + * is left-aligned to the left of the icon (right of box-shadow). * * However, we're not adding --icon-border-width here because the - * 'margin-left: 1rem' for content boxes are aligned from before the - * left of the right icon-border. + * 'margin-left: var(--icon-side-spacing)' for content boxes are + * aligned from before the left of the right icon-border. * * 1.25rem is the left padding of content boxes from Bulma. * */ - margin-left: calc(1rem + 1.25rem); + margin-left: calc(var(--icon-width) + var(--icon-side-spacing) + 1.25rem); margin-top: .75rem; } - .cd-timeline__content .title { + .cd-timeline__content.box .title { /* Make space for the date text */ margin-top: 1.25rem; } @@ -247,14 +301,6 @@ background-color: #576297 !important; } -/* Used for "Our logo is born" timeline item */ -.pydis-logo-banner { - border-radius: 10px; -} -.pydis-logo-banner img { - padding-right: 20px; -} - img, video, svg { max-width: 100% } @@ -262,7 +308,7 @@ img, video, svg { /* Bounce-in and bounce-out animations, desktop-only */ @media (min-width: 1023px) { .cd-timeline__img--hidden, .cd-timeline__content--hidden, .cd-timeline__date--hidden { - visibility: hidden + visibility: hidden; } .cd-timeline__img--bounce-in { animation: icon-bounce 0.6s; diff --git a/pydis_site/static/images/timeline/cd-icon-picture.svg b/pydis_site/static/images/timeline/cd-icon-picture.svg deleted file mode 100755 index 015718a8..00000000 --- a/pydis_site/static/images/timeline/cd-icon-picture.svg +++ /dev/null @@ -1,72 +0,0 @@ - -image/svg+xml diff --git a/pydis_site/static/images/timeline/cd-icon-pydis.svg b/pydis_site/static/images/timeline/cd-icon-pydis.svg new file mode 100755 index 00000000..015718a8 --- /dev/null +++ b/pydis_site/static/images/timeline/cd-icon-pydis.svg @@ -0,0 +1,72 @@ + +image/svg+xml diff --git a/pydis_site/templates/home/timeline.html b/pydis_site/templates/home/timeline.html index 7097d1f1..a62c8570 100644 --- a/pydis_site/templates/home/timeline.html +++ b/pydis_site/templates/home/timeline.html @@ -13,13 +13,12 @@
-
- - - -
- -
+
+
+ + + +
Jul 11th, 2023
@@ -37,11 +36,10 @@
-
- Picture -
- -
+
+
+ Logo +
Jan 30th, 2023
@@ -58,13 +56,12 @@
-
- - - -
- -
+
+
+ + + +
Nov 25th, 2022
@@ -79,11 +76,10 @@
-
- Picture -
- -
+
+
+ Logo +
Oct 24th, 2022
@@ -106,13 +102,12 @@
-
- - - -
- -
+
+
+ + + +
July 21st, 2022
@@ -135,11 +130,10 @@
-
- -
- -
+
+
+ +
May 19th, 2022
@@ -153,13 +147,12 @@
-
- - - -
- -
+
+
+ + + +
Feb 21st, 2022
@@ -173,13 +166,12 @@
-
- - - -
- -
+
+
+ + + +
Feb 12th, 2022
@@ -194,11 +186,10 @@
-
- Picture -
- -
+
+
+ Logo +
Feb 9th, 2022
@@ -214,13 +205,12 @@
-
- - - -
- -
+
+
+ + + +
Feb 2nd, 2022
@@ -237,13 +227,12 @@
-
- - - -
- -
+
+
+ + + +
Jan 19, 2022
@@ -257,11 +246,10 @@
-
- Picture -
- -
+
+
+ Logo +
Oct 4th, 2021
@@ -284,11 +272,10 @@
-
- -
- -
+
+
+ +
May 24th, 2021
@@ -303,13 +290,12 @@
-
- - - -
- -
+
+
+ + + +
July 9, 2021
@@ -328,13 +314,12 @@
-
- - - -
- -
+
+
+ + + +
May 24, 2021
@@ -354,11 +339,10 @@
-
- Picture -
- -
+
+
+ Logo +
April 23, 2021
@@ -376,13 +360,12 @@
-
- - - -
- -
+
+
+ + + +
Mar 21st, 2021
@@ -403,13 +386,12 @@
-
- - - -
- -
+
+
+ + + +
Mar 13th, 2021
@@ -430,13 +412,12 @@
-
- - - -
- -
+
+
+ + + +
Mar 13th, 2021
@@ -455,13 +436,12 @@
-
- - - -
- -
+
+
+ + + +
Mar 1st, 2021
@@ -480,13 +460,12 @@
-
- - - -
- -
+
+
+ + + +
Feb 18th, 2021
@@ -498,13 +477,12 @@
-
- - - -
- -
+
+
+ + + +
February 8th, 2021
@@ -523,13 +501,12 @@
-
- - - -
- -
+
+
+ + + +
December 1st - 25th, 2020
@@ -547,13 +524,12 @@
-
- - - -
- -
+
+
+ + + +
Nov 29th, 2020
@@ -568,13 +544,12 @@
-
- - - -
- -
+
+
+ + + +
Oct 22nd, 2020
@@ -588,11 +563,10 @@
-
- Picture -
- -
+
+
+ Logo +
Oct 21st, 2020
@@ -608,13 +582,12 @@
-
- - - -
- -
+
+
+ + + +
Aug 16th, 2020
@@ -628,13 +601,12 @@
-
- - - -
- -
+
+
+ + + +
Jul 31st, 2020
@@ -654,13 +626,12 @@
-
- - - -
- -
+
+
+ + + +
Jun 4th, 2020
@@ -674,13 +645,12 @@
-
- - - -
- -
+
+
+ + + +
May 28th, 2020
@@ -694,13 +664,12 @@
-
- - - -
- -
+
+
+ + + +
May 25th, 2020
@@ -714,13 +683,12 @@
-
- - - -
- -
+
+
+ + + +
Apr 17th, 2020
@@ -740,13 +708,12 @@
-
- - - -
- -
+
+
+ + + +
Apr 14, 2020
@@ -759,13 +726,12 @@
-
- - - -
- -
+
+
+ + + +
Apr 5th, 2020
@@ -780,13 +746,12 @@
-
- - - -
- -
+
+
+ + + +
Jan 17, 2020
@@ -806,13 +771,12 @@
-
- - - -
- -
+
+
+ + + +
Dec 22nd, 2019
@@ -825,11 +789,10 @@
-
- Picture -
- -
+
+
+ Logo +
Sept 22nd, 2019
@@ -842,13 +805,12 @@
-
- - - -
- -
+
+
+ + + +
Oct 26th, 2019
@@ -862,13 +824,12 @@
-
- - - -
- -
+
+
+ + + +
Sep 15, 2019
@@ -882,13 +843,12 @@
-
- - - -
- -
+
+
+ + + +
Apr 8th, 2019
@@ -904,13 +864,12 @@
-
- - - -
- -
+
+
+ + + +
Dec 19th, 2018
@@ -925,13 +884,12 @@
-
- - - -
- -
+
+
+ + + +
Nov 24th, 2018
@@ -944,13 +902,12 @@
-
- - - -
- -
+
+
+ + + +
Oct 1st, 2018
@@ -965,13 +922,12 @@
-
- - - -
- -
+
+
+ + + +
Jul 10th, 2018
@@ -985,13 +941,12 @@
-
- - - -
- -
+
+
+ + + +
Jun 20th, 2018
@@ -1005,13 +960,12 @@
-
- - - -
- -
+
+
+ + + +
Jun 9th, 2018
@@ -1027,13 +981,12 @@
-
- - - -
- -
+
+
+ + + +
May 21st, 2018
@@ -1049,13 +1002,12 @@
-
- - - -
- -
+
+
+ + + +
Mar 23rd, 2018
@@ -1071,13 +1023,12 @@
-
- - - -
- -
+
+
+ + + +
Mar 4th, 2018
@@ -1092,31 +1043,29 @@
-
- Picture -
- -
+
+
+ Logo +
Feb 3rd, 2018

Our logo is born. Thanks @Aperture!

-

+

+

-
- - - -
- -
+
+
+ + + +
Nov 10th, 2017
@@ -1130,11 +1079,10 @@
-
- Picture -
- -
+
+
+ Logo +
Jan 8th, 2017
-- cgit v1.2.3 From 41f9fe4748b2636d9a3ad0b369d4b2bd917f6d09 Mon Sep 17 00:00:00 2001 From: hedy Date: Thu, 21 Mar 2024 09:54:01 +0800 Subject: Use semantic class names in the timeline consistent with Bulma Also turns out I was using the Bulma .content class wrong this whole time. We just need to slap that class onto a div and anything inside can be the output of, say a markdown -> HTML converter! Fix messy spacing and extraneous whitespace in the HTML as well. Special thanks to Vim macros. --- pydis_site/static/css/home/timeline.css | 64 +-- pydis_site/static/js/timeline/main.js | 68 +-- pydis_site/templates/home/timeline.html | 965 ++++++++++++++------------------ 3 files changed, 489 insertions(+), 608 deletions(-) (limited to 'pydis_site/static/css') diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css index 04cc98bc..3e284768 100644 --- a/pydis_site/static/css/home/timeline.css +++ b/pydis_site/static/css/home/timeline.css @@ -58,19 +58,19 @@ } /* Containers */ -.cd-timeline { +.timeline { overflow: hidden; padding: 3rem 0; background-color: var(--background-color); } -.cd-timeline__container { +.timeline .container { position: relative; padding: 1rem var(--side-spacing); } /* The line that goes through all the icons */ -.cd-timeline__container::before { +.timeline .container::before { content: ''; position: absolute; @@ -81,40 +81,40 @@ } @media (min-width: 1023px) { - .cd-timeline__container::before { + .timeline .container::before { left: calc(50% - var(--timeline-line-half-width)); } } @media (max-width: 1023px) { - .cd-timeline__container::before { + .timeline .container::before { margin-left: calc(var(--icon-half-width) - var(--timeline-line-half-width)); } } /* Each timeline item */ -.cd-timeline__block { +.timeline-item { display: flex; align-items: flex-start; margin-bottom: 2.5rem; } /* Visual container of the timeline item */ -.cd-timeline__content.box { +.timeline-content.box { box-shadow: var(--accent) 0px 3px 0px 0px; background-color: var(--content-background-color); flex-grow: 1; } @media (min-width: 1023px) { - .cd-timeline__block:nth-child(odd) { + .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 cd-timeline__block items. + * even and odd children of timeline items. * */ - .cd-timeline__content.box { + .timeline-content.box { width: 45%; flex-grow: 0; @@ -125,7 +125,7 @@ left: var(--content-position); margin-left: var(--icon-side-spacing); } - .cd-timeline__block:nth-child(odd) .cd-timeline__content.box { + .timeline-item:nth-child(odd) .timeline-content.box { left: unset; right: var(--content-position); margin-right: var(--icon-side-spacing); @@ -133,12 +133,12 @@ } @media (max-width: 1023px) { - .cd-timeline__content.box { + .timeline-content.box { margin-left: var(--icon-side-spacing); } } @media (max-width: 600px) { - .cd-timeline__content.box { + .timeline-content.box { margin-left: var(--icon-side-spacing); } } @@ -149,14 +149,14 @@ * the icon, and reverse their ordering for alternate timeline items on * desktop. * */ -.icon-date { +.timeline-icon-date { z-index: 4; display: flex; align-items: baseline; } @media (min-width: 1023px) { - .icon-date { + .timeline-icon-date { order: 1; /* Arbitrary container width to prevent wrapping of the date text */ @@ -168,7 +168,7 @@ left: calc(50% - var(--icon-half-width)); } - .cd-timeline__block:nth-child(even) .icon-date { + .timeline-item:nth-child(even) .timeline-icon-date { flex-direction: row-reverse; left: unset; right: calc(50% - var(--icon-half-width)); @@ -176,7 +176,7 @@ } /* Icon */ -.cd-timeline__img { +.timeline-icon { display: flex; justify-content: center; align-items: center; @@ -200,13 +200,13 @@ } /* Icons that use a custom image */ -.cd-timeline__img img { +.timeline-icon img { width: var(--icon-image-width); height: var(--icon-image-width); } /* Icons that use the pydis logo */ -.cd-timeline__img img.pydis { +.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. @@ -217,13 +217,13 @@ margin-left: 1px; } -.cd-timeline__date { +.timeline-date { font-size: .9rem; color: var(--date-color); } @media (min-width: 1023px) { - .cd-timeline__block:nth-child(even) .cd-timeline__date { + .timeline-item:nth-child(even) .timeline-date { left: auto; right: 50%; text-align: right; @@ -231,7 +231,7 @@ } @media (max-width: 1023px) { - .cd-timeline__date { + .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 @@ -247,7 +247,7 @@ margin-top: .75rem; } - .cd-timeline__content.box .title { + .timeline-content.content h3 { /* Make space for the date text */ margin-top: 1.25rem; } @@ -307,25 +307,25 @@ img, video, svg { /* Bounce-in and bounce-out animations, desktop-only */ @media (min-width: 1023px) { - .cd-timeline__img--hidden, .cd-timeline__content--hidden, .cd-timeline__date--hidden { + .timeline-icon--hidden, .timeline-content--hidden, .timeline-date--hidden { visibility: hidden; } - .cd-timeline__img--bounce-in { + .timeline-icon--bounce-in { animation: icon-bounce 0.6s; } - .cd-timeline__content--bounce-in, - .cd-timeline__date--bounce-in { + .timeline-content--bounce-in, + .timeline-date--bounce-in { animation: item-bounce-left 0.6s; } - .cd-timeline__block:nth-child(even) .cd-timeline__content--bounce-in, - .cd-timeline__block:nth-child(even) .cd-timeline__date--bounce-in { + .timeline-item:nth-child(even) .timeline-content--bounce-in, + .timeline-item:nth-child(even) .timeline-date--bounce-in { animation-name: item-bounce-right; } - .cd-timeline__img--bounce-out { + .timeline-icon--bounce-out { animation: icon-bounce-out 0.6s; } - .cd-timeline__content--bounce-out, - .cd-timeline__date--bounce-out { + .timeline-content--bounce-out, + .timeline-date--bounce-out { animation: item-bounce-out 0.6s; } } diff --git a/pydis_site/static/js/timeline/main.js b/pydis_site/static/js/timeline/main.js index 67a50d43..df0ef585 100644 --- a/pydis_site/static/js/timeline/main.js +++ b/pydis_site/static/js/timeline/main.js @@ -2,10 +2,10 @@ // Vertical Timeline - by CodyHouse.co (modified) function VerticalTimeline( element ) { this.element = element; - this.blocks = this.element.getElementsByClassName("cd-timeline__block"); - this.images = this.element.getElementsByClassName("cd-timeline__img"); - this.contents = this.element.getElementsByClassName("cd-timeline__content"); - this.dates = this.element.getElementsByClassName("cd-timeline__date"); + this.blocks = this.element.getElementsByClassName("timeline-item"); + this.images = this.element.getElementsByClassName("timeline-icon"); + this.contents = this.element.getElementsByClassName("timeline-content"); + this.dates = this.element.getElementsByClassName("timeline-date"); this.offset = 0.8; this.hideBlocks(); }; @@ -19,9 +19,9 @@ for( var i = 0; i < this.blocks.length; i++) { (function(i){ if( self.blocks[i].getBoundingClientRect().top > window.innerHeight*self.offset ) { - self.images[i].classList.add("cd-timeline__img--hidden"); - self.contents[i].classList.add("cd-timeline__content--hidden"); - self.dates[i].classList.add("cd-timeline__date--hidden"); + self.images[i].classList.add("timeline-icon--hidden"); + self.contents[i].classList.add("timeline-content--hidden"); + self.dates[i].classList.add("timeline-date--hidden"); } })(i); } @@ -34,17 +34,17 @@ var self = this; for( var i = 0; i < this.blocks.length; i++) { (function(i){ - if((self.contents[i].classList.contains("cd-timeline__content--hidden") || self.contents[i].classList.contains("cd-timeline__content--bounce-out")) && self.blocks[i].getBoundingClientRect().top <= window.innerHeight*self.offset ) { + if((self.contents[i].classList.contains("timeline-content--hidden") || self.contents[i].classList.contains("timeline-content--bounce-out")) && self.blocks[i].getBoundingClientRect().top <= window.innerHeight*self.offset ) { // add bounce-in animation - self.images[i].classList.add("cd-timeline__img--bounce-in"); - self.contents[i].classList.add("cd-timeline__content--bounce-in"); - self.dates[i].classList.add("cd-timeline__date--bounce-in"); - self.images[i].classList.remove("cd-timeline__img--hidden"); - self.contents[i].classList.remove("cd-timeline__content--hidden"); - self.dates[i].classList.remove("cd-timeline__date--hidden"); - self.images[i].classList.remove("cd-timeline__img--bounce-out"); - self.contents[i].classList.remove("cd-timeline__content--bounce-out"); - self.dates[i].classList.remove("cd-timeline__date--bounce-out"); + self.images[i].classList.add("timeline-icon--bounce-in"); + self.contents[i].classList.add("timeline-content--bounce-in"); + self.dates[i].classList.add("timeline-date--bounce-in"); + self.images[i].classList.remove("timeline-icon--hidden"); + self.contents[i].classList.remove("timeline-content--hidden"); + self.dates[i].classList.remove("timeline-date--hidden"); + self.images[i].classList.remove("timeline-icon--bounce-out"); + self.contents[i].classList.remove("timeline-content--bounce-out"); + self.dates[i].classList.remove("timeline-date--bounce-out"); } })(i); } @@ -57,19 +57,19 @@ var self = this; for( var i = 0; i < this.blocks.length; i++) { (function(i){ - if(self.contents[i].classList.contains("cd-timeline__content--bounce-in") && self.blocks[i].getBoundingClientRect().top > window.innerHeight*self.offset ) { - self.images[i].classList.remove("cd-timeline__img--bounce-in"); - self.contents[i].classList.remove("cd-timeline__content--bounce-in"); - self.dates[i].classList.remove("cd-timeline__date--bounce-in"); - self.images[i].classList.add("cd-timeline__img--bounce-out"); - self.contents[i].classList.add("cd-timeline__content--bounce-out"); - self.dates[i].classList.add("cd-timeline__date--bounce-out"); + if(self.contents[i].classList.contains("timeline-content--bounce-in") && self.blocks[i].getBoundingClientRect().top > window.innerHeight*self.offset ) { + self.images[i].classList.remove("timeline-icon--bounce-in"); + self.contents[i].classList.remove("timeline-content--bounce-in"); + self.dates[i].classList.remove("timeline-date--bounce-in"); + self.images[i].classList.add("timeline-icon--bounce-out"); + self.contents[i].classList.add("timeline-content--bounce-out"); + self.dates[i].classList.add("timeline-date--bounce-out"); } })(i); } } - var verticalTimelines = document.getElementsByClassName("js-cd-timeline"), + var verticalTimelines = document.getElementsByClassName("timeline"), verticalTimelinesArray = [], scrolling = false; if( verticalTimelines.length > 0 ) { @@ -88,15 +88,15 @@ }); function animationEnd(event) { - if (event.target.classList.contains("cd-timeline__img--bounce-out")) { - event.target.classList.add("cd-timeline__img--hidden"); - event.target.classList.remove("cd-timeline__img--bounce-out"); - } else if (event.target.classList.contains("cd-timeline__content--bounce-out")) { - event.target.classList.add("cd-timeline__content--hidden"); - event.target.classList.remove("cd-timeline__content--bounce-out"); - } else if (event.target.classList.contains("cd-timeline__date--bounce-out")) { - event.target.classList.add("cd-timeline__date--hidden"); - event.target.classList.remove("cd-timeline__date--bounce-out"); + if (event.target.classList.contains("timeline-icon--bounce-out")) { + event.target.classList.add("timeline-icon--hidden"); + event.target.classList.remove("timeline-icon--bounce-out"); + } else if (event.target.classList.contains("timeline-content--bounce-out")) { + event.target.classList.add("timeline-content--hidden"); + event.target.classList.remove("timeline-content--bounce-out"); + } else if (event.target.classList.contains("timeline-date--bounce-out")) { + event.target.classList.add("timeline-date--hidden"); + event.target.classList.remove("timeline-date--bounce-out"); } } diff --git a/pydis_site/templates/home/timeline.html b/pydis_site/templates/home/timeline.html index a62c8570..eb8bfa47 100644 --- a/pydis_site/templates/home/timeline.html +++ b/pydis_site/templates/home/timeline.html @@ -9,22 +9,19 @@ {% block content %} {% include "base/navbar.html" %} -
-
- -
-
-
- - - +
+
+
+
+
+
- Jul 11th, 2023 + Jul 11th, 2023
-
-

Switch to new paste service

-

+

+

Switch to new paste service

+

We migrate over to pinnwand as the service that powers our paste bin over at https://paste.pythondiscord.com/. @@ -35,17 +32,17 @@

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

Retirement of Joe and Sebastiaan

-

+

+

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. @@ -55,19 +52,17 @@

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

Switch to forum-based help system

-

+

+

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. @@ -75,17 +70,17 @@

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

Python 3.11 Release Stream

-

+

+

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 @@ -97,23 +92,20 @@ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>

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

Summer Code Jam 2022 (CJ9)

-

+

+

Summer Code Jam 3033 (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 @@ -125,59 +117,54 @@ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>

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

Partnership with pyqtgraph

-

+

+

Partnership with pyqtgraph

+

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

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

Addition of @Sir Robin

-

+

+

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 + Feb 12th, 2022
-
-

Trivia Night

-

+

+

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. @@ -185,17 +172,17 @@

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

Creation of Events Team

-

+

+

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. @@ -204,19 +191,17 @@

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

Deployment of Smarter Resources

-

+

+

Deployment of Smarter Resources

+

We gave our resources pages some much needed love and reorganised them into a single page, @@ -226,36 +211,34 @@

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

We hit 300 000 members!

-

+

+

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 + Oct 4th, 2021
-
-

We host the Python 3.10 Release Stream

-

+

+

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 @@ -267,21 +250,20 @@ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>

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

Partnership with Black

-

+

+

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. @@ -289,19 +271,17 @@

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

Summer Code Jam 2021 (CJ8)

-

+

+

Summer Code Jam 3031 (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. @@ -309,69 +289,62 @@ The winning submissions are listed on our website.

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

Inaugural run of Pixels

-

+

+

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 + April 23, 2021
-
-

Owners become PSF Fellows

-

Joe, Leon, and Sebastiaan +

+

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 + Mar 21st, 2021
-
-

Summer Code Jam 2020 Highlights

-

+

+

Summer Code Jam 3030 Highlights

+

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

@@ -381,23 +354,20 @@ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
-
-
-
-
- - - +
+
+
+
- Mar 13th, 2021 + Mar 13th, 2021
-
-

New feature: Weekly discussion channel

-

Every week (or two weeks), we'll be posting a new topic to discuss in a +

+

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..

@@ -407,47 +377,40 @@ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
-
-
-
-
- - - +
+
+
+
- Mar 13th, 2021 + 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 +

+

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.

- + src="https://player.fireside.fm/v2/UIYXtbeL+qOjGAsKi?theme=dark">
-
-
-
- - - +
+
+
+
- Mar 1st, 2021 + Mar 1st, 2021
-
-

Leon Sandøy appears on Talk Python To Me

-

Leon goes on the Talk Python to Me podcast with Michael Kennedy +

+

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.

@@ -455,40 +418,35 @@ -
-
-
-
- - - +
+
+
+
- Feb 18th, 2021 + Feb 18th, 2021
-
-

We now have 150,000 members!

-

Our growth continues to accelerate.

+
+

We now have 150,000 members!

+

Our growth continues to accelerate.

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

We release The PEP 8 song

-

We release the PEP 8 song on our YouTube channel, which finds tens of +

+

We release The PEP 8 song

+

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

@@ -496,82 +454,71 @@ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
-
-
-
-
- - - +
+
+
+
- December 1st - 25th, 2020 + December 1st - 25th, 2020
-
-

Advent of Code attracts hundreds of participants

-

+

+

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 + 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 +

+

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 + 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.

- +
+

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 + Oct 21st, 2020
-
-

Python Discord hosts the 2020 CPython Core Developer Q&A

+
+

Python Discord hosts the 3030 CPython Core Developer Q&A

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

Python Discord Public Statistics are now live

-

After getting numerous requests to publish beautiful data on member +

+

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 + May 28th, 2020
-
-

Python Discord is now listed on python.org/community

-

After working towards this goal for months, we finally work out an +

+

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.

- + https://python.org/. There was much rejoicing. +

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

ModMail is now live

-

Having originally planned to write our own ModMail bot from scratch, we +

+

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.

- + kyb3r and decide to just self-host that one instead. +

-
-
-
- - - +
+
+
+
- Apr 17th, 2020 + 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. +

+

PyDis Game Jam 3030 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.

@@ -703,61 +636,53 @@ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
-
-
-
-
- - - +
+
+
+
- Apr 14, 2020 + Apr 14, 2020
-
-

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

-

+

+

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

+

+

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

The new help channel system is live

-

We release our dynamic help-channel system, which allows you to claim +

+

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 + 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 +

+

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!

@@ -766,94 +691,81 @@ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
-
-
-
-
- - - +
+
+
+
- Dec 22nd, 2019 + Dec 22nd, 2019
-
-

PyDis hits 30,000 members

-

More than tripling in size since the year before, the community hits +

+

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 + Sept 22nd, 2019
-
-

Sebastiaan Zeef becomes an owner

-

After being a long time active contributor to our projects and the driving +

+

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 + Oct 26th, 2019
-
-

The code of conduct is created

-

Inspired by the Adafruit, Rust and Django communities, an essential +

+

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 + 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. +

+

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 + Apr 8th, 2019
-
-

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

+
+

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