From a4863c03a93832f66e5975c1651af5b80f3dbe25 Mon Sep 17 00:00:00 2001 From: Jonatan Lledo Date: Fri, 17 Feb 2023 16:04:42 +0100 Subject: [PATCH 1/2] #285 styles fix it in all 3 cases --- blocks/cards/cards.css | 38 +++--- blocks/columns/columns.css | 46 ++++--- .../fixed-social-media/fixed-social-media.css | 7 +- blocks/footer/footer.css | 8 ++ blocks/social/social.css | 116 ++++++++++++++++-- blocks/social/social.js | 5 +- 6 files changed, 166 insertions(+), 54 deletions(-) diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css index bca18da1..a4ba55ce 100644 --- a/blocks/cards/cards.css +++ b/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); } @@ -159,10 +155,7 @@ 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); } @@ -170,15 +163,13 @@ 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; } @@ -193,6 +184,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%; @@ -231,16 +226,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; } @@ -250,7 +245,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 { @@ -343,13 +338,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 { diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css index 07835593..a3244c61 100644 --- a/blocks/columns/columns.css +++ b/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; } diff --git a/blocks/fixed-social-media/fixed-social-media.css b/blocks/fixed-social-media/fixed-social-media.css index e1455124..298e0bc3 100644 --- a/blocks/fixed-social-media/fixed-social-media.css +++ b/blocks/fixed-social-media/fixed-social-media.css @@ -21,4 +21,9 @@ height: 45px; width: 45px; fill: var(--c-dark-plum); -} \ No newline at end of file +} + +.fixed-social-media .icon-youtube svg { + width: 35px; + translate: 5px; +} diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index 0d5275b0..a6655fbf 100644 --- a/blocks/footer/footer.css +++ b/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; diff --git a/blocks/social/social.css b/blocks/social/social.css index df907144..9856277f 100644 --- a/blocks/social/social.css +++ b/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,6 +49,10 @@ margin: -1px; } +.social>ul>li>a:hover>h2 { + color: var(--bg-color); +} + .social>ul>li>a>* { margin: 0; padding: 0; @@ -62,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) { diff --git a/blocks/social/social.js b/blocks/social/social.js index 9cbf1402..1af73f3c 100644 --- a/blocks/social/social.js +++ b/blocks/social/social.js @@ -7,6 +7,7 @@ export default function decorate(block) { const icon = div.querySelector('.icon'); const texts = div.querySelectorAll('h2,p'); const title = div.querySelector('h2'); + const [, iconName] = icon.className.split('icon icon-'); if (a) { a = a.cloneNode(false); @@ -18,9 +19,7 @@ export default function decorate(block) { a = li; } - if (icon.className.includes('twitter')) li.className = 'social-card-twitter'; - else if (icon.className.includes('facebook')) li.className = 'social-card-facebook'; - else if (icon.className.includes('linkedin')) li.className = 'social-card-linkedin'; + li.classList.add('social-card', iconName); texts.forEach((text) => a.appendChild(text)); a.appendChild(icon); From 5bf3d91065a31d2afba298aec517e2de54feeb4b Mon Sep 17 00:00:00 2001 From: Jonatan Lledo Date: Tue, 21 Feb 2023 08:52:29 +0100 Subject: [PATCH 2/2] #285 new rainbow color sequence --- blocks/columns/columns.css | 7 ++++--- styles/styles.css | 1 + 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css index a3244c61..16a7abaa 100644 --- a/blocks/columns/columns.css +++ b/blocks/columns/columns.css @@ -139,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) { diff --git a/styles/styles.css b/styles/styles.css index 667242b0..54767144 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -31,6 +31,7 @@ --c-dark-blue: #2f78c4; --c-dark-mid-plum: #3e40a0; /* for background footer only */ --c-dark-plum: #2e308e; + --c-darker-plum: #1c1d55; --c-dark-gray: #53565a; --c-dark-teal: #06c7cc; --c-light-teal: #97f5f7;