diff options
Diffstat (limited to 'pydis_site')
| -rw-r--r-- | pydis_site/static/css/home/timeline.css | 164 | ||||
| -rwxr-xr-x | pydis_site/static/images/timeline/cd-icon-pydis.svg (renamed from pydis_site/static/images/timeline/cd-icon-picture.svg) | 0 | ||||
| -rw-r--r-- | pydis_site/templates/home/timeline.html | 636 |
3 files changed, 397 insertions, 403 deletions
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-pydis.svg index 015718a8..015718a8 100755 --- a/pydis_site/static/images/timeline/cd-icon-picture.svg +++ b/pydis_site/static/images/timeline/cd-icon-pydis.svg 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 @@ <div class="cd-timeline__container container"> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary pastel-pink"> - <span class="icon"> - <i class="fa fa-comments"></i> - </span> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary pastel-pink"> + <span class="icon"> + <i class="fa fa-comments"></i> + </span> + </div> <span class="cd-timeline__date">Jul 11th, 2023</span> </div> @@ -37,11 +36,10 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary image"> - <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture"> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary image"> + <img class="pydis" src="{% static "images/timeline/cd-icon-pydis.svg" %}" alt="Logo"> + </div> <span class="cd-timeline__date">Jan 30th, 2023</span> </div> @@ -58,13 +56,12 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary pastel-pink"> - <span class="icon is-large"> - <i class="fa fa-comments"></i> - </span> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary pastel-pink"> + <span class="icon is-large"> + <i class="fa fa-comments"></i> + </span> + </div> <span class="cd-timeline__date">Nov 25th, 2022</span> </div> @@ -79,11 +76,10 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary image"> - <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture"> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary image"> + <img class="pydis" src="{% static "images/timeline/cd-icon-pydis.svg" %}" alt="Logo"> + </div> <span class="cd-timeline__date">Oct 24th, 2022</span> </div> @@ -106,13 +102,12 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary pastel-lime"> - <span class="icon is-large"> - <i class="fa fa-dice"></i> - </span> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary pastel-lime"> + <span class="icon is-large"> + <i class="fa fa-dice"></i> + </span> + </div> <span class="cd-timeline__date">July 21st, 2022</span> </div> @@ -135,11 +130,10 @@ </div> <div class="cd-timeline__block"> - <div style="background-color: grey;" class="cd-timeline__img has-background-primary"> - <i class="fa fa-handshake"></i> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div style="background-color: grey;" class="cd-timeline__img has-background-primary"> + <i class="fa fa-handshake"></i> + </div> <span class="cd-timeline__date">May 19th, 2022</span> </div> @@ -153,13 +147,12 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary pastel-blue"> - <span class="icon is-large"> - <i class="fa fa-robot"></i> - </span> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary pastel-blue"> + <span class="icon is-large"> + <i class="fa fa-robot"></i> + </span> + </div> <span class="cd-timeline__date">Feb 21st, 2022</span> </div> @@ -173,13 +166,12 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary pastel-green"> - <span class="icon is-large"> - <i class="fa fa-question"></i> - </span> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary pastel-green"> + <span class="icon is-large"> + <i class="fa fa-question"></i> + </span> + </div> <span class="cd-timeline__date">Feb 12th, 2022</span> </div> @@ -194,11 +186,10 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary image"> - <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture"> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary image"> + <img class="pydis" src="{% static "images/timeline/cd-icon-pydis.svg" %}" alt="Logo"> + </div> <span class="cd-timeline__date">Feb 9th, 2022</span> </div> @@ -214,13 +205,12 @@ <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary pastel-red"> - <span class="icon is-large"> - <i class="fa fa-code"></i> - </span> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary pastel-red"> + <span class="icon is-large"> + <i class="fa fa-code"></i> + </span> + </div> <span class="cd-timeline__date">Feb 2nd, 2022</span> </div> @@ -237,13 +227,12 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary pastel-dark-blue"> - <span class="icon is-large"> - <i class="fa fa-users"></i> - </span> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary pastel-dark-blue"> + <span class="icon is-large"> + <i class="fa fa-users"></i> + </span> + </div> <span class="cd-timeline__date">Jan 19, 2022</span> </div> @@ -257,11 +246,10 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary image"> - <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture"> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary image"> + <img class="pydis" src="{% static "images/timeline/cd-icon-pydis.svg" %}" alt="Logo"> + </div> <span class="cd-timeline__date">Oct 4th, 2021</span> </div> @@ -284,11 +272,10 @@ </div> <div class="cd-timeline__block"> - <div style="background-color: grey;" class="cd-timeline__img has-background-primary"> - <i class="fa fa-handshake"></i> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div style="background-color: grey;" class="cd-timeline__img has-background-primary"> + <i class="fa fa-handshake"></i> + </div> <span class="cd-timeline__date">May 24th, 2021</span> </div> @@ -303,13 +290,12 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary pastel-orange"> - <span class="icon is-large"> - <i class="fa fa-dice"></i> - </span> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary pastel-orange"> + <span class="icon is-large"> + <i class="fa fa-dice"></i> + </span> + </div> <span class="cd-timeline__date">July 9, 2021</span> </div> @@ -328,13 +314,12 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary pastel-purple"> - <span class="icon is-large"> - <i class="fa fa-palette"></i> - </span> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary pastel-purple"> + <span class="icon is-large"> + <i class="fa fa-palette"></i> + </span> + </div> <span class="cd-timeline__date">May 24, 2021</span> </div> @@ -354,11 +339,10 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary image"> - <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture"> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary image"> + <img class="pydis" src="{% static "images/timeline/cd-icon-pydis.svg" %}" alt="Logo"> + </div> <span class="cd-timeline__date">April 23, 2021</span> </div> @@ -376,13 +360,12 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary pastel-red"> - <span class="icon is-large"> - <i class="fab fa-youtube"></i> - </span> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary pastel-red"> + <span class="icon is-large"> + <i class="fab fa-youtube"></i> + </span> + </div> <span class="cd-timeline__date">Mar 21st, 2021</span> </div> @@ -403,13 +386,12 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary pastel-purple"> - <span class="icon is-large"> - <i class="fa fa-comment"></i> - </span> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary pastel-purple"> + <span class="icon is-large"> + <i class="fa fa-comment"></i> + </span> + </div> <span class="cd-timeline__date">Mar 13th, 2021</span> </div> @@ -430,13 +412,12 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary pastel-pink"> - <span class="icon is-large"> - <i class="fa fa-microphone"></i> - </span> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary pastel-pink"> + <span class="icon is-large"> + <i class="fa fa-microphone"></i> + </span> + </div> <span class="cd-timeline__date">Mar 13th, 2021</span> </div> @@ -455,13 +436,12 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary pastel-green"> - <span class="icon is-large"> - <i class="fa fa-microphone"></i> - </span> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary pastel-green"> + <span class="icon is-large"> + <i class="fa fa-microphone"></i> + </span> + </div> <span class="cd-timeline__date">Mar 1st, 2021</span> </div> @@ -480,13 +460,12 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary pastel-dark-blue"> - <span class="icon is-large"> - <i class="fa fa-users"></i> - </span> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary pastel-dark-blue"> + <span class="icon is-large"> + <i class="fa fa-users"></i> + </span> + </div> <span class="cd-timeline__date">Feb 18th, 2021</span> </div> @@ -498,13 +477,12 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary pastel-blue"> - <span class="icon is-large"> - <i class="fa fa-music"></i> - </span> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary pastel-blue"> + <span class="icon is-large"> + <i class="fa fa-music"></i> + </span> + </div> <span class="cd-timeline__date">February 8th, 2021</span> </div> @@ -523,13 +501,12 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary pastel-red"> - <span class="icon is-large"> - <i class="fa fa-snowflake"></i> - </span> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary pastel-red"> + <span class="icon is-large"> + <i class="fa fa-snowflake"></i> + </span> + </div> <span class="cd-timeline__date">December 1st - 25th, 2020</span> </div> @@ -547,13 +524,12 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary pastel-orange"> - <span class="icon is-large"> - <i class="fa fa-wrench"></i> - </span> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary pastel-orange"> + <span class="icon is-large"> + <i class="fa fa-wrench"></i> + </span> + </div> <span class="cd-timeline__date">Nov 29th, 2020</span> </div> @@ -568,13 +544,12 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary pastel-dark-blue"> - <span class="icon is-large"> - <i class="fa fa-users"></i> - </span> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary pastel-dark-blue"> + <span class="icon is-large"> + <i class="fa fa-users"></i> + </span> + </div> <span class="cd-timeline__date">Oct 22nd, 2020</span> </div> @@ -588,11 +563,10 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary image"> - <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture"> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary image"> + <img class="pydis" src="{% static "images/timeline/cd-icon-pydis.svg" %}" alt="Logo"> + </div> <span class="cd-timeline__date">Oct 21st, 2020</span> </div> @@ -608,13 +582,12 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary pastel-pink"> - <span class="icon is-large"> - <i class="fa fa-handshake"></i> - </span> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary pastel-pink"> + <span class="icon is-large"> + <i class="fa fa-handshake"></i> + </span> + </div> <span class="cd-timeline__date">Aug 16th, 2020</span> </div> @@ -628,13 +601,12 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary pastel-blue"> - <span class="icon is-large"> - <i class="fa fa-dice"></i> - </span> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary pastel-blue"> + <span class="icon is-large"> + <i class="fa fa-dice"></i> + </span> + </div> <span class="cd-timeline__date">Jul 31st, 2020</span> </div> @@ -654,13 +626,12 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary pastel-red"> - <span class="icon is-large"> - <i class="fa fa-chart-bar"></i> - </span> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary pastel-red"> + <span class="icon is-large"> + <i class="fa fa-chart-bar"></i> + </span> + </div> <span class="cd-timeline__date">Jun 4th, 2020</span> </div> @@ -674,13 +645,12 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary pastel-pink"> - <span class="icon is-large"> - <i class="fa fa-handshake"></i> - </span> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary pastel-pink"> + <span class="icon is-large"> + <i class="fa fa-handshake"></i> + </span> + </div> <span class="cd-timeline__date">May 28th, 2020</span> </div> @@ -694,13 +664,12 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary pastel-green"> - <span class="icon is-large"> - <i class="fa fa-comments"></i> - </span> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary pastel-green"> + <span class="icon is-large"> + <i class="fa fa-comments"></i> + </span> + </div> <span class="cd-timeline__date">May 25th, 2020</span> </div> @@ -714,13 +683,12 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary pastel-purple"> - <span class="icon is-large"> - <i class="fa fa-gamepad"></i> - </span> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary pastel-purple"> + <span class="icon is-large"> + <i class="fa fa-gamepad"></i> + </span> + </div> <span class="cd-timeline__date">Apr 17th, 2020</span> </div> @@ -740,13 +708,12 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary pastel-dark-blue"> - <span class="icon is-large"> - <i class="fa fa-users"></i> - </span> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary pastel-dark-blue"> + <span class="icon is-large"> + <i class="fa fa-users"></i> + </span> + </div> <span class="cd-timeline__date">Apr 14, 2020</span> </div> @@ -759,13 +726,12 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary pastel-green"> - <span class="icon is-large"> - <i class="fa fa-comments"></i> - </span> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary pastel-green"> + <span class="icon is-large"> + <i class="fa fa-comments"></i> + </span> + </div> <span class="cd-timeline__date">Apr 5th, 2020</span> </div> @@ -780,13 +746,12 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary pastel-blue"> - <span class="icon is-large"> - <i class="fa fa-dice"></i> - </span> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary pastel-blue"> + <span class="icon is-large"> + <i class="fa fa-dice"></i> + </span> + </div> <span class="cd-timeline__date">Jan 17, 2020</span> </div> @@ -806,13 +771,12 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary pastel-dark-blue"> - <span class="icon is-large"> - <i class="fa fa-users"></i> - </span> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary pastel-dark-blue"> + <span class="icon is-large"> + <i class="fa fa-users"></i> + </span> + </div> <span class="cd-timeline__date">Dec 22nd, 2019</span> </div> @@ -825,11 +789,10 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary image"> - <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture"> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary image"> + <img class="pydis" src={% static "images/timeline/cd-icon-pydis.svg" %} alt="Logo"> + </div> <span class="cd-timeline__date">Sept 22nd, 2019</span> </div> @@ -842,13 +805,12 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary pastel-lime"> - <span class="icon is-large"> - <i class="fa fa-scroll"></i> - </span> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary pastel-lime"> + <span class="icon is-large"> + <i class="fa fa-scroll"></i> + </span> + </div> <span class="cd-timeline__date">Oct 26th, 2019</span> </div> @@ -862,13 +824,12 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary pastel-orange"> - <span class="icon is-large"> - <i class="fa fa-code"></i> - </span> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary pastel-orange"> + <span class="icon is-large"> + <i class="fa fa-code"></i> + </span> + </div> <span class="cd-timeline__date">Sep 15, 2019</span> </div> @@ -882,13 +843,12 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary pastel-dark-blue"> - <span class="icon is-large"> - <i class="fa fa-users"></i> - </span> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary pastel-dark-blue"> + <span class="icon is-large"> + <i class="fa fa-users"></i> + </span> + </div> <span class="cd-timeline__date">Apr 8th, 2019</span> </div> @@ -904,13 +864,12 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary pastel-orange"> - <span class="icon is-large"> - <i class="fa fa-code"></i> - </span> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary pastel-orange"> + <span class="icon is-large"> + <i class="fa fa-code"></i> + </span> + </div> <span class="cd-timeline__date">Dec 19th, 2018</span> </div> @@ -925,13 +884,12 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary pastel-dark-blue"> - <span class="icon is-large"> - <i class="fa fa-users"></i> - </span> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary pastel-dark-blue"> + <span class="icon is-large"> + <i class="fa fa-users"></i> + </span> + </div> <span class="cd-timeline__date">Nov 24th, 2018</span> </div> @@ -944,13 +902,12 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary pastel-blue"> - <span class="icon is-large"> - <i class="fa fa-dice"></i> - </span> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary pastel-blue"> + <span class="icon is-large"> + <i class="fa fa-dice"></i> + </span> + </div> <span class="cd-timeline__date">Oct 1st, 2018</span> </div> @@ -965,13 +922,12 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary pastel-pink"> - <span class="icon is-large"> - <i class="fa fa-handshake"></i> - </span> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary pastel-pink"> + <span class="icon is-large"> + <i class="fa fa-handshake"></i> + </span> + </div> <span class="cd-timeline__date">Jul 10th, 2018</span> </div> @@ -985,13 +941,12 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary pastel-dark-blue"> - <span class="icon is-large"> - <i class="fa fa-users"></i> - </span> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary pastel-dark-blue"> + <span class="icon is-large"> + <i class="fa fa-users"></i> + </span> + </div> <span class="cd-timeline__date">Jun 20th, 2018</span> </div> @@ -1005,13 +960,12 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary pastel-pink"> - <span class="icon is-large"> - <i class="fa fa-handshake"></i> - </span> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary pastel-pink"> + <span class="icon is-large"> + <i class="fa fa-handshake"></i> + </span> + </div> <span class="cd-timeline__date">Jun 9th, 2018</span> </div> @@ -1027,13 +981,12 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary pastel-lime"> - <span class="icon is-large"> - <i class="fa fa-scroll"></i> - </span> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary pastel-lime"> + <span class="icon is-large"> + <i class="fa fa-scroll"></i> + </span> + </div> <span class="cd-timeline__date">May 21st, 2018</span> </div> @@ -1049,13 +1002,12 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary pastel-blue"> - <span class="icon is-large"> - <i class="fa fa-dice"></i> - </span> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary pastel-blue"> + <span class="icon is-large"> + <i class="fa fa-dice"></i> + </span> + </div> <span class="cd-timeline__date">Mar 23rd, 2018</span> </div> @@ -1071,13 +1023,12 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary pastel-dark-blue"> - <span class="icon is-large"> - <i class="fa fa-users"></i> - </span> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary pastel-dark-blue"> + <span class="icon is-large"> + <i class="fa fa-users"></i> + </span> + </div> <span class="cd-timeline__date">Mar 4th, 2018</span> </div> @@ -1092,31 +1043,29 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary image"> - <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture"> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary image"> + <img class="pydis" src={% static "images/timeline/cd-icon-pydis.svg" %} alt="Logo"> + </div> <span class="cd-timeline__date">Feb 3rd, 2018</span> </div> <div class="cd-timeline__content box"> <h2 class="title is-4">Our logo is born. Thanks @Aperture!</h2> - <p class="pydis-logo-banner has-background-primary"><img - src="https://raw.githubusercontent.com/python-discord/branding/main/logos/logo_banner/logo_site_banner.svg"> + <p style="background-color: #7289DA; border-radius: 10px;"> + <img style="padding-right: 20px;" src="https://raw.githubusercontent.com/python-discord/branding/main/logos/logo_banner/logo_site_banner.svg"> </p> </div> </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary pastel-dark-blue"> - <span class="icon is-large"> - <i class="fa fa-users"></i> - </span> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary pastel-dark-blue"> + <span class="icon is-large"> + <i class="fa fa-users"></i> + </span> + </div> <span class="cd-timeline__date">Nov 10th, 2017</span> </div> @@ -1130,11 +1079,10 @@ </div> <div class="cd-timeline__block"> - <div class="cd-timeline__img has-background-primary image"> - <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture"> - </div> - - <div class="is-flex is-justify-content-space-between"> + <div class="icon-date"> + <div class="cd-timeline__img has-background-primary image"> + <img class="pydis" src="{% static "images/timeline/cd-icon-pydis.svg" %}" alt="Logo"> + </div> <span class="cd-timeline__date">Jan 8th, 2017</span> </div> |
