Skip to content

Commit

Permalink
fix: improve home semantics (#179)
Browse files Browse the repository at this point in the history
* fix: improve home semantics
* fix: wrap info cards in aside, remove search title
* fix: home menu background color for current page
  • Loading branch information
greatislander committed Jan 22, 2020
1 parent 00e629d commit e3cf9fd
Show file tree
Hide file tree
Showing 11 changed files with 464 additions and 430 deletions.
424 changes: 6 additions & 418 deletions src/assets/styles/common/_typography.scss

Large diffs are not rendered by default.

39 changes: 39 additions & 0 deletions src/assets/styles/common/typography/_blockquotes.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
blockquote {
margin-left: rem(48);
margin-right: 0;
}

blockquote::before {
color: $blue-400;
content: "";
font-family: $font-family-serif;
font-size: rem(64);
margin-left: rem(-48);
margin-top: rem(-18);
position: absolute;
}

blockquote * {
font-family: $font-family-sans;
font-size: rem(18);
font-style: italic;
font-weight: $font-weight-semibold;
line-height: (26 / 18);
}

blockquote cite {
font-family: $font-family-serif;
font-size: rem(16);
font-style: italic;
font-weight: $font-weight-normal;
}

blockquote cite::before {
content: "";
}

@include breakpoint-up(sm) {
blockquote {
margin-right: rem(48);
}
}
96 changes: 96 additions & 0 deletions src/assets/styles/common/typography/_headings.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4 {
margin-bottom: 0;
margin-top: 0;
}

h1,
.h1 {
font-family: $font-family-serif;
font-size: rem(36);
font-weight: $font-weight-black;
letter-spacing: rem(-0.16);
line-height: (44 / 36);
}

h2,
.h2 {
font-family: $font-family-display;
font-size: rem(28);
font-weight: $font-weight-bold;
line-height: (36 / 28);
}

h3,
.h3 {
font-family: $font-family-display;
font-size: rem(24);
font-weight: $font-weight-semibold;
line-height: (32 / 24);
}

h4,
.h4 {
font-family: $font-family-sans;
font-size: rem(18);
font-weight: $font-weight-semibold;
line-height: (26 / 18);
}

@include breakpoint-up(sm) {
h1,
.h1 {
font-size: rem(48);
line-height: (60 / 48);
}

h2,
.h2 {
font-size: rem(28);
line-height: (40 / 28);
}

h3,
.h3 {
font-size: rem(24);
line-height: (36 / 24);
}

h4,
.h4 {
font-size: rem(20);
line-height: (32 / 20);
}
}

@include breakpoint-up(md) {
h1,
.h1 {
font-size: rem(60);
line-height: (72 / 60);
}

h2,
.h2 {
font-size: rem(36);
line-height: (48 / 36);
}

h3,
.h3 {
font-size: rem(28);
line-height: (40 / 28);
}

h4,
.h4 {
font-size: rem(20);
line-height: (32 / 20);
}
}
14 changes: 14 additions & 0 deletions src/assets/styles/common/typography/_lists.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
ol,
ul {
counter-reset: list-counter;
padding-left: 0;
}

li {
counter-increment: list-counter;
margin-bottom: 0;
}

li::marker {
color: $grey-600;
}
14 changes: 14 additions & 0 deletions src/assets/styles/common/typography/_paragraphs.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
p {
line-height: (24 / 16);
margin-bottom: 0;
margin-top: 0;
}

p strong {
font-weight: $font-weight-semibold;
}

p small {
font-size: rem(14);
line-height: (20 / 14);
}
27 changes: 27 additions & 0 deletions src/assets/styles/common/typography/_utils.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
.pc-ff--sans {
font-family: $font-family-sans;
}

.pc-ff--serif {
font-family: $font-family-serif;
}

.pc-ff--display {
font-family: $font-family-display;
}

.pc-fw--normal {
font-weight: $font-weight-normal;
}

.pc-fw--semibold {
font-weight: $font-weight-semibold;
}

.pc-fw--bold {
font-weight: $font-weight-bold;
}

.pc-fw--black {
font-weight: $font-weight-black;
}
Loading

0 comments on commit e3cf9fd

Please sign in to comment.