Incorporating styling related feedback (#50)

RoronoaSrinu · Feb 8, 2023 · 4c39483 · 4c39483
1 parent f4fd340
commit 4c39483
Show file tree

Hide file tree

Showing 27 changed files with 777 additions and 7,816 deletions.
diff --git a/blocks/banner/banner.css b/blocks/banner/banner.css
@@ -11,7 +11,6 @@ main .banner p {
   letter-spacing: 0;
 }
 main .banner p > a {
-  margin-left: 10px;
   font-size: 18px;
   letter-spacing: 0;
   line-height: 24px;

diff --git a/blocks/banner/banner.less b/blocks/banner/banner.less
@@ -4,15 +4,16 @@ main {
 	.banner {
 		display: flex;
 		align-items: center;
+
 		p {
 			margin: unset;
 			font-size: 16px;
 			line-height: 24px;
 			color: @color_1;
 			font-family: @font_family_1;
 			letter-spacing: 0;
+
 			>a {
-				margin-left: 10px;
 				font-size: 18px;
 				letter-spacing: 0;
 				line-height: 24px;
@@ -21,4 +22,4 @@ main {
 			}
 		}
 	}
-}
+}
diff --git a/blocks/cards/card_variables.less b/blocks/cards/card_variables.less
@@ -1,4 +1,4 @@
-@import (reference) '../../styles/variables.less';
+@import (reference) '../../styles/color_variables.less';
 //========== Card Background Colors ==========
 
 @card-bg-color: @bg-default-color;

diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css
@@ -2,7 +2,7 @@
  * This is a autogenerated file. Please don't change the content directly.
  * To change the css, change the same named .less file.
  * After changing .less file, run 'npm run lessc' from terminal to autogenerate .css file.
- */aaaaaa
+ */
 /* cards-container */
 .section.cards-container {
   display: flex;
@@ -20,20 +20,6 @@
   flex-basis: calc(100%/1);
   max-width: calc(100%/1);
 }
-.section.cards-container :where(p, a.button) > :where(.icon-arrow, .icon-diagonal-arrow) {
-  display: inline-block;
-}
-.section.cards-container :where(p, a.button):hover > .icon-arrow {
-  transition: transform 900ms;
-  transform: translateX(8px);
-}
-.section.cards-container p:hover > .icon-diagonal-arrow {
-  transition: transform 900ms;
-  transform: translate(6px, -5px);
-}
-.section.cards-container p:has(.icon-arrow, .icon-diagonal-arrow) > a {
-  text-decoration: none;
-}
 /* cards -> when space is less, items will shift accordingly and content of items will be placed horizontal */
 .cards :where(ul, li, h1, h2, h3, h4, h5, h6, p) {
   margin: unset;
@@ -109,7 +95,7 @@
   letter-spacing: 0;
   border: none;
   background-color: transparent;
-  font-family: "Open Sans Semibold";
+  font-family: "Open Sans Bold";
   color: #008533;
 }
 .cards .cards-body > p.button-container > a:has(.icon) {
@@ -148,12 +134,24 @@
   width: 48px;
   height: 48px;
 }
+.cards.large .cards-image .cards-body > p {
+  margin-top: 0;
+  margin-bottom: 24px;
+}
+.cards.large .cards-image .cards-body > p:last-child {
+  margin-bottom: 0px;
+}
+.cards.large .cards-image .cards-body > :where(h2, h3) + p {
+  flex-grow: unset;
+  font-size: 16px;
+  line-height: 24px;
+  margin: 0 0 32px 0;
+}
 .cards.large .cards-body {
   display: flex;
   box-sizing: border-box;
   flex-direction: column;
   text-align: start;
-  justify-content: flex-start;
   align-items: flex-start;
   font-size: 20px;
   line-height: 28px;
@@ -170,13 +168,11 @@
 .cards.large .cards-body > p {
   font-size: 20px;
   line-height: 28px;
-  margin-top: 16px;
-  margin-bottom: 32px;
+  margin-bottom: 24px;
 }
-.cards.large .cards-body > p:has(.icon),
-.cards.large .cards-body > p.button-container {
-  margin-top: 0px;
-  margin-bottom: 0px;
+.cards.large .cards-body > p > a {
+  margin-left: 0;
+  margin-right: 0;
 }
 /* cards.pointer -> change mouse cursor to pointer when hovering items  */
 .cards.pointer li {
@@ -205,7 +201,6 @@
 }
 /* home services */
 .home-services.cards-container {
-  padding-top: 40px;
   padding-bottom: 32px;
   background-color: var(--overlay-background-color);
 }
@@ -220,114 +215,6 @@
 .home-services.cards-container .cards .cards-body > h3 + p {
   flex-grow: 1;
 }
-/* home promotions */
-.home-promotions.cards-container {
-  margin-top: 80px;
-}
-.home-promotions.cards-container > div:first-child {
-  display: flex;
-  box-sizing: border-box;
-  flex-direction: row;
-  margin-bottom: 38px;
-  justify-content: space-between;
-  line-height: 40px;
-}
-.home-promotions.cards-container > div:first-child > h1 {
-  font-size: 40px;
-}
-.home-promotions.cards-container > div:first-child > p {
-  height: 56px;
-  max-width: 390px;
-  width: 100%;
-  font-size: 18px;
-  color: #008533;
-  font-family: "Open Sans Semibold";
-  border-radius: 6px;
-  line-height: 24px;
-  cursor: pointer;
-  text-align: end;
-  margin: 10px 0 10px 0;
-}
-.home-promotions.cards-container .cards.large > ul {
-  row-gap: 40px;
-  justify-content: space-between;
-}
-.home-promotions.cards-container .cards.large .cards-body > h2 + p {
-  flex-grow: 1;
-}
-/* home help */
-.home-help.cards-container {
-  padding-top: 30px;
-  padding-bottom: 40px;
-  margin-top: 64px;
-  background-color: #008533;
-}
-.home-help.cards-container > div:first-child > h3 {
-  color: #fff;
-  margin-bottom: 36px;
-  text-align: left;
-}
-.home-help.cards-container .cards.large .cards-body > p {
-  margin-top: 0;
-  margin-bottom: 24px;
-}
-.home-help.cards-container .cards.large .cards-body > p:last-child {
-  margin-bottom: 0px;
-}
-.home-help.cards-container .cards.large .cards-body > :where(h2, h3) + p {
-  flex-grow: unset;
-  font-size: 16px;
-  line-height: 24px;
-  margin: 0 0 32px 0;
-}
-.home-help.cards-container .cards.large li:last-child {
-  padding-left: 15px !important;
-  padding-right: 15px !important;
-  flex-grow: 1;
-  max-width: none;
-  background-color: transparent !important;
-  box-shadow: unset !important;
-  transform: unset !important;
-  border: unset !important;
-  padding: 0px !important;
-}
-.home-help.cards-container .cards.large li:last-child .cards-image {
-  display: none;
-}
-.home-help.cards-container .cards.large li:last-child .cards-body {
-  align-items: flex-start;
-  text-align: left;
-}
-.home-help.cards-container .cards.large li:last-child .cards-body > h3 {
-  color: #fff;
-  font-size: 24px;
-  font-weight: 500;
-  line-height: 32px;
-  margin: 2px 0 24px 0;
-  height: auto;
-}
-.home-help.cards-container .cards.large li:last-child .cards-body > h3 + p {
-  color: #fff;
-  font-size: 20px;
-  line-height: 28px;
-  margin: 0 0 40px 0;
-}
-.home-help.cards-container .cards.large li:last-child .cards-body > p.button-container > a {
-  padding: 16px 0 16px 0;
-  font-size: 16px;
-  margin: 0;
-  cursor: pointer;
-  border: 2px solid #008533;
-  background-color: #fff;
-  color: #008533;
-  height: 56px;
-  max-width: 390px;
-  border-radius: 6px;
-  letter-spacing: 0;
-  line-height: 24px;
-  width: 285px;
-  font-weight: bold;
-}
 /* personal nedbank */
 .personal-nedbank.cards-container {
   padding-top: 60px;
@@ -506,7 +393,6 @@
     padding: 27px 18px;
   }
   .home-services.cards-container {
-    padding-top: 48px;
     padding-bottom: 48px;
   }
   .home-services.cards-container > div:first-child > h1 {
@@ -592,14 +478,11 @@
   }
   .cards.large li {
     padding: 48px 32px 48px 32px;
-    flex-basis: calc((100% - 70px)/3);
-    max-width: calc((100% - 70px)/3);
   }
   .cards.large .cards-body > h2 + p {
     font-size: 20px;
   }
   .home-services.cards-container {
-    padding-top: 32px;
     padding-bottom: 80px;
   }
   .home-services.cards-container > div:first-child > h1 {