+
{title}
{
authors?.map((author) => (
diff --git a/src/styles/global.css b/src/styles/global.css
index d8c7a95..ede9253 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -7,9 +7,11 @@
--color-text-link: 255 105 0;
/* ... */
}
+
.prose code {
@apply overflow-auto;
}
+
h1,
h2,
h3,
@@ -18,35 +20,45 @@
h6 {
@apply text-zinc-800 dark:text-zinc-200 !important;
}
+
p,
li,
strong {
@apply text-zinc-700 dark:text-zinc-200 !important;
}
+
i {
@apply text-zinc-700 dark:text-zinc-200 !important;
}
+
table * {
@apply text-zinc-800 dark:text-zinc-200;
}
+
kbd {
@apply bg-white text-zinc-700;
}
+
mark {
@apply bg-yellow-300;
}
+
a {
@apply hover:text-orange-600;
}
+
img {
@apply rounded-md w-full md:w-full lg:w-3/4;
}
+
article img {
@apply hover:w-full transition-all;
}
+
th {
@apply bg-zinc-100 bg-zinc-200 dark:bg-zinc-300;
}
+
hr {
@apply h-0.5 border-solid bg-zinc-500 dark:bg-zinc-400;
}
@@ -61,39 +73,46 @@
height: 100%;
}
-input#nav-toggle:checked ~ label#show-button {
+input#nav-toggle:checked~label#show-button {
@apply hidden;
}
-input#nav-toggle:checked ~ label#hide-button {
+input#nav-toggle:checked~label#hide-button {
@apply flex md:hidden;
}
-input#nav-toggle:checked ~ #nav-menu {
+input#nav-toggle:checked~#nav-menu {
@apply block md:flex;
}
.sun {
@apply stroke-zinc-500 transition-all;
}
+
.moon {
@apply stroke-transparent transition-all;
}
+
.dark .sun {
@apply stroke-transparent;
}
+
.dark .moon {
@apply stroke-zinc-400;
}
+
#themeToggle:hover .sun {
@apply stroke-zinc-800;
}
+
#themeToggle:hover .moon {
@apply stroke-transparent;
}
+
.dark #themeToggle:hover .sun {
@apply stroke-transparent;
}
+
.dark #themeToggle:hover .moon {
@apply stroke-zinc-200;
}
@@ -101,3 +120,55 @@ input#nav-toggle:checked ~ #nav-menu {
div.author-info__container:first-child {
margin-left: 0;
}
+
+nav.toc {
+ position: fixed;
+ /* (page width - max content width) / 2 = margin space */
+ /* margin space + max content width = right edge of content */
+ left: calc((100% - 960px) / 2 + 960px + 1rem);
+ top: 100px;
+ border-left: 1px solid rgba(229, 231, 235);
+ padding-top: 0.8rem;
+ padding-bottom: 0.8rem;
+ padding-right: 5px;
+ overflow-y: auto;
+}
+
+nav.toc ol {
+ list-style: none;
+ padding-bottom: 0;
+ margin: 0;
+ font-size: 0.8rem;
+}
+
+nav.toc ol li {
+ margin: 0;
+ padding: 0;
+}
+
+nav.toc>ol>li {
+ margin-bottom: 0.3rem;
+}
+
+nav.toc ol li a {
+ display: block;
+ text-decoration: none;
+ color: var(--color-text-link);
+ font-weight: 300;
+}
+
+@media (max-width: 1280px) {
+ /* Show toc (at the top) */
+ /* nav.toc {
+ position: static;
+ font-size: 1rem;
+ }
+ nav.toc ol {
+ font-size: 1rem;
+ } */
+
+ /* Hide toc */
+ nav.toc {
+ display: none;
+ }
+}
\ No newline at end of file