285 new css styling option on cards

blocks/cards/cards.css

@@ -44,7 +44,6 @@
 /* cards side-by-side */
 .cards.side-by-side > ul > li img {
     height: 380px;
-    filter: brightness(45%);
     object-position: 40%;
     object-fit: cover;
     display: block;
@@ -69,10 +68,7 @@
 }
 
 /* cards side-by-side */
-.cards.side-by-side .cards-card-body h2,
-.cards.side-by-side .cards-card-body h3,
-.cards.side-by-side .cards-card-body h4,
-.cards.side-by-side .cards-card-body h5 {
+.cards.side-by-side .cards-card-body :is(h2, h3, h4, h5) {
     color: var(--c-white);
 }
 
@@ -161,26 +157,21 @@
     padding-right: 40px;
 }
 
-.cards.side-by-side .cards-card-body h2 a,
-.cards.side-by-side .cards-card-body h3 a,
-.cards.side-by-side .cards-card-body h4 a,
-.cards.side-by-side .cards-card-body h5 a {
+.cards.side-by-side .cards-card-body :is(h2, h3, h4, h5) a {
     color: var(--c-white);
 }
 
 .cards.side-by-side .cards-card-body h3 a {
     font-weight: 600;
 }
 
-.cards.side-by-side .cards-card-body h5 a:hover,
-.cards.side-by-side .cards-card-body h4 a:hover,
-.cards.side-by-side .cards-card-body h3 a:hover{
+.cards.side-by-side .cards-card-body :is(h5, h4, h3) a:hover{
     text-decoration: none;
 }
 
 .cards.side-by-side .cards-card-body h2 {
     font-size: 30px;
-    margin-top: 100px;
+    margin-top: 35px;
     font-weight: 600;
 }
 
@@ -195,6 +186,10 @@
 }
 
 @media (min-width: 600px) {
+    .cards.side-by-side .cards-card-body h2 {
+        margin-top: 100px;
+    }
+
     .cards.teaser.background > ul > li > div:nth-last-child(2) {
         float: left;
         width: 44%;
@@ -233,16 +228,16 @@
         flex: 0 0 100%;
     }
 
-    .cards.side-by-side > ul > li:last-child img {
+    .cards.side-by-side > ul > li img {
         height: 500px;
-        filter: brightness(45%);
+    }
+
+    .cards.side-by-side > ul > li:last-child img {
         object-position: 45% 10%;
         background-size: 70%;
     }
 
     .cards.side-by-side > ul > li:not(li:last-child) img {
-        height: 500px;
-        filter: brightness(45%);
         object-position: 40%;
         object-fit: cover;
     }
@@ -252,7 +247,7 @@
     }
 
     .cards.side-by-side > ul > li > .cards-card-body {
-        width: 260px;
+        width: auto;
     }
 
     .cards.side-by-side > ul > li:nth-last-child(2) > .cards-card-body {
@@ -352,13 +347,8 @@
         transition: 1s;
     }
 
-    .cards.side-by-side > ul > li img {
-        height: 450px;
-        filter: brightness(40%);
-    }
-
     .cards.side-by-side > ul > li:hover > *:not(.cards-card-body) {
-        filter: brightness(140%);
+        filter: brightness(110%);
     }
 
     .cards.side-by-side > ul > li:hover {

blocks/columns/columns.css

@@ -15,8 +15,7 @@
     margin: 16px 0;
 }
 
-.columns.rainbow > div,
-.columns.rainbow-reverse > div {
+.columns:is(.rainbow, .rainbow-reverse) > div {
     gap: 32px;
     margin: 32px 0;
 }
@@ -25,13 +24,16 @@
     flex-direction: column-reverse;
 }
 
-.columns.rainbow > div > div,
-.columns.rainbow-reverse > div > div {
+.columns:is(.rainbow, .rainbow-reverse) > div > div {
     margin: 0;
     color: var(--c-white);
     padding: 16px;
 }
 
+.columns:is(.rainbow, .rainbow-reverse) > div > div * {
+    color: var(--c-white);
+}
+
 .columns > div > div:first-of-type {
     flex: 1 1 var(--column-fb-left);
 }
@@ -73,27 +75,33 @@
   background-color: var(--c-dark-gray);
 }
 
-.columns.background-light-plum,
-.columns.background-dark-plum,
-.columns.background-dark-blue,
-.columns.background-light-gray,
-.columns.background-dark-gray {
+.columns:is(
+    .background-light-plum,
+    .background-dark-plum,
+    .background-dark-blue,
+    .background-light-gray,
+    .background-dark-gray
+) {
   padding: 0 16px;
 }
 
-.columns.background-light-plum > div > div,
-.columns.background-dark-blue > div > div,
-.columns.background-dark-plum > div > div,
-.columns.background-light-gray > div > div,
-.columns.background-dark-gray > div > div {
+.columns:is(
+    .background-light-plum,
+    .background-dark-plum,
+    .background-dark-blue,
+    .background-light-gray,
+    .background-dark-gray
+) > div > div {
   background-color: white;
 }
 
-.columns.background-light-plum > div > div > *,
-.columns.background-dark-blue > div > div > *,
-.columns.background-dark-plum > div > div > *,
-.columns.background-light-gray > div > div > *,
-.columns.background-dark-gray > div > div > * {
+.columns:is(
+    .background-light-plum,
+    .background-dark-plum,
+    .background-dark-blue,
+    .background-light-gray,
+    .background-dark-gray
+) > div > div > * {
   margin: 16px 0;
 }
 
@@ -131,19 +139,20 @@
     color: var(--c-dark-plum);
 }
 
+/* Rainbow:  darker-plum, dark-plum, dark-blue  */
 .columns.rainbow > div > div:nth-of-type(3n),
 .columns.rainbow-reverse > div > div:nth-of-type(3n + 1) {
-    background-color: var(--c-mid-blue);
+    background-color: var(--c-dark-blue);
 }
 
 .columns.rainbow > div > div:nth-child(3n + 1),
 .columns.rainbow-reverse > div > div:nth-of-type(3n) {
-    background-color: var(--c-mid-plum);
+    background-color: var(--c-darker-plum);
 }
 
 .columns.rainbow > div > div:nth-child(3n + 2),
 .columns.rainbow-reverse > div > div:nth-of-type(3n + 2) {
-    background-color: var(--c-dark-blue);
+    background-color: var(--c-dark-plum);
 }
 
 @media (min-width: 600px) {

blocks/fixed-social-media/fixed-social-media.css

@@ -21,4 +21,9 @@
   height: 45px;
   width: 45px;
   fill: var(--c-dark-plum);
-}
+}
+
+.fixed-social-media .icon-youtube svg {
+  width: 35px;
+  translate: 5px;
+}

blocks/footer/footer.css

@@ -84,6 +84,14 @@ footer .icon svg {
   display: inline-block;
 }
 
+footer .icon-youtube svg {
+  font-size: 40px;
+}
+
+footer .icon-youtube {
+  transform: translateY(-2px);
+}
+
 /* Privacy subsection */
 footer > div > div > div:last-child {
   font-size: 14px;

blocks/social/social.css

@@ -1,5 +1,5 @@
 .social h2 {
-    color: var(--c-white);
+    color: var(--fg-color);
 }
 
 .social>ul {
@@ -25,6 +25,11 @@
     fill: currentcolor;
 }
 
+.youtube svg {
+    width: 65px;
+    translate: 15px;
+}
+
 .social>ul>li {
     margin: 16px 0;
 }
@@ -44,8 +49,8 @@
     margin: -1px;
 }
 
-.social>ul>li>a:hover h2 {
-  color: var(--bg-color);
+.social>ul>li>a:hover>h2 {
+    color: var(--bg-color);
 }
 
 .social>ul>li>a>* {
@@ -66,19 +71,112 @@
     font-weight: 400;
 }
 
-.social .social-card-linkedin {
-    --bg-color: var(--linked-in);
+.social .social-card {
     --fg-color: var(--bg-text-social);
 }
 
-.social .social-card-facebook {
+.social-card.linkedin {
+    --bg-color: var(--linked-in);
+}
+
+.social-card.facebook {
     --bg-color: var(--facebook);
-    --fg-color: var(--bg-text-social);
 }
 
-.social .social-card-twitter {
+.social-card.twitter {
     --bg-color: var(--twitter);
-    --fg-color: var(--bg-text-social);
+}
+
+.social-card.instagram {
+    --bg-color: var(--instagram);
+}
+
+.social-card.youtube {
+    --bg-color: var(--youtube);
+}
+
+.social-card.github {
+    --bg-color: var(--git);
+}
+
+.social:is(
+    .dark-plum,
+    .mid-plum,
+    .light-plum,
+    .dark-blue,
+    .mid-blue,
+    .dark-teal,
+    .dark-gray,
+    .mid-gray,
+    .yellow,
+    .red
+) .social-card {
+    --fg-color: var(--c-white);
+}
+
+.social:is(
+    .mid-teal,
+    .light-blue,
+    .light-teal,
+    .light-gray
+) .social-card {
+    --fg-color: var(--c-dark-plum);
+}
+
+.social.dark-plum .social-card {
+    --bg-color: var(--c-dark-plum);
+}
+
+.social.mid-plum .social-card {
+    --bg-color: var(--c-mid-plum);
+}
+
+.social.light-plum .social-card {
+    --bg-color: var(--c-light-plum);
+}
+
+.social.dark-blue .social-card {
+    --bg-color: var(--c-dark-blue);
+}
+
+.social.mid-blue .social-card {
+    --bg-color: var(--c-mid-blue);
+}
+
+.social.light-blue .social-card {
+    --bg-color: var(--c-light-blue);
+}
+
+.social.dark-teal .social-card {
+    --bg-color: var(--c-dark-teal);
+}
+
+.social.mid-teal .social-card {
+    --bg-color: var(--c-mid-teal);
+}
+
+.social.light-teal .social-card {
+    --bg-color: var(--c-light-teal);
+}
+
+.social.dark-gray .social-card {
+    --bg-color: var(--c-dark-gray);
+}
+
+.social.mid-gray .social-card {
+    --bg-color: var(--c-mid-gray);
+}
+
+.social.light-gray .social-card {
+    --bg-color: var(--c-light-gray);
+}
+
+.social.yellow .social-card {
+    --bg-color: var(--c-yellow);
+}
+
+.social.red .social-card {
+    --bg-color: var(--c-red);
 }
 
 @media screen and (min-width: 600px) {