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-top-width: 0;
background-color: $colorBlack;
color: $colorWhite;
}
&__link {

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -12,9 +12,13 @@
}
> ul li,
> ol li {
margin-top: $spacing;
margin-bottom: $spacing;
> ol li,
> ul ul,
> ul ol,
> ol ol,
> ol ul {
margin-top: 0.5 * $spacing;
margin-bottom: 0.5 * $spacing;
}
> h1,
@ -23,6 +27,7 @@
> h4,
> h5,
> h6 {
color: $colorWhite;
margin-top: 3 * $spacing;
margin-bottom: $spacing;
@ -61,18 +66,14 @@
}
}
> :first-child {
:first-child {
margin-top: 0;
}
> :last-child {
:last-child {
margin-bottom: 0;
}
> p {
color: rgba($colorWhite, 0.8);
}
> pre {
border: 1px solid rgba($colorWhite, 0.1);
}
@ -92,13 +93,32 @@
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 {
list-style-type: none;
> * + * {
margin-top: 0.5rem;
}
li {
position: relative;
padding-left: 1.25rem;
@ -117,10 +137,6 @@
> ol {
counter-reset: item;
> * + * {
margin-top: 0.5rem;
}
li {
position: relative;
padding-left: 2.5rem;
@ -151,7 +167,6 @@
border-collapse: collapse;
font-size: 0.85rem;
text-align: left;
color: rgba($colorWhite, 0.8);
th,
td {