From b084629b37d5e3581a1b05331c93c1c7120f99d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Thu, 20 Feb 2020 19:03:47 +0100 Subject: [PATCH] Title and other CSS fixes --- src/organisms/Locations.svelte | 1 - src/style/_base.scss | 27 +++++++++++++++++++++------ src/style/atoms/_link.scss | 15 ++++++++++++--- static/img/icons/zoom.svg | 2 +- 4 files changed, 34 insertions(+), 11 deletions(-) diff --git a/src/organisms/Locations.svelte b/src/organisms/Locations.svelte index 197f63e..baad200 100644 --- a/src/organisms/Locations.svelte +++ b/src/organisms/Locations.svelte @@ -46,7 +46,6 @@ onMount(() => { }) -
diff --git a/src/style/_base.scss b/src/style/_base.scss index ee17e50..04cc155 100644 --- a/src/style/_base.scss +++ b/src/style/_base.scss @@ -101,19 +101,24 @@ button { // Bigger version &--big { - font-size: rem(56px); + font-size: rem(40px); + @include breakpoint (m) { + font-size: rem(56px); + } @include breakpoint (sm) { + font-size: pxVW(160); + } + @include breakpoint (md) { font-size: rem(160px); } em { display: inline-block; - font-size: rem(20px); + font-size: 0.35em; - @include breakpoint (sm) { + @include breakpoint (md) { margin-left: -8px; - font-size: rem(56px); } } } @@ -121,11 +126,21 @@ button { // Inline version &--inline { display: flex; - align-items: baseline; + flex-direction: column; + align-items: center; justify-content: center; em { - margin: 0 16px 0 24px; + margin: 8px 0 4px; + + @include breakpoint (sm) { + margin: 2px 16px 0 24px; + } + } + + @include breakpoint (sm) { + flex-direction: row; + align-items: baseline; } } } diff --git a/src/style/atoms/_link.scss b/src/style/atoms/_link.scss index ec150f6..890d13f 100644 --- a/src/style/atoms/_link.scss +++ b/src/style/atoms/_link.scss @@ -3,24 +3,33 @@ position: relative; display: inline-block; margin: 0 6px; - padding: 0 8px; + padding: 0 4px; color: $color-secondary; text-decoration: none; transition: color 200ms $ease-cubic; + @include breakpoint (sm) { + padding: 0 8px; + } + // Line &:after { content: ""; position: absolute; z-index: -1; background-color: rgba($color-secondary, 0.22); - height: 14px; width: 100%; - bottom: 5px; + height: 8px; + bottom: 3px; left: 0; border-radius: 50vh; transition: all 200ms $ease-cubic; transition-delay: 50ms; + + @include breakpoint (sm) { + height: 14px; + bottom: 5px; + } } // Icon diff --git a/static/img/icons/zoom.svg b/static/img/icons/zoom.svg index 8992fb4..4b48cef 100644 --- a/static/img/icons/zoom.svg +++ b/static/img/icons/zoom.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file