Commit 51d5dc14 authored by JoJo's avatar JoJo 💬

Update CSS. Improve sizes & adjust for tags

parent f8e3c5bd
:root {
/* Variable definitions */
--toc-width: 320px;
--common-padding: 18px;
--main-width: 720px;
}
body {
display: flex;
min-height: 100vh;
......@@ -30,10 +37,10 @@ header h1.title {
}
#table-of-contents {
font-size: 0.85em;
min-width: 200px;
width: 200px;
padding: 20px;
font-size: 0.83em;
min-width: var(--toc-width);
width: var(--toc-width);
padding: var(--common-padding);
}
#table-of-contents > h2, main > div:first-child > h2 {
......@@ -41,14 +48,26 @@ header h1.title {
}
#table-of-contents ul {
padding-left: 24px;
padding-left: 16px;
}
.tag {
display: inline-block;
}
#table-of-contents li .todo, #table-of-contents li .tag {
font-size: 0.8em;
}
main {
max-width: 700px;
min-width: 380px;
width: calc(100% - 240px - 2*20px);
padding: 20px;
max-width: var(--main-width);
/*min-width: 360px;*/
width: calc(100% - var(--toc-width) - 4*var(--common-padding));
padding: var(--common-padding);
}
main h2 .todo, main h2 .tag {
font-size: 0.6em;
}
#sitenav {
......@@ -61,8 +80,8 @@ h2 {
}
#right-padding {
max-width: 240px;
width: calc(100% - 240px - 700px - 2*20px);
max-width: calc(var(--toc-width) + 2*var(--common-padding));
width: calc(100% - var(--toc-width) - var(--main-width) - 4*var(--common-padding));
}
img {
......@@ -79,7 +98,7 @@ figcaption {
}
p {
padding: 0px 20px;
padding: 0px var(--common-padding);
text-align: justify;
}
......@@ -128,14 +147,13 @@ footer p {
text-align: left;
}
@media screen and (max-width: 700px) {
@media screen and (max-width: 960px) {
body {
font-size: 13px;
font-size: 14px;
width: 100%;
}
#table-of-contents {
/* font-size: 0.85em; */
padding: 12px;
min-width: 0;
width: 100%;
......@@ -143,6 +161,7 @@ footer p {
main {
padding: 12px;
max-width: 100%;
min-width: 0;
width: 100%;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment