refactor: review the table of content appearance
parent
e517b2c03b
commit
866130c60e
|
@ -15,6 +15,7 @@
|
||||||
--color-green-2: #57c183;
|
--color-green-2: #57c183;
|
||||||
|
|
||||||
--background-color: #fff;
|
--background-color: #fff;
|
||||||
|
--background-color-toc: #F2F7F6;
|
||||||
|
|
||||||
--text-color: rgba(0,0,10,.8);
|
--text-color: rgba(0,0,10,.8);
|
||||||
--text-color-sub: rgba(0,0,10,.55);;
|
--text-color-sub: rgba(0,0,10,.55);;
|
||||||
|
@ -22,6 +23,7 @@
|
||||||
--text-color-tertiary: var(--color-green-2);
|
--text-color-tertiary: var(--color-green-2);
|
||||||
--text-color-link: var(--color-green-1);
|
--text-color-link: var(--color-green-1);
|
||||||
--text-color-link-active: var(--color-green-1);
|
--text-color-link-active: var(--color-green-1);
|
||||||
|
--text-color-toc: #1C4852;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*@media (prefers-color-scheme: dark) {*/
|
/*@media (prefers-color-scheme: dark) {*/
|
||||||
|
@ -80,9 +82,9 @@ main {
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-of-contents {
|
.table-of-contents {
|
||||||
background: var(--color-gray-20);
|
background: var(--background-color-toc);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
padding: 15px 5px;
|
padding: 0.7rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-of-contents ul {
|
.table-of-contents ul {
|
||||||
|
@ -90,6 +92,10 @@ main {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
|
li ul {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
@ -97,9 +103,8 @@ main {
|
||||||
|
|
||||||
a {
|
a {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 0.8125rem;
|
font-size: 0.875rem;
|
||||||
margin: 5px;
|
color: var(--text-color-toc);
|
||||||
color: var(--text-color);
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
&:hover {
|
&:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
|
@ -109,6 +114,7 @@ main {
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-of-contents > ul ul li {
|
.table-of-contents > ul ul li {
|
||||||
|
margin-left: 0.7rem;
|
||||||
a {
|
a {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
@ -251,7 +257,7 @@ figure img {
|
||||||
|
|
||||||
figure figcaption {
|
figure figcaption {
|
||||||
margin-top: 6px;
|
margin-top: 6px;
|
||||||
font-size: 0.8125rem; /* 13px /16 */
|
font-size: 0.875rem;
|
||||||
color: var(--text-color-sub);
|
color: var(--text-color-sub);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -326,7 +332,7 @@ figure figcaption {
|
||||||
}
|
}
|
||||||
.post-tag a {
|
.post-tag a {
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
font-size: 0.8125rem; /* 13px /16 */
|
font-size: 0.875rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
@ -336,7 +342,7 @@ figure figcaption {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: .5em;
|
gap: .5em;
|
||||||
font-size: 0.8125rem; /* 13px /16 */
|
font-size: 0.875rem;
|
||||||
color: var(--text-color-sub);
|
color: var(--text-color-sub);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -350,7 +356,7 @@ h1 + .post-metadata {
|
||||||
|
|
||||||
.post-metadata .post-metadata__header {
|
.post-metadata .post-metadata__header {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
font-size: 0.8125rem; /* 13px /16 */
|
font-size: 0.875rem;
|
||||||
color: var(--text-color-sub);
|
color: var(--text-color-sub);
|
||||||
}
|
}
|
||||||
.post-nav ul {
|
.post-nav ul {
|
||||||
|
|
Loading…
Reference in New Issue