diff --git a/_data/sponsors.yaml b/_data/sponsors.yaml new file mode 100644 index 00000000..dba1b72c --- /dev/null +++ b/_data/sponsors.yaml @@ -0,0 +1,11 @@ +title: 2026/27 sponsors +sponsors: + - name: Capital One + tier: gold + logo: /assets/sponsorship/capital-one-logo.svg + - name: TPP + tier: silver + logo: /assets/sponsorship/tpp-logo.svg + - name: Interrupt Labs + tier: bronze + logo: /assets/sponsorship/interrupt-labs-logo.svg diff --git a/_includes/sponsors.html b/_includes/sponsors.html new file mode 100644 index 00000000..41cd855d --- /dev/null +++ b/_includes/sponsors.html @@ -0,0 +1,21 @@ + diff --git a/about.md b/about.md index e1c73db2..eee2f65e 100644 --- a/about.md +++ b/about.md @@ -2,6 +2,7 @@ layout: textpage title: About styles: +- /css/sponsors.css - /css/about.css --- @@ -116,13 +117,7 @@ Our society has won many achievements and awards, including: -## 2024/2025 Sponsors 🤝 - -This year, we are proudly sponsored by: - -
- the Trade Desk -
+{% include sponsors.html %} If you or your company is interested in sponsoring CSS, please take a look at our sponsorship page: diff --git a/assets/sponsorship/IBM.svg b/assets/sponsorship/IBM.svg deleted file mode 100644 index 3f442a65..00000000 --- a/assets/sponsorship/IBM.svg +++ /dev/null @@ -1,51 +0,0 @@ - - - -Logo International Business Machines Corporation - - diff --git a/assets/sponsorship/accenture.png b/assets/sponsorship/accenture.png deleted file mode 100644 index 1b26e49e..00000000 Binary files a/assets/sponsorship/accenture.png and /dev/null differ diff --git a/assets/sponsorship/bank-of-america_brand_image.png b/assets/sponsorship/bank-of-america_brand_image.png deleted file mode 100644 index a2b244fc..00000000 Binary files a/assets/sponsorship/bank-of-america_brand_image.png and /dev/null differ diff --git a/assets/sponsorship/capital-one-logo.svg b/assets/sponsorship/capital-one-logo.svg new file mode 100644 index 00000000..7106b816 --- /dev/null +++ b/assets/sponsorship/capital-one-logo.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/assets/sponsorship/goldman-sachs.png b/assets/sponsorship/goldman-sachs.png deleted file mode 100644 index eb409c2d..00000000 Binary files a/assets/sponsorship/goldman-sachs.png and /dev/null differ diff --git a/assets/sponsorship/interrupt-labs-logo.svg b/assets/sponsorship/interrupt-labs-logo.svg new file mode 100644 index 00000000..1115f165 --- /dev/null +++ b/assets/sponsorship/interrupt-labs-logo.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/sponsorship/tpp-logo.svg b/assets/sponsorship/tpp-logo.svg new file mode 100644 index 00000000..879c451d --- /dev/null +++ b/assets/sponsorship/tpp-logo.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/css/about.scss b/css/about.scss index 24a78e85..638c308c 100644 --- a/css/about.scss +++ b/css/about.scss @@ -177,13 +177,13 @@ h4 { } } -.sponsors-images { - justify-content: center; - align-items: center; - display: grid; - grid-template-columns: repeat(1, 185px); - grid-gap: 30px; - padding: 10px; +.sponsor-block { + margin-bottom: 16px; + padding: 24px 0 0; + + > h2 { + text-align: left; + } } .sponsors-buttons { @@ -213,13 +213,6 @@ h4 { } @media (max-width: 400px) { - .sponsors-images { - justify-content: center; - align-items: center; - display: grid; - grid-template-columns: 185px; - } - .sponsors-link { width: 150px; height: 55px; diff --git a/css/sponsor.scss b/css/sponsor.scss index d0254fa9..0b7a8896 100644 --- a/css/sponsor.scss +++ b/css/sponsor.scss @@ -30,7 +30,7 @@ button.email-button { } .proposal { - margin: 0 150px 0 150px; + margin: 0 150px; } .proposal.text-container { @@ -67,6 +67,12 @@ button.email-button { gap: 40px; } +@media only screen and (max-width: 990px) { + .benefit.text-container { + width: 100%; + } +} + @media only screen and (max-width: 540px) { .stat { margin: 20px 10px; @@ -79,9 +85,3 @@ button.email-button { text-align: center; } } - -@media only screen and (max-width: 990px) { - .benefit.text-container { - width: 100%; - } -} diff --git a/css/sponsors.scss b/css/sponsors.scss new file mode 100644 index 00000000..43037c96 --- /dev/null +++ b/css/sponsors.scss @@ -0,0 +1,81 @@ +--- +--- + +.sponsor-block { + max-width: 900px; + margin: 0 auto 36px; + padding: 24px 16px; + text-align: center; + + &__list { + display: flex; + flex-wrap: wrap; + gap: 20px; + margin: 20px 0 0; + padding: 0; + list-style: none; + } + + &__sponsor { + flex: 1 1 200px; + min-width: 0; + } + + &__tier { + margin: 0 0 10px; + font-size: 18px; + + &--gold { + color: #f2cb66; + } + + &--silver { + color: #d2d7df; + } + + &--bronze { + color: #dfa575; + } + } + + &__logo { + display: flex; + align-items: center; + justify-content: center; + padding: 16px; + border-radius: 12px; + background: white; + + img { + display: block; + width: 100%; + max-width: 220px; + height: 110px; + object-fit: contain; + } + } + + @media only screen and (max-width: 650px) { + padding-left: 0; + padding-right: 0; + + &__sponsor { + flex-basis: 100%; + } + } +} + +// Keep tier labels readable inside pages with a white content background. +.text-container .sponsor-block { + .sponsor-block__tier--gold { + color: #896400; + } + + .sponsor-block__tier--silver { + color: #626c7a; + } + + .sponsor-block__tier--bronze { + color: #955b2c; + } +} diff --git a/css/type.scss b/css/type.scss index 71988695..8b30751b 100644 --- a/css/type.scss +++ b/css/type.scss @@ -262,6 +262,26 @@ pre.ascii { } } +.lead + .sponsor-block { + // The final text line starts at 4.5s and takes 0.2s to finish. + animation: sponsors-fade-in 1s ease 4.7s backwards; +} + +@media (prefers-reduced-motion: reduce) { + .lead + .sponsor-block { + animation: none; + } +} + +@keyframes sponsors-fade-in { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + @keyframes type { from { width: 0; diff --git a/index.html b/index.html index 038cebbe..9b3799bc 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,7 @@ --- layout: page styles: + - /css/sponsors.css - /css/type.css scripts: - /js/colourOverride.js @@ -36,3 +37,5 @@ + +{% include sponsors.html %} diff --git a/sponsor.html b/sponsor.html index cd9cd668..9d837f6c 100644 --- a/sponsor.html +++ b/sponsor.html @@ -3,6 +3,7 @@ title: Sponsors styles: - /css/posts.css + - /css/sponsors.css - /css/sponsor.css favicon: /favicon.ico --- @@ -112,15 +113,4 @@

Build In-Person Connections

-
-

In the past, we have worked with:

-
- Bank of America - Accenture - Goldman Sachs - IBM -
-
+{% include sponsors.html %}