From 8de3c5508c5f369dee7cf63c753303b4f41597af Mon Sep 17 00:00:00 2001 From: ray Date: Sun, 2 Feb 2020 17:13:35 +0000 Subject: [PATCH] update theme fonts --- assets/scss/_base.scss | 69 +++++++++++++++++++----------------- assets/scss/_content.scss | 48 ++++++++++++------------- assets/scss/_navigation.scss | 41 +++++++++++---------- assets/scss/_pagination.scss | 6 ++-- assets/scss/_variables.scss | 16 ++++++--- layouts/_default/baseof.html | 2 +- 6 files changed, 98 insertions(+), 84 deletions(-) diff --git a/assets/scss/_base.scss b/assets/scss/_base.scss index 29e47cd..60bdf47 100644 --- a/assets/scss/_base.scss +++ b/assets/scss/_base.scss @@ -1,29 +1,30 @@ *, *:after, *:before { - box-sizing: inherit; + box-sizing: inherit; } html { - box-sizing: border-box; - font-size: 62.5%; + box-sizing: border-box; + font-size: 62.5%; } body { color: $fg-color; background-color: $bg-color; - font-family: $text-font-family; - font-size: 1.6em; - font-weight: 300; + font-family: $text-font-family; + font-size: 1.6em; + font-weight: $text-font-weight; line-height: 1.8em; - @media only screen and (max-width : 768px) { + @media only screen and (max-width: 768px) { font-size: 1.6em; line-height: 1.6em; } } a { - font-weight: 300; + font-family: $text-font-family; + font-weight: $text-font-weight; color: $link-color; text-decoration: none; &:focus, @@ -33,7 +34,7 @@ a { } p { - margin: 2.0rem 0 2.0rem 0; + margin: 2rem 0 2rem 0; } h1, @@ -43,7 +44,7 @@ h4, h5, h6 { font-family: $heading-font-family; - font-weight: 700; + font-weight: $heading-font-weight; color: $alt-fg-color; margin: 6.4rem 0 3.2rem 0; } @@ -51,23 +52,23 @@ h6 { h1 { font-size: 3.2rem; line-height: 3.6rem; - @media only screen and (max-width : 768px) { - font-size: 3.0rem; + @media only screen and (max-width: 768px) { + font-size: 3rem; line-height: 3.4rem; } } h2 { font-size: 2.8rem; line-height: 3.2rem; - @media only screen and (max-width : 768px) { + @media only screen and (max-width: 768px) { font-size: 2.6rem; - line-height: 3.0rem; + line-height: 3rem; } } h3 { font-size: 2.4rem; line-height: 2.8rem; - @media only screen and (max-width : 768px) { + @media only screen and (max-width: 768px) { font-size: 2.2rem; line-height: 2.6rem; } @@ -75,15 +76,15 @@ h3 { h4 { font-size: 2.2rem; line-height: 2.6rem; - @media only screen and (max-width : 768px) { - font-size: 2.0rem; + @media only screen and (max-width: 768px) { + font-size: 2rem; line-height: 2.4rem; } } h5 { - font-size: 2.0rem; + font-size: 2rem; line-height: 2.4rem; - @media only screen and (max-width : 768px) { + @media only screen and (max-width: 768px) { font-size: 1.8rem; line-height: 2.2rem; } @@ -91,14 +92,16 @@ h5 { h6 { font-size: 1.8rem; line-height: 2.2rem; - @media only screen and (max-width : 768px) { + @media only screen and (max-width: 768px) { font-size: 1.6rem; - line-height: 2.0rem; + line-height: 2rem; } } -b, strong { - font-weight: 700; +b, +strong { + font-family: $text-font-family; + font-weight: $text-font-weight--bold; } .highlight > div, @@ -112,7 +115,7 @@ pre { display: block; font-family: $code-font-family; font-size: 1.6rem; - font-weight: 400; + font-weight: $code-font-weight; line-height: 2.6rem; overflow-x: auto; margin: 0; @@ -126,26 +129,28 @@ pre { code { font-family: $code-font-family; font-size: 1.6rem; - font-weight: 400; + font-weight: $code-font-weight; background-color: $alt-bg-color; color: $fg-color; } blockquote { border-left: 2px solid $alt-bg-color; - padding-left: 2.0rem; + padding-left: 2rem; line-height: 2.2rem; - font-weight: 400; + font-weight: $text-font-weight; font-style: italic; } -th, td { +th, +td { padding: 1.6rem; } table { border-collapse: collapse; } -table td, table th { +table td, +table th { border: 2px solid $alt-fg-color; } table tr:first-child th { @@ -177,10 +182,10 @@ img { .container { margin: 0 auto; - max-width: 90.0rem; + max-width: 90rem; width: 100%; - padding-left: 2.0rem; - padding-right: 2.0rem; + padding-left: 2rem; + padding-right: 2rem; } .fab { diff --git a/assets/scss/_content.scss b/assets/scss/_content.scss index 33193ed..1a09e1e 100644 --- a/assets/scss/_content.scss +++ b/assets/scss/_content.scss @@ -11,14 +11,14 @@ font-size: 4.2rem; line-height: 4.6rem; margin: 0; - @media only screen and (max-width : 768px) { - font-size: 4.0rem; + @media only screen and (max-width: 768px) { + font-size: 4rem; line-height: 4.4rem; } } } footer { - margin-top: 4.0rem; + margin-top: 4rem; .see-also { margin: 3.2rem 0; h3 { @@ -29,7 +29,7 @@ } .post { .post-title { - margin-bottom: .75em; + margin-bottom: 0.75em; } .post-meta { i { @@ -58,11 +58,11 @@ } } -.avatar img{ +.avatar img { width: 20rem; height: auto; border-radius: 50%; - @media only screen and (max-width : 768px) { + @media only screen and (max-width: 768px) { width: 10rem; } } @@ -74,15 +74,15 @@ padding: 0; li { font-size: 1.8rem; - @media only screen and (max-width : 768px) { + @media only screen and (max-width: 768px) { margin: 1.6rem 0 1.6rem 0; } .date { display: inline-block; - width: 20.0rem; + width: 20rem; text-align: right; - margin-right: 3.0rem; - @media only screen and (max-width : 768px) { + margin-right: 3rem; + @media only screen and (max-width: 768px) { display: block; text-align: left; } @@ -91,10 +91,10 @@ font-size: 1.8rem; color: $fg-color; font-family: $heading-font-family; - font-weight: 700; + font-weight: $heading-font-weight--bold; &:hover, &:focus { - color: $link-color + color: $link-color; } } } @@ -108,20 +108,20 @@ .about { text-align: center; h1 { - margin-top: 2.0rem; + margin-top: 2rem; margin-bottom: 0.5rem; } h2 { - margin-top: 1.0rem; + margin-top: 1rem; margin-bottom: 0.5rem; font-size: 2.4rem; - @media only screen and (max-width : 768px) { - font-size: 2.0rem; + @media only screen and (max-width: 768px) { + font-size: 2rem; } } ul { list-style: none; - margin: 3.0rem 0 1.0rem 0; + margin: 3rem 0 1rem 0; padding: 0; li { display: inline-block; @@ -129,14 +129,14 @@ a { color: $fg-color; text-transform: uppercase; - margin-left: 1.0rem; - margin-right: 1.0rem; + margin-left: 1rem; + margin-right: 1rem; font-size: 1.6rem; &:hover, &:focus { color: $link-color; } - @media only screen and (max-width : 768px) { + @media only screen and (max-width: 768px) { font-size: 1.4rem; } i { @@ -150,18 +150,18 @@ .error { text-align: center; h1 { - margin-top: 2.0rem; + margin-top: 2rem; margin-bottom: 0.5rem; font-size: 4.6rem; - @media only screen and (max-width : 768px) { + @media only screen and (max-width: 768px) { font-size: 3.2rem; } } h2 { - margin-top: 2.0rem; + margin-top: 2rem; margin-bottom: 3.2rem; font-size: 3.2rem; - @media only screen and (max-width : 768px) { + @media only screen and (max-width: 768px) { font-size: 2.8rem; } } diff --git a/assets/scss/_navigation.scss b/assets/scss/_navigation.scss index 31cf0f5..3cc9b3c 100644 --- a/assets/scss/_navigation.scss +++ b/assets/scss/_navigation.scss @@ -1,18 +1,19 @@ .navigation { - height: 6.0rem; + height: 6rem; width: 100%; - a, span { + a, + span { display: inline; font-size: 1.6rem; font-family: $heading-font-family; - font-weight: 700; - line-height: 6.0rem; + font-weight: $heading-font-weight--bold; + line-height: 6rem; color: $fg-color; } a { &:hover, &:focus { - color: $link-color + color: $link-color; } } .navigation-title { @@ -24,9 +25,9 @@ list-style: none; margin-bottom: 0; margin-top: 0; - @media only screen and (max-width : 768px) { + @media only screen and (max-width: 768px) { position: absolute; - top: 6.0rem; + top: 6rem; right: 0; z-index: 5; visibility: hidden; @@ -43,22 +44,24 @@ float: left; margin: 0; position: relative; - @media only screen and (max-width : 768px) { + @media only screen and (max-width: 768px) { float: none !important; text-align: center; - a, span { - line-height: 5.0rem; + a, + span { + line-height: 5rem; } } - a, span { - margin-left: 1.0rem; - margin-right: 1.0rem; + a, + span { + margin-left: 1rem; + margin-right: 1rem; } } .menu-separator { - @media only screen and (max-width : 768px) { + @media only screen and (max-width: 768px) { border-top: 2px solid $fg-color; - margin: 0 8.0rem; + margin: 0 8rem; span { display: none; } @@ -67,7 +70,7 @@ } #menu-toggle { display: none; - @media only screen and (max-width : 768px) { + @media only screen and (max-width: 768px) { &:checked + label { color: $alt-bg-color; } @@ -80,16 +83,16 @@ } .menu-button { display: none; - @media only screen and (max-width : 768px) { + @media only screen and (max-width: 768px) { display: block; font-size: 2.4rem; font-weight: 400; - line-height: 6.0rem; + line-height: 6rem; color: $fg-color; cursor: pointer; &:hover, &:focus { - color: $link-color + color: $link-color; } } } diff --git a/assets/scss/_pagination.scss b/assets/scss/_pagination.scss index 4cfc67e..3d37cda 100644 --- a/assets/scss/_pagination.scss +++ b/assets/scss/_pagination.scss @@ -1,18 +1,18 @@ .pagination { - margin-top: 6.0rem; + margin-top: 6rem; text-align: center; font-family: $heading-font-family; li { display: inline; text-align: center; - font-weight: 700; + font-weight: $heading-font-weight--bold; span { margin: 0; text-align: center; width: 3.2rem; } a { - font-weight: 300; + font-weight: $heading-font-weight; span { margin: 0; text-align: center; diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss index fa50e69..e0d6ea1 100644 --- a/assets/scss/_variables.scss +++ b/assets/scss/_variables.scss @@ -1,12 +1,18 @@ // Fonts -$text-font-family: Merriweather, Georgia, serif; -$heading-font-family: Lato, Helvetica, sans-serif; -$code-font-family: 'Source Code Pro', 'Lucida Console', monospace; +$text-font-family: Roboto, sans-serif; +$heading-font-family: "Hind Guntur", sans-serif; +$code-font-family: "Source Code Pro", "Lucida Console", monospace; + +$text-font-weight: 400; +$text-font-weight--bold: 600; +$heading-font-weight: 400; +$heading-font-weight--bold: 600; +$code-font-weight: 400; // Colors -$bg-color: #FAFAFA !default; +$bg-color: #fafafa !default; $fg-color: #212121 !default; -$alt-bg-color: #E0E0E0 !default; +$alt-bg-color: #e0e0e0 !default; $alt-fg-color: #000 !default; $link-color: #1565c0 !default; diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 3824e2e..b746991 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -21,7 +21,7 @@ {{ end }} - +