diff --git a/www/assets/css/common/404.css b/www/assets/css/common/404.css new file mode 100644 index 0000000..9c77960 --- /dev/null +++ b/www/assets/css/common/404.css @@ -0,0 +1,11 @@ +.not-found { + position: absolute; + left: 0; + right: 0; + display: flex; + align-items: center; + justify-content: center; + height: 80%; + font-size: 160px; + font-weight: 700; +} diff --git a/www/assets/css/common/archive.css b/www/assets/css/common/archive.css new file mode 100644 index 0000000..f0e49d8 --- /dev/null +++ b/www/assets/css/common/archive.css @@ -0,0 +1,44 @@ +.archive-posts { + width: 100%; + font-size: 16px; +} + +.archive-year { + margin-top: 40px; +} + +.archive-year:not(:last-of-type) { + border-bottom: 2px solid var(--border); +} + +.archive-month { + display: flex; + align-items: flex-start; + padding: 10px 0; +} + +.archive-month-header { + margin: 25px 0; + width: 200px; +} + +.archive-month:not(:last-of-type) { + border-bottom: 1px solid var(--border); +} + +.archive-entry { + position: relative; + padding: 5px; + margin: 10px 0; +} + +.archive-entry-title { + margin: 5px 0; + font-weight: 400; +} + +.archive-count, +.archive-meta { + color: var(--secondary); + font-size: 14px; +} diff --git a/www/assets/css/common/footer.css b/www/assets/css/common/footer.css new file mode 100644 index 0000000..63d4416 --- /dev/null +++ b/www/assets/css/common/footer.css @@ -0,0 +1,60 @@ +.footer, +.top-link { + font-size: 12px; + color: var(--secondary); +} + +.footer { + max-width: calc(var(--main-width) + var(--gap) * 2); + margin: auto; + padding: calc((var(--footer-height) - var(--gap)) / 2) var(--gap); + text-align: center; + line-height: 24px; +} + +.footer span { + margin-inline-start: 1px; + margin-inline-end: 1px; +} + +.footer span:last-child { + white-space: nowrap; +} + +.footer a { + color: inherit; + border-bottom: 1px solid var(--secondary); +} + +.footer a:hover { + border-bottom: 1px solid var(--primary); +} + +.top-link { + visibility: hidden; + position: fixed; + bottom: 60px; + right: 30px; + z-index: 99; + background: var(--tertiary); + width: 42px; + height: 42px; + padding: 12px; + border-radius: 64px; + transition: visibility 0.5s, opacity 0.8s linear; +} + +.top-link, +.top-link svg { + filter: drop-shadow(0px 0px 0px var(--theme)); +} + +.footer a:hover, +.top-link:hover { + color: var(--primary); +} + +.top-link:focus, +#theme-toggle:focus { + outline: 0; +} diff --git a/www/assets/css/common/header.css b/www/assets/css/common/header.css new file mode 100644 index 0000000..bd6b03b --- /dev/null +++ b/www/assets/css/common/header.css @@ -0,0 +1,93 @@ +.nav { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + max-width: calc(var(--nav-width) + var(--gap) * 2); + margin-inline-start: auto; + margin-inline-end: auto; + line-height: var(--header-height); +} + +.nav a { + display: block; +} + +.logo, +#menu { + display: flex; + margin: auto var(--gap); +} + +.logo { + flex-wrap: inherit; +} + +.logo a { + font-size: 24px; + font-weight: 700; +} + +.logo a img, .logo a svg { + display: inline; + vertical-align: middle; + pointer-events: none; + transform: translate(0, -10%); + border-radius: 6px; + margin-inline-end: 8px; +} + +button#theme-toggle { + font-size: 26px; + margin: auto 4px; +} + +body.dark #moon { + vertical-align: middle; + display: none; +} + +body:not(.dark) #sun { + display: none; +} + +#menu { + list-style: none; + word-break: keep-all; + overflow-x: auto; + white-space: nowrap; +} + +#menu li + li { + margin-inline-start: var(--gap); +} + +#menu a { + font-size: 16px; +} + +#menu .active { + font-weight: 500; + border-bottom: 2px solid currentColor; +} + +.lang-switch li, +.lang-switch ul, +.logo-switches { + display: inline-flex; + margin: auto 4px; +} + +.lang-switch { + display: flex; + flex-wrap: inherit; +} + +.lang-switch a { + margin: auto 3px; + font-size: 16px; + font-weight: 500; +} + +.logo-switches { + flex-wrap: inherit; +} diff --git a/www/assets/css/common/main.css b/www/assets/css/common/main.css new file mode 100644 index 0000000..3e595a1 --- /dev/null +++ b/www/assets/css/common/main.css @@ -0,0 +1,66 @@ +.main { + position: relative; + min-height: calc(100vh - var(--header-height) - var(--footer-height)); + max-width: calc(var(--main-width) + var(--gap) * 2); + margin: auto; + padding: var(--gap); +} + +.page-header h1 { + font-size: 40px; +} + +.pagination { + display: flex; +} + +.pagination a { + color: var(--theme); + font-size: 13px; + line-height: 36px; + background: var(--primary); + border-radius: calc(36px / 2); + padding: 0 16px; +} + +.pagination .next { + margin-inline-start: auto; +} + + +.social-icons a { + display: inline-flex; + padding: 10px; +} + +.social-icons a svg { + height: 26px; + width: 26px; +} + +code { + direction: ltr; +} + +div.highlight, +pre { + position: relative; +} + +.copy-code { + display: none; + position: absolute; + top: 4px; + right: 4px; + color: rgba(255, 255, 255, 0.8); + background: rgba(78, 78, 78, 0.8); + border-radius: var(--radius); + padding: 0 5px; + font-size: 14px; + user-select: none; +} + +div.highlight:hover .copy-code, +pre:hover .copy-code { + display: block; +} diff --git a/www/assets/css/common/post-entry.css b/www/assets/css/common/post-entry.css new file mode 100644 index 0000000..f0ee794 --- /dev/null +++ b/www/assets/css/common/post-entry.css @@ -0,0 +1,108 @@ +.first-entry { + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + min-height: 320px; + margin: var(--gap) 0 calc(var(--gap) * 2) 0; +} + +.first-entry .entry-header { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; +} + +.first-entry .entry-header h1 { + font-size: 34px; + line-height: 1.3; +} + +.first-entry .entry-content { + margin: 14px 0; + font-size: 16px; + -webkit-line-clamp: 3; +} + +.first-entry .entry-footer { + font-size: 14px; +} + +.home-info .entry-content { + -webkit-line-clamp: unset; +} + +.post-entry { + position: relative; + margin-bottom: var(--gap); + padding: var(--gap); + background: var(--entry); + border-radius: var(--radius); + transition: transform 0.1s; + border: 1px solid var(--border); +} + +.post-entry:active { + transform: scale(0.96); +} + +.tag-entry .entry-cover { + display: none; +} + +.entry-header h2 { + font-size: 24px; + line-height: 1.3; +} + +.entry-content { + margin: 8px 0; + color: var(--secondary); + font-size: 14px; + line-height: 1.6; + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; +} + +.entry-footer { + color: var(--secondary); + font-size: 13px; +} + +.entry-link { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; +} + +.entry-hint { + color: var(--secondary); +} + +.entry-hint-parent { + display: flex; + justify-content: space-between; +} + +.entry-cover { + font-size: 14px; + margin-bottom: var(--gap); + text-align: center; +} + +.entry-cover img { + border-radius: var(--radius); + pointer-events: none; + width: 100%; + height: auto; +} + +.entry-cover a { + color: var(--secondary); + box-shadow: 0 1px 0 var(--primary); +} diff --git a/www/assets/css/common/post-single.css b/www/assets/css/common/post-single.css new file mode 100644 index 0000000..0335e0e --- /dev/null +++ b/www/assets/css/common/post-single.css @@ -0,0 +1,407 @@ +.page-header, +.post-header { + margin: 24px auto var(--content-gap) auto; +} + +.post-title { + margin-bottom: 2px; + font-size: 40px; +} + +.post-description { + margin-top: 10px; + margin-bottom: 5px; +} + +.post-meta, +.breadcrumbs { + color: var(--secondary); + font-size: 14px; + display: flex; + flex-wrap: wrap; +} + +.post-meta .i18n_list li { + display: inline-flex; + list-style: none; + margin: auto 3px; + box-shadow: 0 1px 0 var(--secondary); +} + +.breadcrumbs a { + font-size: 16px; +} + +.post-content { + color: var(--content); +} + +.post-content h3, +.post-content h4, +.post-content h5, +.post-content h6 { + margin: 24px 0 16px; +} + +.post-content h1 { + margin: 40px auto 32px; + font-size: 40px; +} + +.post-content h2 { + margin: 32px auto 24px; + font-size: 32px; +} + +.post-content h3 { + font-size: 24px; +} + +.post-content h4 { + font-size: 16px; +} + +.post-content h5 { + font-size: 14px; +} + +.post-content h6 { + font-size: 12px; +} + +.post-content a, +.toc a:hover { + box-shadow: 0 1px 0; + box-decoration-break: clone; + -webkit-box-decoration-break: clone; +} + +.post-content a code { + margin: auto 0; + border-radius: 0; + box-shadow: 0 -1px 0 var(--primary) inset; +} + +.post-content del { + text-decoration: line-through; +} + +.post-content dl, +.post-content ol, +.post-content p, +.post-content figure, +.post-content ul { + margin-bottom: var(--content-gap); +} + +.post-content ol, +.post-content ul { + padding-inline-start: 20px; +} + +.post-content li { + margin-top: 5px; +} + +.post-content li p { + margin-bottom: 0; +} + +.post-content dl { + display: flex; + flex-wrap: wrap; + margin: 0; +} + +.post-content dt { + width: 25%; + font-weight: 700; +} + +.post-content dd { + width: 75%; + margin-inline-start: 0; + padding-inline-start: 10px; +} + +.post-content dd ~ dd, +.post-content dt ~ dt { + margin-top: 10px; +} + +.post-content table { + margin-bottom: var(--content-gap); +} + +.post-content table th, +.post-content table:not(.highlighttable, .highlight table, .gist .highlight) td { + min-width: 80px; + padding: 8px 5px; + line-height: 1.5; + border-bottom: 1px solid var(--border); +} + +.post-content table th { + text-align: start; +} + +.post-content table:not(.highlighttable) td code:only-child { + margin: auto 0; +} + +.post-content .highlight table { + border-radius: var(--radius); +} + +.post-content .highlight:not(table) { + margin: 10px auto; + background: var(--code-block-bg) !important; + border-radius: var(--radius); + direction: ltr; +} + +.post-content li > .highlight { + margin-inline-end: 0; +} + +.post-content ul pre { + margin-inline-start: calc(var(--gap) * -2); +} + +.post-content .highlight pre { + margin: 0; +} + +.post-content .highlighttable { + table-layout: fixed; +} + +.post-content .highlighttable td:first-child { + width: 40px; +} + +.post-content .highlighttable td .linenodiv { + padding-inline-end: 0 !important; +} + +.post-content .highlighttable td .highlight, +.post-content .highlighttable td .linenodiv pre { + margin-bottom: 0; +} + +.post-content code { + margin: auto 4px; + padding: 4px 6px; + font-size: 0.78em; + line-height: 1.5; + background: var(--code-bg); + border-radius: 2px; +} + +.post-content pre code { + display: grid; + margin: auto 0; + padding: 10px; + color: rgb(213, 213, 214); + background: var(--code-block-bg) !important; + border-radius: var(--radius); + overflow-x: auto; + word-break: break-all; +} + +.post-content blockquote { + margin: 20px 0; + padding: 0 14px; + border-inline-start: 3px solid var(--primary); +} + +.post-content hr { + margin: 30px 0; + height: 2px; + background: var(--tertiary); + border: 0; +} + +.post-content iframe { + max-width: 100%; +} + +.post-content img { + border-radius: 4px; + margin: 1rem 0; +} + +.post-content img[src*="#center"] { + margin: 1rem auto; +} + +.post-content figure.align-center { + text-align: center; +} + +.post-content figure > figcaption { + color: var(--primary); + font-size: 16px; + font-weight: bold; + margin: 8px 0 16px; +} + +.post-content figure > figcaption > p { + color: var(--secondary); + font-size: 14px; + font-weight: normal; +} + +.toc { + margin: 0 2px 40px 2px; + border: 1px solid var(--border); + background: var(--code-bg); + border-radius: var(--radius); + padding: 0.4em; +} + +.dark .toc { + background: var(--entry); +} + +.toc details summary { + cursor: zoom-in; + margin-inline-start: 20px; +} + +.toc details[open] summary { + cursor: zoom-out; +} + +.toc .details { + display: inline; + font-weight: 500; +} + +.toc .inner { + margin: 0 20px; + padding: 10px 20px; +} + +.toc li ul { + margin-inline-start: var(--gap); +} + +.toc summary:focus { + outline: 0; +} + +.post-footer { + margin-top: 56px; +} + +.post-footer>* { + margin-bottom: 10px; +} + +.post-tags { + display: flex; + flex-wrap: wrap; + gap: 10px; +} + +.post-tags li { + display: inline-block; +} + +.post-tags a, +.share-buttons, +.paginav { + border-radius: var(--radius); + background: var(--code-bg); + border: 1px solid var(--border); +} + +.post-tags a { + display: block; + padding: 0 14px; + color: var(--secondary); + font-size: 14px; + line-height: 34px; + background: var(--code-bg); +} + +.post-tags a:hover, +.paginav a:hover { + background: var(--border); +} + +.share-buttons { + padding: 10px; + display: flex; + justify-content: center; + overflow-x: auto; + gap: 10px; +} + +.share-buttons li, +.share-buttons a { + display: inline-flex; +} + +.share-buttons a:not(:last-of-type) { + margin-inline-end: 12px; +} + +h1:hover .anchor, +h2:hover .anchor, +h3:hover .anchor, +h4:hover .anchor, +h5:hover .anchor, +h6:hover .anchor { + display: inline-flex; + color: var(--secondary); + margin-inline-start: 8px; + font-weight: 500; + user-select: none; +} + +.paginav { + display: flex; + line-height: 30px; +} + +.paginav a { + padding-inline-start: 14px; + padding-inline-end: 14px; + border-radius: var(--radius); +} + +.paginav .title { + letter-spacing: 1px; + text-transform: uppercase; + font-size: small; + color: var(--secondary); +} + +.paginav .prev, +.paginav .next { + width: 50%; +} + +.paginav span:hover:not(.title) { + box-shadow: 0 1px 0; +} + +.paginav .next { + margin-inline-start: auto; + text-align: right; +} + +[dir="rtl"] .paginav .next { + text-align: left; +} + +h1>a>svg { + display: inline; +} + +img.in-text { + display: inline; + margin: auto; +} diff --git a/www/assets/css/common/profile-mode.css b/www/assets/css/common/profile-mode.css new file mode 100644 index 0000000..673e49b --- /dev/null +++ b/www/assets/css/common/profile-mode.css @@ -0,0 +1,43 @@ +.buttons, +.main .profile { + display: flex; + justify-content: center; +} + +.main .profile { + align-items: center; + min-height: calc(100vh - var(--header-height) - var(--footer-height) - (var(--gap) * 2)); + text-align: center; +} + +.profile .profile_inner { + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; +} + +.profile img { + border-radius: 50%; +} + +.buttons { + flex-wrap: wrap; + max-width: 400px; +} + +.button { + background: var(--tertiary); + border-radius: var(--radius); + margin: 8px; + padding: 6px; + transition: transform 0.1s; +} + +.button-inner { + padding: 0 8px; +} + +.button:active { + transform: scale(0.96); +} diff --git a/www/assets/css/common/search.css b/www/assets/css/common/search.css new file mode 100644 index 0000000..5b6eb2b --- /dev/null +++ b/www/assets/css/common/search.css @@ -0,0 +1,45 @@ +#searchbox input { + padding: 4px 10px; + width: 100%; + color: var(--primary); + font-weight: bold; + border: 2px solid var(--tertiary); + border-radius: var(--radius); +} + +#searchbox input:focus { + border-color: var(--secondary); +} + +#searchResults li { + list-style: none; + border-radius: var(--radius); + padding: 10px; + margin: 10px 0; + position: relative; + font-weight: 500; +} + +#searchResults { + margin: 10px 0; + width: 100%; +} + +#searchResults li:active { + transition: transform 0.1s; + transform: scale(0.98); +} + +#searchResults a { + position: absolute; + width: 100%; + height: 100%; + top: 0px; + left: 0px; + outline: none; +} + +#searchResults .focus { + transform: scale(0.98); + border: 2px solid var(--tertiary); +} diff --git a/www/assets/css/common/terms.css b/www/assets/css/common/terms.css new file mode 100644 index 0000000..30f447b --- /dev/null +++ b/www/assets/css/common/terms.css @@ -0,0 +1,18 @@ +.terms-tags li { + display: inline-block; + margin: 10px; + font-weight: 500; +} + +.terms-tags a { + display: block; + padding: 3px 10px; + background: var(--tertiary); + border-radius: 6px; + transition: transform 0.1s; +} + +.terms-tags a:active { + background: var(--tertiary); + transform: scale(0.96); +} diff --git a/www/assets/css/core/license.css b/www/assets/css/core/license.css new file mode 100644 index 0000000..e5eba75 --- /dev/null +++ b/www/assets/css/core/license.css @@ -0,0 +1,6 @@ +/* + PaperMod v7 + License: MIT https://github.com/adityatelange/hugo-PaperMod/blob/master/LICENSE + Copyright (c) 2020 nanxiaobei and adityatelange + Copyright (c) 2021-2024 adityatelange +*/ diff --git a/www/assets/css/core/reset.css b/www/assets/css/core/reset.css new file mode 100644 index 0000000..f70165e --- /dev/null +++ b/www/assets/css/core/reset.css @@ -0,0 +1,118 @@ +*, +::after, +::before { + box-sizing: border-box; +} + +html { + -webkit-tap-highlight-color: transparent; + overflow-y: scroll; + -webkit-text-size-adjust: 100%; + text-size-adjust: 100%; +} + +a, +button, +body, +h1, +h2, +h3, +h4, +h5, +h6 { + color: var(--primary); +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-size: 18px; + line-height: 1.6; + word-break: break-word; + background: var(--theme); +} + +article, +aside, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +table { + display: block; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + line-height: 1.2; +} + +h1, +h2, +h3, +h4, +h5, +h6, +p { + margin-top: 0; + margin-bottom: 0; +} + +ul { + padding: 0; +} + +a { + text-decoration: none; +} + +body, +figure, +ul { + margin: 0; +} + +table { + width: 100%; + border-collapse: collapse; + border-spacing: 0; + overflow-x: auto; + word-break: keep-all; +} + +button, +input, +textarea { + padding: 0; + font: inherit; + background: 0 0; + border: 0; +} + +input, +textarea { + outline: 0; +} + +button, +input[type=button], +input[type=submit] { + cursor: pointer; +} + +input:-webkit-autofill, +textarea:-webkit-autofill { + box-shadow: 0 0 0 50px var(--theme) inset; +} + +img { + display: block; + max-width: 100%; +} diff --git a/www/assets/css/core/theme-vars.css b/www/assets/css/core/theme-vars.css new file mode 100644 index 0000000..07e2cbc --- /dev/null +++ b/www/assets/css/core/theme-vars.css @@ -0,0 +1,38 @@ +:root { + --gap: 24px; + --content-gap: 20px; + --nav-width: 1024px; + --main-width: 720px; + --header-height: 60px; + --footer-height: 60px; + --radius: 8px; + --theme: rgb(255, 255, 255); + --entry: rgb(255, 255, 255); + --primary: rgb(30, 30, 30); + --secondary: rgb(108, 108, 108); + --tertiary: rgb(214, 214, 214); + --content: rgb(31, 31, 31); + --code-block-bg: rgb(28, 29, 33); + --code-bg: rgb(245, 245, 245); + --border: rgb(238, 238, 238); +} + +.dark { + --theme: rgb(29, 30, 32); + --entry: rgb(46, 46, 51); + --primary: rgb(218, 218, 219); + --secondary: rgb(155, 156, 157); + --tertiary: rgb(65, 66, 68); + --content: rgb(196, 196, 197); + --code-block-bg: rgb(46, 46, 51); + --code-bg: rgb(55, 56, 62); + --border: rgb(51, 51, 51); +} + +.list { + background: var(--code-bg); +} + +.dark.list { + background: var(--theme); +} diff --git a/www/assets/css/core/zmedia.css b/www/assets/css/core/zmedia.css new file mode 100644 index 0000000..9517fc3 --- /dev/null +++ b/www/assets/css/core/zmedia.css @@ -0,0 +1,55 @@ +@media screen and (max-width: 768px) { + /* theme-vars */ + :root { + --gap: 14px; + } + + /* profile-mode */ + .profile img { + transform: scale(0.85); + } + + /* post-entry */ + .first-entry { + min-height: 260px; + } + + /* archive */ + .archive-month { + flex-direction: column; + } + + .archive-year { + margin-top: 20px; + } + + /* footer */ + .footer { + padding: calc((var(--footer-height) - var(--gap) - 10px) / 2) var(--gap); + } +} + +/* footer */ +@media screen and (max-width: 900px) { + .list .top-link { + transform: translateY(-5rem); + } +} + +@media screen and (max-width: 340px) { + .share-buttons { + justify-content: unset; + } +} + +@media (prefers-reduced-motion) { + /* terms; profile-mode; post-single; post-entry; post-entry; search; search */ + .terms-tags a:active, + .button:active, + .post-entry:active, + .top-link, + #searchResults .focus, + #searchResults li:active { + transform: none; + } +} diff --git a/www/assets/css/extended/blank.css b/www/assets/css/extended/blank.css new file mode 100644 index 0000000..2a9f764 --- /dev/null +++ b/www/assets/css/extended/blank.css @@ -0,0 +1,5 @@ +/* +This is just a placeholder blank stylesheet so as to support adding custom styles budled with theme's default styles + +Read https://github.com/adityatelange/hugo-PaperMod/wiki/FAQs#bundling-custom-css-with-themes-assets for more info +*/ diff --git a/www/assets/css/includes/chroma-mod.css b/www/assets/css/includes/chroma-mod.css new file mode 100644 index 0000000..317d6e3 --- /dev/null +++ b/www/assets/css/includes/chroma-mod.css @@ -0,0 +1,24 @@ +.chroma { + background-color: unset !important; +} + +.chroma .hl { + display: flex; +} + +.chroma .lnt { + padding: 0 0 0 12px; +} + +.highlight pre.chroma code { + padding: 8px 0; +} + +.highlight pre.chroma .line .cl, +.chroma .ln { + padding: 0 10px; +} + +.chroma .lntd:last-of-type { + width: 100%; +} diff --git a/www/assets/css/includes/chroma-styles.css b/www/assets/css/includes/chroma-styles.css new file mode 100644 index 0000000..af7ccfd --- /dev/null +++ b/www/assets/css/includes/chroma-styles.css @@ -0,0 +1,86 @@ +/* Background */ .bg { color: #cad3f5; background-color: #24273a; } +/* PreWrapper */ .chroma { color: #cad3f5; background-color: #24273a; } +/* Other */ .chroma .x { } +/* Error */ .chroma .err { color: #ed8796 } +/* CodeLine */ .chroma .cl { } +/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit } +/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } +/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } +/* LineHighlight */ .chroma .hl { background-color: #474733 } +/* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #8087a2 } +/* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #8087a2 } +/* Line */ .chroma .line { display: flex; } +/* Keyword */ .chroma .k { color: #c6a0f6 } +/* KeywordConstant */ .chroma .kc { color: #f5a97f } +/* KeywordDeclaration */ .chroma .kd { color: #ed8796 } +/* KeywordNamespace */ .chroma .kn { color: #8bd5ca } +/* KeywordPseudo */ .chroma .kp { color: #c6a0f6 } +/* KeywordReserved */ .chroma .kr { color: #c6a0f6 } +/* KeywordType */ .chroma .kt { color: #ed8796 } +/* Name */ .chroma .n { } +/* NameAttribute */ .chroma .na { color: #8aadf4 } +/* NameBuiltin */ .chroma .nb { color: #91d7e3 } +/* NameBuiltinPseudo */ .chroma .bp { color: #91d7e3 } +/* NameClass */ .chroma .nc { color: #eed49f } +/* NameConstant */ .chroma .no { color: #eed49f } +/* NameDecorator */ .chroma .nd { color: #8aadf4; font-weight: bold } +/* NameEntity */ .chroma .ni { color: #8bd5ca } +/* NameException */ .chroma .ne { color: #f5a97f } +/* NameFunction */ .chroma .nf { color: #8aadf4 } +/* NameFunctionMagic */ .chroma .fm { color: #8aadf4 } +/* NameLabel */ .chroma .nl { color: #91d7e3 } +/* NameNamespace */ .chroma .nn { color: #f5a97f } +/* NameOther */ .chroma .nx { } +/* NameProperty */ .chroma .py { color: #f5a97f } +/* NameTag */ .chroma .nt { color: #c6a0f6 } +/* NameVariable */ .chroma .nv { color: #f4dbd6 } +/* NameVariableClass */ .chroma .vc { color: #f4dbd6 } +/* NameVariableGlobal */ .chroma .vg { color: #f4dbd6 } +/* NameVariableInstance */ .chroma .vi { color: #f4dbd6 } +/* NameVariableMagic */ .chroma .vm { color: #f4dbd6 } +/* Literal */ .chroma .l { } +/* LiteralDate */ .chroma .ld { } +/* LiteralString */ .chroma .s { color: #a6da95 } +/* LiteralStringAffix */ .chroma .sa { color: #ed8796 } +/* LiteralStringBacktick */ .chroma .sb { color: #a6da95 } +/* LiteralStringChar */ .chroma .sc { color: #a6da95 } +/* LiteralStringDelimiter */ .chroma .dl { color: #8aadf4 } +/* LiteralStringDoc */ .chroma .sd { color: #6e738d } +/* LiteralStringDouble */ .chroma .s2 { color: #a6da95 } +/* LiteralStringEscape */ .chroma .se { color: #8aadf4 } +/* LiteralStringHeredoc */ .chroma .sh { color: #6e738d } +/* LiteralStringInterpol */ .chroma .si { color: #a6da95 } +/* LiteralStringOther */ .chroma .sx { color: #a6da95 } +/* LiteralStringRegex */ .chroma .sr { color: #8bd5ca } +/* LiteralStringSingle */ .chroma .s1 { color: #a6da95 } +/* LiteralStringSymbol */ .chroma .ss { color: #a6da95 } +/* LiteralNumber */ .chroma .m { color: #f5a97f } +/* LiteralNumberBin */ .chroma .mb { color: #f5a97f } +/* LiteralNumberFloat */ .chroma .mf { color: #f5a97f } +/* LiteralNumberHex */ .chroma .mh { color: #f5a97f } +/* LiteralNumberInteger */ .chroma .mi { color: #f5a97f } +/* LiteralNumberIntegerLong */ .chroma .il { color: #f5a97f } +/* LiteralNumberOct */ .chroma .mo { color: #f5a97f } +/* Operator */ .chroma .o { color: #91d7e3; font-weight: bold } +/* OperatorWord */ .chroma .ow { color: #91d7e3; font-weight: bold } +/* Punctuation */ .chroma .p { } +/* Comment */ .chroma .c { color: #6e738d; font-style: italic } +/* CommentHashbang */ .chroma .ch { color: #6e738d; font-style: italic } +/* CommentMultiline */ .chroma .cm { color: #6e738d; font-style: italic } +/* CommentSingle */ .chroma .c1 { color: #6e738d; font-style: italic } +/* CommentSpecial */ .chroma .cs { color: #6e738d; font-style: italic } +/* CommentPreproc */ .chroma .cp { color: #6e738d; font-style: italic } +/* CommentPreprocFile */ .chroma .cpf { color: #6e738d; font-weight: bold; font-style: italic } +/* Generic */ .chroma .g { } +/* GenericDeleted */ .chroma .gd { color: #ed8796; background-color: #363a4f } +/* GenericEmph */ .chroma .ge { font-style: italic } +/* GenericError */ .chroma .gr { color: #ed8796 } +/* GenericHeading */ .chroma .gh { color: #f5a97f; font-weight: bold } +/* GenericInserted */ .chroma .gi { color: #a6da95; background-color: #363a4f } +/* GenericOutput */ .chroma .go { } +/* GenericPrompt */ .chroma .gp { } +/* GenericStrong */ .chroma .gs { font-weight: bold } +/* GenericSubheading */ .chroma .gu { color: #f5a97f; font-weight: bold } +/* GenericTraceback */ .chroma .gt { color: #ed8796 } +/* GenericUnderline */ .chroma .gl { text-decoration: underline } +/* TextWhitespace */ .chroma .w { } diff --git a/www/assets/css/includes/scroll-bar.css b/www/assets/css/includes/scroll-bar.css new file mode 100644 index 0000000..a11d740 --- /dev/null +++ b/www/assets/css/includes/scroll-bar.css @@ -0,0 +1,63 @@ +/* from reset */ +::-webkit-scrollbar-track { + background: 0 0; +} + +.list:not(.dark)::-webkit-scrollbar-track { + background: var(--code-bg); +} + +::-webkit-scrollbar-thumb { + background: var(--tertiary); + border: 5px solid var(--theme); + border-radius: var(--radius); +} + +.list:not(.dark)::-webkit-scrollbar-thumb { + border: 5px solid var(--code-bg); +} + +::-webkit-scrollbar-thumb:hover { + background: var(--secondary); +} + +::-webkit-scrollbar:not(.highlighttable, .highlight table, .gist .highlight) { + background: var(--theme); +} + +/* from post-single */ +.post-content .highlighttable td .highlight pre code::-webkit-scrollbar { + display: none; +} + +.post-content :not(table) ::-webkit-scrollbar-thumb { + border: 2px solid var(--code-block-bg); + background: rgb(113, 113, 117); +} + +.post-content :not(table) ::-webkit-scrollbar-thumb:hover { + background: rgb(163, 163, 165); +} + +.gist table::-webkit-scrollbar-thumb { + border: 2px solid rgb(255, 255, 255); + background: rgb(173, 173, 173); +} + +.gist table::-webkit-scrollbar-thumb:hover { + background: rgb(112, 112, 112); +} + +.post-content table::-webkit-scrollbar-thumb { + border-width: 2px; +} + +/* from zmedia */ +@media screen and (min-width: 768px) { + + /* reset */ + ::-webkit-scrollbar { + width: 19px; + height: 11px; + } +} diff --git a/www/assets/js/fastsearch.js b/www/assets/js/fastsearch.js new file mode 100644 index 0000000..1d83c97 --- /dev/null +++ b/www/assets/js/fastsearch.js @@ -0,0 +1,152 @@ +import * as params from '@params'; + +let fuse; // holds our search engine +let resList = document.getElementById('searchResults'); +let sInput = document.getElementById('searchInput'); +let first, last, current_elem = null +let resultsAvailable = false; + +// load our search index +window.onload = function () { + let xhr = new XMLHttpRequest(); + xhr.onreadystatechange = function () { + if (xhr.readyState === 4) { + if (xhr.status === 200) { + let data = JSON.parse(xhr.responseText); + if (data) { + // fuse.js options; check fuse.js website for details + let options = { + distance: 100, + threshold: 0.4, + ignoreLocation: true, + keys: [ + 'title', + 'permalink', + 'summary', + 'content' + ] + }; + if (params.fuseOpts) { + options = { + isCaseSensitive: params.fuseOpts.iscasesensitive ?? false, + includeScore: params.fuseOpts.includescore ?? false, + includeMatches: params.fuseOpts.includematches ?? false, + minMatchCharLength: params.fuseOpts.minmatchcharlength ?? 1, + shouldSort: params.fuseOpts.shouldsort ?? true, + findAllMatches: params.fuseOpts.findallmatches ?? false, + keys: params.fuseOpts.keys ?? ['title', 'permalink', 'summary', 'content'], + location: params.fuseOpts.location ?? 0, + threshold: params.fuseOpts.threshold ?? 0.4, + distance: params.fuseOpts.distance ?? 100, + ignoreLocation: params.fuseOpts.ignorelocation ?? true + } + } + fuse = new Fuse(data, options); // build the index from the json file + } + } else { + console.log(xhr.responseText); + } + } + }; + xhr.open('GET', "../index.json"); + xhr.send(); +} + +function activeToggle(ae) { + document.querySelectorAll('.focus').forEach(function (element) { + // rm focus class + element.classList.remove("focus") + }); + if (ae) { + ae.focus() + document.activeElement = current_elem = ae; + ae.parentElement.classList.add("focus") + } else { + document.activeElement.parentElement.classList.add("focus") + } +} + +function reset() { + resultsAvailable = false; + resList.innerHTML = sInput.value = ''; // clear inputbox and searchResults + sInput.focus(); // shift focus to input box +} + +// execute search as each character is typed +sInput.onkeyup = function (e) { + // run a search query (for "term") every time a letter is typed + // in the search box + if (fuse) { + let results; + if (params.fuseOpts) { + results = fuse.search(this.value.trim(), {limit: params.fuseOpts.limit}); // the actual query being run using fuse.js along with options + } else { + results = fuse.search(this.value.trim()); // the actual query being run using fuse.js + } + if (results.length !== 0) { + // build our html if result exists + let resultSet = ''; // our results bucket + + for (let item in results) { + resultSet += `
{{ . | markdownify }}
{{- end }} + {{- end }} +Nam quis, varius proin, nulla gravida, ante bibendum integer erat. Tristique semper, dignissim aliquet, consectetur rhoncus, justo nulla ut velit. Nibh amet, rutrum justo, nullam nunc, convallis interdum lectus tortor. Urna aenean, finibus diam, ligula mi, justo proin proin congue. Convallis eros, nulla sem, quam ultricies, arcu consectetur dui bibendum.
+At nisl, tellus tincidunt, quis dolor, pellentesque lectus neque varius. Enim donec, iaculis cras, magnis vulputate, at posuere vel lectus. Gravida sed, dignissim arcu, risus venenatis, amet lectus facilisis dui. Euismod eros, fringilla tortor, praesent velit, nulla pellentesque faucibus eu. Nullam non, dictumst dolor, ligula in, bibendum ac dignissim penatibus.
+Nam velit, et convallis, nibh gravida, dignissim neque luctus laoreet. Dui suspendisse, vestibulum morbi, vulputate faucibus, convallis pharetra dapibus suspendisse. Porta at, phasellus metus, tristique nulla, eget quis nunc tempor. Faucibus efficitur, porttitor odio, arcu nunc, nulla purus ante dignissim. Habitasse hac, at lobortis, feugiat ut, imperdiet efficitur dui nunc.
+ + +Nam quis, varius proin, nulla gravida, ante bibendum integer erat. Tristique semper, dignissim aliquet, consectetur rhoncus, justo nulla ut velit. Nibh amet, rutrum justo, nullam nunc, convallis interdum lectus tortor. Urna aenean, finibus diam, ligula mi, justo proin proin congue. Convallis eros, nulla sem, quam ultricies, arcu consectetur dui bibendum.
+At nisl, tellus tincidunt, quis dolor, pellentesque lectus neque varius. Enim donec, iaculis cras, magnis vulputate, at posuere vel lectus. Gravida sed, dignissim arcu, risus venenatis, amet lectus facilisis dui. Euismod eros, fringilla tortor, praesent velit, nulla pellentesque faucibus eu. Nullam non, dictumst dolor, ligula in, bibendum ac dignissim penatibus.
+Nam velit, et convallis, nibh gravida, dignissim neque luctus laoreet. Dui suspendisse, vestibulum morbi, vulputate faucibus, convallis pharetra dapibus suspendisse. Porta at, phasellus metus, tristique nulla, eget quis nunc tempor. Faucibus efficitur, porttitor odio, arcu nunc, nulla purus ante dignissim. Habitasse hac, at lobortis, feugiat ut, imperdiet efficitur dui nunc.
+ + +