Skip to content

feat(): Prepare headings #68

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Sep 26, 2019
Merged

feat(): Prepare headings #68

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0d7bd56
feat(): Prepare headings
bart-tonik Sep 26, 2019
21a030e
fix(): Remove reduntant code & change headings color
bart-tonik Sep 26, 2019
f335d23
Resolve conflicts
bart-tonik Sep 26, 2019
ec55ac2
fix(): Add specific variable for color
bart-tonik Sep 26, 2019
1c4601c
style(): Order of variables
jedrzejchalubek Sep 26, 2019
1ddc4dd
fix(): Use $heading-color variable
jedrzejchalubek Sep 26, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 45 additions & 30 deletions src/_sass/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,3 @@
/// Base font size set on the root html element.
///
/// @type {Value}
$font-size: 15px !default;

/// Base font weight set on the root html element.
///
/// @type {Value}
$font-weight: 400 !default;

/// Base line height determines the basic unit of vertical rhythm.
///
/// @type {Number}
$font-line-height: 27px !default;

/// Base font size set on the root html element.
///
/// @type {Color}
$font-color: #435A6F !default;

/// Default font family.
///
/// @type {Value|Values}
$font-family-primary: "SGMT Post Grotesk", BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default;

/// Monospace font family.
///
/// @type {Value|Values}
$font-family-monospace: "Droid Sans Mono", "Lucida Console", "Monaco", monospace !default;

/// Collection of colors.
///
/// @type {Map}
Expand Down Expand Up @@ -71,3 +41,48 @@ $color-values: (
black: #000000,
white: #ffffff
) !default;

/// Base font size set on the root html element.
///
/// @type {Value}
$font-size: 15px !default;

/// Base font weight set on the root html element.
///
/// @type {Value}
$font-weight: 400 !default;

/// Base line height determines the basic unit of vertical rhythm.
///
/// @type {Number}
$font-line-height: 27px !default;

/// Base font size set on the root html element.
///
/// @type {Color}
$font-color: #435A6F !default;

/// Default font family.
///
/// @type {Value|Values}
$font-family-primary: "SGMT Post Grotesk", BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default;

/// Monospace font family.
///
/// @type {Value|Values}
$font-family-monospace: "Droid Sans Mono", "Lucida Console", "Monaco", monospace !default;

/// Font weight of headings.
///
/// @type {Number|Keyword}
$heading-font-weight: 500 !default;

/// Font family of headings.
///
/// @type {Keyword|Values}
$heading-font-family: 'SGMT Post Grotesk' !default;

/// Color of headings.
///
/// @type {Color}
$heading-color: map-get($color-values, secondary) !default;
66 changes: 66 additions & 0 deletions src/_sass/elements/_h.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
color: $heading-color;
font-weight: $heading-font-weight;
font-family: $heading-font-family;
}

h1, .h1 {
font-size: 32px;
line-height: 42px;

@include breakpoint(medium up) {
font-size: 42px;
line-height: 48px;
}
}

h2, .h2 {
font-size: 26px;
line-height: 32px;

@include breakpoint(medium up) {
font-size: 42px;
line-height: 32px;
}
}

h3, .h3 {
font-size: 22px;
line-height: 24px;

@include breakpoint(medium up) {
font-size: 24px;
line-height: 32px;
}
}

h4, .h4 {
font-size: 20px;
line-height: 24px;

@include breakpoint(medium up) {
font-size: 20px;
line-height: 24px;
}
}

h5, .h5 {
font-size: 18px;
line-height: 24px;

@include breakpoint(medium up) {
font-size: 18px;
line-height: 24px;
}
}
1 change: 1 addition & 0 deletions src/_sass/segment.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,3 +29,4 @@
// Elements
// =================================================
@import "elements/a";
@import "elements/h";