-

+

Hnutí Brontosaurus

-
+
-

+

Brontosaurus pomáhá přírodě, památkám i lidem po celé republice i v zahraničí. Aby vše lépe fungovalo, máme po celé republice regionální centra, základní články a kluby, které pořádají víkendovky, prázdninové akce, dětské tábory, přednášky a mnoho dalšího.

-

+

V České republice máme přes 40 aktivních základních článků, které organizují brontosauří akce. Pokud se chceš jakkoli zapojit nebo se jen zeptat, jak funguje Brontosaurus ve tvém regionu, podívej se na naši mapku a najdi svůj nejbližší @@ -23,137 +23,137 @@

-
+
Struktura organizace{* Used `desc` tag instead of `title` because `title` generated unwanted tooltip. Hopefully ATs will get through it. *} - - - + + + Základní články - - - Kluby + + + Kluby - - - Regionální centra + + + Regionální centra - - - Ústředí + + + Ústředí - - - + + + Dětské oddíly BRĎO - - - Dobrovolníci + + + Dobrovolníci
-
+
{include '../components/administrativeUnitsMap.latte'}
-
-

+ -
-

+
+

Regionální centra

-

+

Regionální centra Hnutí Brontosaurus se – jak už z názvu vyplývá – věnují převážně projektům a aktivitám v daném regionu. Podporují činnost základních článků působících v jejich blízkosti, nejsou jim však nijak nadřízena. V současnosti máme regionální centra v Praze, Jeseníkách a na Podluží.

-
-

+
+

Základní články

-

+

Základní článek Hnutí Brontosaurus je uskupení lidí, kteří společně pořádají akce a chtějí vystupovat pod hlavičkou Hnutí Brontosaurus. Jednotlivé základní články jsou tak pestré jako lidé, kteří je tvoří. Spojuje je však otevřenost vůči novým členům, kteří se chtějí aktivně zapojit do jejich činnosti.

-

+

Některé články pečují o přírodu a významné lokality, jiné pomáhají na ekofarmách, opravují hrady nebo zámky. Další se věnují environmentální výchově dětí v oddílech, sjíždí řeky, jezdí na vandry nebo třeba pořádají kulturní akce.

-

+

Průměrně mají okolo 30 členů, jsou ale i výjimky, jejichž členská základna sahá přes stovku. Některé tvoří lidé doslova z celé republiky a schází se téměř výhradně na dobrovolnických akcích, jiné působí spíše lokálně a jejich členové pořádají také různé výlety, besedy nebo společenské večery.

-
+

Na jakoukoliv brontosauří akci může přijet kdokoliv, pokud se však budeš chtít zapojit více - a třeba i nějakou akci také pomáhat pořádat, můžeš se přidat k některému ze základních článků (mapa, + a třeba i nějakou akci také pomáhat pořádat, můžeš se přidat k některému ze základních článků (mapa, seznam).

-

+

A pokud máš přátele, s nimiž chceš společně podnikat akce a založit si svůj vlastní článek, napiš nám na hnuti@brontosaurus.cz.

-
-

+
+

Kluby

-

+

Kluby jsou snadnou cestou, jak začít s přáteli organizovat vlastní akce pod hlavičkou Hnutí Brontosaurus. Založení klubu je oproti základnímu článku jednodušší, protože odpadá většina administrativních povinností. Nebudete však samostatnou organizací, ale součástí ústředí @@ -161,12 +161,12 @@

-
-

+
+

BRĎO – Brontosauří dětské oddíly

-

+

Brontosaurus nezapomíná ani na ty nejmenší. Brontosauří dětské oddíly BRĎO jsou pravidelně se setkávající kluby, které pořádají i dětské tábory a další akce. Díky BRĎU mohou i nejmenší brontosauři pomoci přírodě a zároveň se naučit zajímat o svět kolem sebe. Oddíly @@ -174,12 +174,12 @@

-
-

+
+

Dobrovolníci

-

+

Dobrovolníkem se stáváš, když se zúčastníš jakékoliv brontosauří akce a pomůžeš. Pokud chceš, můžeš se stát i oficiálním členem Hnutí Brontosaurus. Napiš nám na hnuti@brontosaurus.cz.

diff --git a/UI/AboutSuccesses/AboutSuccessesController.latte b/UI/AboutSuccesses/AboutSuccessesController.latte index 61909cb..502aa9c 100644 --- a/UI/AboutSuccesses/AboutSuccessesController.latte +++ b/UI/AboutSuccesses/AboutSuccessesController.latte @@ -45,7 +45,7 @@ péče o přírodu, památky a lidi s Brontosaurem!

-
+
diff --git a/frontend/src/styles/components/brontographics.scss b/frontend/src/styles/components/brontographics.scss new file mode 100644 index 0000000..96c49ac --- /dev/null +++ b/frontend/src/styles/components/brontographics.scss @@ -0,0 +1,24 @@ +.brontographics { + &__shape { + fill: $colors-emphasizing; + cursor: pointer; + transition: fill 200ms linear; + + &:hover { + fill: darken($colors-emphasizing, 10); + } + } + + &__label { + fill: $colors-text; + font-size: 1.2em; + opacity: 0; + pointer-events: none; + transition: opacity 200ms 100ms linear; + } + + &__shape:hover + &__label { + opacity: 1; + pointer-events: auto; + } +} \ No newline at end of file diff --git a/frontend/src/styles/pages/about-crossroad.scss b/frontend/src/styles/pages/about-crossroad.scss index 07dda80..c192877 100644 --- a/frontend/src/styles/pages/about-crossroad.scss +++ b/frontend/src/styles/pages/about-crossroad.scss @@ -4,7 +4,6 @@ article .about-crossroad { } &__crossroad { - max-width: 40rem; list-style-type: none; } diff --git a/frontend/src/styles/pages/about-structure.scss b/frontend/src/styles/pages/about-structure.scss index 87253db..ce34032 100644 --- a/frontend/src/styles/pages/about-structure.scss +++ b/frontend/src/styles/pages/about-structure.scss @@ -1,26 +1,5 @@ .about-structure { - &__overview { - display: flex; - align-items: center; - margin-bottom: vr-unit(2); - - @media ($typography-breakpoint-large-from) { - justify-content: center; // when there is no brontoimage - max-width: 40rem; - margin-left: auto; - margin-right: auto; - } - } - - &-text { - @include block-text(); - - &:not(:last-child) { - margin-bottom: vr-unit(1); - } - } - - &-image { + &__graphics { flex-basis: 17em; flex-shrink: 0; @@ -28,76 +7,19 @@ @media (max-width: 50em), (pointer: none), (pointer: coarse) { display: none; } - - &-part { - &-shape { - fill: $colors-emphasizing; - cursor: pointer; - transition: fill 200ms linear; - - &:hover { - fill: darken($colors-emphasizing, 10); - } - } - - &-label { - fill: $colors-text; - font-size: 1.2em; - opacity: 0; - pointer-events: none; - transition: opacity 200ms 100ms linear; - } - - &-shape:hover + &-label { - opacity: 1; - pointer-events: auto; - } - } } - &-map { - max-width: 40rem; - margin-left: auto; - margin-right: auto; - margin-bottom: vr-unit(2); + &__subheading { + font-weight: $fonts-delm-weight-bold !important; } - &-unit { - margin-bottom: vr-unit(1); - - @media ($typography-breakpoint-large-from) { - margin-bottom: vr-unit(2); - } - - &-subheading { - font-weight: $fonts-delm-weight-bold !important; - - @media ($typography-breakpoint-large-from) { - text-align: center; - } - } - - &-description { - @include block-text(); - - &:not(:last-child) { - margin-bottom: vr-unit(0.5); - } - } - - &-block { - max-width: 40rem; - margin-top: vr-unit(1); - margin-bottom: vr-unit(1); + &__text:not(:last-child) { + margin-block-end: 0.5rlh; + } - @include presentationBox-breakpoint-textOnSide-from() { - min-height: vr-unit(15); - display: flex; - justify-content: center; - flex-direction: column; - margin-left: auto; - margin-right: auto; - } + &__presentationBox { + @include presentationBox-breakpoint-textOnSide-from() { + min-height: vr-unit(15); } } } diff --git a/frontend/src/styles/pages/about-successes.scss b/frontend/src/styles/pages/about-successes.scss index c03a038..2ee84ec 100644 --- a/frontend/src/styles/pages/about-successes.scss +++ b/frontend/src/styles/pages/about-successes.scss @@ -4,8 +4,6 @@ $about-successes-half-from: "min-width: " + ($about-successes-breakpoint + 0.001 .about-successes { &__video { - max-inline-size: 50rem; - iframe { display: block; inline-size: 100%; diff --git a/frontend/src/styles/style.scss b/frontend/src/styles/style.scss index 0285db2..dd539a1 100644 --- a/frontend/src/styles/style.scss +++ b/frontend/src/styles/style.scss @@ -22,6 +22,7 @@ @import "components/action"; @import "components/announcement"; +@import "components/brontographics"; @import "components/footer"; @import "components/forms"; @import "components/header"; diff --git a/frontend/src/styles/utils.scss b/frontend/src/styles/utils.scss index 08187e5..d55631a 100644 --- a/frontend/src/styles/utils.scss +++ b/frontend/src/styles/utils.scss @@ -2,6 +2,11 @@ .hb-ta-l { text-align: left; } .hb-ta-c { text-align: center; } .hb-ta-r { text-align: right; } +@media ($typography-breakpoint-large-from) { + .hb-lg-ta-l { text-align: left; } + .hb-lg-ta-c { text-align: center; } + .hb-lg-ta-r { text-align: right; } +} /* font size */ .hb-fs-xxs { font-size: 0.7rem; } @@ -19,6 +24,11 @@ .hb-d-b { display: block; } .hb-d-ib { display: inline-block; } .hb-d-f { display: flex; } +@media ($typography-breakpoint-large-from) { + .hb-lg-d-b { display: block; } + .hb-lg-d-ib { display: inline-block; } + .hb-lg-d-f { display: flex; } +} /* flex */ .hb-fd-c { flex-direction: column; } @@ -62,6 +72,15 @@ } .hb-mw-mc { max-width: max-content; } +// todo revise sizes +.hb-mw-40 { max-width: 40rem; } +.hb-mw-50 { max-width: 50rem; } +@media ($typography-breakpoint-large-from) { + .hb-lg-mw-mc { max-width: max-content; } + // todo revise sizes + .hb-lg-mw-40 { max-width: 40rem; } + .hb-lg-mw-50 { max-width: 50rem; } +} /* margin inline */ .hb-mi-auto { margin-inline: auto; } @@ -75,6 +94,19 @@ .hb-mi-7 { margin-inline: 4rlh; } .hb-mi-8 { margin-inline: 5rlh; } .hb-mi-9 { margin-inline: 6rlh; } +@media ($typography-breakpoint-large-from) { + .hb-lg-mi-auto { margin-inline: auto; } + .hb-lg-mi-0 { margin-inline: 0; } + .hb-lg-mi-1 { margin-inline: 0.125rlh; } + .hb-lg-mi-2 { margin-inline: 0.25rlh; } + .hb-lg-mi-3 { margin-inline: 0.5rlh; } + .hb-lg-mi-4 { margin-inline: 1rlh; } + .hb-lg-mi-5 { margin-inline: 2rlh; } + .hb-lg-mi-6 { margin-inline: 3rlh; } + .hb-lg-mi-7 { margin-inline: 4rlh; } + .hb-lg-mi-8 { margin-inline: 5rlh; } + .hb-lg-mi-9 { margin-inline: 6rlh; } +} /* margin inline start */ .hb-mis-auto { margin-inline-start: auto; }