From a6f9cbf97b0726dbcb435e792c03032676b38fc0 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Tue, 10 Sep 2019 09:39:50 +0300 Subject: [PATCH] CSS tweaks. * switch to `rem`s (mostly for font-size for now) * move a few selectors outside of styles.scss * add `margin-bottom` in header logo so that there's more room for tap targets --- layouts/css/_base.scss | 4 ++-- layouts/css/_utils.scss | 20 ++++++++++++++++ layouts/css/page-modules/_blog-index.scss | 2 +- layouts/css/page-modules/_download.scss | 14 +++++------ layouts/css/page-modules/_header.scss | 6 ++--- layouts/css/page-modules/_home.scss | 6 ++--- .../css/page-modules/_linuxfoundation.scss | 2 +- layouts/css/styles.scss | 24 ++----------------- 8 files changed, 39 insertions(+), 39 deletions(-) diff --git a/layouts/css/_base.scss b/layouts/css/_base.scss index f28a3fa42028..e7b5c80c0645 100644 --- a/layouts/css/_base.scss +++ b/layouts/css/_base.scss @@ -66,7 +66,7 @@ img { code { background-color: $light-gray3; - font-size: 85%; + font-size: 1.07rem; padding: .2em; } @@ -74,7 +74,7 @@ pre { background-color: $node-gray; border-radius: 3px; padding: .75em 1.2em; - font-size: .8em; + font-size: 1rem; white-space: pre; color: $light-gray3; overflow-x: auto; diff --git a/layouts/css/_utils.scss b/layouts/css/_utils.scss index 47bb272352fe..88a880966c0a 100644 --- a/layouts/css/_utils.scss +++ b/layouts/css/_utils.scss @@ -6,6 +6,14 @@ background-color: $node-gray !important; } +.color-lightgray { + color: $light-gray; + + a:hover & { + color: $white; + } +} + .table-no-border-no-padding { border-spacing: 0; @@ -14,6 +22,18 @@ } } +.full-width { + width: 100%; +} + +.small { + font-size: .625rem; +} + +.no-padding { + padding: 0; +} + // borrowed from Bootstrap .sr-only { position: absolute; diff --git a/layouts/css/page-modules/_blog-index.scss b/layouts/css/page-modules/_blog-index.scss index a489a7195ec9..82c760fce8b8 100644 --- a/layouts/css/page-modules/_blog-index.scss +++ b/layouts/css/page-modules/_blog-index.scss @@ -9,7 +9,7 @@ .summary { margin-left: 1em; - font-size: 75%; + font-size: .95rem; } } diff --git a/layouts/css/page-modules/_download.scss b/layouts/css/page-modules/_download.scss index 784d0388113b..523d5de5e0a3 100644 --- a/layouts/css/page-modules/_download.scss +++ b/layouts/css/page-modules/_download.scss @@ -90,12 +90,12 @@ } .title { - font-size: 1.5em; + font-size: 1.875rem; line-height: 1; } .tag { - font-size: .8em; + font-size: 1rem; } } @@ -122,7 +122,7 @@ height: 100%; width: 100%; text-align: center; - font-size: .8em; + font-size: 1rem; } a:hover, @@ -138,7 +138,7 @@ h5.download-table-previous-releases-header { } .download-table { - font-size: small; + font-size: .8125rem; border: 1px solid $light-gray2; border-spacing: 0; @@ -195,7 +195,7 @@ td.download-table-last { } .tag { - font-size: .6em; + font-size: .75rem; } } } @@ -275,11 +275,11 @@ td.download-table-last { .download-hero { .download-version-toggle { li { - font-size: 1em; + font-size: 1.25rem; } .tag { - font-size: .4em; + font-size: .5rem; } } } diff --git a/layouts/css/page-modules/_header.scss b/layouts/css/page-modules/_header.scss index f2c6d0798969..5ff465a837e1 100644 --- a/layouts/css/page-modules/_header.scss +++ b/layouts/css/page-modules/_header.scss @@ -19,7 +19,7 @@ header { a:active { padding: 0 8px; text-transform: uppercase; - font-size: 14px; + font-size: .875rem; color: $light-gray2 !important; } @@ -70,7 +70,7 @@ header { cursor: pointer; display: inline-block; font-family: inherit; - font-size: 14px; + font-size: .875rem; line-height: 1.5; margin: 0 auto; padding: .5em 1em; @@ -174,6 +174,6 @@ header { } img { - margin: .5em auto 0; + margin: .625rem auto; } } diff --git a/layouts/css/page-modules/_home.scss b/layouts/css/page-modules/_home.scss index ef9c98e64804..8fa1e85325e6 100644 --- a/layouts/css/page-modules/_home.scss +++ b/layouts/css/page-modules/_home.scss @@ -1,12 +1,12 @@ .home-version { padding-top: 10px; - font-size: 16px; + font-size: 1rem; color: $gray; } .home-version-banner { color: $node-gray; - font-size: 130%; + font-size: 1.625rem; background-color: $light-green; padding: 5px 15px; border-radius: 2px; @@ -72,7 +72,7 @@ background-color: $active-green; color: $white !important; border-radius: 2px; - font-size: 30px; + font-size: 1.875rem; font-weight: 400; transition: background-color .2s ease-in-out; diff --git a/layouts/css/page-modules/_linuxfoundation.scss b/layouts/css/page-modules/_linuxfoundation.scss index 5ab806fa51a0..95b5b2ddf09e 100644 --- a/layouts/css/page-modules/_linuxfoundation.scss +++ b/layouts/css/page-modules/_linuxfoundation.scss @@ -1,6 +1,6 @@ .linuxfoundation-footer { padding: 1em 20px; - font-size: 14px; + font-size: .875rem; color: $white; background: $node-gray; direction: ltr; diff --git a/layouts/css/styles.scss b/layouts/css/styles.scss index 5eaf97c6ad96..5d582dd3d632 100644 --- a/layouts/css/styles.scss +++ b/layouts/css/styles.scss @@ -29,7 +29,7 @@ article a { .intro { margin-top: 140px; - font-size: 38px; + font-size: 2.375rem; line-height: 1.2; h1 { @@ -87,7 +87,7 @@ article a { .edit-link { float: right; - font-size: .9em; + font-size: 1.125rem; margin: .5em 0; } @@ -104,26 +104,6 @@ article a { } } -.full-width { - width: 100%; -} - -.small { - font-size: 10px; -} - -.color-lightgray { - color: $light-gray; -} - -a:hover .color-lightgray { - color: $white; -} - -.no-padding { - padding: 0; -} - .highlight-box { background-color: $light-gray3; padding: 5px 15px;