flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source
This commit is contained in:
Félix Péault
2020-03-11 19:23:56 +01:00
parent 6c5f4f41e1
commit ba5d1de780
2 changed files with 12 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/routes/location/[country]/[place].svelte
View File

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

17
src/style/pages/_place.scss
View File

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