igor
/
portfoligor
1
1
Fork 0
Code Issues 13 Pull Requests Packages Projects 1 Releases 3 Wiki Activity

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 <igor@milhit.ch>
dev
iGor milhit 2022-09-05 14:42:59 +02:00
parent 0c21f00b67
commit 989343ea59
Signed by: igor
GPG Key ID: 692D97C3D0228A99
2 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
assets/scss/_texts.scss
View File

@ -6,9 +6,15 @@
.verse { .verse {
line-height: $line-height-verse; line-height: $line-height-verse;
@include breakpoint(laptop) {
margin-left: 3rem;
}
p { p:not(:last-child) {
margin-bottom: 1rem; margin-bottom: $verse-p-bottom-space;
@include breakpoint(laptop) {
margin-bottom: $verse-p-bottom-space-larger;
}
} }
br { br {

2
assets/scss/_variables.scss
View File

@ -18,6 +18,8 @@ $font-size-base: 1.25rem !default; // 25 px
$font-size-small: .9rem; // 18 px $font-size-small: .9rem; // 18 px
$line-height-base: 1.4; $line-height-base: 1.4;
$line-height-verse: 1.3; $line-height-verse: 1.3;
$verse-p-bottom-space: 2rem;
$verse-p-bottom-space-larger: 3rem;
///////////////////// /////////////////////