Skip to content

Commit

Permalink
about successes: simplify styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@dakur
dakur committed Aug 29, 2024
1 parent b2c0b88 commit 8334f67
Show file tree
Hide file tree
Showing 6 changed files with 24 additions and 66 deletions.
6 changes: 3 additions & 3 deletions UI/AboutHighlights/AboutHighlightsController.latte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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>
Expand Down
16 changes: 8 additions & 8 deletions UI/AboutSuccesses/AboutSuccessesController.latte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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.
Expand All @@ -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>
Expand Down
17 changes: 0 additions & 17 deletions frontend/src/styles/pages/about-highlights.scss
View file

This file was deleted.

38 changes: 1 addition & 37 deletions frontend/src/styles/pages/about-successes.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
1 change: 0 additions & 1 deletion frontend/src/styles/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,6 @@

//pages
@import "pages/about-crossroad";
@import "pages/about-highlights";
@import "pages/about-successes";
@import "pages/baseUnits";
@import "pages/contacts";
Expand Down
12 changes: 12 additions & 0 deletions frontend/src/styles/utils.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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; }
Expand Down

0 comments on commit 8334f67

Please sign in to comment.