Place: Fix title alignments and margins
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
2020-03-11 19:23:56 +01:00
parent 6c5f4f41e1
commit ba5d1de780
2 changed files with 12 additions and 7 deletions

View File

@@ -103,7 +103,7 @@
<section class="place">
<div class="place__title">
<h1 class="title-location title-location--big" aria-label="Houses of {location.name}">
<span class="place__top anim-mask">
<span class="place__title_top anim-mask">
<span class="place__title_houses">Houses</span>
<em class="place__title_of">of</em>
</span>

View File

@@ -30,6 +30,7 @@
}
h1 {
--offset: #{pxVW(72)};
position: relative;
z-index: 2;
text-align: center;
@@ -39,17 +40,21 @@
.anim-translate {
display: inline-block;
}
}
&_bottom {
text-align: right;
margin-left: pxVW(128);
@include breakpoint (xl) {
margin-left: 128px;
--offset: 72px;
}
}
&_top {
margin-left: calc(-1 * var(--offset));
text-align: left;
}
&_bottom {
text-align: right;
margin-left: var(--offset);
}
// Switcher button
.button-control {
z-index: 1;