Optimize the typography.

This commit is contained in:
Cotes Chung 2020-02-29 00:16:47 +08:00
parent 3b4ea05cd3
commit 0425b1058f
7 changed files with 50 additions and 41 deletions

View file

@ -23,7 +23,7 @@
{% endfor %}
{% if lastmod_list.size > 0 %}
<div id="access-lastmod" class="post mb-4">
<div id="access-lastmod" class="post">
<h3 data-toc-skip>
{{- site.data.label.panel.lastmod -}}
</h3>
@ -57,7 +57,7 @@
{% if page.layout == 'post' and site.toc and page.toc %}
<div id="toc-wrapper" class="pl-0 pr-4 mb-5">
<h3 data-toc-skip class="pl-3 pt-2">
<h3 data-toc-skip class="pl-3 pt-2 mb-3">
{{- site.data.label.panel.toc -}}
</h3>
<nav id="toc" data-toggle="toc"></nav>

View file

@ -29,18 +29,27 @@
color: var(--link-color);
}
%link-underline {
border-bottom: 1px solid var(--link-underline-color);
}
%no-bottom-border {
border-bottom: none;
}
%section {
line-height: 1.2;
margin-bottom: 1rem;
#post-wrapper & {
line-height: 1.2;
margin-bottom: 1rem;
}
}
%anchor {
padding-top: 3.5rem;
margin-top: -2.5rem;
#post-wrapper &,
#page & {
padding-top: 3.5rem;
margin-top: -2.5rem;
}
}
%footer-content {

View file

@ -21,7 +21,7 @@
--text-color: rgb(175, 176, 177);
--text-muted-color: rgb(107, 116, 124);
--link-color: rgb(138, 180, 248);
--link-underline-color: rgb(99, 131, 182);
--link-underline-color: rgb(82, 108, 150);
--main-border-color: rgb(44, 45, 45);
--button-bg: rgb(39, 40, 33);
--blockquote-border-color: rgb(66, 66, 66);

View file

@ -26,7 +26,7 @@
--link-color: #2a408e;
--link-underline-color: #c2c6cc;
--link-underline-color: #dee2e6;
--text-muted-color: gray;

View file

@ -7,6 +7,7 @@
© 2019 Cotes Chung
MIT License
*/
@import "_addon/module";
#page-category, #page-tag {
ul>li {
@ -25,6 +26,7 @@
}
>a { /* post's title */
font-size: 1.1rem;
@extend %no-bottom-border;
}
>span:last-child {
white-space: nowrap;

View file

@ -387,6 +387,7 @@ $tab-count: {{ site.data.tabs | size }};
margin: 0 1rem 1rem 0;
&::before {
content: "#";
color: var(--text-muted-color);
padding-right: .2rem;
}
}
@ -538,7 +539,7 @@ footer {
transition: top 0.2s ease-in-out;
margin-right: 1.5rem;
margin-top: 3rem;
margin-bottom: 6rem;
margin-bottom: 4rem;
color: #6c757d;
&:only-child {
position: -webkit-sticky; /* Safari */
@ -550,8 +551,8 @@ footer {
>div {
padding-left: 1rem;
border-left: 1px solid var(--main-border-color);
&:not(:first-child) {
margin-top: 4rem;
&:not(:last-child) {
margin-bottom: 4rem;
}
}
h3 {
@ -648,7 +649,6 @@ h2 {
@extend %section;
@extend %anchor;
font-size: 1.35rem;
font-weight: 400;
}
h3 {
@ -744,31 +744,17 @@ a {
@extend %link-hover;
}
}
#page .categories & {
@extend %link-color;
@extend %no-bottom-border;
}
#tags & {
@extend %link-color;
}
#page-category & {
@extend %link-color;
@extend %no-bottom-border;
}
#page-tag & {
@extend %link-color;
@extend %no-bottom-border;
}
.categories &,
#page-category &,
#tags &,
#archives & {
@extend %link-color;
@extend %no-bottom-border;
&:not(:hover) {
@extend %no-bottom-border;
}
}
.license-wrapper .license-text &:hover {
@extend %link-hover;
}
#page .post-content &:hover {
@extend %link-hover;
}
} // a
@ -834,8 +820,8 @@ table {
font-size: 0.85rem;
word-spacing: 1px;
a {
color: var(--link-color);
border-bottom: 1px dotted var(--link-underline-color);
@extend %link-color;
@extend %link-underline;
&:not(:last-child) {
margin-right: 2px;
}
@ -847,17 +833,19 @@ table {
.post-content {
line-height: 1.8;
font-size: 1rem;
margin-top: 2rem;
overflow-wrap: break-word;
word-wrap: break-word;
a {
@extend %link-color;
border-bottom: 1px dotted var(--link-underline-color);
@extend %link-underline;
&:hover {
@extend %link-hover;
}
}
p {
font-size: 1.08rem;
}
}
.tag:hover {
@ -889,6 +877,10 @@ table {
border: 1px solid !important;
padding: 0 3px 1px 3px;
border-radius: 3px;
color: var(--link-color);
&:focus {
box-shadow: none;
}
}
/* --- Effects classes --- */
@ -984,10 +976,6 @@ table {
@include ml-mr(1.8rem);
}
.post-content {
font-size: 1.08rem;
}
/* table text in small screens */
div>table, p~table {
width: 100%;
@ -1287,6 +1275,10 @@ table {
}
}
.post-content p {
font-size: 1.03rem;
}
footer>div.d-felx {
width: 85%;
}

View file

@ -107,7 +107,13 @@ code {
padding: 2px 4px;
margin: 0 .3rem;
border-radius: 4px;
border: 1px solid var(--code-highlighter-rouge); //var(--highlight-pre-bg, #e9ecef);
border: 1px solid var(--code-highlighter-rouge);
}
@at-root a>&.highlighter-rouge {
padding-bottom: 0; // show link's underlinke
}
@at-root a:hover>&.highlighter-rouge {
border-bottom: none;
}
}