enhance post typography

This commit is contained in:
Reorx 2022-04-21 17:32:20 +08:00
parent 368da1791e
commit 9377da773c
9 changed files with 31 additions and 21 deletions

View File

@ -42,7 +42,7 @@
bottom: 60px; bottom: 60px;
right: 30px; right: 30px;
z-index: 99; z-index: 99;
background: var(--tertiary); background: var(--tertiary-bg);
width: 42px; width: 42px;
height: 42px; height: 42px;
padding: 12px; padding: 12px;
@ -63,5 +63,5 @@
/* InstantClick css */ /* InstantClick css */
#instantclick-bar { #instantclick-bar {
background: var(--tertiary); background: var(--tertiary-bg);
} }

View File

@ -1,16 +1,19 @@
.page-header, .page-header,
.post-header { .post-header {
margin: 24px auto var(--content-gap) auto; margin: 32px 0;
} }
.post-title { .post-title {
margin-bottom: 2px;
font-size: 40px; font-size: 40px;
margin: var(--content-gap) 0;
} }
.post-description { .post-description {
margin-top: 10px; margin: var(--content-gap) 0;
margin-bottom: 5px; color: var(--secondary);
opacity: .8;
padding-left: .5em;
border-left: 3px solid var(--tertiary);
} }
.post-meta, .post-meta,
@ -31,6 +34,10 @@
margin: auto 3px; margin: auto 3px;
box-shadow: 0 1px 0 var(--secondary); box-shadow: 0 1px 0 var(--secondary);
} }
.post-meta .delimiter {
margin-inline-start: .5em;
margin-inline-end: .5em;
}
.breadcrumbs a { .breadcrumbs a {
font-size: 16px; font-size: 16px;
@ -263,7 +270,7 @@ h6:hover .anchor {
.post-content hr { .post-content hr {
margin: 30px 0; margin: 30px 0;
height: 2px; height: 2px;
background: var(--tertiary); background: var(--tertiary-bg);
border-top: 0; border-top: 0;
border-bottom: 0; border-bottom: 0;
} }

View File

@ -27,7 +27,7 @@
} }
.button { .button {
background: var(--tertiary); background: var(--tertiary-bg);
border-radius: var(--radius); border-radius: var(--radius);
margin: 8px; margin: 8px;
padding: 6px; padding: 6px;

View File

@ -3,7 +3,7 @@
width: 100%; width: 100%;
color: var(--primary); color: var(--primary);
font-weight: bold; font-weight: bold;
border: 2px solid var(--tertiary); border: 2px solid var(--tertiary-bg);
border-radius: var(--radius); border-radius: var(--radius);
} }
@ -41,5 +41,5 @@
#searchResults .focus { #searchResults .focus {
transform: scale(0.98); transform: scale(0.98);
border: 2px solid var(--tertiary); border: 2px solid var(--tertiary-bg);
} }

View File

@ -7,12 +7,12 @@
.terms-tags a { .terms-tags a {
display: block; display: block;
padding: 3px 10px; padding: 3px 10px;
background: var(--tertiary); background: var(--tertiary-bg);
border-radius: 6px; border-radius: 6px;
transition: transform 0.1s; transition: transform 0.1s;
} }
.terms-tags a:active { .terms-tags a:active {
background: var(--tertiary); background: var(--tertiary-bg);
transform: scale(0.96); transform: scale(0.96);
} }

View File

@ -22,9 +22,10 @@ h6 {
} }
body { body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-family: -apple-system, BlinkMacSystemFont, Helvetica, 'Helvetica Neue', 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif;
/* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
font-size: 18px; font-size: 18px;
line-height: 1.6; line-height: 1.6em;
word-break: break-word; word-break: break-word;
background: var(--theme); background: var(--theme);
} }
@ -119,7 +120,7 @@ img {
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: var(--tertiary); background: var(--tertiary-bg);
border: 5px solid var(--theme); border: 5px solid var(--theme);
border-radius: var(--radius); border-radius: var(--radius);
} }

View File

@ -12,7 +12,8 @@
--entry: rgb(255, 255, 255); --entry: rgb(255, 255, 255);
--primary: rgb(30, 30, 30); --primary: rgb(30, 30, 30);
--secondary: rgb(108, 108, 108); --secondary: rgb(108, 108, 108);
--tertiary: rgb(214, 214, 214); --tertiary: rgb(158, 158, 158);
--tertiary-bg: rgb(214, 214, 214);
--content: rgb(31, 31, 31); --content: rgb(31, 31, 31);
--code-bg: rgb(245, 245, 245); --code-bg: rgb(245, 245, 245);
--border: rgb(238, 238, 238); --border: rgb(238, 238, 238);
@ -29,7 +30,8 @@
--entry: rgb(46, 46, 51); --entry: rgb(46, 46, 51);
--primary: rgb(218, 218, 219); --primary: rgb(218, 218, 219);
--secondary: rgb(155, 156, 157); --secondary: rgb(155, 156, 157);
--tertiary: rgb(65, 66, 68); --tertiary: rgb(123, 124, 124);
--tertiary-bg: rgb(65, 66, 68);
--content: rgb(196, 196, 197); --content: rgb(196, 196, 197);
--code-bg: rgb(55, 56, 62); --code-bg: rgb(55, 56, 62);
--border: rgb(51, 51, 51); --border: rgb(51, 51, 51);

View File

@ -97,7 +97,7 @@
--entry: rgb(46, 46, 51); --entry: rgb(46, 46, 51);
--primary: rgb(218, 218, 219); --primary: rgb(218, 218, 219);
--secondary: rgb(155, 156, 157); --secondary: rgb(155, 156, 157);
--tertiary: rgb(65, 66, 68); --tertiary-bg: rgb(65, 66, 68);
--content: rgb(196, 196, 197); --content: rgb(196, 196, 197);
--code-bg: rgb(55, 56, 62); --code-bg: rgb(55, 56, 62);
--border: rgb(51, 51, 51); --border: rgb(51, 51, 51);

View File

@ -5,11 +5,11 @@
{{- end }} {{- end }}
{{- if (.Param "ShowReadingTime") -}} {{- if (.Param "ShowReadingTime") -}}
{{- $scratch.Add "meta" (slice (i18n "read_time" .ReadingTime | default (printf "%d min" .ReadingTime))) }} {{- $scratch.Add "meta" (slice (i18n "read_time" .ReadingTime | default (printf "<span>%d min</span>" .ReadingTime))) }}
{{- end }} {{- end }}
{{- if (.Param "ShowWordCount") -}} {{- if (.Param "ShowWordCount") -}}
{{- $scratch.Add "meta" (slice (i18n "words" .WordCount | default (printf "%d words" .WordCount))) }} {{- $scratch.Add "meta" (slice (i18n "words" .WordCount | default (printf "<span>%d words</span>" .WordCount))) }}
{{- end }} {{- end }}
{{- with (partial "author.html" .) }} {{- with (partial "author.html" .) }}
@ -17,5 +17,5 @@
{{- end }} {{- end }}
{{- with ($scratch.Get "meta") }} {{- with ($scratch.Get "meta") }}
{{- delimit . "&nbsp;·&nbsp;" -}} {{- delimit . "<span class=\"delimiter\">&nbsp;·&nbsp;</span>" -}}
{{- end -}} {{- end -}}