add toc style

This commit is contained in:
Philipp Kühn 2020-10-12 17:03:46 +02:00
parent 4cd4c7527b
commit 801912be5d
7 changed files with 50 additions and 37 deletions

View File

@ -60,7 +60,6 @@
border-bottom-right-radius: inherit; border-bottom-right-radius: inherit;
border-top-width: 0; border-top-width: 0;
background-color: $colorBlack; background-color: $colorBlack;
color: $colorWhite;
} }
&__link { &__link {

View File

@ -56,7 +56,6 @@ export default {
&__editor { &__editor {
border: 1px solid rgba($colorWhite, 0.1); border: 1px solid rgba($colorWhite, 0.1);
background-color: $colorBlack; background-color: $colorBlack;
color: $colorText;
} }
&__editor ::v-deep { &__editor ::v-deep {

View File

@ -48,11 +48,6 @@
border-bottom-right-radius: inherit; border-bottom-right-radius: inherit;
border-top-width: 0; border-top-width: 0;
background-color: $colorBlack; background-color: $colorBlack;
color: $colorWhite;
}
&__link {
// text-align: right;
} }
&__error { &__error {

View File

@ -53,7 +53,7 @@ body {
line-height: 1.7; line-height: 1.7;
font-feature-settings: 'cv05' 1; font-feature-settings: 'cv05' 1;
background-color: $colorBlack; background-color: $colorBlack;
color: $colorWhite; color: $colorText;
height: 100%; height: 100%;
} }

View File

@ -27,7 +27,7 @@ pre[class*="language-"] {
:not(pre) > code[class*="language-"] { :not(pre) > code[class*="language-"] {
white-space: normal; white-space: normal;
color: $colorText; color: $colorWhite;
background: $codeBackground; background: $codeBackground;
border-radius: 0.2em; border-radius: 0.2em;
padding: 0.1em; padding: 0.1em;
@ -42,7 +42,7 @@ pre > code[class*="language-"] {
pre[class*="language-"] { pre[class*="language-"] {
overflow: auto; overflow: auto;
position: relative; position: relative;
color: $colorText; color: $colorWhite;
background: $codeBackground; background: $codeBackground;
padding: 1.2rem 1.5rem !important; padding: 1.2rem 1.5rem !important;
border-radius: 0.5rem; border-radius: 0.5rem;

View File

@ -201,19 +201,21 @@ $menuBreakPoint: 750px;
height: 100vh; height: 100vh;
overflow: auto; overflow: auto;
overscroll-behavior: contain; overscroll-behavior: contain;
border-right: 1px solid rgba($colorWhite, 0.1);
} }
&__content { &__content {
flex: 1 1 auto; flex: 1 1 auto;
min-width: 0;
padding: 0 2rem 2rem 2rem; padding: 0 2rem 2rem 2rem;
} }
&__top-bar { &__top-bar {
padding: 2rem; padding: 1rem 0;
position: sticky; position: sticky;
z-index: 2; z-index: 2;
top: 0; top: 0;
background-color: rgba($colorBlack, 0.7); background-color: rgba($colorBlack, 0.8);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
} }
@ -248,12 +250,11 @@ $menuBreakPoint: 750px;
} }
&__link { &__link {
display: block; display: flex;
padding: 0.1rem 0.5rem; justify-content: space-between;
padding: 0.25rem 0.5rem;
border-radius: 5px; border-radius: 5px;
font-weight: 500; font-size: 0.85rem;
color: rgba($colorWhite, 0.6);
margin-bottom: 0.2rem;
margin-left: -0.5rem; margin-left: -0.5rem;
&:hover { &:hover {
@ -262,7 +263,7 @@ $menuBreakPoint: 750px;
&.active { &.active {
color: $colorWhite; color: $colorWhite;
background-color: rgba($colorWhite, 0.05); background-color: rgba($colorWhite, 0.08);
} }
&--draft { &--draft {
@ -270,8 +271,12 @@ $menuBreakPoint: 750px;
} }
&--with-children::after { &--with-children::after {
content: ''; content: '';
color: rgba($colorWhite, 0.2); color: rgba($colorWhite, 0.2);
} }
} }
&__main {
margin-top: 2rem;
}
} }

View File

@ -12,9 +12,13 @@
} }
> ul li, > ul li,
> ol li { > ol li,
margin-top: $spacing; > ul ul,
margin-bottom: $spacing; > ul ol,
> ol ol,
> ol ul {
margin-top: 0.5 * $spacing;
margin-bottom: 0.5 * $spacing;
} }
> h1, > h1,
@ -23,6 +27,7 @@
> h4, > h4,
> h5, > h5,
> h6 { > h6 {
color: $colorWhite;
margin-top: 3 * $spacing; margin-top: 3 * $spacing;
margin-bottom: $spacing; margin-bottom: $spacing;
@ -61,18 +66,14 @@
} }
} }
> :first-child { :first-child {
margin-top: 0; margin-top: 0;
} }
> :last-child { :last-child {
margin-bottom: 0; margin-bottom: 0;
} }
> p {
color: rgba($colorWhite, 0.8);
}
> pre { > pre {
border: 1px solid rgba($colorWhite, 0.1); border: 1px solid rgba($colorWhite, 0.1);
} }
@ -92,13 +93,32 @@
text-decoration: underline; text-decoration: underline;
} }
#table-of-contents + ul {
border: 1px solid rgba($colorWhite, 0.1);
padding: 1.2rem 1.5rem !important;
border-radius: 0.5rem;
li {
padding-left: 0;
&::before {
display: none;
}
ul {
margin-left: 1rem;
}
// a::before {
// content: '';
// opacity: 0.2;
// }
}
}
> ul { > ul {
list-style-type: none; list-style-type: none;
> * + * {
margin-top: 0.5rem;
}
li { li {
position: relative; position: relative;
padding-left: 1.25rem; padding-left: 1.25rem;
@ -117,10 +137,6 @@
> ol { > ol {
counter-reset: item; counter-reset: item;
> * + * {
margin-top: 0.5rem;
}
li { li {
position: relative; position: relative;
padding-left: 2.5rem; padding-left: 2.5rem;
@ -151,7 +167,6 @@
border-collapse: collapse; border-collapse: collapse;
font-size: 0.85rem; font-size: 0.85rem;
text-align: left; text-align: left;
color: rgba($colorWhite, 0.8);
th, th,
td { td {