i know it is a lot
This commit is contained in:
Mivinci
parent
59ee3f114a
commit
f1b32bd47e
29 changed files with 415 additions and 570 deletions
84
assets/css/atom.scss
Normal file
84
assets/css/atom.scss
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
/* layout */
|
||||
.container {
|
||||
max-width: var(--max-w);
|
||||
}
|
||||
|
||||
.overflow-x-auto {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.overflow-y-hidden {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
/* flex & grid */
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.flex-column {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.items-baseline {
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
/* spacing */
|
||||
$u: 0.25;
|
||||
@each $i, $class in (p, padding), (m, margin) {
|
||||
@each $j, $size in (t, top), (r, right), (b, bottom), (l, left) {
|
||||
@each $k in 0,1,2,3,4,5,6,7,8 {
|
||||
.#{$i}#{$j}-#{$k} {
|
||||
#{$class}-#{$size}: #{$u * $k}rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* typography */
|
||||
$weights: (thin, 100), (extralight, 200), (light, 300), (normal, 400),
|
||||
(medium, 500), (semibold, 600), (bold, 700), (extrabold, 800);
|
||||
@each $k, $v in $weights {
|
||||
.font-#{$k} {
|
||||
font-weight: #{$v};
|
||||
}
|
||||
}
|
||||
|
||||
$texts: (xs, 0.75), (sm, 0.875), (base, 1), (lg, 1.125), (xl, 1.25),
|
||||
(2xl, 1.5), (3xl, 1.875), (4xl, 2.25), (5xl, 3), (6xl, 3.75);
|
||||
@each $k, $s in $texts {
|
||||
.text-#{$k} {
|
||||
font-size: #{$s}rem;
|
||||
}
|
||||
}
|
||||
|
||||
.whitespace-nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* interactivity */
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
58
assets/css/main.scss
Normal file
58
assets/css/main.scss
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
@import "./pre.scss";
|
||||
@import "./theme.scss";
|
||||
@import "./atom.scss";
|
||||
@import "./md.scss";
|
||||
@import "./syntax.scss";
|
||||
|
||||
:root {
|
||||
--max-w: 640px;
|
||||
--nav-s: 1.5rem;
|
||||
--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
|
||||
Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 480px) {
|
||||
:root {
|
||||
--nav-s: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
box-sizing: border-box;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0 16px;
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
background-color: var(--back);
|
||||
color: var(--text);
|
||||
transition-property: background-color, border-color, color;
|
||||
transition-duration: 0.5s;
|
||||
}
|
||||
|
||||
main {
|
||||
animation: showup 0.7s;
|
||||
}
|
||||
|
||||
main p a {
|
||||
color: var(--prime);
|
||||
}
|
||||
|
||||
@keyframes showup {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,22 @@
|
|||
$heading: (h1, 2.25, 800), (h2, 2, 700), (h3, 1.75, 600), (h4, 1.5, 600),
|
||||
(h5, 1.25, 500), (h6, 1, 400);
|
||||
@each $tag, $size, $weight in $heading {
|
||||
.md #{$tag} {
|
||||
font-size: #{$size}rem;
|
||||
font-weight: $weight;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: .75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.md pre {
|
||||
font-size: 13px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.md blockquote {
|
||||
background-color: rgba(148, 148, 149, 0.08) ;
|
||||
padding: 1px 1rem;
|
||||
background-color: #94949514;
|
||||
padding: 1px .85em;
|
||||
border-left: 4px solid var(--prime);
|
||||
font-style: italic;
|
||||
}
|
||||
|
|
@ -24,9 +40,9 @@
|
|||
border-bottom: 2px solid var(--text);
|
||||
}
|
||||
|
||||
.md table th,
|
||||
.md table th,
|
||||
.md table td {
|
||||
padding: 10px 20px;
|
||||
padding: .25rem 1rem;
|
||||
}
|
||||
|
||||
.md img {
|
||||
|
|
@ -37,13 +53,19 @@
|
|||
overflow: auto hidden;
|
||||
}
|
||||
|
||||
.md ul {
|
||||
list-style: disc;
|
||||
padding-inline-start: 22px;
|
||||
}
|
||||
|
||||
.md ul input[type="checkbox"] {
|
||||
margin: 0;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.md .ul-checkbox {
|
||||
list-style: none;
|
||||
padding-inline-start: 20px;
|
||||
padding-inline-start: 2px;
|
||||
}
|
||||
|
||||
.md li {
|
||||
|
|
@ -60,9 +82,9 @@
|
|||
}
|
||||
|
||||
.md blockquote p {
|
||||
margin: .5rem 0;
|
||||
margin: .45rem 0;
|
||||
line-height: 1.5;
|
||||
font-size: .9rem;
|
||||
font-size: .95rem;
|
||||
}
|
||||
|
||||
.md hr {
|
||||
|
|
@ -77,8 +99,3 @@
|
|||
.md p sup {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.md a {
|
||||
font-style: italic;
|
||||
text-decoration: underline;
|
||||
}
|
||||
134
assets/css/pre.scss
Normal file
134
assets/css/pre.scss
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
/* This file is taken from https://github.com/tailwindlabs/tailwindcss/blob/master/src/css/preflight.css */
|
||||
|
||||
/*
|
||||
1. Use a consistent sensible line-height in all browsers.
|
||||
2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
3. Use a more readable tab size.
|
||||
4. Use the user's configured `sans` font-family by default.
|
||||
5. Use the user's configured `sans` font-feature-settings by default.
|
||||
*/
|
||||
html {
|
||||
--default-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
|
||||
Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
line-height: 1.5;
|
||||
font-family: var(--font, --default-font);
|
||||
font-feature-settings: normal;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
1. Remove the margin in all browsers.
|
||||
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
|
||||
*/
|
||||
body {
|
||||
margin: 0;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Add the correct height in Firefox.
|
||||
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
|
||||
3. Ensure horizontal rules are visible by default.
|
||||
*/
|
||||
hr {
|
||||
height: 0; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
border-top-width: 1px; /* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
Remove the default font size and weight for headings.
|
||||
*/
|
||||
p,
|
||||
pre,
|
||||
figure,
|
||||
dl,
|
||||
dd,
|
||||
blockquote,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
.tag,
|
||||
p code {
|
||||
font-size: .8em;
|
||||
padding: 0.1em 0.3em;
|
||||
border-radius: 1px;
|
||||
background-color: #9999993b;
|
||||
}
|
||||
|
||||
|
||||
ol,
|
||||
ul,
|
||||
menu {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
Reset links to optimize for opt-in styling instead of opt-out.
|
||||
*/
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--prime, inherit);
|
||||
}
|
||||
|
||||
/*
|
||||
1. Use the user's configured `mono` font family by default.
|
||||
2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp,
|
||||
pre {
|
||||
--default-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
font-family: var(--font-mono, --default-font-mono);
|
||||
}
|
||||
|
||||
/*
|
||||
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
|
||||
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
|
||||
3. Remove gaps between table borders by default.
|
||||
*/
|
||||
table {
|
||||
text-indent: 0; /* 1 */
|
||||
border-color: inherit; /* 2 */
|
||||
border-collapse: collapse; /* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
Remove the inheritance of text transform in Edge and Firefox.
|
||||
*/
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(128, 128, 128, 0.7);
|
||||
}
|
||||
::-webkit-scrollbar-thumb:window-inactive {
|
||||
background: rgba(128, 128, 128, 0.2);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
background-color: rgb(128, 128, 128);
|
||||
}
|
||||
|
|
@ -100,6 +100,7 @@
|
|||
.chroma .cpf {
|
||||
color: #ce9178;
|
||||
}
|
||||
|
||||
/* LiteralNumber */
|
||||
.chroma .m,
|
||||
.chroma .mb,
|
||||
|
|
@ -138,5 +139,4 @@
|
|||
.chroma .hl {
|
||||
display: block;
|
||||
background-color: #585858;
|
||||
}
|
||||
|
||||
}
|
||||
13
assets/css/theme.scss
Normal file
13
assets/css/theme.scss
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
.light {
|
||||
--prime: #1691b6;
|
||||
--grid: #e1e1e1;
|
||||
--back: #fff;
|
||||
--text: #222;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--prime: #1691b6;
|
||||
--back: #181818;
|
||||
--text: silver;
|
||||
--grid: #555;
|
||||
}
|
||||
|
|
@ -31,7 +31,7 @@ function rss(xml) {
|
|||
|
||||
// innsert dom
|
||||
const div = document.createElement('div')
|
||||
div.className = 'flex justify-between sm:flex-col-reverse my-4 sm:mb-6 sm:mt-3'
|
||||
div.className = 'flex justify-between'
|
||||
div.innerHTML = template(link, title, date)
|
||||
dom.appendChild(div)
|
||||
|
||||
|
|
@ -52,6 +52,6 @@ function template() {
|
|||
const a = arguments
|
||||
return `
|
||||
<a href=${a[0]}>${a[1]}</a>
|
||||
<div class="sm:mb-2 sm:text-xs">${format(a[2])}</div>
|
||||
<div>${format(a[2])}</div>
|
||||
`.trim()
|
||||
}
|
||||
|
|
@ -5,5 +5,5 @@ document.querySelectorAll('.md ul').forEach(v => {
|
|||
}
|
||||
});
|
||||
|
||||
// use custom font family
|
||||
document.querySelector('body').style.setProperty('--global-font-family', '{{ .Site.Params.globalFontFamily }}');
|
||||
// // use custom font family
|
||||
// document.querySelector('body').style.setProperty('--global-font-family', '{{ .Site.Params.globalFontFamily }}');
|
||||
|
|
@ -1,186 +0,0 @@
|
|||
* {
|
||||
line-height: 1;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
header nav a {
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
$unit: 0.25rem;
|
||||
$scales: 0, 1, 2, 3, 4, 5, 6, 7, 8, 1.5;
|
||||
$screens: (
|
||||
sm\:: 640px,
|
||||
);
|
||||
|
||||
@mixin scale_with_prefix($prefix, $scale) {
|
||||
$size: $scale * $unit;
|
||||
.#{$prefix}mt-#{$scale} {
|
||||
margin-top: $size;
|
||||
}
|
||||
.#{$prefix}mb-#{$scale} {
|
||||
margin-bottom: $size;
|
||||
}
|
||||
.#{$prefix}ml-#{$scale} {
|
||||
margin-left: $size;
|
||||
}
|
||||
.#{$prefix}mr-#{$scale} {
|
||||
margin-right: $size;
|
||||
}
|
||||
.#{$prefix}my-#{$scale} {
|
||||
margin-top: $size;
|
||||
margin-bottom: $size;
|
||||
}
|
||||
.#{$prefix}mx-#{$scale} {
|
||||
margin-left: $size;
|
||||
margin-right: $size;
|
||||
}
|
||||
|
||||
.#{$prefix}pb-#{$scale} {
|
||||
padding-bottom: $size;
|
||||
}
|
||||
.#{$prefix}py-#{$scale} {
|
||||
padding-top: $size;
|
||||
padding-bottom: $size;
|
||||
}
|
||||
}
|
||||
|
||||
@each $scale in $scales {
|
||||
@include scale_with_prefix("", $scale);
|
||||
|
||||
@each $screen, $size in $screens {
|
||||
@media (max-width: $size) {
|
||||
@include scale_with_prefix($screen, $scale);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin style_with_prefix($prefix) {
|
||||
.#{$prefix}block {
|
||||
display: block;
|
||||
}
|
||||
.#{$prefix}flex {
|
||||
display: flex;
|
||||
}
|
||||
.#{$prefix}flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
.#{$prefix}flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
.#{$prefix}flex-col-reverse {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.#{$prefix}justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.#{$prefix}flex-nowrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.#{$prefix}items-center {
|
||||
align-items: center;
|
||||
}
|
||||
.#{$prefix}self-start {
|
||||
align-self: flex-start;
|
||||
}
|
||||
.#{$prefix}hidden {
|
||||
display: none;
|
||||
}
|
||||
.#{$prefix}text-xs {
|
||||
font-size: .8rem;
|
||||
}
|
||||
.#{$prefix}text-sm {
|
||||
font-size: .9rem;
|
||||
}
|
||||
.#{$prefix}text-md {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.#{$prefix}text-xl {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.#{$prefix}text-2xl {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
.#{$prefix}text-3xl {
|
||||
font-size: 2rem;
|
||||
}
|
||||
.#{$prefix}text-4xl {
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@each $screen, $size in $screens {
|
||||
@media (max-width: $size) {
|
||||
@include style_with_prefix($screen);
|
||||
}
|
||||
}
|
||||
|
||||
@include style_with_prefix("");
|
||||
|
||||
|
||||
// border width
|
||||
.bw-0 {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
// width
|
||||
.min-w-32 {
|
||||
min-width: 0.25 * 32rem;
|
||||
}
|
||||
|
||||
.whitespace-nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.overflow-x-auto {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.overflow-y-hidden {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.not-first\:ml-3 {
|
||||
&:not(:first-child) {
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* font weight */
|
||||
.font-thin {
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.font-extralight {
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.font-light {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.font-normal {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.font-medium {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.font-semibold {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
|
@ -1,148 +0,0 @@
|
|||
@import "atom.scss";
|
||||
@import "markdown.scss";
|
||||
@import "syntax.scss";
|
||||
@import "toc.scss";
|
||||
|
||||
:root {
|
||||
--prime: #0fa0ce;
|
||||
--grid: #e1e1e1;
|
||||
--back: #fff;
|
||||
--text: #222;
|
||||
--tag: #333;
|
||||
|
||||
--mobile-w: 640px;
|
||||
|
||||
--global-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
--back: #181818;
|
||||
--text: silver;
|
||||
--grid: #555;
|
||||
--tag: #999;
|
||||
|
||||
--ovo-ft: var(--text);
|
||||
--ovo-bdr: var(--grid);
|
||||
--ovo-bg: var(--back);
|
||||
--ovo-bg-hvr: #555;
|
||||
--ovo-tag: #30363d;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--global-font-family);
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: var(--text);
|
||||
background-color: var(--back);
|
||||
transition-property: background-color, border-color, color;
|
||||
transition-duration: 0.5s;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.6;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-width: 0;
|
||||
border-top: 1px solid var(--grid);
|
||||
}
|
||||
|
||||
a {
|
||||
line-height: 1.5;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--prime);
|
||||
}
|
||||
|
||||
main {
|
||||
animation: showup 0.7s;
|
||||
}
|
||||
|
||||
p a {
|
||||
// font-style: italic;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
footer a {
|
||||
font-style: unset;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
header nav {
|
||||
color: var(--tag);
|
||||
}
|
||||
|
||||
header ul {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
pre,
|
||||
code {
|
||||
overflow: auto hidden;
|
||||
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
font-size: 13px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.minima-tag,
|
||||
p code {
|
||||
background-color: var(--grid);
|
||||
padding: 0.2em 0.4em;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(128, 128, 128, 0.7);
|
||||
}
|
||||
::-webkit-scrollbar-thumb:window-inactive {
|
||||
background: rgba(128, 128, 128, 0.2);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
background-color: rgb(128, 128, 128);
|
||||
}
|
||||
|
||||
h1::-webkit-scrollbar,
|
||||
nav::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
@keyframes showup {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.home-intro {
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: var(--mobile-w);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
|
@ -1,89 +0,0 @@
|
|||
details.toc {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--back);
|
||||
transition: .5s all;
|
||||
}
|
||||
|
||||
details.toc summary {
|
||||
position: relative;
|
||||
width: fit-content;
|
||||
cursor: pointer;
|
||||
background-color: var(--back);
|
||||
transition: .5s all;
|
||||
}
|
||||
|
||||
details.toc div {
|
||||
background-color: var(--back);
|
||||
transition: .5s all;
|
||||
}
|
||||
|
||||
details.toc ul {
|
||||
list-style-type: none;
|
||||
padding-inline-start: 1em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
details.toc ul > li {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
details.toc-bar,
|
||||
details.toc-lines {
|
||||
& summary {
|
||||
padding-right: 0.5em;
|
||||
list-style: none;
|
||||
}
|
||||
& summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
& div {
|
||||
padding-top: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
details.toc-bar {
|
||||
top: 1rem;
|
||||
background-color: transparent;
|
||||
|
||||
& div {
|
||||
top: -1em;
|
||||
padding-top: 2em;
|
||||
background-color: var(--back);
|
||||
}
|
||||
|
||||
& summary {
|
||||
--toc-bar-ht: 4px;
|
||||
--toc-bar-wd: 8%;
|
||||
width: var(--toc-bar-wd);
|
||||
height: var(--toc-bar-ht);
|
||||
margin-left: calc(50% - var(--toc-bar-wd) / 2);
|
||||
border-radius: calc(var(--toc-bar-ht) / 2);
|
||||
background-color: var(--text);
|
||||
box-shadow: var(--back) 0 0 8px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
details.toc-default,
|
||||
details.toc-lines {
|
||||
& summary {
|
||||
padding-top: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
details.toc-lines {
|
||||
& summary::before {
|
||||
content: "≡";
|
||||
font-size: 1.5em;
|
||||
position: relative;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
details[open] {
|
||||
&.toc-lines summary::before {
|
||||
content: "×";
|
||||
font-size: 1.7em;
|
||||
top: -4px;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue