Skip to content
This repository has been archived by the owner on Jan 15, 2019. It is now read-only.

Fix font size variables to resolve to exact pixels #318

Closed
wants to merge 1 commit into from
Closed

Fix font size variables to resolve to exact pixels #318

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion sass/blocks/_blocks.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,7 +199,7 @@
li {
color: $color__text-light;
font-family: $font__heading;
font-size: calc(#{$font__size_base} * #{$font__size-lg / 1em} );
font-size: calc(#{$font__size_base} * #{$font__size-lg} );
font-weight: bold;
line-height: $font__line-height-heading;

Expand Down
2 changes: 1 addition & 1 deletion sass/site/secondary/_widgets.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
li {
color: $color__text-light;
font-family: $font__heading;
font-size: calc(#{$font__size_base} * #{$font__size-lg / 1em} );
font-size: calc(#{$font__size_base} * #{$font__size-lg} );
font-weight: bold;
line-height: $font__line-height-heading;

Expand Down
4 changes: 2 additions & 2 deletions sass/typography/_typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@

html {
font-size: $font__size_base;
font-size: 100%;
}

body {
Expand All @@ -9,7 +9,7 @@ body {
color: $color__text-main;
font-family: $font__body;
font-weight: 400;
font-size: 1em;
font-size: $font__size_base;
line-height: $font__line-height-body;
margin: 0;
text-rendering: optimizeLegibility;
Expand Down
19 changes: 9 additions & 10 deletions sass/variables-site/_fonts.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,16 @@ $font__heading: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen
$font__code: Menlo, monaco, Consolas, Lucida Console, monospace;
$font__pre: "Courier 10 Pitch", Courier, monospace;

$font__size_base: 22px;
$font__size-ratio: 1.125;
$font__size_base: 1.375rem;

$font__size-xxs: 1em / (1.5 * $font__size-ratio);
$font__size-xs: 1em / (1.25 * $font__size-ratio);
$font__size-sm: 1em / (1 * $font__size-ratio);
$font__size-md: 1em * (1 * $font__size-ratio);
$font__size-lg: 1em * (1.5 * $font__size-ratio);
$font__size-xl: 1em * (2 * $font__size-ratio);
$font__size-xxl: 1em * (2.5 * $font__size-ratio);
$font__size-xxxl: 1em * (3 * $font__size-ratio);
$font__size-xxs: 0.875rem;
$font__size-xs: 1rem;
$font__size-sm: 1.25rem;
$font__size-md: 1.375rem;
$font__size-lg: 1.75rem;
$font__size-xl: 3rem;
$font__size-xxl: 4rem;
$font__size-xxxl: 4.5rem;

$font__line-height-body: 1.8;
$font__line-height-pre: 1.6;
Expand Down
6 changes: 3 additions & 3 deletions style-editor-frame.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ body.block-editor-page .block-editor .editor-post-title__block:before {
}

body.block-editor-page .block-editor .editor-post-title__block:before {
width: 2.8125em;
width: 4rem;
margin-top: 0;
margin-bottom: 0;
margin-left: 1em;
Expand All @@ -28,13 +28,13 @@ body.block-editor-page .block-editor .editor-post-title__block:before {

body.block-editor-page .block-editor .editor-post-title__block .editor-post-title__input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 2.8125em;
font-size: 4rem;
}

/** === Default Appender === */
body.block-editor-page .block-editor .editor-default-block-appender__content {
font-family: "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
font-size: 22px;
font-size: 1.375rem;
}

/** === Off-Center Content === */
Expand Down
58 changes: 29 additions & 29 deletions style-editor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,13 +28,13 @@ when Gutenberg supports styling those variations more intuitively.

/** === Base Typography === */
body {
font-size: 22px;
font-size: 1.375rem;
font-family: "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
color: #111;
}

p {
font-size: 22px;
font-size: 1.375rem;
}

h1,
Expand All @@ -47,7 +47,7 @@ h6 {
}

h1 {
font-size: 2.25em;
font-size: 3rem;
}

h1:before {
Expand All @@ -61,12 +61,12 @@ h1:before {

@media only screen and (min-width: 768px) {
h1 {
font-size: 2.8125em;
font-size: 4rem;
}
}

h2 {
font-size: 1.6875em;
font-size: 1.75rem;
}

h2:before {
Expand All @@ -80,24 +80,24 @@ h2:before {

@media only screen and (min-width: 768px) {
h2 {
font-size: 2.25em;
font-size: 3rem;
}
}

h3 {
font-size: 1.6875em;
font-size: 1.75rem;
}

h4 {
font-size: 1.125em;
font-size: 1.375rem;
}

h5 {
font-size: 0.88889em;
font-size: 1.25rem;
}

h6 {
font-size: 0.71111em;
font-size: 1rem;
}

a {
Expand Down Expand Up @@ -131,15 +131,15 @@ a:focus {
figcaption,
.gallery-caption {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 0.71111em;
font-size: 1rem;
line-height: 1.6;
color: #767676;
}

/** === Paragraph === */
.wp-block-paragraph.has-drop-cap:not(:focus)::first-letter {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 3.375em;
font-size: 4.5rem;
line-height: 1;
font-weight: bold;
margin: 0 0.25em 0 0;
Expand All @@ -149,7 +149,7 @@ figcaption,
.wp-block-cover h2,
.wp-block-cover .wp-block-cover-text {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 2.25em;
font-size: 3rem;
font-weight: bold;
line-height: 1.4;
}
Expand Down Expand Up @@ -195,15 +195,15 @@ body[data-type="core/cover"][data-align="right"] .wp-block-cover-text {
.wp-block-gallery .blocks-gallery-image figcaption,
.wp-block-gallery .blocks-gallery-item figcaption,
.wp-block-gallery .gallery-item .gallery-caption {
font-size: 0.71111em;
font-size: 1rem;
line-height: 1.6;
}

/** === Button === */
.wp-block-button .wp-block-button__link {
line-height: 1.8;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 0.88889em;
font-size: 1.25rem;
font-weight: bold;
}

Expand Down Expand Up @@ -234,13 +234,13 @@ body[data-type="core/cover"][data-align="right"] .wp-block-cover-text {
}

.wp-block-quote.is-large, .wp-block-quote.is-style-large {
margin-top: 2.8125em;
margin-bottom: 2.8125em;
margin-top: 4rem;
margin-bottom: 4rem;
}

.wp-block-quote.is-large p,
.wp-block-quote.is-style-large p {
font-size: 1.6875em;
font-size: 1.75rem;
line-height: 1.3;
margin-bottom: 0.5em;
margin-top: 0.5em;
Expand All @@ -250,7 +250,7 @@ body[data-type="core/cover"][data-align="right"] .wp-block-cover-text {
.wp-block-quote footer,
.wp-block-quote .wp-block-quote__citation {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 0.71111em;
font-size: 1rem;
line-height: 1.6;
color: #767676;
}
Expand Down Expand Up @@ -301,7 +301,7 @@ body[data-type="core/pullquote"][data-align="left"] p,
body[data-type="core/pullquote"][data-align="right"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
body[data-type="core/pullquote"][data-align="right"] blockquote > .editor-rich-text p,
body[data-type="core/pullquote"][data-align="right"] p {
font-size: 1.6875em;
font-size: 1.75rem;
font-style: italic;
line-height: 1.3;
margin-bottom: 0.5em;
Expand All @@ -318,15 +318,15 @@ body[data-type="core/pullquote"][data-align="right"] p {
body[data-type="core/pullquote"][data-align="right"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
body[data-type="core/pullquote"][data-align="right"] blockquote > .editor-rich-text p,
body[data-type="core/pullquote"][data-align="right"] p {
font-size: 2.25em;
font-size: 3rem;
}
}

body[data-type="core/pullquote"] .wp-block-pullquote__citation,
body[data-type="core/pullquote"][data-align="left"] .wp-block-pullquote__citation,
body[data-type="core/pullquote"][data-align="right"] .wp-block-pullquote__citation {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 0.71111em;
font-size: 1rem;
line-height: 1.6;
text-transform: none;
}
Expand Down Expand Up @@ -370,7 +370,7 @@ body[data-type="core/pullquote"][data-align="right"] .wp-block-pullquote__citati

.wp-block-file .wp-block-file__button {
line-height: 1.8;
font-size: 0.88889em;
font-size: 1.25rem;
font-weight: bold;
background-color: #0073aa;
border-radius: 5px;
Expand Down Expand Up @@ -398,14 +398,14 @@ body[data-type="core/pullquote"][data-align="right"] .wp-block-pullquote__citati
}

.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
width: 2.25em;
width: 3rem;
margin-left: 0;
}

.wp-block-separator.is-style-dots:before {
color: #767676;
font-size: 1.6875em;
letter-spacing: 0.88889em;
font-size: 1.75rem;
letter-spacing: 1.25rem;
}

/** === Latest Posts, Archives, Categories === */
Expand All @@ -427,7 +427,7 @@ ul.wp-block-archives li,
.wp-block-categories li,
.wp-block-latest-posts li {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 1.6875em;
font-size: 1.75rem;
font-weight: bold;
line-height: 1.2;
}
Expand Down Expand Up @@ -486,7 +486,7 @@ ul.wp-block-archives li ul,
}

.wp-block-latest-comments .wp-block-latest-comments__comment-date {
font-size: 0.71111em;
font-size: 1rem;
}

/** === Classic Editor === */
Expand All @@ -508,7 +508,7 @@ ul.wp-block-archives li ul,

.wp-block-freeform blockquote cite {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 0.71111em;
font-size: 1rem;
font-style: normal;
line-height: 1.6;
color: #767676;
Expand Down
Loading