From 989343ea597de5d892530e70b038dff1e6a69511 Mon Sep 17 00:00:00 2001 From: iGor milhit Date: Mon, 5 Sep 2022 14:42:59 +0200 Subject: [PATCH] scss: improve the `verse` text layout - Increase space between paragraph on large screens, except for the last paragraph. - Add a bigger left margin on large screens. Co-Authored-by: iGor milhit --- assets/scss/_texts.scss | 10 ++++++++-- assets/scss/_variables.scss | 2 ++ 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/assets/scss/_texts.scss b/assets/scss/_texts.scss index 5a28fb2..816c599 100644 --- a/assets/scss/_texts.scss +++ b/assets/scss/_texts.scss @@ -6,9 +6,15 @@ .verse { line-height: $line-height-verse; + @include breakpoint(laptop) { + margin-left: 3rem; + } - p { - margin-bottom: 1rem; + p:not(:last-child) { + margin-bottom: $verse-p-bottom-space; + @include breakpoint(laptop) { + margin-bottom: $verse-p-bottom-space-larger; + } } br { diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss index 9a0a0b9..18631bb 100644 --- a/assets/scss/_variables.scss +++ b/assets/scss/_variables.scss @@ -18,6 +18,8 @@ $font-size-base: 1.25rem !default; // 25 px $font-size-small: .9rem; // 18 px $line-height-base: 1.4; $line-height-verse: 1.3; +$verse-p-bottom-space: 2rem; +$verse-p-bottom-space-larger: 3rem; /////////////////////