Skip to content

Commit 2bca1dc

Browse files
cotes2020cotes2020
committed
Optimize the typography.
1 parent 8a5c3c3 commit 2bca1dc

7 files changed

Lines changed: 50 additions & 41 deletions

File tree

‎_includes/panel.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
{% endfor %}
2424

2525
{% if lastmod_list.size > 0 %}
26-
<div id="access-lastmod" class="post mb-4">
26+
<div id="access-lastmod" class="post">
2727
<h3 data-toc-skip>
2828
{{- site.data.label.panel.lastmod -}}
2929
</h3>
@@ -57,7 +57,7 @@ <h3 data-toc-skip>
5757

5858
{% if page.layout == 'post' and site.toc and page.toc %}
5959
<div id="toc-wrapper" class="pl-0 pr-4 mb-5">
60-
<h3 data-toc-skip class="pl-3 pt-2">
60+
<h3 data-toc-skip class="pl-3 pt-2 mb-3">
6161
{{- site.data.label.panel.toc -}}
6262
</h3>
6363
<nav id="toc" data-toggle="toc"></nav>

‎assets/css/_addon/module.scss‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,18 +29,27 @@
2929
color: var(--link-color);
3030
}
3131

32+
%link-underline {
33+
border-bottom: 1px solid var(--link-underline-color);
34+
}
35+
3236
%no-bottom-border {
3337
border-bottom: none;
3438
}
3539

3640
%section {
37-
line-height: 1.2;
38-
margin-bottom: 1rem;
41+
#post-wrapper & {
42+
line-height: 1.2;
43+
margin-bottom: 1rem;
44+
}
3945
}
4046

4147
%anchor {
42-
padding-top: 3.5rem;
43-
margin-top: -2.5rem;
48+
#post-wrapper &,
49+
#page & {
50+
padding-top: 3.5rem;
51+
margin-top: -2.5rem;
52+
}
4453
}
4554

4655
%footer-content {

‎assets/css/_colors/dark-typography.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
--text-color: rgb(175, 176, 177);
2222
--text-muted-color: rgb(107, 116, 124);
2323
--link-color: rgb(138, 180, 248);
24-
--link-underline-color: rgb(99, 131, 182);
24+
--link-underline-color: rgb(82, 108, 150);
2525
--main-border-color: rgb(44, 45, 45);
2626
--button-bg: rgb(39, 40, 33);
2727
--blockquote-border-color: rgb(66, 66, 66);

‎assets/css/_colors/light-typography.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626

2727
--link-color: #2a408e;
2828

29-
--link-underline-color: #c2c6cc;
29+
--link-underline-color: #dee2e6;
3030

3131
--text-muted-color: gray;
3232

‎assets/css/category-tag.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
© 2019 Cotes Chung
88
MIT License
99
*/
10+
@import "_addon/module";
1011

1112
#page-category, #page-tag {
1213
ul>li {
@@ -25,6 +26,7 @@
2526
}
2627
>a { /* post's title */
2728
font-size: 1.1rem;
29+
@extend %no-bottom-border;
2830
}
2931
>span:last-child {
3032
white-space: nowrap;

‎assets/css/main.scss‎

Lines changed: 24 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -387,6 +387,7 @@ $tab-count: {{ site.data.tabs | size }};
387387
margin: 0 1rem 1rem 0;
388388
&::before {
389389
content: "#";
390+
color: var(--text-muted-color);
390391
padding-right: .2rem;
391392
}
392393
}
@@ -538,7 +539,7 @@ footer {
538539
transition: top 0.2s ease-in-out;
539540
margin-right: 1.5rem;
540541
margin-top: 3rem;
541-
margin-bottom: 6rem;
542+
margin-bottom: 4rem;
542543
color: #6c757d;
543544
&:only-child {
544545
position: -webkit-sticky; /* Safari */
@@ -550,8 +551,8 @@ footer {
550551
>div {
551552
padding-left: 1rem;
552553
border-left: 1px solid var(--main-border-color);
553-
&:not(:first-child) {
554-
margin-top: 4rem;
554+
&:not(:last-child) {
555+
margin-bottom: 4rem;
555556
}
556557
}
557558
h3 {
@@ -648,7 +649,6 @@ h2 {
648649
@extend %section;
649650
@extend %anchor;
650651
font-size: 1.35rem;
651-
font-weight: 400;
652652
}
653653

654654
h3 {
@@ -744,31 +744,17 @@ a {
744744
@extend %link-hover;
745745
}
746746
}
747-
#page .categories & {
748-
@extend %link-color;
749-
@extend %no-bottom-border;
750-
}
751-
#tags & {
752-
@extend %link-color;
753-
}
754-
#page-category & {
755-
@extend %link-color;
756-
@extend %no-bottom-border;
757-
}
758-
#page-tag & {
759-
@extend %link-color;
760-
@extend %no-bottom-border;
761-
}
747+
.categories &,
748+
#page-category &,
749+
#tags &,
762750
#archives & {
763-
@extend %link-color;
764-
@extend %no-bottom-border;
751+
&:not(:hover) {
752+
@extend %no-bottom-border;
753+
}
765754
}
766755
.license-wrapper .license-text &:hover {
767756
@extend %link-hover;
768757
}
769-
#page .post-content &:hover {
770-
@extend %link-hover;
771-
}
772758

773759
} // a
774760

@@ -834,8 +820,8 @@ table {
834820
font-size: 0.85rem;
835821
word-spacing: 1px;
836822
a {
837-
color: var(--link-color);
838-
border-bottom: 1px dotted var(--link-underline-color);
823+
@extend %link-color;
824+
@extend %link-underline;
839825
&:not(:last-child) {
840826
margin-right: 2px;
841827
}
@@ -847,17 +833,19 @@ table {
847833

848834
.post-content {
849835
line-height: 1.8;
850-
font-size: 1rem;
851836
margin-top: 2rem;
852837
overflow-wrap: break-word;
853838
word-wrap: break-word;
854839
a {
855840
@extend %link-color;
856-
border-bottom: 1px dotted var(--link-underline-color);
841+
@extend %link-underline;
857842
&:hover {
858843
@extend %link-hover;
859844
}
860845
}
846+
p {
847+
font-size: 1.08rem;
848+
}
861849
}
862850

863851
.tag:hover {
@@ -889,6 +877,10 @@ table {
889877
border: 1px solid !important;
890878
padding: 0 3px 1px 3px;
891879
border-radius: 3px;
880+
color: var(--link-color);
881+
&:focus {
882+
box-shadow: none;
883+
}
892884
}
893885

894886
/* --- Effects classes --- */
@@ -984,10 +976,6 @@ table {
984976
@include ml-mr(1.8rem);
985977
}
986978

987-
.post-content {
988-
font-size: 1.08rem;
989-
}
990-
991979
/* table text in small screens */
992980
div>table, p~table {
993981
width: 100%;
@@ -1287,6 +1275,10 @@ table {
12871275
}
12881276
}
12891277

1278+
.post-content p {
1279+
font-size: 1.03rem;
1280+
}
1281+
12901282
footer>div.d-felx {
12911283
width: 85%;
12921284
}

‎assets/css/syntax.scss‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,13 @@ code {
107107
padding: 2px 4px;
108108
margin: 0 .3rem;
109109
border-radius: 4px;
110-
border: 1px solid var(--code-highlighter-rouge); //var(--highlight-pre-bg, #e9ecef);
110+
border: 1px solid var(--code-highlighter-rouge);
111+
}
112+
@at-root a>&.highlighter-rouge {
113+
padding-bottom: 0; // show link's underlinke
114+
}
115+
@at-root a:hover>&.highlighter-rouge {
116+
border-bottom: none;
111117
}
112118
}
113119

0 commit comments

Comments
 (0)