From f16b4bdb28e4b48a5d9daeee09424c07a86fc8b4 Mon Sep 17 00:00:00 2001 From: Jason St-Cyr Date: Fri, 29 Sep 2023 15:26:41 -0400 Subject: [PATCH 01/12] Prettier changes (set baseline) --- .../Sugcon/SugconEuSxa/src/assets/app.scss | 236 +++++++++--------- 1 file changed, 119 insertions(+), 117 deletions(-) diff --git a/src/Project/Sugcon/SugconEuSxa/src/assets/app.scss b/src/Project/Sugcon/SugconEuSxa/src/assets/app.scss index 4377141b..70726f63 100644 --- a/src/Project/Sugcon/SugconEuSxa/src/assets/app.scss +++ b/src/Project/Sugcon/SugconEuSxa/src/assets/app.scss @@ -1,58 +1,57 @@ // Required -@import "bootstrap/scss/functions"; +@import 'bootstrap/scss/functions'; // Default variable overrides -@import "custom-variables"; +@import 'custom-variables'; // Required -@import "bootstrap/scss/variables"; -@import "bootstrap/scss/mixins"; -@import "bootstrap/scss/maps"; -@import "bootstrap/scss/root"; - +@import 'bootstrap/scss/variables'; +@import 'bootstrap/scss/mixins'; +@import 'bootstrap/scss/maps'; +@import 'bootstrap/scss/root'; // Optional Bootstrap components here -@import "bootstrap/scss/utilities"; -@import "bootstrap/scss/reboot"; -@import "bootstrap/scss/type"; -@import "bootstrap/scss/images"; -@import "bootstrap/scss/containers"; -@import "bootstrap/scss/grid"; -@import "bootstrap/scss/tables"; -@import "bootstrap/scss/forms"; -@import "bootstrap/scss/buttons"; -@import "bootstrap/scss/transitions"; -@import "bootstrap/scss/dropdown"; -@import "bootstrap/scss/button-group"; -@import "bootstrap/scss/nav"; -@import "bootstrap/scss/navbar"; -@import "bootstrap/scss/card"; -@import "bootstrap/scss/accordion"; -@import "bootstrap/scss/breadcrumb"; -@import "bootstrap/scss/pagination"; -@import "bootstrap/scss/badge"; -@import "bootstrap/scss/alert"; -@import "bootstrap/scss/progress"; -@import "bootstrap/scss/list-group"; -@import "bootstrap/scss/close"; -@import "bootstrap/scss/toasts"; -@import "bootstrap/scss/modal"; -@import "bootstrap/scss/tooltip"; -@import "bootstrap/scss/popover"; -@import "bootstrap/scss/carousel"; -@import "bootstrap/scss/spinners"; -@import "bootstrap/scss/offcanvas"; -@import "bootstrap/scss/placeholders"; +@import 'bootstrap/scss/utilities'; +@import 'bootstrap/scss/reboot'; +@import 'bootstrap/scss/type'; +@import 'bootstrap/scss/images'; +@import 'bootstrap/scss/containers'; +@import 'bootstrap/scss/grid'; +@import 'bootstrap/scss/tables'; +@import 'bootstrap/scss/forms'; +@import 'bootstrap/scss/buttons'; +@import 'bootstrap/scss/transitions'; +@import 'bootstrap/scss/dropdown'; +@import 'bootstrap/scss/button-group'; +@import 'bootstrap/scss/nav'; +@import 'bootstrap/scss/navbar'; +@import 'bootstrap/scss/card'; +@import 'bootstrap/scss/accordion'; +@import 'bootstrap/scss/breadcrumb'; +@import 'bootstrap/scss/pagination'; +@import 'bootstrap/scss/badge'; +@import 'bootstrap/scss/alert'; +@import 'bootstrap/scss/progress'; +@import 'bootstrap/scss/list-group'; +@import 'bootstrap/scss/close'; +@import 'bootstrap/scss/toasts'; +@import 'bootstrap/scss/modal'; +@import 'bootstrap/scss/tooltip'; +@import 'bootstrap/scss/popover'; +@import 'bootstrap/scss/carousel'; +@import 'bootstrap/scss/spinners'; +@import 'bootstrap/scss/offcanvas'; +@import 'bootstrap/scss/placeholders'; -@import "bootstrap/scss/helpers"; +@import 'bootstrap/scss/helpers'; // 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss` -@import "bootstrap/scss/utilities/api"; +@import 'bootstrap/scss/utilities/api'; @import 'AvenirNext.scss'; a[target='_blank']:after { - content: '\1F5D7' + content: '\1F5D7'; } /* @@ -60,107 +59,110 @@ Hides Sitecore Experience Editor markup, if you run the app in connected mode while the Sitecore cookies are set to edit mode. */ -.scChromeData, .scpm { display: none !important; } +.scChromeData, +.scpm { + display: none !important; +} /* Styles for default JSS error components */ .sc-jss-editing-error, .sc-jss-placeholder-error { - padding: 1em; - background-color: lightyellow; + padding: 1em; + background-color: lightyellow; } body { - background-color: #f6f6f6; - width: 100%; - display: grid; + background-color: #f6f6f6; + width: 100%; + display: grid; } header { - background-color: white; - display: grid; - width: 100%; - .navigation { - margin-top: 50px; + background-color: white; + display: grid; + width: 100%; + .navigation { + margin-top: 50px; + } + .richtext { + background-color: #666; + font-size: 0.8em; + a { + text-decoration: none; + color: white; + :after { + content: none; + } } - .richtext { - background-color: #666; - font-size: 0.8em; - a { - text-decoration: none; - color: white; - :after { - content: none; - } - } - p { - margin: 0; - padding-top: 10px; - padding-bottom: 10px; - } + p { + margin: 0; + padding-top: 10px; + padding-bottom: 10px; } + } } footer { - background-color: #707070; - color: white; - display: grid; - width: 100%; - .component { - padding: 20px; - margin-top: 0px; - } -} -p{ - font-family: 'AvenirNextW05-Regular','Arial'; - color: #707070; - font-size: 18px; + background-color: #707070; + color: white; + display: grid; + width: 100%; + .component { + padding: 20px; + margin-top: 0px; } +} +p { + font-family: 'AvenirNextW05-Regular', 'Arial'; + color: #707070; + font-size: 18px; +} h1 { - margin-top: 0; - color: #232323; - font-weight: 900; - font-family: 'AvenirNextW05-Bold'; - font-size: 48px; - line-height: 50px; - - a:link{ - text-decoration: none; - } + margin-top: 0; + color: #232323; + font-weight: 900; + font-family: 'AvenirNextW05-Bold'; + font-size: 48px; + line-height: 50px; + + a:link { + text-decoration: none; + } } -h2{ - color: #232323; - font-weight: 900; - font-family: 'AvenirNextW05-Bold'; - font-size: 36px; +h2 { + color: #232323; + font-weight: 900; + font-family: 'AvenirNextW05-Bold'; + font-size: 36px; } h3 { - color: #232323; - font-weight: 900; - font-family: 'AvenirNextW05-Bold',Arial, Helvetica, sans-serif;; - font-size: 24px; - } - .centered-block { - max-width: 1200px; - margin: auto; - display: grid; - } + color: #232323; + font-weight: 900; + font-family: 'AvenirNextW05-Bold', Arial, Helvetica, sans-serif; + font-size: 24px; +} +.centered-block { + max-width: 1200px; + margin: auto; + display: grid; +} .background-dark-grey { - background-color: #707070; - } + background-color: #707070; +} .background-light-grey { - background-color: #f6f6f6; + background-color: #f6f6f6; } -@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css"); +@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css'); // Finally add custom components -@import "components/cta"; -@import "components/hero"; -@import "components/fixed-width-container"; -@import "components/organiserList"; -@import "components/sponsorList"; -@import "components/title"; -@import "components/navigation"; -@import "components/announcementbar"; \ No newline at end of file +@import 'components/cta'; +@import 'components/hero'; +@import 'components/fixed-width-container'; +@import 'components/organiserList'; +@import 'components/sponsorList'; +@import 'components/title'; +@import 'components/navigation'; +@import 'components/announcementbar'; From fdb7c790a85549d780e0968913f176fc10975afc Mon Sep 17 00:00:00 2001 From: Jason St-Cyr Date: Fri, 29 Sep 2023 15:35:17 -0400 Subject: [PATCH 02/12] Aligning App CSS styling with rebrand for ANZ and NA --- .../Sugcon/SugconEuSxa/src/assets/app.scss | 20 ++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/src/Project/Sugcon/SugconEuSxa/src/assets/app.scss b/src/Project/Sugcon/SugconEuSxa/src/assets/app.scss index 70726f63..04543835 100644 --- a/src/Project/Sugcon/SugconEuSxa/src/assets/app.scss +++ b/src/Project/Sugcon/SugconEuSxa/src/assets/app.scss @@ -48,8 +48,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'; } @@ -82,8 +80,15 @@ header { background-color: white; display: grid; width: 100%; + img { + width: 250px; + margin: 15px; + @media (min-width: 576px) { + width: 315px; + } + } .navigation { - margin-top: 50px; + margin-top: 25px; } .richtext { background-color: #666; @@ -107,13 +112,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; } @@ -121,7 +127,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; @@ -132,13 +138,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 { From c3c44a84b539ae1dff3355435adf63abcad3ab3f Mon Sep 17 00:00:00 2001 From: Jason St-Cyr Date: Fri, 29 Sep 2023 15:37:03 -0400 Subject: [PATCH 03/12] Adding document.tsx to load Mulish fonts --- .../SugconEuSxa/src/pages/_document.tsx | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 src/Project/Sugcon/SugconEuSxa/src/pages/_document.tsx diff --git a/src/Project/Sugcon/SugconEuSxa/src/pages/_document.tsx b/src/Project/Sugcon/SugconEuSxa/src/pages/_document.tsx new file mode 100644 index 00000000..03584d19 --- /dev/null +++ b/src/Project/Sugcon/SugconEuSxa/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 be96e511d0128bc0ecf5c415e673ca2e50dbcbda Mon Sep 17 00:00:00 2001 From: Jason St-Cyr Date: Fri, 29 Sep 2023 15:43:24 -0400 Subject: [PATCH 04/12] Updating sponsor list to new design --- .../src/components/Sugcon/SponsorList.tsx | 72 ++++++++++--------- 1 file changed, 38 insertions(+), 34 deletions(-) diff --git a/src/Project/Sugcon/SugconEuSxa/src/components/Sugcon/SponsorList.tsx b/src/Project/Sugcon/SugconEuSxa/src/components/Sugcon/SponsorList.tsx index a9c64b07..deb0a38f 100644 --- a/src/Project/Sugcon/SugconEuSxa/src/components/Sugcon/SponsorList.tsx +++ b/src/Project/Sugcon/SugconEuSxa/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 f37abdbe513846d5d24a233364d1a306a2e58fa2 Mon Sep 17 00:00:00 2001 From: Jason St-Cyr Date: Fri, 29 Sep 2023 15:44:24 -0400 Subject: [PATCH 05/12] Removing arrow on CTA --- 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 a7ab1c8825a7d2bbc74fe2972aa10631b0b8b792 Mon Sep 17 00:00:00 2001 From: Jason St-Cyr Date: Fri, 29 Sep 2023 16:05:44 -0400 Subject: [PATCH 06/12] Adding new styling for sponsor list --- .../src/assets/components/sponsorList.scss | 184 +++++++++--------- 1 file changed, 88 insertions(+), 96 deletions(-) diff --git a/src/Project/Sugcon/SugconEuSxa/src/assets/components/sponsorList.scss b/src/Project/Sugcon/SugconEuSxa/src/assets/components/sponsorList.scss index 31451c02..4783af5c 100644 --- a/src/Project/Sugcon/SugconEuSxa/src/assets/components/sponsorList.scss +++ b/src/Project/Sugcon/SugconEuSxa/src/assets/components/sponsorList.scss @@ -1,138 +1,130 @@ /*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-top: 20%; + 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 1fe2f3d1430d661a75bd8d03f253fd1981e8cce5 Mon Sep 17 00:00:00 2001 From: Jason St-Cyr Date: Fri, 29 Sep 2023 16:06:58 -0400 Subject: [PATCH 07/12] Changing colour of links on organizer list --- .../src/assets/components/organiserList.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/Project/Sugcon/SugconEuSxa/src/assets/components/organiserList.scss b/src/Project/Sugcon/SugconEuSxa/src/assets/components/organiserList.scss index d053ed13..c0635389 100644 --- a/src/Project/Sugcon/SugconEuSxa/src/assets/components/organiserList.scss +++ b/src/Project/Sugcon/SugconEuSxa/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%; } @@ -20,6 +20,6 @@ padding: 16px; } -.cardBody h3{ +.cardBody h3 { font-size: 1.2em; -} \ No newline at end of file +} From d0c4f129dd0cccb8b06113371b27fa924dd8209b Mon Sep 17 00:00:00 2001 From: Jason St-Cyr Date: Fri, 29 Sep 2023 16:10:50 -0400 Subject: [PATCH 08/12] Updating style for hero component --- .../src/assets/components/hero.scss | 171 +++++++++--------- 1 file changed, 85 insertions(+), 86 deletions(-) diff --git a/src/Project/Sugcon/SugconEuSxa/src/assets/components/hero.scss b/src/Project/Sugcon/SugconEuSxa/src/assets/components/hero.scss index 2f1a931c..6ed40301 100644 --- a/src/Project/Sugcon/SugconEuSxa/src/assets/components/hero.scss +++ b/src/Project/Sugcon/SugconEuSxa/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 6ebd3c526c3cb1180b5dd8bc16620438d8641489 Mon Sep 17 00:00:00 2001 From: Jason St-Cyr Date: Fri, 29 Sep 2023 16:13:11 -0400 Subject: [PATCH 09/12] Updating style of link in CTA component --- .../src/assets/components/cta.scss | 94 +++++++++---------- 1 file changed, 47 insertions(+), 47 deletions(-) diff --git a/src/Project/Sugcon/SugconEuSxa/src/assets/components/cta.scss b/src/Project/Sugcon/SugconEuSxa/src/assets/components/cta.scss index 7f079afe..7c551c41 100644 --- a/src/Project/Sugcon/SugconEuSxa/src/assets/components/cta.scss +++ b/src/Project/Sugcon/SugconEuSxa/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 79ff3d703383618c8ef6a67deff5dae9274855d7 Mon Sep 17 00:00:00 2001 From: Jason St-Cyr Date: Fri, 29 Sep 2023 16:16:17 -0400 Subject: [PATCH 10/12] Revert "Removing arrow on CTA" This reverts commit f37abdbe513846d5d24a233364d1a306a2e58fa2. --- src/Project/Sugcon/SugconAnzSxa/src/components/Sugcon/CTA.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Project/Sugcon/SugconAnzSxa/src/components/Sugcon/CTA.tsx b/src/Project/Sugcon/SugconAnzSxa/src/components/Sugcon/CTA.tsx index 7fe68a18..cf54014c 100644 --- a/src/Project/Sugcon/SugconAnzSxa/src/components/Sugcon/CTA.tsx +++ b/src/Project/Sugcon/SugconAnzSxa/src/components/Sugcon/CTA.tsx @@ -43,6 +43,7 @@ export const Default = (props: CTAProps): JSX.Element => {
+
From 1c103e9376786c0997d9bbd1e2f9649b4bc4044f Mon Sep 17 00:00:00 2001 From: Jason St-Cyr Date: Fri, 29 Sep 2023 16:17:09 -0400 Subject: [PATCH 11/12] Removing red arrow from CTA component --- src/Project/Sugcon/SugconEuSxa/src/components/Sugcon/CTA.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Project/Sugcon/SugconEuSxa/src/components/Sugcon/CTA.tsx b/src/Project/Sugcon/SugconEuSxa/src/components/Sugcon/CTA.tsx index cf54014c..7fe68a18 100644 --- a/src/Project/Sugcon/SugconEuSxa/src/components/Sugcon/CTA.tsx +++ b/src/Project/Sugcon/SugconEuSxa/src/components/Sugcon/CTA.tsx @@ -43,7 +43,6 @@ export const Default = (props: CTAProps): JSX.Element => {
-
From d1e1a3dcac60a189682beee03a918b25c5cf1161 Mon Sep 17 00:00:00 2001 From: Jason St-Cyr Date: Mon, 2 Oct 2023 15:25:53 -0400 Subject: [PATCH 12/12] Hero: Adding bold weight to link button --- src/Project/Sugcon/SugconEuSxa/src/assets/components/hero.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Project/Sugcon/SugconEuSxa/src/assets/components/hero.scss b/src/Project/Sugcon/SugconEuSxa/src/assets/components/hero.scss index 6ed40301..6a9cb8e9 100644 --- a/src/Project/Sugcon/SugconEuSxa/src/assets/components/hero.scss +++ b/src/Project/Sugcon/SugconEuSxa/src/assets/components/hero.scss @@ -91,7 +91,7 @@ .link-button { display: inline-block; - font-weight: 400; + font-weight: bold; text-decoration: none; transition: 0.3s all; font-size: 17px;