From 74d9c489dbf07122de1fbedec42c8bb395b8fecc Mon Sep 17 00:00:00 2001
From: Bryan C Guner <bryan.guner@gmail.com>
Date: Wed, 24 Aug 2022 09:01:34 -0400
Subject: [PATCH] Update _sections.scss
Signed-off-by: Bryan C Guner <bryan.guner@gmail.com>
---
src/sass/imports/_sections.scss | 437 ++++++++++++++++----------------
1 file changed, 218 insertions(+), 219 deletions(-)
diff --git a/src/sass/imports/_sections.scss b/src/sass/imports/_sections.scss
index 5d31f8ef3a..df29491815 100644
--- a/src/sass/imports/_sections.scss
+++ b/src/sass/imports/_sections.scss
@@ -1,338 +1,337 @@
.block {
- padding-top: 3.75em;
+ padding-top: 3.75em;
- &:not(.block-hero) {
- background: white;
- }
+ &:not(.block-hero) {
+ background: $gray-100;
+ }
- &:last-child {
- padding-bottom: 3.75em;
- }
+ &:last-child {
+ padding-bottom: 3.75em;
+ }
}
.block-image {
- margin-bottom: 1.5em;
+ margin-bottom: 1.5em;
}
.block-header {
- margin-bottom: 1.5em;
+ margin-bottom: 1.5em;
}
.block-title {
- align-self: center;
- margin: 0;
+ margin: 0;
}
.block-subtitle {
- color: $gray-500;
- line-height: 1.5;
- margin-bottom: 0;
+ color: $gray-500;
+ line-height: 1.5;
+ margin-bottom: 0;
- &:not(:first-child) {
- margin-top: 0.5em;
- }
+ &:not(:first-child) {
+ margin-top: 0.5em;
+ }
}
.block-buttons,
.grid-item-buttons {
- -ms-flex-align: center;
- align-items: center;
- display: -ms-flexbox;
- display: flex;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
- margin-bottom: 0.9375em;
-
- a {
- font-weight: bold;
- text-decoration: none;
- }
+ -ms-flex-align: center;
+ align-items: center;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ margin-bottom: 0.9375em;
+
+ a {
+ font-weight: bold;
+ text-decoration: none;
+ }
}
.block-buttons {
- -ms-flex-pack: center;
- justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
- a {
- margin: 0 0.375em 0.75em;
- }
+ a {
+ margin: 0 0.375em 0.75em;
+ }
}
.grid-item-buttons {
- a {
- margin: 0 0.75em 0.75em 0;
- }
+ a {
+ margin: 0 0.75em 0.75em 0;
+ }
}
.has-gradient {
- .block-subtitle {
- color: inherit;
- }
+ .block-subtitle {
+ color: inherit;
+ }
}
.block-text,
.block-hero {
- .block-buttons {
- &:not(:first-child) {
- margin-top: 1.875em;
- }
+ .block-buttons {
+ &:not(:first-child) {
+ margin-top: 1.875em;
}
+ }
}
// Content section
.block-text {
- .grid-item {
- max-width: $container-sm;
- text-align: center;
- }
+ .grid-item {
+ max-width: $container-sm;
+ text-align: center;
+ }
- .block-title {
- font-size: 1.875em;
- }
+ .block-title {
+ font-size: 1.875em;
+ }
}
@media only screen and (min-width: 641px) {
- .block-text {
- .block-content {
- font-size: 1.125em;
- }
+ .block-text {
+ .block-content {
+ font-size: 1.125em;
+ }
- .block-title {
- font-size: 2.125em;
- }
+ .block-title {
+ font-size: 2.125em;
}
+ }
}
-@media only screen and (min-width: 801px) {
- .block-text {
- .grid-item {
- &:not(:only-child) {
- -ms-flex: 0 0 50%;
- flex: 0 0 50%;
- max-width: 90%;
- }
- }
+@media only screen and (min-width: 1201px) {
+ .block-text {
+ .grid-item {
+ &:not(:only-child) {
+ -ms-flex: 0 0 50%;
+ flex: 0 0 50%;
+ max-width: 50%;
+ }
}
+ }
+
+ .block-body {
+ &:not(:only-child) {
+ text-align: left;
- .block-body {
- &:not(:only-child) {
- .block-buttons {
- -ms-flex-pack: start;
- justify-content: flex-start;
-
- a {
- margin-left: 0;
- margin-right: 0.75em;
- }
- }
+ .block-buttons {
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+
+ a {
+ margin-left: 0;
+ margin-right: 0.75em;
}
+ }
}
+ }
}
@media only screen and (min-width: 1001px) {
- .block-image {
- &:not(:only-child) {
- padding-right: 0.5em;
- }
+ .block-image {
+ &:not(:only-child) {
+ padding-right: 2.5em;
}
+ }
- .grid-swap {
- .block-image {
- &:not(:only-child) {
- padding-left: 0.5em;
- padding-right: 0.9375em;
- }
- }
+ .grid-swap {
+ .block-image {
+ &:not(:only-child) {
+ padding-left: 2.5em;
+ padding-right: 0.9375em;
+ }
}
+ }
}
// CTA section
.block-cta {
- .has-gradient {
- border-radius: $border-radius;
- margin-bottom: 1.875em;
- padding: 3.75em 3vw 1.875em;
- }
-
- .block-header {
- max-width: $container-sm;
- text-align: center;
- }
+ .has-gradient {
+ border-radius: $border-radius;
+ margin-bottom: 1.875em;
+ padding: 3.75em 3vw 1.875em;
+ }
+
+ .block-header {
+ max-width: $container-sm;
+ text-align: center;
+ }
- .block-title {
- font-size: 1.875em;
- }
+ .block-title {
+ font-size: 1.875em;
+ }
- .block-subtitle {
- font-size: 1.125em;
- }
+ .block-subtitle {
+ font-size: 1.125em;
+ }
}
@media only screen and (min-width: 641px) {
- .block-title {
- font-size: 2.125em;
- }
+ .block-title {
+ font-size: 2.125em;
+ }
}
@media only screen and (min-width: 801px) {
- .block-cta {
- .has-gradient {
- padding-left: 7%;
- padding-right: 7%;
- }
+ .block-cta {
+ .has-gradient {
+ padding-left: 7%;
+ padding-right: 7%;
+ }
- .block-header {
- -ms-flex: 0 0 66.666%;
- flex: 0 0 66.666%;
- max-width: 66.666%;
- text-align: left;
- }
+ .block-header {
+ -ms-flex: 0 0 66.666%;
+ flex: 0 0 66.666%;
+ max-width: 66.666%;
+ text-align: left;
+ }
- .block-buttons {
- -ms-flex: 0 0 50%;
- flex: 0 0 50%;
- margin-top: 0;
- max-width: 50%;
- }
+ .block-buttons {
+ -ms-flex: 0 0 33.333%;
+ flex: 0 0 33.333%;
+ margin-top: 0;
+ max-width: 33.333%;
}
+ }
}
// Grid section
.block-grid {
- .block-hero+& {
- &:not(.has-header) {
- background: 0;
- padding-top: 0;
- }
+ .block-hero+& {
+ &:not(.has-header) {
+ background: 0;
+ padding-top: 0;
}
+ }
- .block-header {
- margin-bottom: 2em;
- text-align: center;
- }
-
- .block-title {
- font-size: 1.875em;
- }
+ .block-header {
+ margin-bottom: 2em;
+ text-align: center;
+ }
- .grid-item {
- text-align: center;
+ .block-title {
+ font-size: 1.875em;
+ }
- display: -ms-flexbox;
- display: flex;
- -ms-flex-direction: column;
- flex-direction: column;
- margin-bottom: 1.875em;
- }
+ .grid-item {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ margin-bottom: 1.875em;
+ }
}
.grid-item-inside {
- background: #fff;
- border: 1px solid $gray-300;
- border-radius: $border-radius-sm;
- box-shadow: $box-shadow;
- box-sizing: border-box;
- -ms-flex-positive: 1;
- flex-grow: 1;
- padding-bottom: 0.75em;
+ background: #fff;
+ border: 1px solid $gray-300;
+ border-radius: $border-radius-sm;
+ box-shadow: $box-shadow;
+ box-sizing: border-box;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ padding-bottom: 0.75em;
}
.grid-item-image {
- border-radius: $border-radius-sm $border-radius-sm 0 0;
- display: block;
- width: 100%;
+ border-radius: $border-radius-sm $border-radius-sm 0 0;
+ display: block;
+ width: 100%;
- img {
- border-radius: $border-radius-sm $border-radius-sm 0 0;
- }
+ img {
+ border-radius: $border-radius-sm $border-radius-sm 0 0;
+ }
}
.grid-item-title {
- font-size: 1.5em;
- margin: 1em 0 0.5em;
- padding-left: 1em;
- padding-right: 1em;
-
- &:first-child {
- margin-top: 1.25em;
- }
-
- a {
- color: inherit !important;
- text-decoration: none;
- }
+ font-size: 1.5em;
+ margin: 1em 0 0.5em;
+ padding-left: 1em;
+ padding-right: 1em;
+
+ &:first-child {
+ margin-top: 1.25em;
+ }
+
+ a {
+ color: inherit !important;
+ text-decoration: none;
+ }
}
.grid-item-content,
.grid-item-buttons {
- padding-left: 1.5em;
- padding-right: 1.5em;
+ padding-left: 1.5em;
+ padding-right: 1.5em;
}
.grid-item-content {
- margin-bottom: 1.25em;
+ margin-bottom: 1.25em;
}
.grid-item-buttons {
- a {
- &:not(.button) {
- &:after {
- font-size: 1.125em;
- content: '\2192';
- line-height: 1.5;
- margin-left: 5px;
- }
- }
+ a {
+ &:not(.button) {
+ &:after {
+ font-size: 1.125em;
+ content: "\2192";
+ line-height: 1.5;
+ margin-left: 5px;
+ }
}
+ }
}
@media only screen and (max-width: 1000px) {
- .block-grid {
- .grid-item {
- margin-bottom: 4vw;
- }
+ .block-grid {
+ .grid-item {
+ margin-bottom: 4vw;
}
+ }
}
// Hero section
.block-hero {
- padding-bottom: 7.5em;
- position: relative;
- text-align: center;
+ padding-bottom: 7.5em;
+ position: relative;
+ text-align: center;
- .block-header {
- margin-bottom: 0.75em;
- }
+ .block-header {
+ margin-bottom: 0.75em;
+ }
- .block-title {
- font-size: 2.25em;
- }
+ .block-title {
+ font-size: 2.25em;
+ }
- .block-content {
- font-size: 1.125em;
- line-height: 1.5;
- }
+ .block-content {
+ font-size: 1.125em;
+ line-height: 1.5;
+ }
- &+.block {
- margin-top: -5em;
- position: relative;
- }
+ &+.block {
+ margin-top: -5em;
+ position: relative;
+ }
}
@media only screen and (min-width: 641px) {
- .block-hero {
- .block-title {
- font-size: 3em;
- }
+ .block-hero {
+ .block-title {
+ font-size: 3em;
+ }
- .block-content {
- font-size: 1.25em;
- }
+ .block-content {
+ font-size: 1.25em;
+ }
- .block-buttons {
- a {
- font-size: 1em;
- }
- }
+ .block-buttons {
+ a {
+ font-size: 1em;
+ }
}
-}
\ No newline at end of file
+ }
+}