From 8334f672f3cf1c6a1f999567c8da9a68b902f9c5 Mon Sep 17 00:00:00 2001
From: dakur <dev@kurowsti.cz>
Date: Thu, 29 Aug 2024 21:23:18 +0200
Subject: [PATCH] about successes: simplify styles

---
 .../AboutHighlightsController.latte           |  6 +--
 .../AboutSuccessesController.latte            | 16 ++++----
 .../src/styles/pages/about-highlights.scss    | 17 ---------
 .../src/styles/pages/about-successes.scss     | 38 +------------------
 frontend/src/styles/style.scss                |  1 -
 frontend/src/styles/utils.scss                | 12 ++++++
 6 files changed, 24 insertions(+), 66 deletions(-)
 delete mode 100644 frontend/src/styles/pages/about-highlights.scss

diff --git a/UI/AboutHighlights/AboutHighlightsController.latte b/UI/AboutHighlights/AboutHighlightsController.latte
index 6da3877..b98e477 100644
--- a/UI/AboutHighlights/AboutHighlightsController.latte
+++ b/UI/AboutHighlights/AboutHighlightsController.latte
@@ -2,12 +2,12 @@
 
 {block content}
 <main role="main">
-	<article class="about-highlights">
+	<article class="hb-ta-c hb-mbe-6">
 		<h1>
 			Jak to&nbsp;u&nbsp;nás funguje
 		</h1>
 
-		<ul class="about-highlights-list list list--noBackground">
+		<ul class="list list--noBackground hb-mbe-4">
 			<li class="list__item">
 				Každý může jet na brontosauří akci. Nemusíš být členem, mít žádné předchozí
 				zkušenosti nebo znalosti. Všechno ti rádi ukážeme.
@@ -35,7 +35,7 @@
 			</li>
 		</ul>
 
-		<a class="about-highlights-action button button--primary" href="{$voluntaryPageLink}">
+		<a class="button button--primary [ hb-d-b hb-mi-auto hb-mw-mc ]" href="{$voluntaryPageLink}">
 			Chci na&nbsp;akci
 		</a>
 	</article>
diff --git a/UI/AboutSuccesses/AboutSuccessesController.latte b/UI/AboutSuccesses/AboutSuccessesController.latte
index b7f9880..61909cb 100644
--- a/UI/AboutSuccesses/AboutSuccessesController.latte
+++ b/UI/AboutSuccesses/AboutSuccessesController.latte
@@ -2,19 +2,19 @@
 
 {block content}
 <main role="main">
-	<article class="about-successes">
+	<article class="about-successes hb-mbe-6">
 		<h1>
 			Příběhy nadšení
 		</h1>
 
-		<p class="about-successes__introduction">
+		<p class="hb-block-text hb-mbe-4">
 			Už je to přes 50 let, kdy v roce 1974 vzbudila Akce Brontosaurus obrovskou vlnu nadšení
 			pro pomoc přírodě a památkám. Desetitisíce lidí se díky ní pustily do sázení stromů,
 			oprav hradů, úklidů koryt řek, kosení chráněných luk nebo čištění studánek.
 			U příležitosti výročí půlstoletí Brontosaura představujeme vybrané příběhy úspěšných dobrovolnických projektů.
 		</p>
 
-		<div class="about-successes__stories hb-eventList">
+		<div class="hb-eventList hb-mbe-4">
 			{var $displayOnLoad = 3}
 			<div class="hb-eventList__grid" n:inner-foreach="$stories as $story">
 				{include story, story: $story}
@@ -34,7 +34,7 @@
 			{/if}
 		</div>
 
-		<p class="about-successes__introduction">
+		<p class="hb-block-text hb-mbe-4">
 			Tyto příběhy jsou jen malým dílem obrovského úsilí o zdravé životní prostředí,
 			respekt k přírodě a udržitelný život. Mohou nás však inspirovat k aktivitě
 			a přinášet naději a důvěru v budoucnost.
@@ -45,19 +45,19 @@
 			péče o přírodu, památky a lidi s Brontosaurem!
 		</p>
 
-		<div class="about-successes__video">
+		<div class="about-successes__video [ hb-d-f hb-fd-c hb-lg-fd-r hb-g-4 hb-lg-g-3 ][ hb-mi-auto hb-mbs-6 hb-mbe-5 hb-lg-mbe-4 ]">
 			<iframe src="https://www.youtube.com/embed/6RCZ2E5S9qo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
 			<iframe src="https://www.youtube.com/embed/DM-BiimluBw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 		</div>
 
-		<div class="about-successes__support">
-			<p>
+		<div class="hb-ta-c hb-mbe-5">
+			<p class="hb-mbe-3">
 				Dává ti smysl, co děláme?
 				Adoptuj Brontosaura a podpoř naši péči přírodu a památky.
 			</p>
 
-			<a class="button button--primary" href="{$supportOverviewLink}">Chci adoptovat Brontosaura</a>
+			<a class="[ button button--primary ][ hb-d-b hb-mw-mc hb-mi-auto ]" href="{$supportOverviewLink}">Chci adoptovat Brontosaura</a>
 		</div>
 	</article>
 </main>
diff --git a/frontend/src/styles/pages/about-highlights.scss b/frontend/src/styles/pages/about-highlights.scss
deleted file mode 100644
index 1c66e3e..0000000
--- a/frontend/src/styles/pages/about-highlights.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-article .about-highlights {
-	text-align: center;
-	margin-bottom: vr-unit(3);
-
-	&-list {
-		max-width: 20rem;
-		margin-bottom: vr-unit(1);
-	}
-
-	&-action {
-		display: block;
-		max-width: 10em; // fallback
-		max-width: max-content;
-		margin-left: auto;
-		margin-right: auto;
-	}
-}
diff --git a/frontend/src/styles/pages/about-successes.scss b/frontend/src/styles/pages/about-successes.scss
index 9158d14..c03a038 100644
--- a/frontend/src/styles/pages/about-successes.scss
+++ b/frontend/src/styles/pages/about-successes.scss
@@ -2,51 +2,15 @@ $about-successes-breakpoint: 40em;
 $about-successes-full-until: "max-width: " + $about-successes-breakpoint;
 $about-successes-half-from: "min-width: " + ($about-successes-breakpoint + 0.001);
 
-article .about-successes {
-	margin-bottom: vr-unit(3);
-
-	&__introduction {
-		@include block-text();
-		margin-bottom: vr-unit(1);
-	}
-
-	&__stories {
-		margin-block-end: vr-unit(1);
-	}
-
+.about-successes {
 	&__video {
-		margin-block-start: vr-unit(3);
 		max-inline-size: 50rem;
-		margin-inline: auto;
-		margin-block-end: vr-unit(2);
-
-		@media ($typography-breakpoint-large-from) {
-			display: flex;
-			gap: vr-unit(0.5);
-			margin-block-end: vr-unit(1);
-		}
 
 		iframe {
 			display: block;
 			inline-size: 100%;
 			aspect-ratio: 16/9;
 			border-radius: 2em;
-			margin-block-end: vr-unit(1);
-		}
-	}
-
-	&__support {
-		text-align: center;
-		margin-block-end: vr-unit(2);
-
-		p {
-			margin-block-end: vr-unit(0.5);
-		}
-
-		a {
-			display: block;
-			max-width: max-content;
-			margin-inline: auto;
 		}
 	}
 }
diff --git a/frontend/src/styles/style.scss b/frontend/src/styles/style.scss
index 36cbf0d..0285db2 100644
--- a/frontend/src/styles/style.scss
+++ b/frontend/src/styles/style.scss
@@ -60,7 +60,6 @@
 
 //pages
 @import "pages/about-crossroad";
-@import "pages/about-highlights";
 @import "pages/about-successes";
 @import "pages/baseUnits";
 @import "pages/contacts";
diff --git a/frontend/src/styles/utils.scss b/frontend/src/styles/utils.scss
index cf44685..08187e5 100644
--- a/frontend/src/styles/utils.scss
+++ b/frontend/src/styles/utils.scss
@@ -49,8 +49,20 @@
 	.hb-lg-ai-fs { align-items: flex-start; }
 	.hb-lg-ai-c { align-items: center; }
 	.hb-lg-ai-fe { align-items: flex-end; }
+	.hb-lg-g-0 { gap: 0; }
+	.hb-lg-g-1 { gap: 0.125rlh; }
+	.hb-lg-g-2 { gap: 0.25rlh; }
+	.hb-lg-g-3 { gap: 0.5rlh; }
+	.hb-lg-g-4 { gap: 1rlh; }
+	.hb-lg-g-5 { gap: 2rlh; }
+	.hb-lg-g-6 { gap: 3rlh; }
+	.hb-lg-g-7 { gap: 4rlh; }
+	.hb-lg-g-8 { gap: 5rlh; }
+	.hb-lg-g-9 { gap: 6rlh; }
 }
 
+.hb-mw-mc { max-width: max-content; }
+
 /* margin inline */
 .hb-mi-auto { margin-inline: auto; }
 .hb-mi-0 { margin-inline: 0; }