Skip to content

Commit

Permalink
about structure: simplify styles
Browse files Browse the repository at this point in the history
  • Loading branch information
dakur committed Aug 29, 2024
1 parent 8334f67 commit a4c60ec
Show file tree
Hide file tree
Showing 9 changed files with 120 additions and 144 deletions.
2 changes: 1 addition & 1 deletion UI/AboutCrossroad/AboutCrossroadController.latte
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
Jak to u nás funguje?
</a>

<ul class="about-crossroad__crossroad [ hb-d-f hb-fd-c hb-lg-fd-r hb-lg-jc-c hb-g-4 ][ hb-mi-auto hb-mbe-7 ]">
<ul class="about-crossroad__crossroad hb-mw-40 [ hb-d-f hb-fd-c hb-lg-fd-r hb-lg-jc-c hb-g-4 ][ hb-mi-auto hb-mbe-7 ]">
<li class="hb-fb-50">
<a class="about-crossroad__tile about-crossroad__tile--structure button--secondary-wrapper" href="{$aboutStructurePageLink}">
<div class="button button--secondary">
Expand Down
104 changes: 52 additions & 52 deletions UI/AboutStructure/AboutStructureController.latte

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion UI/AboutSuccesses/AboutSuccessesController.latte
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
péče o přírodu, památky a lidi s Brontosaurem!
</p>

<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 ]">
<div class="about-successes__video hb-mw-50 [ 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>
Expand Down
24 changes: 24 additions & 0 deletions frontend/src/styles/components/brontographics.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
1 change: 0 additions & 1 deletion frontend/src/styles/pages/about-crossroad.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ article .about-crossroad {
}

&__crossroad {
max-width: 40rem;
list-style-type: none;
}

Expand Down
96 changes: 9 additions & 87 deletions frontend/src/styles/pages/about-structure.scss
Original file line number Diff line number Diff line change
@@ -1,103 +1,25 @@
.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;

// hide on small screens and touch devices
@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);
}
}
}
2 changes: 0 additions & 2 deletions frontend/src/styles/pages/about-successes.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand Down
1 change: 1 addition & 0 deletions frontend/src/styles/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@

@import "components/action";
@import "components/announcement";
@import "components/brontographics";
@import "components/footer";
@import "components/forms";
@import "components/header";
Expand Down
32 changes: 32 additions & 0 deletions frontend/src/styles/utils.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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; }
Expand All @@ -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; }
Expand Down Expand Up @@ -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; }
Expand All @@ -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; }
Expand Down

0 comments on commit a4c60ec

Please sign in to comment.