Optimize the typography.
This commit is contained in:
parent
3b4ea05cd3
commit
0425b1058f
7 changed files with 50 additions and 41 deletions
|
@ -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>
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -26,7 +26,7 @@
|
|||
|
||||
--link-color: #2a408e;
|
||||
|
||||
--link-underline-color: #c2c6cc;
|
||||
--link-underline-color: #dee2e6;
|
||||
|
||||
--text-muted-color: gray;
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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%;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue