From b393e12e303bf01d28da692284e4bb5af03fd46b Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Tue, 7 Apr 2020 20:23:57 +0800 Subject: [PATCH] Optimized typography. --- _includes/panel.html | 2 +- _includes/post-sharing.html | 2 +- _layouts/home.html | 2 +- assets/css/_addon/fonts.scss | 310 +---------------------- assets/css/_addon/module.scss | 23 +- assets/css/_colors/dark-typography.scss | 2 +- assets/css/_colors/light-typography.scss | 6 +- assets/css/archives.scss | 10 +- assets/css/main.scss | 26 +- assets/css/post.scss | 14 +- 10 files changed, 51 insertions(+), 346 deletions(-) diff --git a/_includes/panel.html b/_includes/panel.html index 371ab37..a36c7a5 100644 --- a/_includes/panel.html +++ b/_includes/panel.html @@ -6,7 +6,7 @@ MIT License --> -
+
{% assign lastmod_list = "" | split: "" %} diff --git a/_includes/post-sharing.html b/_includes/post-sharing.html index e4ddec2..9819742 100644 --- a/_includes/post-sharing.html +++ b/_includes/post-sharing.html @@ -8,7 +8,7 @@ --> -
+
* */ -/* latin-ext */ -@font-face { - font-family: 'Lato'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2'); - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; -} -/* latin */ -@font-face { - font-family: 'Lato'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXg.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} -/* cyrillic */ -@font-face { - font-family: 'Oswald'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: local('Oswald Regular'), local('Oswald-Regular'), url(https://fonts.gstatic.com/s/oswald/v16/TK3iWkUHHAIjg752HT8Ghe4.woff2) format('woff2'); - unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; -} -/* vietnamese */ -@font-face { - font-family: 'Oswald'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: local('Oswald Regular'), local('Oswald-Regular'), url(https://fonts.gstatic.com/s/oswald/v16/TK3iWkUHHAIjg752Fj8Ghe4.woff2) format('woff2'); - unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; -} -/* latin-ext */ -@font-face { - font-family: 'Oswald'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: local('Oswald Regular'), local('Oswald-Regular'), url(https://fonts.gstatic.com/s/oswald/v16/TK3iWkUHHAIjg752Fz8Ghe4.woff2) format('woff2'); - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; -} -/* latin */ -@font-face { - font-family: 'Oswald'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: local('Oswald Regular'), local('Oswald-Regular'), url(https://fonts.gstatic.com/s/oswald/v16/TK3iWkUHHAIjg752GT8G.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} -/* cyrillic-ext */ -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNa7lqDY.woff2) format('woff2'); - unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; -} -/* cyrillic */ -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qPK7lqDY.woff2) format('woff2'); - unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; -} -/* greek-ext */ -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNK7lqDY.woff2) format('woff2'); - unicode-range: U+1F00-1FFF; -} -/* greek */ -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qO67lqDY.woff2) format('woff2'); - unicode-range: U+0370-03FF; -} -/* vietnamese */ -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qN67lqDY.woff2) format('woff2'); - unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; -} -/* latin-ext */ -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNq7lqDY.woff2) format('woff2'); - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; -} -/* latin */ -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} -/* cyrillic-ext */ -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 600; - font-display: swap; - src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwmhduz8A.woff2) format('woff2'); - unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; -} -/* cyrillic */ -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 600; - font-display: swap; - src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwkxduz8A.woff2) format('woff2'); - unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; -} -/* greek-ext */ -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 600; - font-display: swap; - src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwmxduz8A.woff2) format('woff2'); - unicode-range: U+1F00-1FFF; -} -/* greek */ -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 600; - font-display: swap; - src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwlBduz8A.woff2) format('woff2'); - unicode-range: U+0370-03FF; -} -/* vietnamese */ -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 600; - font-display: swap; - src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwmBduz8A.woff2) format('woff2'); - unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; -} -/* latin-ext */ -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 600; - font-display: swap; - src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwmRduz8A.woff2) format('woff2'); - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; -} -/* latin */ -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 600; - font-display: swap; - src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwlxdu.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} -/* cyrillic-ext */ -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmhduz8A.woff2) format('woff2'); - unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; -} -/* cyrillic */ -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwkxduz8A.woff2) format('woff2'); - unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; -} -/* greek-ext */ -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmxduz8A.woff2) format('woff2'); - unicode-range: U+1F00-1FFF; -} -/* greek */ -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlBduz8A.woff2) format('woff2'); - unicode-range: U+0370-03FF; -} -/* vietnamese */ -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmBduz8A.woff2) format('woff2'); - unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; -} -/* latin-ext */ -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmRduz8A.woff2) format('woff2'); - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; -} -/* latin */ -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} -/* cyrillic-ext */ -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 900; - font-display: swap; - src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3iu4nwmhduz8A.woff2) format('woff2'); - unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; -} -/* cyrillic */ -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 900; - font-display: swap; - src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3iu4nwkxduz8A.woff2) format('woff2'); - unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; -} -/* greek-ext */ -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 900; - font-display: swap; - src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3iu4nwmxduz8A.woff2) format('woff2'); - unicode-range: U+1F00-1FFF; -} -/* greek */ -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 900; - font-display: swap; - src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3iu4nwlBduz8A.woff2) format('woff2'); - unicode-range: U+0370-03FF; -} -/* vietnamese */ -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 900; - font-display: swap; - src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3iu4nwmBduz8A.woff2) format('woff2'); - unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; -} -/* latin-ext */ -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 900; - font-display: swap; - src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3iu4nwmRduz8A.woff2) format('woff2'); - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; -} -/* latin */ -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 900; - font-display: swap; - src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3iu4nwlxdu.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} \ No newline at end of file + +@import url('https://fonts.googleapis.com/css?family=Lato|Roboto+Condensed:400,700|Source+Sans+Pro:400,600,700,900&display=swap'); \ No newline at end of file diff --git a/assets/css/_addon/module.scss b/assets/css/_addon/module.scss index 313a990..132fa17 100644 --- a/assets/css/_addon/module.scss +++ b/assets/css/_addon/module.scss @@ -37,6 +37,10 @@ border-bottom: none; } +%heading { + font-family: 'Lato', 'Microsoft Yahei', sans-serif; +} + %section { #post-wrapper & { line-height: 1.2; @@ -45,19 +49,13 @@ } %anchor { - #post-wrapper &, + .post-content &, #page & { padding-top: 3.5rem; margin-top: -2.5rem; } } -%footer-content { - font-weight: 600; - color: var(---footer-link); -} - - /*---------- scss mixin ---------*/ @mixin no-text-decoration { @@ -91,3 +89,14 @@ @mixin input-placeholder { opacity: 0.6; } + +@mixin semi-bold { + font-weight: 600; +} + +@mixin label($font-size: 1rem, $font-weight: 600, $color: var(--label-color)) { + color: $color; + font-size: $font-size; + font-weight: $font-weight; + font-family: 'Roboto Condensed', 'Microsoft Yahei', sans-serif; +} diff --git a/assets/css/_colors/dark-typography.scss b/assets/css/_colors/dark-typography.scss index ca4cf6d..0c246be 100644 --- a/assets/css/_colors/dark-typography.scss +++ b/assets/css/_colors/dark-typography.scss @@ -34,7 +34,7 @@ --card-bg: rgb(39, 40, 33); --card-header-bg: rgb(51, 50, 50); - --label-relate-post: rgb(164, 175, 181); + --label-color: rgb(108, 117, 125); /* Sidebar */ --nav-cursor-color: rgb(183, 182, 182); diff --git a/assets/css/_colors/light-typography.scss b/assets/css/_colors/light-typography.scss index b0c720c..04542c6 100644 --- a/assets/css/_colors/light-typography.scss +++ b/assets/css/_colors/light-typography.scss @@ -18,7 +18,7 @@ --btn-border-color: #e9ecef; - --text-color: #343a40; + --text-color: #333333; --blockquote-border-color: #eee; @@ -32,7 +32,7 @@ --tb-odd-bg: #fbfcfd; - --tb-border-color: #f2f3f3; + --tb-border-color: #eaeaea; --button-bg: #fff; @@ -89,7 +89,7 @@ --card-box-shadow: rgba(234, 234, 234, 0.7686274509803922); - --label-relate-post: #353a3d; + --label-color: #808080; --relate-post-date: rgba(30, 55, 70, .4); diff --git a/assets/css/archives.scss b/assets/css/archives.scss index afc1078..7496b3a 100644 --- a/assets/css/archives.scss +++ b/assets/css/archives.scss @@ -18,6 +18,10 @@ background-color: var(--timeline-color); } +%date-font { + font-family: 'Roboto Condensed', sans-serif; +} + #archives { letter-spacing: 0.03rem; li { @@ -37,7 +41,7 @@ span.lead { font-size: 1.5rem; - font-family: 'Oswald', sans-serif; + @extend %date-font; position: relative; left: 8px; @@ -75,7 +79,7 @@ &.month { width: 1.4rem; text-align: center; - font-family: 'Oswald', sans-serif; + @extend %date-font; ~a::before { /* A dot for Month and Day */ content: ""; @@ -96,7 +100,7 @@ } &.day { font-size: 85%; - font-family: sans-serif; + font-family: 'Lato', sans-serif; text-align: center; margin-right: -2px; width: 1.2rem; diff --git a/assets/css/main.scss b/assets/css/main.scss index 4aec2be..e71c0c0 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -398,8 +398,8 @@ $tab-count: {{ site.data.tabs | size }}; a { @extend %link-color; @extend %no-bottom-border; + @extend %heading; font-size: 1.4rem; - font-weight: 400; line-height: 2.5rem; &:hover { @extend %link-hover; @@ -513,6 +513,8 @@ footer { } } a { + @include semi-bold; + color: var(---footer-link); &:link { @include no-text-decoration; } @@ -521,14 +523,8 @@ footer { @include no-text-decoration; } } - .footer-left a { - @extend %footer-content; - } .footer-right { text-align: right; - a { - @extend %footer-content; - } } } @@ -540,7 +536,6 @@ footer { margin-right: 1.5rem; margin-top: 3rem; margin-bottom: 4rem; - color: #6c757d; &:only-child { position: -webkit-sticky; /* Safari */ position: sticky; @@ -561,8 +556,7 @@ footer { margin-top: 0; margin-bottom: 0; letter-spacing: -0.02em; - font-size: 1rem; - font-family: 'Oswald', sans-serif; + @include label(inherit, 600); } .post-content { font-size: .9rem; @@ -641,29 +635,35 @@ footer { /*--- Typography ---*/ h1 { + @extend %heading; font-size: 1.8rem; - font-weight: 400; } h2 { + @extend %heading; @extend %section; @extend %anchor; - font-size: 1.35rem; + font-size: 1.4rem; } h3 { + @extend %heading; @extend %section; @extend %anchor; font-size: 1.25rem; } h4 { + @extend %heading; @extend %section; @extend %anchor; font-size: 1.15rem; } h5 { + @extend %heading; + @extend %section; + @extend %anchor; font-size: 1.1rem; } @@ -856,7 +856,7 @@ table { background: var(--tag-bg); border-radius: .3rem; padding: 0 .4rem; - color: #818182; + color: inherit; line-height: 1.3rem; &:not(:last-child) { margin-right: .2rem; diff --git a/assets/css/post.scss b/assets/css/post.scss index 40b216e..53bf54c 100644 --- a/assets/css/post.scss +++ b/assets/css/post.scss @@ -28,7 +28,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}"; } .author { - font-weight: 600; + @include semi-bold; } .post img { @@ -137,9 +137,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}"; top: 6rem; } >h3 { - font-size: 1rem; - font-family: 'Oswald', sans-serif; - color: gray; + @include label(inherit, 600); } } @@ -154,9 +152,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}"; #related-posts { >h3 { - color: gray; - font-size: 1.1rem; - font-family: 'Oswald', sans-serif; + @include label(1.1rem, 600); } .card { border: 1px solid var(--card-border-color); @@ -166,7 +162,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}"; -moz-transition: all .3s ease-in-out; transition: all .3s ease-in-out; h3 { - color: var(--label-relate-post); + color: var(--text-color); } &:hover { -webkit-transform: translate3d(0, -3px, 0); @@ -269,7 +265,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}"; .share-label { - font-family: 'Oswald', sans-serif; + @include label(inherit, 400, inherit); &::after { content: ":"; }