refactor: review the table of content appearance

pull/6/head
Nicolas Doby 2022-12-06 18:44:24 +01:00
parent e517b2c03b
commit 866130c60e
1 changed files with 15 additions and 9 deletions

View File

@ -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 {