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