Skip to content

Commit

Permalink
simplify styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@dakur
dakur committed Dec 12, 2024
1 parent 9bbfa88 commit 4d9e5f0
Show file tree
Hide file tree
Showing 54 changed files with 395 additions and 381 deletions.
2 changes: 1 addition & 1 deletion UI/BaseUnitsAndClubsList/BaseUnitsController.latte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

{block content}
<main role="main">
<article class="baseUnits">
<article class="baseUnits hb-mw-40 hb-mi-auto">
<h1>
Seznam základních článků a klubů
</h1>
Expand Down
2 changes: 1 addition & 1 deletion UI/Courses/CoursesController.latte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@
zájem žáků o&nbsp;svět kolem&nbsp;nás.
</p>

<a class="courses__highSchoolsPrograms hero button--secondary-wrapper" href="{$highSchoolPageLink}">
<a class="courses__highSchoolsPrograms hero button--secondary-wrapper" href="{$highSchoolPageLink}" style="--hero-background-image-url: url('{$themePathRelative|noescape}/frontend/dist/images/highSchoolPrograms.jpg')">
<div class="button button--secondary">{block |trim}{* because of whitespace in text underline *}
Nabídka programů pro&nbsp;školy{/block}
</div>
Expand Down
10 changes: 5 additions & 5 deletions UI/English/EnglishController.latte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,19 +7,19 @@
About Brontosaurus
</h1>

<p class="english-paragraph">
<p class="hb-block-text hb-mbe-5">
Hnutí Brontosaurus is a&nbsp;group of mostly young people under 26&nbsp;years old, who care about the&nbsp;world they
live in. Therefore we combine meaningful volunteering for&nbsp;nature, historical sites
and&nbsp;people with unconventional experiences and&nbsp;fun. We are independent and&nbsp;open to&nbsp;new
ideas. Thousands of&nbsp;volunteers set&nbsp;out each year to&nbsp;mow orchid meadows, plant trees, repair
castles, or&nbsp;build a&nbsp;school in&nbsp;the&nbsp;Himalayas, to&nbsp;name just a&nbsp;few of&nbsp;the activities.
</p>

<h2 class="english-subheading">
<h2 class="hb-block-text">
Let's help nature, monuments and people together!
</h2>

<ul class="english-list list">
<ul class="list hb-mbe-4">
<li class="list__item">
Join our Erasmus+ training courses and youth exchanges.
</li>
Expand All @@ -41,9 +41,9 @@
</li>
</ul>

<div class="english-card">
<div class="english__card hb-p-4">
<div>
<a class="english-card-contactLink button button--primary" href="mailto:[email protected]">
<a class="button button--primary hb-tt-n" href="mailto:[email protected]">
[email protected]
</a>
</div>
Expand Down
10 changes: 5 additions & 5 deletions UI/Error/ErrorController.404.latte
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
{layout $layoutPath}

{block content}
<main class="error404" role="main">
<h1 class="error404__heading">
<main role="main">
<h1>
Jejda&hellip;
</h1>

<p class="error404__lead">
<p class="hb-block-text hb-lg-ta-c hb-mbe-5">
Stránku, kterou chceš zobrazit, bohužel nikde nemůžeme najít.
</p>

<h2>Co teď?</h2>

<ul class="error404__whatNow list">
<ul class="list hb-mbe-5">
<li class="list__item">
Podívej&nbsp;se nahoru do&nbsp;navigačního menu, jestli tam nenajdeš správnou cestu k&nbsp;hledané informaci.
</li>
Expand All @@ -32,7 +32,7 @@

<h2>Zavedl&nbsp;tě sem zbloudilý odkaz?</h2>

<p class="error404__paragraph">
<p class="hb-block-text hb-mbe-4">
To, že tato stránka neexistuje, může&nbsp;být i&nbsp;nedopatření. Pokud si&nbsp;myslíš, že tomu tak&nbsp;je, napiš nám na&nbsp;e-mail <a href="mailto:[email protected]" rel="noopener noreferrer" target="_blank">[email protected]</a> a&nbsp;my&nbsp;to prověříme.
</p>
</main>
Expand Down
20 changes: 10 additions & 10 deletions UI/FirstTime/FirstTimeController.latte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,61 +2,61 @@

{block content}
<main role="main">
<article class="firstTime">
<article>
<h1>
Co čekat, když jedu poprvé
</h1>

<p class="firstTime__text">
<p class="hb-block-text hb-mbe-4">
<strong>Akce jsou určené všem, kteří mají zájem o svět kolem nás.</strong>
Co ti mohou přinést? Třeba zajímavý zářez do životopisu a příležitosti,
které se s dobrovolnictvím pojí. Možnost vycestovat do zahraničí, potkat se
se zajímavými lidmi z mnoha oborů nebo absolvovat školení a kurzy. A hlavně dobrý pocit,
nové zkušenosti, kamarády, zážitky…
</p>

<p class="firstTime__text">
<p class="hb-block-text hb-mbe-4">
<strong>Aby ses akcí mohl účastnit, nemusíš být členem Hnutí Brontosaurus.</strong>
Nepotřebuješ ani žádné zvláštní vybavení, schopnosti a zkušenosti. Organizátoři tě všechno rádi naučí.
</p>

<p class="firstTime__text">
<p class="hb-block-text hb-mbe-4">
<strong>U aktivit, které nebudeš chtít dělat, stačí říct prostě „NE“.</strong>
Nikdo ti to nebude vyčítat, budujeme totiž bezpečné prostředí založené na pochopení a toleranci.
Na víkendovky jezdí různá sorta lidí, které spojuje otevřenost a zájem o svět kolem sebe a program
je vždy postavený tak, aby se všichni rychle seznámili a poznali.
</p>

<p class="firstTime__text">
<p class="hb-block-text hb-mbe-4">
<strong>Spíme většinou ve spacácích, ale každá víkendovka to má trochu jinak.</strong>
Někde je ubytování v objektu a jinde v teepee nebo ve stanu… Vaříme poctivé jídlo ze surovin šetrných
k přírodnímu prostředí. S organizátory se většinou lze domluvit i na speciálních požadavcích (vegetarián, bezlepek).
Vše zjistíš na stránkách akce.
</p>

<p class="firstTime__text">
<p class="hb-block-text hb-mbe-4">
<strong>Organizátoři akcí jsou vyškolení od profesionálů.</strong>
Pokud se i ty chceš stát profesionálním „orgem“, mrkni
na <a href="http://praha.brontosaurus.cz/organizatorsky-kurz" target="_blank">Organizátorský kurz v Praze</a>
a <a href="http://organizator.brontosaurus.cz/wp" target="_blank">v Brně</a>
nebo intenzivní <a href="http://www.cesticky.cz" target="_blank">letní kurz Cestičky 2.0</a>.
</p>

<p class="firstTime__text">
<p class="hb-block-text hb-mbe-4">
<strong>Přihlašuje se přes formulář nebo kontaktní e-mail uvedený u akce.</strong>
Ideální je hlásit se alespoň dva týdny předem. Několik dní před akcí ti organizátoři pošlou informace o tom,
co vzít s sebou a jak se na místo dopravit.
</p>

<a class="firstTime__hero hero button--secondary-wrapper" href="{$voluntaryPageLink}?{$filtersKey}=jedu-poprve#obsah">
<a class="hero button--secondary-wrapper hb-mb-4 hb-lg-mbe-6" href="{$voluntaryPageLink}?{$filtersKey}=jedu-poprve#obsah" style="--hero-background-image-url: url('{$themePathRelative|noescape}/frontend/dist/images/box-firstTime.jpg')">
<div class="button button--secondary">Vybrat si dobrovolnickou akci</div>
</a>

<h2>
Průběh akce
</h2>

<ul class="firstTime__list list">
<ul class="list hb-mbe-4">
<li class="list__item">
Na místo konání se dopravuje většinou každý zvlášť v pátek večer, pak následují hry k seznámení s ostatními.
Nejčastěji jezdí středoškoláci, vysokoškoláci, ale i mladí pracující.
Expand All @@ -81,7 +81,7 @@
</li>
</ul>

<div class="firstTime__chooseEvent">
<div class="hb-ta-c">
<a class="button button--primary" href="{$voluntaryPageLink}?{$filtersKey}=jedu-poprve#obsah">
Vybrat si akci
</a>
Expand Down
6 changes: 3 additions & 3 deletions UI/ForChildren/ForChildrenController.latte
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
{layout $layoutPath}

{block content}
<main class="forchildren__events hb-events" role="main" id="obsah">
<main class="hb-events hb-mbe-6" role="main" id="obsah">
<h1 class="hb-events__heading">
Akce pro&nbsp;děti i&nbsp;rodiče
</h1>

<div class="forchildren__mapWrapper">
<div class="hb-ta-c hb-mbe-6">
<a class="forchildren__map" href="{$aboutStructurePageLink}#mapa-detske-oddily">
BRĎO – Brontosauří dětské oddíly
</a>
Expand Down Expand Up @@ -58,7 +58,7 @@
</main>

<aside>
<section class="forchildren__description description">
<section class="description hb-mbe-5">
<h1>
Programy pro&nbsp;děti
</h1>
Expand Down
8 changes: 4 additions & 4 deletions UI/Future/FutureController.latte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

{block content}
<main class="future" role="main">
<h1 class="future-heading">
<h1 class="hb-ta-c hb-mbe-4">
Co se&nbsp;děje u&nbsp;Brontosaurů?
</h1>

Expand All @@ -13,12 +13,12 @@
Zkuste&nbsp;to prosím za&nbsp;chvilku znovu.
</div>
{else}
<div class="future-events events" n:inner-foreach="$months as $month">
<h2 class="future-events-heading">
<div class="events" n:inner-foreach="$months as $month">
<h2 class="hb-ta-c hb-tt-u hb-mbe-4">
{$month->monthNumber|convertMonthNumberToName}
</h2>

<div class="future-events-list hb-eventList">
<div class="future__eventList hb-eventList">
{include '../components/eventList.latte', eventCollection => $month->events, inFutureView => TRUE}
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/styles/blocks/buttons.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.wp-block-buttons {
display: flex;
justify-content: center;
margin-block: vr-unit(1);
margin-block: 1rlh;
}
5 changes: 2 additions & 3 deletions frontend/src/styles/components/action.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,12 +45,11 @@
&--ulterior {
display: block;
max-width: max-content;
margin-left: auto;
margin-right: auto;
margin-inline: auto;

--iconSize: 0.8em;
background-image: url("../images/icon-smallPaw.svg");
padding-left: calc(var(--iconSize) + #{vr-unit(0.25)});
padding-inline-start: calc(var(--iconSize) + 0.25rlh);
background-size: auto var(--iconSize);
background-position: left 0.15em;
background-repeat: no-repeat;
Expand Down
9 changes: 4 additions & 5 deletions frontend/src/styles/components/administrativeUnitsMap.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
list-style-type: none;

@media ($typography-breakpoint-large-from) {
margin-bottom: vr-unit(0.5);
margin-bottom: 0.5rlh;
}
}
&__filter {
Expand All @@ -19,9 +19,9 @@
&__filterLink {
&--icon {
background-size: 0.7em;
background-position: vr-unit(0.5) center;
background-position: 0.5rlh center;
background-repeat: no-repeat;
padding-left: calc(#{vr-unit(1)} + 0.4em);
padding-left: calc(1rlh + 0.4em);
}

&--office {
Expand All @@ -48,8 +48,7 @@
&__map {
height: 20em;
max-height: 100vh;
margin-left: -#{vr-unit(1)};
margin-right: -#{vr-unit(1)};
margin-inline: -1rlh;

img {
max-width: initial;
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/styles/components/announcement.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.announcement {
padding: vr-unit(0.5) vr-unit(1);
padding: 0.5rlh 1rlh;
background-color: $colors-emphasizing;
text-align: center;

Expand Down
20 changes: 10 additions & 10 deletions frontend/src/styles/components/buttons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@ $buttons-secondary-breakpoint-centeredButton-from: "min-width: " + ($buttons-sec

&--primary,
&--secondary {
padding-top: calc(#{vr-unit(0.5)} + 0.25em);
padding-bottom: vr-unit(0.5);
padding-top: calc(0.5rlh + 0.25em);
padding-bottom: 0.5rlh;
}


Expand All @@ -33,15 +33,15 @@ $buttons-secondary-breakpoint-centeredButton-from: "min-width: " + ($buttons-sec
background-color: $colors-emphasizing;
border: none; // ?
color: $colors-default-background !important; // overwrite global link style
padding-left: vr-unit(1);
padding-right: calc(#{vr-unit(1)} + 5px);
padding-left: 1rlh;
padding-right: calc(1rlh + 5px);
position: relative;
text-transform: uppercase;
//box-shadow: 4px 2px 8px 0 $colors-default-background; // or 0 0 10px 3px

@media (min-width: 23.001em) {
padding-left: vr-unit(2);
padding-right: calc(#{vr-unit(2)} + 5px);
padding-left: 2rlh;
padding-right: calc(2rlh + 5px);
}

&:hover {
Expand Down Expand Up @@ -76,7 +76,7 @@ $buttons-secondary-breakpoint-centeredButton-from: "min-width: " + ($buttons-sec
&--secondary {
display: block;
position: absolute;
bottom: vr-unit(1);
bottom: 1rlh;
max-width: 8em;
z-index: 0;
text-decoration: none;
Expand All @@ -86,13 +86,13 @@ $buttons-secondary-breakpoint-centeredButton-from: "min-width: " + ($buttons-sec

@media ($buttons-secondary-breakpoint-rightBottomBubble-until) {
text-align: right;
right: vr-unit(1);
right: 1rlh;
}
@media ($buttons-secondary-breakpoint-centeredButton-from) {
max-width: 20em;
left: 50%; transform: translateX(-50%); // center absolutely positioned element
white-space: nowrap; // avoid line breaks (when `left: 50%` hits right border of an element, it causes line break)
padding: vr-unit(0.5) vr-unit(1) calc(#{vr-unit(0.5)} - 0.3em);
padding: 0.5rlh 1rlh calc(0.5rlh - 0.3em);
border-radius: 2em;
}

Expand Down Expand Up @@ -146,7 +146,7 @@ $buttons-secondary-breakpoint-centeredButton-from: "min-width: " + ($buttons-sec
// used for customization buttons like event filters

&--customization {
padding: 0.3em vr-unit(1) 0.15em;
padding: 0.3em 1rlh 0.15em;
border: none;
background-color: $colors-tinge;
color: $colors-text;
Expand Down
11 changes: 5 additions & 6 deletions frontend/src/styles/components/content.scss
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.content {
padding: vr-unit(0.5) vr-unit(1) vr-unit(2);
padding: 0.5rlh 1rlh 2rlh;
.coverPhoto + & {
padding-block-start: vr-unit(2);
padding-block-start: 2rlh;
}

color: transparentize($colors-text, 0.2);
Expand All @@ -15,8 +15,7 @@
}

@media ($header-breakpoint-navigationHiddenToVisible-visible-from) {
padding-left: vr-unit(2);
padding-right: vr-unit(2);
padding-inline: 2rlh;
}

h1 {
Expand All @@ -26,7 +25,7 @@
h2 {
font-size: 1.25em;
font-weight: $fonts-delm-weight-bold;
margin-bottom: vr-unit(0.5);
margin-bottom: 0.5rlh;

@media ($typography-breakpoint-large-from) {
font-size: 1.5em;
Expand All @@ -37,7 +36,7 @@
h3 {
font-size: 1.1em;
font-weight: $fonts-delm-weight-regular; // @todo or bold?
margin-bottom: vr-unit(0.5);
margin-bottom: 0.5rlh;
}

&__dynamic {
Expand Down
Loading

0 comments on commit 4d9e5f0

Please sign in to comment.