From 5715e8cfadbc519294c7e236afd36237a89eda33 Mon Sep 17 00:00:00 2001 From: Jason St-Cyr Date: Wed, 27 Sep 2023 08:16:39 -0400 Subject: [PATCH 01/14] Updating global CSS to match SUGCON NA Added Mulish font, footer padding, and image icon sizing --- .../Sugcon/SugconAnzSxa/src/assets/app.scss | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/src/Project/Sugcon/SugconAnzSxa/src/assets/app.scss b/src/Project/Sugcon/SugconAnzSxa/src/assets/app.scss index 6f723444..4bc88edf 100644 --- a/src/Project/Sugcon/SugconAnzSxa/src/assets/app.scss +++ b/src/Project/Sugcon/SugconAnzSxa/src/assets/app.scss @@ -49,8 +49,6 @@ // 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss` @import "bootstrap/scss/utilities/api"; -@import 'AvenirNext.scss'; - a[target='_blank']:after { content: '\1F5D7' } @@ -80,6 +78,10 @@ header { background-color: white; display: grid; width: 100%; + img { + width: 315px; + margin: 15px; + } .navigation { margin-top: 50px; } @@ -105,13 +107,14 @@ footer { color: white; display: grid; width: 100%; + margin-top: 25px; .component { padding: 20px; margin-top: 0px; } } p{ - font-family: 'AvenirNextW05-Regular','Arial'; + font-family: 'Mulish', 'AvenirNextW05-Regular', 'Arial'; color: #707070; font-size: 18px; } @@ -119,7 +122,7 @@ h1 { margin-top: 0; color: #232323; font-weight: 900; - font-family: 'AvenirNextW05-Bold'; + font-family: 'Mulish', 'AvenirNextW05-Bold'; font-size: 48px; line-height: 50px; @@ -130,13 +133,13 @@ h1 { h2{ color: #232323; font-weight: 900; - font-family: 'AvenirNextW05-Bold'; + font-family: 'Mulish', 'AvenirNextW05-Bold'; font-size: 36px; } h3 { color: #232323; font-weight: 900; - font-family: 'AvenirNextW05-Bold',Arial, Helvetica, sans-serif;; + font-family: 'Mulish', 'AvenirNextW05-Bold', Arial, Helvetica, sans-serif; font-size: 24px; } .centered-block { @@ -146,7 +149,7 @@ h3 { } .background-dark-grey { - background-color: #666; + background-color: #707070; } .background-light-grey { From 6ad415448a8c4b32e9c233d372af99fbd0119d9e Mon Sep 17 00:00:00 2001 From: Jason St-Cyr Date: Wed, 27 Sep 2023 08:19:39 -0400 Subject: [PATCH 02/14] Updating CTA link colour --- .../src/assets/components/cta.scss | 94 +++++++++---------- 1 file changed, 47 insertions(+), 47 deletions(-) diff --git a/src/Project/Sugcon/SugconAnzSxa/src/assets/components/cta.scss b/src/Project/Sugcon/SugconAnzSxa/src/assets/components/cta.scss index 7f079afe..7c551c41 100644 --- a/src/Project/Sugcon/SugconAnzSxa/src/assets/components/cta.scss +++ b/src/Project/Sugcon/SugconAnzSxa/src/assets/components/cta.scss @@ -1,51 +1,51 @@ .cta { - position: relative; - padding-bottom: 20px; - - .col-7 { - padding-top: 140px; - z-index: 5; - } - - .red-color { - color: var(--bs-red); - } - - .link-wrapper { - display: flex; - align-items: center; - gap: 5px; - } - - .link-arrow, .link-arrow a { - color: #000; - font-weight: 700; - font-size: 17px; - text-decoration: none; - letter-spacing: 0.5px; - line-height: 26px; - } - - .ctaImage { - width: 100%; - object-fit: cover; - } - + position: relative; + padding-bottom: 20px; + + .col-7 { + padding-top: 140px; + z-index: 5; + } + + .red-color { + color: var(--bs-red); + } + + .link-wrapper { + display: flex; + align-items: center; + gap: 5px; + } + + .link-arrow, + .link-arrow a { + color: #28327d; + font-weight: bold; + font-size: 17px; + text-decoration: underline; + letter-spacing: 0.5px; + line-height: 26px; + } + + .ctaImage { + width: 100%; + object-fit: cover; + } } .ctaText { - background-color: greenyellow; - padding: 50px 50px 66px; - - &::after { - display: block; - content: " "; - width: 175px; - height: 175px; - position: absolute; - top: -15px; - left: -15px; - border-top: 15px solid #fe2911; - border-left: 15px solid #fe2911; - } -} \ No newline at end of file + background-color: greenyellow; + padding: 50px 50px 66px; + + &::after { + display: block; + content: ' '; + width: 175px; + height: 175px; + position: absolute; + top: -15px; + left: -15px; + border-top: 15px solid #fe2911; + border-left: 15px solid #fe2911; + } +} From 0e84fad2301afbe069e15ebcef65e75478ddc412 Mon Sep 17 00:00:00 2001 From: Jason St-Cyr Date: Wed, 27 Sep 2023 08:22:43 -0400 Subject: [PATCH 03/14] Changing font-family to Mulish in the hero --- .../src/assets/components/hero.scss | 171 +++++++++--------- 1 file changed, 85 insertions(+), 86 deletions(-) diff --git a/src/Project/Sugcon/SugconAnzSxa/src/assets/components/hero.scss b/src/Project/Sugcon/SugconAnzSxa/src/assets/components/hero.scss index 2f1a931c..6ed40301 100644 --- a/src/Project/Sugcon/SugconAnzSxa/src/assets/components/hero.scss +++ b/src/Project/Sugcon/SugconAnzSxa/src/assets/components/hero.scss @@ -1,122 +1,121 @@ .thumbnail { - position: relative; - padding: 60px 20px; + position: relative; + padding: 60px 20px; } .caption { + color: black; + padding-left: 20px; + padding-right: 20px; + font-size: 40px; + background-color: white; + //opacity: 80%; + + padding: 2rem; + background-color: rgba(255, 255, 255, 0.85); + + @media (min-width: 1024px) { + position: absolute; + top: 30%; + left: 10%; + width: 30%; + } +} +@media (min-width: 1824px) { + .caption { + position: absolute; + //top: 20%; + //left: 30%; + width: 20%; color: black; padding-left: 20px; padding-right: 20px; font-size: 40px; background-color: white; //opacity: 80%; - padding: 2rem; background-color: rgba(255, 255, 255, 0.85); - - @media (min-width: 1024px) { - position: absolute; - top: 30%; - left: 10%; - width: 30%; - } -} - -@media (min-width: 1824px) { - .caption { - position: absolute; - //top: 20%; - //left: 30%; - width: 20%; - color: black; - padding-left: 20px; - padding-right: 20px; - font-size: 40px; - background-color: white; - //opacity: 80%; - padding: 2rem; - background-color: rgba(255, 255, 255, 0.85); - } } +} .heroimage { - top: 0; - left: 0; - height: 100%; - position: absolute; - object-fit: cover; + top: 0; + left: 0; + height: 100%; + position: absolute; + object-fit: cover; - @media (min-width: 1024px) { + @media (min-width: 1024px) { width: 3000px; height: 650px; - position: relative; - } + position: relative; + } } .hero-label { - font-weight: 900; - font-size: 14px; - color: #666; - letter-spacing: 2.8px; - text-transform: uppercase; - font-family: "AvenirNextW05-Regular", "Arial"; + font-weight: 900; + font-size: 14px; + color: #666; + letter-spacing: 2.8px; + text-transform: uppercase; + font-family: 'Mulish', 'AvenirNextW05-Regular', 'Arial'; } .hero h1 { - font-size: 60px; - font-weight: 900; - line-height: 60px; - margin-bottom: 20px; - position: relative; + font-size: 60px; + font-weight: 900; + line-height: 60px; + margin-bottom: 20px; + position: relative; } .hero-backdrop { - z-index: 1; - position: relative; - width: 100%; - padding: 2rem; - background-color: rgba(255, 255, 255, 0.85); - - @media (min-width: 1024px) { - width: 60%; - position: absolute; - } + z-index: 1; + position: relative; + width: 100%; + padding: 2rem; + background-color: rgba(255, 255, 255, 0.85); + + @media (min-width: 1024px) { + width: 60%; + position: absolute; + } } .hero-text { - p { - color: #000; - } + p { + color: #000; + } } -.link-button { - display: inline-block; - font-weight: 400; - text-decoration: none; - transition: 0.3s all; - font-size: 17px; - letter-spacing: 0.5px; - cursor: pointer; - min-width: 229px; - text-align: center; - padding: 16px 30px 17px; +.link-button { + display: inline-block; + font-weight: 400; + text-decoration: none; + transition: 0.3s all; + font-size: 17px; + letter-spacing: 0.5px; + cursor: pointer; + min-width: 229px; + text-align: center; + padding: 16px 30px 17px; } -.link-button.primary, .link-button.primary a { - border: 1px solid #AB0000; - background-color: #AB0000; - color: #fff; - opacity: 1; - transition: opacity 0.5s; - text-decoration: none; - - &:hover { - opacity: 0.5; - } - - &::after { - content: none; - } +.link-button.primary, +.link-button.primary a { + border: 1px solid #ab0000; + background-color: #ab0000; + color: #fff; + opacity: 1; + transition: opacity 0.5s; + text-decoration: none; + + &:hover { + opacity: 0.5; + } -} \ No newline at end of file + &::after { + content: none; + } +} From 9abf17dbcf27ff83e32488aad37354350fa31b3c Mon Sep 17 00:00:00 2001 From: Jason St-Cyr Date: Wed, 27 Sep 2023 08:24:20 -0400 Subject: [PATCH 04/14] Updating link colour on organizer list --- .../src/assets/components/organiserList.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/Project/Sugcon/SugconAnzSxa/src/assets/components/organiserList.scss b/src/Project/Sugcon/SugconAnzSxa/src/assets/components/organiserList.scss index f957c6c3..b8f518fe 100644 --- a/src/Project/Sugcon/SugconAnzSxa/src/assets/components/organiserList.scss +++ b/src/Project/Sugcon/SugconAnzSxa/src/assets/components/organiserList.scss @@ -1,17 +1,17 @@ /*Organiser*/ -.organizer -{ +.organizer { padding-left: 12px; padding-right: 12px; margin-top: 24px; a { - color: #19a5a2; + color: #28327d; + font-weight: bold; } } -.card img{ +.card img { width: 100%; height: 100%; object-fit: cover; @@ -22,6 +22,6 @@ padding: 16px; } -.cardBody h3{ +.cardBody h3 { font-size: 1.2em; -} \ No newline at end of file +} From 2e2ebb2db038cd90303bc637b87cbd18b5da0d10 Mon Sep 17 00:00:00 2001 From: Jason St-Cyr Date: Wed, 27 Sep 2023 09:33:20 -0400 Subject: [PATCH 05/14] Updating ANZ sponsor styling to match SUGCON NA --- .../src/assets/components/sponsorList.scss | 183 +++++++++--------- 1 file changed, 87 insertions(+), 96 deletions(-) diff --git a/src/Project/Sugcon/SugconAnzSxa/src/assets/components/sponsorList.scss b/src/Project/Sugcon/SugconAnzSxa/src/assets/components/sponsorList.scss index 31451c02..ecb95cde 100644 --- a/src/Project/Sugcon/SugconAnzSxa/src/assets/components/sponsorList.scss +++ b/src/Project/Sugcon/SugconAnzSxa/src/assets/components/sponsorList.scss @@ -1,138 +1,129 @@ /*Sponsor*/ .sponsor-platinum { - background-color: white; - padding-top: 25px; + background-color: white; + padding-top: 25px; + padding-bottom: 25px; + margin-bottom: 25px; } .sponsor-platinum__label { - margin-bottom: 20px; - font-weight: 700; - font-size: 10px; - color: #666; - width: 90%; - letter-spacing: 2px; - text-transform: uppercase; - line-height: 39px; + margin-bottom: 20px; + font-weight: 700; + font-size: 10px; + color: #666; + width: 90%; + letter-spacing: 2px; + text-transform: uppercase; + line-height: 39px; } .sponsor-list { - margin-bottom: 10px; + margin-bottom: 10px; } .sponsor-platinum__name { - font-size: 48px; - line-height: 55px; - width: 100%; - color: #232323; - font-weight: 900; - font-family: "AvenirNextW05-Bold", Arial, Helvetica, sans-serif; - margin-bottom: 0; - word-break: break-word; + font-size: 48px; + line-height: 55px; + width: 100%; + color: #232323; + font-weight: 900; + font-family: 'Mulish', 'AvenirNextW05-Bold', Arial, Helvetica, sans-serif; + margin-bottom: 0; + word-break: break-word; } .sponsor--platinum__img--outer { - position: relative; - width: 100%; + position: relative; + width: 100%; } .sponsor--platinum__img { - padding-top: 40px; - padding-bottom: 40px; - padding-right: 40px; - padding-left: 20px; - - :after { - display: block; - content: " "; - position: absolute; - width: 87px; - height: 87px; - top: -10px; - right: -10px; - border-top: 15px solid #fe2911; - border-right: 15px solid #fe2911; - } - - img { - width: 80%; - height: 100%; - margin-top: 20%; - margin-left: 10%; - } + padding-top: 40px; + padding-bottom: 40px; + padding-right: 40px; + padding-left: 20px; + + img { + width: 80%; + height: 100%; + margin-left: 10%; + } } .sponsor--default__img { - width: 218px; - position: absolute; - top: 50%; - transform: translateY(-50%); - margin: 0; + width: 218px; + position: absolute; + top: 50%; + transform: translateY(-50%); + margin: 0; } .sponsor--default { - h2 { - margin-bottom: 0px; - max-width: 720px; - margin-top: 50px; - } + h2 { + margin-bottom: 0px; + max-width: 720px; + margin-top: 50px; + } } .sponsor--default__img img { - max-width: 100%; - height: auto; - max-height: 113px; - display: block; - margin-left: auto; - margin-right: auto; + max-width: 100%; + height: auto; + max-height: 113px; + display: block; + margin-left: auto; + margin-right: auto; } .sponsor--secondary { - h2 { - margin-bottom: 0px; - max-width: 720px; - margin-top: 50px; - } + h2 { + margin-bottom: 0px; + max-width: 720px; + margin-top: 50px; + } } .sponsor--secondary__img img { - width: 100%; - height: auto; + width: 100%; + height: auto; } .sponsor--default__block { - padding: 16px; - background-color: white; - width: 250px; - margin-top: 20px; - height: 145px; - position: relative; - float: left; - margin-right: 16px; + padding: 16px; + background-color: white; + width: 250px; + margin-top: 20px; + height: 145px; + position: relative; + float: left; + margin-right: 16px; } .sponsor--secondary__block { - padding: 20px; - background-color: white; - margin-top: 20px; - position: relative; - float: left; - margin-right: 16px; - - a[target="_blank"]:after { - content: ""; - } - - a { - text-decoration: none; - } + padding: 20px; + background-color: white; + margin-top: 20px; + position: relative; + float: left; + margin-right: 16px; + + a[target='_blank']:after { + content: ''; + } + + a { + color: #28327d; + text-decoration: underline; + } } .sponsor--platinum__block { - a[target="_blank"]:after { - content: ""; - } - - a { - text-decoration: none; - } + a[target='_blank']:after { + content: ''; + } + + a { + color: #28327d; + text-decoration: underline; + } } From 8b2aba8e0b27c1b6f6dfe48eedcdc1f85f741eaf Mon Sep 17 00:00:00 2001 From: Jason St-Cyr Date: Wed, 27 Sep 2023 09:34:43 -0400 Subject: [PATCH 06/14] Removing arrow from CTA component --- src/Project/Sugcon/SugconAnzSxa/src/components/Sugcon/CTA.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Project/Sugcon/SugconAnzSxa/src/components/Sugcon/CTA.tsx b/src/Project/Sugcon/SugconAnzSxa/src/components/Sugcon/CTA.tsx index cf54014c..7fe68a18 100644 --- a/src/Project/Sugcon/SugconAnzSxa/src/components/Sugcon/CTA.tsx +++ b/src/Project/Sugcon/SugconAnzSxa/src/components/Sugcon/CTA.tsx @@ -43,7 +43,6 @@ export const Default = (props: CTAProps): JSX.Element => {
-
From b6321a6c3c250def04fa869df9bbc70c5f053c29 Mon Sep 17 00:00:00 2001 From: Jason St-Cyr Date: Wed, 27 Sep 2023 09:39:28 -0400 Subject: [PATCH 07/14] Updating ANZ SponsorList to match SUGCON NA --- .../src/components/Sugcon/SponsorList.tsx | 72 ++++++++++--------- 1 file changed, 38 insertions(+), 34 deletions(-) diff --git a/src/Project/Sugcon/SugconAnzSxa/src/components/Sugcon/SponsorList.tsx b/src/Project/Sugcon/SugconAnzSxa/src/components/Sugcon/SponsorList.tsx index a9c64b07..deb0a38f 100644 --- a/src/Project/Sugcon/SugconAnzSxa/src/components/Sugcon/SponsorList.tsx +++ b/src/Project/Sugcon/SugconAnzSxa/src/components/Sugcon/SponsorList.tsx @@ -79,42 +79,46 @@ export const Default = (props: SponsorListProps): JSX.Element => { export const Platinum = (props: SponsorListProps): JSX.Element => { if (props.fields) { return ( -
-
- {props.fields?.Sponsors?.length == 0 ? ( -
No Organizers
- ) : ( - props.fields?.Sponsors?.map((Sponsor) => { - return ( -
-
-

- -

-

- -

-
- - {Sponsor?.fields?.SponsorUrlLink?.value?.href ? ( - - ) : ( - '' - )} -
-
-
-
- - - +
+
+
+

+ +

+
+ {props.fields?.Sponsors?.length == 0 ? ( +
No Organizers
+ ) : ( + props.fields?.Sponsors?.map((Sponsor) => { + return ( +
+
+

+ +

+
+ + {Sponsor?.fields?.SponsorUrlLink?.value?.href ? ( + + ) : ( + '' + )} +
+
+
+
+ + + +
+
-
-
- ); - }) - )} + ); + }) + )} +
+
); From 1a41cf55d8f098f5542c1429565b3572a7cff380 Mon Sep 17 00:00:00 2001 From: Jason St-Cyr Date: Wed, 27 Sep 2023 09:40:56 -0400 Subject: [PATCH 08/14] Adding _document.tsx for SUGCON ANZ to load Mulish font --- .../SugconAnzSxa/src/pages/_document.tsx | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 src/Project/Sugcon/SugconAnzSxa/src/pages/_document.tsx diff --git a/src/Project/Sugcon/SugconAnzSxa/src/pages/_document.tsx b/src/Project/Sugcon/SugconAnzSxa/src/pages/_document.tsx new file mode 100644 index 00000000..03584d19 --- /dev/null +++ b/src/Project/Sugcon/SugconAnzSxa/src/pages/_document.tsx @@ -0,0 +1,22 @@ +import Document, { Head, Html, Main, NextScript } from 'next/document'; + +export default class SUGCONDocument extends Document { + render() { + return ( + + + + + + + +
+ + + + ); + } +} From bd146be385c7fd4f6c9bb75d04701755ed16fbd3 Mon Sep 17 00:00:00 2001 From: gwdt Date: Fri, 29 Sep 2023 15:53:19 +0800 Subject: [PATCH 09/14] Remove the explicit background color in header richtext and let it be set by the container --- src/Project/Sugcon/SugconAnzSxa/src/assets/app.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/Project/Sugcon/SugconAnzSxa/src/assets/app.scss b/src/Project/Sugcon/SugconAnzSxa/src/assets/app.scss index 4bc88edf..694b95ec 100644 --- a/src/Project/Sugcon/SugconAnzSxa/src/assets/app.scss +++ b/src/Project/Sugcon/SugconAnzSxa/src/assets/app.scss @@ -85,8 +85,7 @@ header { .navigation { margin-top: 50px; } - .richtext { - background-color: #666; + .richtext { font-size: 0.8em; a { text-decoration: none; From ee9fec505fc27f2704395c6a3ba97620522391b5 Mon Sep 17 00:00:00 2001 From: gwdt Date: Fri, 29 Sep 2023 15:58:48 +0800 Subject: [PATCH 10/14] Reduce image width below XS break point to avoid clash with navbar button --- src/Project/Sugcon/SugconAnzSxa/src/assets/app.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/Project/Sugcon/SugconAnzSxa/src/assets/app.scss b/src/Project/Sugcon/SugconAnzSxa/src/assets/app.scss index 694b95ec..1a958fd9 100644 --- a/src/Project/Sugcon/SugconAnzSxa/src/assets/app.scss +++ b/src/Project/Sugcon/SugconAnzSxa/src/assets/app.scss @@ -79,8 +79,11 @@ header { display: grid; width: 100%; img { - width: 315px; + width: 250px; margin: 15px; + @media (min-width: 576px) { + width: 315px; + } } .navigation { margin-top: 50px; From f1f9f2a125b52be5c19242e2345fee5a18add595 Mon Sep 17 00:00:00 2001 From: gwdt Date: Fri, 29 Sep 2023 15:59:40 +0800 Subject: [PATCH 11/14] Vertically align navbar --- src/Project/Sugcon/SugconAnzSxa/src/assets/app.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Project/Sugcon/SugconAnzSxa/src/assets/app.scss b/src/Project/Sugcon/SugconAnzSxa/src/assets/app.scss index 1a958fd9..ade40154 100644 --- a/src/Project/Sugcon/SugconAnzSxa/src/assets/app.scss +++ b/src/Project/Sugcon/SugconAnzSxa/src/assets/app.scss @@ -86,7 +86,7 @@ header { } } .navigation { - margin-top: 50px; + margin-top: 25px; } .richtext { font-size: 0.8em; From 4be8425ac862f072ac4fddccaa50f9f1495d48e3 Mon Sep 17 00:00:00 2001 From: Jason St-Cyr Date: Fri, 29 Sep 2023 08:03:35 -0400 Subject: [PATCH 12/14] Aligning NA style to latest changes in ANZ styling --- src/Project/Sugcon/SugconNaSxa/src/assets/app.scss | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/Project/Sugcon/SugconNaSxa/src/assets/app.scss b/src/Project/Sugcon/SugconNaSxa/src/assets/app.scss index 7d212b9b..2567b4fb 100644 --- a/src/Project/Sugcon/SugconNaSxa/src/assets/app.scss +++ b/src/Project/Sugcon/SugconNaSxa/src/assets/app.scss @@ -81,14 +81,16 @@ header { display: grid; width: 100%; img { - width: 315px; + width: 250px; margin: 15px; + @media (min-width: 576px) { + width: 315px; + } } .navigation { - margin-top: 50px; + margin-top: 25px; } .richtext { - background-color: #666; font-size: 0.8em; a { text-decoration: none; From 3f72173522231f97f92229147d7a10f9abcc0c0d Mon Sep 17 00:00:00 2001 From: Jason St-Cyr Date: Fri, 29 Sep 2023 16:19:33 -0400 Subject: [PATCH 13/14] Minor casing update to a comment --- src/Project/Sugcon/SugconAnzSxa/src/Layout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Project/Sugcon/SugconAnzSxa/src/Layout.tsx b/src/Project/Sugcon/SugconAnzSxa/src/Layout.tsx index bbe76714..e5a73be2 100644 --- a/src/Project/Sugcon/SugconAnzSxa/src/Layout.tsx +++ b/src/Project/Sugcon/SugconAnzSxa/src/Layout.tsx @@ -83,7 +83,7 @@ const Layout = ({ layoutData }: LayoutProps): JSX.Element => { )} - {/* root placeholder for the app, which we add components to using route data */} + {/* Root placeholder for the app, which we add components to using route data */}