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

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

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

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

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

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

@ -11,7 +11,10 @@
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import "@/styles/_variables.scss";
.text-block { .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> </style>

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

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

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

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

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

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

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

@ -206,3 +206,8 @@
@mixin default-box-shadow { @mixin default-box-shadow {
box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12); 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 { p {
line-height: 1.5; line-height: 1.5;
margin-top: -0.25rem; // to offset the 1.5 line height, it leaves a padding on top
} }
a { a {
@ -43,22 +44,22 @@ h1 {
h2 { h2 {
font-size: 2.75rem; // 44px font-size: 2.75rem; // 44px
margin-bottom: 24px; margin-bottom: $large-spacing;
} }
h3 { h3 {
font-size: 2.125rem; // 34px font-size: 2.125rem; // 34px
margin-bottom: 52px; margin-bottom: $large-spacing;
} }
h4 { h4 {
font-size: 1.5rem; // 24px font-size: 1.5rem; // 24px
margin-bottom: 24px; margin-bottom: $large-spacing;
} }
h5 { h5 {
font-size: 1.125rem; // 18px font-size: 1.125rem; // 18px
margin-bottom: 24px; margin-bottom: $large-spacing;
} }
input, textarea, select, button { input, textarea, select, button {