From ba359c07a5f6574cf2492be046e3cf5580069ae7 Mon Sep 17 00:00:00 2001 From: Dominik Polakovics Date: Sat, 14 Dec 2024 01:56:35 +0100 Subject: [PATCH] feat: button design, icons fix --- .../ContentElements/stats/assets/frontend.css | 25 +++++++++------- .../Public/Scss/abstracts/_icons.scss | 29 ++----------------- .../Public/Scss/components/_buttons.scss | 9 ++++++ .../Public/Scss/components/_navigation.scss | 2 ++ .../Public/Scss/components/_news.scss | 7 ++--- packages/base/Resources/Public/Scss/main.scss | 1 + 6 files changed, 30 insertions(+), 43 deletions(-) create mode 100644 packages/base/Resources/Public/Scss/components/_buttons.scss diff --git a/packages/base/ContentBlocks/ContentElements/stats/assets/frontend.css b/packages/base/ContentBlocks/ContentElements/stats/assets/frontend.css index 0f7c9d0..d6b740f 100644 --- a/packages/base/ContentBlocks/ContentElements/stats/assets/frontend.css +++ b/packages/base/ContentBlocks/ContentElements/stats/assets/frontend.css @@ -1,28 +1,29 @@ .frame-type-cloonar_stats .stats-wrapper { display: flex; flex-wrap: wrap; - gap: 1rem; - justify-content: space-between; + justify-content: flex-start; align-items: flex-start; position: relative; - z-index: 10; /* Ensure it's on top of the hero container */ + z-index: 10; background: #fff; - padding: 2rem 1rem; + padding: 1rem; max-width: 1140px; margin-left: auto; margin-right: auto; + gap: 1rem; /* maintain gap on mobile */ } -/* Each paragraph is treated as a column */ +/* Two columns on mobile */ .frame-type-cloonar_stats .stats-wrapper p { - flex: 1 1 100%; + box-sizing: border-box; + flex: 0 0 calc((100% - 1rem) / 2); + max-width: calc((100% - 1rem) / 2); text-align: center; margin-bottom: 1rem; text-transform: uppercase; color: var(--bs-primary); } -/* Lead paragraphs have larger text for numbers */ .frame-type-cloonar_stats .stats-wrapper span.big-number { font-size: 4rem; font-family: 'Hajime Sans', sans-serif; @@ -31,11 +32,13 @@ @media (min-width: 768px) { .frame-type-cloonar_stats .stats-wrapper { - gap: 2rem; padding: 3rem 1rem; - } - .frame-type-cloonar_stats .stats-wrapper p { - flex: 1 1 calc(25% - 2rem); + gap: 2rem; /* increase gap on desktop */ } + /* Four columns on desktop */ + .frame-type-cloonar_stats .stats-wrapper p { + flex: 0 0 calc((100% - 6rem) / 4); /* 3 gaps * 2rem = 6rem total gap */ + max-width: calc((100% - 6rem) / 4); + } } diff --git a/packages/base/Resources/Public/Scss/abstracts/_icons.scss b/packages/base/Resources/Public/Scss/abstracts/_icons.scss index 0b14134..6183328 100644 --- a/packages/base/Resources/Public/Scss/abstracts/_icons.scss +++ b/packages/base/Resources/Public/Scss/abstracts/_icons.scss @@ -1,20 +1,11 @@ -.ci, -a[href*="instagram.com"], -a[href*="tiktok.com"], -a[href*="linkedin.com"], -a[href*="twitter.com"], -a[href*="x.com"] { +.ci { display: inline-block; vertical-align: middle; line-height: 1; position: relative; } -.ci::before, -a[href*="instagram.com*"]::before, -a[href*="tiktok.com"]::before, -a[href*="linkedin.com"]::before, -a[href*="x.com"]::before { +.ci::before { display: inline-block; content: ' '; width: 1em; @@ -48,22 +39,6 @@ a[href*="x.com"]::before { .ci-phone::before { mask-image: url(../Icons/phone.svg); } - -a[href*="instagram.com*"]::before { - mask-image: url(../Icons/instagram.svg); -} -a[href*="tiktok.com"]::before { - mask-image: url(../Icons/tiktok.svg); - width: 0.9em; - height: 0.9em; -} -a[href*="linkedin.com"]::before { - mask-image: url(../Icons/linkedin.svg); -} -a[href*="x.com"]::before { - mask-image: url(../Icons/x.svg); -} - .ci-angle-right::before { mask-image: url(../Icons/angle-right.svg); } diff --git a/packages/base/Resources/Public/Scss/components/_buttons.scss b/packages/base/Resources/Public/Scss/components/_buttons.scss new file mode 100644 index 0000000..c79b2ce --- /dev/null +++ b/packages/base/Resources/Public/Scss/components/_buttons.scss @@ -0,0 +1,9 @@ +.btn { + background-color: var(--bs-primary); + color: var(--bs-yellow); + font-family: 'Hajime Sans', sans-serif; + border-radius: 2rem; + padding: 0.75rem 1.5rem; + border: none; + cursor: pointer; +} diff --git a/packages/base/Resources/Public/Scss/components/_navigation.scss b/packages/base/Resources/Public/Scss/components/_navigation.scss index a45c3ff..bf1b52d 100644 --- a/packages/base/Resources/Public/Scss/components/_navigation.scss +++ b/packages/base/Resources/Public/Scss/components/_navigation.scss @@ -120,6 +120,7 @@ header { @media (max-width: $breakpoint-lg) { .nav-toggle { display: block; + margin-left: auto; // move toggle to the right on mobile } .nav-links { @@ -130,6 +131,7 @@ header { flex-direction: column; max-height: 0; overflow: hidden; + background: #fff; // Add white background for mobile dropdown @include transition(max-height, 0.4s); .nav-item { diff --git a/packages/base/Resources/Public/Scss/components/_news.scss b/packages/base/Resources/Public/Scss/components/_news.scss index f12a085..5ad6c9a 100644 --- a/packages/base/Resources/Public/Scss/components/_news.scss +++ b/packages/base/Resources/Public/Scss/components/_news.scss @@ -25,7 +25,6 @@ grid-column: 5 / span 2; grid-row: 2; } - } } @@ -82,7 +81,6 @@ height: auto; } - a { position: relative; display: flex; @@ -133,10 +131,9 @@ } } -/* Show mobile button only below desktop breakpoint */ +/* Show mobile button only below desktop breakpoint, add space above */ .mobile-btn { - display: block; - margin-top: 1rem; + margin-top: 2rem; /* Added space between the news list and the show all button */ @media (min-width: $breakpoint-lg) { display: none; } diff --git a/packages/base/Resources/Public/Scss/main.scss b/packages/base/Resources/Public/Scss/main.scss index 2f1e9b1..aa0c400 100644 --- a/packages/base/Resources/Public/Scss/main.scss +++ b/packages/base/Resources/Public/Scss/main.scss @@ -7,3 +7,4 @@ @import 'components/contentElements'; @import 'components/news'; @import 'components/footer'; +@import 'components/buttons';