ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Update spacing of various text elements

This commit is contained in:
Ramon Wenger 2020-10-07 15:54:40 +02:00
parent 801c8a7d2e
commit 7fb61d9f05
9 changed files with 32 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
client/src/components/ContentBlock.vue
View File

@ -248,7 +248,7 @@
@import "@/styles/_mixins.scss";
.content-block {
margin-bottom: 2.5em;
margin-bottom: $section-spacing;
position: relative;
&__container {
@ -257,10 +257,11 @@
&__title {
line-height: 1.5;
margin-top: -0.5rem; // to offset the 1.5 line height, it leaves a padding on top
}
&__instrument-label {
margin-bottom: 0;
margin-bottom: $medium-spacing;
@include regular-text();
}

3
client/src/components/content-blocks/SectionTitleBlock.vue
View File

@ -12,9 +12,10 @@
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
.section-title {
margin-bottom: 30px;
line-height: $default-heading-line-height;
@include heading-line-height;
}
</style>

7
client/src/components/content-blocks/SubtitleBlock.vue
View File

@ -12,9 +12,12 @@
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
.subtitle {
padding-top: 1px;
margin-bottom: $large-spacing;
line-height: $default-heading-line-height;
margin-bottom: $medium-spacing;
margin-bottom: calc(#{$large-spacing} - 0.1rem);
@include heading-line-height;
}
</style>

5
client/src/components/content-blocks/TextBlock.vue
View File

@ -11,7 +11,10 @@
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
.text-block {
margin-bottom: 30px;
margin-bottom: $medium-spacing; // if calc is not supported
margin-bottom: calc(#{$large-spacing} - 0.25rem); // to offset the 1.5 line height, which leaves a padding
}
</style>

5
client/src/components/modules/Module.vue
View File

@ -254,12 +254,9 @@
}
&__intro {
line-height: 1.5;
margin-bottom: 3em;
> /deep/ p {
font-size: toRem(25px);
margin-bottom: 1.5em;
margin-bottom: $large-spacing;
&:last-child {
margin-bottom: 0;

8
client/src/pages/instrument.vue
View File

@ -55,13 +55,17 @@
.instrument {
&__title {
font-size: toRem(35px);
margin-bottom: 40px;
margin-bottom: $large-spacing;
line-height: $default-heading-line-height;
}
& /deep/ {
& p {
margin-bottom: 40px;
margin-bottom: $large-spacing;
}
& p:last-child {
margin-bottom: 0;
}
& ul {

1
client/src/styles/_intro.scss
View File

@ -1,5 +1,6 @@
.intro {
@include lead-paragraph;
margin-bottom: $section-spacing;
> p {
@include lead-paragraph;

5
client/src/styles/_mixins.scss
View File

@ -206,3 +206,8 @@
@mixin default-box-shadow {
box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
}
@mixin heading-line-height {
line-height: $default-heading-line-height;
margin-top: -0.2rem; // to offset the 1.2 line height, it leaves a padding on top
}

9
client/src/styles/_typography.scss
View File

@ -22,6 +22,7 @@ p, a, li {
p {
line-height: 1.5;
margin-top: -0.25rem; // to offset the 1.5 line height, it leaves a padding on top
}
a {
@ -43,22 +44,22 @@ h1 {
h2 {
font-size: 2.75rem; // 44px
margin-bottom: 24px;
margin-bottom: $large-spacing;
}
h3 {
font-size: 2.125rem; // 34px
margin-bottom: 52px;
margin-bottom: $large-spacing;
}
h4 {
font-size: 1.5rem; // 24px
margin-bottom: 24px;
margin-bottom: $large-spacing;
}
h5 {
font-size: 1.125rem; // 18px
margin-bottom: 24px;
margin-bottom: $large-spacing;
}
input, textarea, select, button {