- {props.meta.tags && } + {% if page.subtitle %}

{% endif %} + {% if page.tags %}{% include tags.html tags=page.tags %}{% endif %}

- - + +

- +

diff --git a/_plugins/tag-color.rb b/_plugins/tag-color.rb new file mode 100644 index 0000000..3927abf --- /dev/null +++ b/_plugins/tag-color.rb @@ -0,0 +1,13 @@ +module TagColor + def to_tag_color(str) + sum = 0 + str.chars.each do |i| + sum += ?i.ord + sum %= 360 + end + sum + end +end + +Liquid::Template.register_filter(TagColor) + diff --git a/_posts/2021-04-13-software.md b/_posts/2021-04-13-software.md index 9cad319..d2cda4a 100644 --- a/_posts/2021-04-13-software.md +++ b/_posts/2021-04-13-software.md @@ -1,8 +1,6 @@ --- title: Software that I use subtitle: Desktop software, server software, phone apps, everything -author: Loek -date: April 13 2021 tags: - software - open diff --git a/_posts/2021-04-24-connect4.md b/_posts/2021-04-24-connect4.md index c1e0c69..6c5c329 100644 --- a/_posts/2021-04-24-connect4.md +++ b/_posts/2021-04-24-connect4.md @@ -1,8 +1,5 @@ --- title: Connect 4 beta live! -subtitle: Announcement post -author: Loek -date: April 24 2021 tags: - connect 4 - beta diff --git a/_posts/2021-04-28-git.md b/_posts/2021-04-28-git.md index 17d43dc..48de24b 100644 --- a/_posts/2021-04-28-git.md +++ b/_posts/2021-04-28-git.md @@ -1,8 +1,6 @@ --- title: My git setup subtitle: How I use git on my server -author: Loek -date: April 28 2021 tags: - git - server diff --git a/_posts/2021-07-13-redpwn2021.md b/_posts/2021-07-13-redpwn2021.md index 3c1a991..df9da29 100644 --- a/_posts/2021-07-13-redpwn2021.md +++ b/_posts/2021-07-13-redpwn2021.md @@ -1,10 +1,6 @@ --- title: redpwnCTF 2021 subtitle: A noob's perspective -authors: - - Loek - - Willem -date: July 13 2021 tags: - hacking - CTF diff --git a/_posts/2021-07-22-scoop.md b/_posts/2021-07-22-scoop.md index c0ef34d..36c7cc2 100644 --- a/_posts/2021-07-22-scoop.md +++ b/_posts/2021-07-22-scoop.md @@ -1,8 +1,6 @@ --- title: Scoop guide subtitle: Handbook and quick explanations -author: Loek -date: July 22 2021 tags: - windows - normie diff --git a/_posts/2021-08-17-homeauto.md b/_posts/2021-08-17-homeauto.md index 5a89988..4836a34 100644 --- a/_posts/2021-08-17-homeauto.md +++ b/_posts/2021-08-17-homeauto.md @@ -1,8 +1,6 @@ --- title: My home automation adventure subtitle: How to make your house a shitty utopia -author: Loek -date: August 17 2021 tags: - home - automation diff --git a/_posts/2021-09-09-avanswifi.md b/_posts/2021-09-09-avanswifi.md index 4359bac..95cfbfe 100644 --- a/_posts/2021-09-09-avanswifi.md +++ b/_posts/2021-09-09-avanswifi.md @@ -1,8 +1,6 @@ --- title: Avans wifi setup subtitle: How to use Avans eduroam with NetworkManager -author: Loek -date: September 9 2021 tags: - software cover: /img/avanswifi.png diff --git a/_posts/2022-01-24-latex.md b/_posts/2022-01-24-latex.md index 4db2ec1..11db094 100644 --- a/_posts/2022-01-24-latex.md +++ b/_posts/2022-01-24-latex.md @@ -1,8 +1,6 @@ --- title: My LaTeX setup subtitle: How to set up a simple LaTeX environment with XeTeX and latexmk -author: Loek -date: January 24 2022 tags: - software - latex diff --git a/css/button.css b/css/button.css new file mode 100644 index 0000000..9efe41f --- /dev/null +++ b/css/button.css @@ -0,0 +1,22 @@ +.button { + padding: 12px; + min-width: 200px; + text-align: center; + width: min-content; + + display: block !important; + margin: 0 auto var(--page-margins) auto; + + font-size: 1rem; + font-family: "Inter", sans-serif; + font-weight: 600; + + border-radius: 8px; + border: 0; + + cursor: pointer; +} + +a.button { min-width: calc(200px - 2 * 12px); } +a.button::after { display: none; } + diff --git a/css/card.css b/css/card.css new file mode 100644 index 0000000..f49b40e --- /dev/null +++ b/css/card.css @@ -0,0 +1,29 @@ +.postCard { + background-color: var(--bg-alt); + padding: 12px; + border-radius: 8px; + + overflow-x: hidden; + color: var(--fg) !important; +} + +.postCard::after { + display: none; +} + +.postCard .cover { + width: 100%; + border-radius: 6px; + max-height: 220px; + object-fit: cover; + margin-bottom: 6px; +} + +.postCard .title { + font-size: 24px; +} + +.postCard .subtitle { + font-weight: 500; +} + diff --git a/css/code.css b/css/code.css new file mode 100644 index 0000000..dde7bdb --- /dev/null +++ b/css/code.css @@ -0,0 +1,49 @@ +pre { + background-color: var(--bg-alt); + border-radius: 6px; + padding: 6px; +} + +.prismjs code { color: var(--magnolia); } + +.prismjs .token.comment +{ font-style: italic; } + +.prismjs .token.keyword, +.prismjs .token.annotation +{ font-weight: 700; } + +.prismjs .token.string, +.prismjs .token.number +{ color: var(--fg); } + +.prismjs .token.comment { + color: var(--heliotrope-gray); + opacity: .7; +} + +.prismjs .token.keyword +{ color: var(--fire-opal); } + +.prismjs .token.annotation +{ color: var(--cyan-process); } + +.prismjs .token.punctuation:not(.annotation) +.prismjs .token.operator +{ opacity: .8; } + +@media (prefers-color-scheme: light) { + pre { background-color: var(--heliotrope-gray); } + + .prismjs code { color: var(--fg); } + + .prismjs .token.string, + .prismjs .token.number + { opacity: .8; } + + .prismjs .token.comment { + color: var(--oxford-blue); + opacity: .5; + } +} + diff --git a/css/globals.css b/css/globals.css new file mode 100644 index 0000000..5ccd71f --- /dev/null +++ b/css/globals.css @@ -0,0 +1,49 @@ +html, body { + padding: 0; + margin: 0; + + background-color: var(--bg); + color: var(--fg); + + hyphens: auto; +} + +.contentWrapper a { + color: var(--links); + text-decoration: none; + position: relative; + display: inline-block; +} + +.contentWrapper a::after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + height: 1px; + width: 0%; + transition: width; + transition-duration: 150ms; + background-color: var(--links); +} + +.contentWrapper a:hover::after { + width: 100%; +} + +::-webkit-scrollbar { + width: 12px; + height: 12px; +} + +::-webkit-scrollbar-thumb { + border-radius: 6px; + border: 4px solid var(--bg); +} + +:focus { outline: none; } + +li { + margin-bottom: 6px; +} + diff --git a/css/image.css b/css/image.css new file mode 100644 index 0000000..d354ab9 --- /dev/null +++ b/css/image.css @@ -0,0 +1,16 @@ +.image, +.image img { + width: 100%; + max-width: 500px; +} + +.image { + margin: 0 auto var(--page-margins) auto; +} + +.image p { + text-align: left; + opacity: .8; + font-style: italic; + margin-top: 12px; +} diff --git a/css/layout.css b/css/layout.css new file mode 100644 index 0000000..706f5c9 --- /dev/null +++ b/css/layout.css @@ -0,0 +1,143 @@ +:root { + --collapse-horizontal-gap: 0; + --nav-width: calc(200px * (1 - var(--collapse-horizontal-gap))) !important; + --page-width: 700px; + --page-margins: 24px; +} + +.centeredPage { + transition-property: gap, max-width; + transition-duration: 500ms; + + max-width: calc(var(--nav-width) + var(--page-width) + var(--page-margins)); + margin: 0 auto; + margin-top: 96px; + padding: 0 var(--page-margins); + + display: grid; + grid-auto-rows: auto; + + gap: var(--page-margins) calc((1 - var(--collapse-horizontal-gap)) * var(--page-margins)); +} + +.titleWrapper { + grid-column: 2; + grid-row: 1; +} +.titleWrapper > * { + margin: 0; + word-break: break-word; +} + +.navAreaWrapper { + grid-column: 1; + grid-row: 2; + + transition-property: width; + transition-duration: 500ms; + width: var(--nav-width); +} +.navAreaWrapper > .sticky { + position: sticky; + top: var(--page-margins); + bottom: var(--page-margins); + max-height: calc(100vh - 2 * var(--page-margins)); + + overflow-y: scroll; + overflow-x: hidden; + + border-radius: 8px; +} + +.contentWrapper { + grid-column: 2; + grid-row: 2; + + overflow-x: hidden; +} +.contentWrapper > * { + margin: 0; + margin-bottom: var(--page-margins); +} + +.contentWrapper p { + text-align: justify; +} + +.contentWrapper table, +.contentWrapper code, +.contentWrapper pre { + overflow-x: scroll; +} + +.recentPosts { + display: grid; + grid-gap: 12px; + grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) ); +} + +.mobileNav { + display: none; +} + +@media screen and (max-device-width: 550px) { + .centeredPage { + grid-template-columns: 0 1fr; + gap: var(--page-margins) 0; + padding: 0 12px; + } + + .navAreaWrapper { + grid-column: none; + grid-row: none; + + width: 100vw; + + position: fixed; + inset: 0px 0px 0px 0px; + + z-index: 2; + + transition-property: opacity; + transition-duration: .1s; + + opacity: 0; + pointer-events: none; + backdrop-filter: blur(50px); + } + + .navAreaWrapper:before { + content: ''; + position: absolute; + inset: 0px 0px 0px 0px; + + background-color: var(--bg-alt); + opacity: .7; + } + + .navAreaWrapper.navVisible { + pointer-events: initial; + opacity: 1; + } + + .navAreaWrapper .globalLinks { + display: none; + } + + .navAreaWrapper > .sticky { + position: absolute; + inset: 0px 0px 0px 0px; + + padding: 24px; + overflow-y: scroll; + } + + .mobileNav { + display: inline-block; + position: fixed; + bottom: 24px; + right: 24px; + z-index: 5; + } +} + diff --git a/css/navbar.css b/css/navbar.css new file mode 100644 index 0000000..26d0b1d --- /dev/null +++ b/css/navbar.css @@ -0,0 +1,143 @@ +.navbarItem .inner { + background-color: var(--bg-alt); + color: var(--fg); + + padding: 8px; + border-radius: 8px; + + transition-property: background-color, color; + transition-duration: .15s; + + position: relative; +} + +.navbarItem { + text-decoration: none; + display: block; +} + +.navbarItem .icon { display: inline-block; } + +.navbarItem .icon .collapseIcon { + transform: rotate(0deg); + transition-property: transform; + transition-duration: .3s; +} +.navbarItem .icon .collapseIcon.collapsed { + transform: rotate(-90deg); +} + +.navbarItem .icon, +.navbarItem .title { + cursor: pointer; +} + +.navbarItem.indentLevel0 { margin-bottom: 12px; } + +.navbarItem.active .inner, +.navbarItem.link:hover .inner { + background-color: var(--fg-alt); + color: var(--bg-alt); +} + +.navbarItem.chapter .inner, +.navbarItem.pinned .inner { + background-color: transparent; + color: var(--fg); + + padding: 4px 0; + overflow: visible; +} + +.navbarItem.pinned .inner .title { + margin: 0; + font-style: italic; + opacity: .8; + color: var(--fg-alt) +} +.navbarItem.pinned * { cursor: default !important; } + +.navbarItem .title { + vertical-align: top; + margin-left: 8px; + margin-top: 3px; + display: inline-block; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + width: calc(100% - 32px); +} +.navbarItem.chapter .title { margin-top: 1px; } + +.navbarItem.chapter .chapterChildren { + transition-property: height; + transition-duration: .3s; + + overflow: hidden; +} + +.navbarItem.chapter.childrenCollapsed > .chapterChildren { height: 0; } +.navbarItem.chapter > .chapterChildren { height: var(--children-height); } + +.navbarItem .inner, +.navbarItem .icon, +.navbarItem .icon .collapseIcon { + height: 24px; +} + +.navbarItem > div > svg { vertical-align: super; } + +@media (prefers-color-scheme: light) { + .navbarItem.active .inner, + .navbarItem.link:hover .inner { + background-color: var(--fg); + } + + .navbarItem.pinned .inner .title { + opacity: .6; + color: var(--fg-alt); + } +} + +.mobileNav { + width: 48px; + text-align: center; + line-height: 0; +} + +.mobileNav .button:last-child { + margin-bottom: 0; +} + +.mobileNav .button { + padding: 12px; + display: inline-block !important; + min-width: 0; + border-radius: 24px; + margin: 0; + box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 25%); + + width: 24px; + height: 24px; + position: relative; +} + +.mobileNav .button > svg { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + fill: currentColor !important; +} + +.mobileNav .button.small { + padding: 6px; + margin-bottom: 12px; + + opacity: 0; + transition: opacity .3s; +} + +.mobileNav.open .button.small { + opacity: 1; +} diff --git a/css/print.css b/css/print.css new file mode 100644 index 0000000..4867c83 --- /dev/null +++ b/css/print.css @@ -0,0 +1,19 @@ +@media print { + :root { + --nav-width: 0px; + + --bg: #ffffff; + --fg: #000000; + + --heliotrope-gray: var(--bg); + --purple-navy: #989abb; + + --fire-opal: #ba3321; + --cyan-process: #397889; + --forest-green-crayola: #376848; + + } + + .centeredPage { grid-gap: var(--page-margins) 0; } + pre { border: solid 2px var(--fg); } +} diff --git a/css/search.css b/css/search.css new file mode 100644 index 0000000..e424b6b --- /dev/null +++ b/css/search.css @@ -0,0 +1,67 @@ +.searchBar { + background-color: var(--fg-alt); + border-radius: 8px; + padding: 12px; + margin-bottom: 24px; +} + +.searchBar .input { + background-color: transparent; + border: 0; + + color: var(--bg); + + margin-left: 12px; + width: calc(100% - 48px - 12px); + padding: 14px 0; + + vertical-align: top; +} + +.searchBar .input::placeholder { + font-style: italic; + opacity: .75; + + color: var(--bg); +} + +.searchBar .button { + margin: 0; + display: inline-block !important; + line-height: 0; + min-width: unset; + background-color: var(--bg); + color: var(--fg-alt) !important; +} + +.searchResults .post::after { + display: none; +} + +.searchResults .post { + display: block; + border-radius: 8px; + + padding: 12px; + margin-bottom: 12px; + background-color: var(--bg-alt); + + color: var(--fg); +} + +.searchResults .post .title, +.searchResults .post .subtitle, +.searchResults .post .authordate { + margin: 4px 0; +} + +.searchResults .post .authordate { + font-style: italic; + opacity: .75; +} + +@media (prefers-color-scheme: light) { + .searchBar { background-color: var(--fg); } + .searchBar .button { color: var(--fg) !important; } +} + diff --git a/css/tags.css b/css/tags.css new file mode 100644 index 0000000..2468d3f --- /dev/null +++ b/css/tags.css @@ -0,0 +1,45 @@ +.tags { + margin-top: 12px; +} + +.tags .tag { + --tag-color: hsl(var(--tag-hue), 75%, 70%); + + padding: 4px 12px; + border-radius: 999px; + + text-decoration: none; + color: var(--fg); + + box-shadow: inset 0 0 0 2px var(--tag-color); + + position: relative; + z-index: 1; + + margin-top: 6px; + display: inline-block; +} + +@media (prefers-color-scheme: light) { + .tags .tag { + --tag-color: hsl(var(--tag-hue), 50%, 40%); + } +} + +.tags .tag::after { display: none; } + +.tags .tag::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: -1; + + border-radius: 999px; + background-color: var(--tag-color); + opacity: .25; +} + +.tags > * { margin-right: 6px; } diff --git a/css/theme.css b/css/theme.css new file mode 100644 index 0000000..c3a8dee --- /dev/null +++ b/css/theme.css @@ -0,0 +1,110 @@ +:root { + --almond: #F4DEC9; + --heliotrope-gray: #A69CAC; + --purple-navy: #474973; + --oxford-blue: #161B33; + --xiketic: #0D0C1A; + --magnolia: #EFE9F4; + + --fire-opal: #EE6352; + --cyan-process: #08B2E3; + --forest-green-crayola: #57A773; + + --bg: var(--xiketic); + --fg: var(--almond); + + --bg-alt: var(--oxford-blue); + --fg-alt: var(--heliotrope-gray); + --links: var(--fire-opal); +} + +html, +.searchBar .input { + font-family: "Inter", sans-serif; + font-size: 16px; +} + +code, pre { + font-family: "JetBrainsMono", monospace; + font-size: 12px; +} + +.subtile { + font-style: italic; + opacity: .75; + color: var(--heliotrope-gray); +} + +h1, h2, h3 { + font-weight: 700; + margin: 0; +} + +h1 { font-size: 64px; } +h2 { font-size: 48px; } +h3 { font-size: 32px; } + +::-webkit-scrollbar-track { background-color: var(--bg); } +::-webkit-scrollbar-thumb { background-color: var(--purple-navy); } +::-webkit-scrollbar-thumb:hover { background-color: var(--fg); } + +.button { + background-color: var(--fire-opal); + color: var(--fg) !important; +} + +::selection { + background-color: var(--fire-opal); +} + +blockquote { + position: relative; + padding-left: 12px; + font-style: italic; + color: var(--fg-alt); +} + +blockquote:before { + position: absolute; + content: ''; + top: 0; + bottom: 0; + left: 0; + width: 3px; + background-color: var(--cyan-process); +} + +.mobileNav .button { + background-color: var(--fire-opal); + color: var(--fg); +} + +.mobileNav .button.small { + background-color: var(--fg-alt); + color: var(--bg) !important; +} + +@media (prefers-color-scheme: light) { + :root { + --heliotrope-gray: #dbdbe6; + --purple-navy: #989abb; + + --fire-opal: #ba3321; + --cyan-process: #397889; + --forest-green-crayola: #376848; + + --bg: var(--magnolia); + --fg: var(--xiketic); + --bg-alt: var(--heliotrope-gray); + --fg-alt: var(--oxford-blue); + } + + .subtile { + opacity: .6; + color: var(--fg); + } + + blockquote { opacity: .8; } + .button { color: var(--bg) !important; } +} + diff --git a/styles/button.css b/styles/button.css deleted file mode 100644 index 9efe41f..0000000 --- a/styles/button.css +++ /dev/null @@ -1,22 +0,0 @@ -.button { - padding: 12px; - min-width: 200px; - text-align: center; - width: min-content; - - display: block !important; - margin: 0 auto var(--page-margins) auto; - - font-size: 1rem; - font-family: "Inter", sans-serif; - font-weight: 600; - - border-radius: 8px; - border: 0; - - cursor: pointer; -} - -a.button { min-width: calc(200px - 2 * 12px); } -a.button::after { display: none; } - diff --git a/styles/card.css b/styles/card.css deleted file mode 100644 index f49b40e..0000000 --- a/styles/card.css +++ /dev/null @@ -1,29 +0,0 @@ -.postCard { - background-color: var(--bg-alt); - padding: 12px; - border-radius: 8px; - - overflow-x: hidden; - color: var(--fg) !important; -} - -.postCard::after { - display: none; -} - -.postCard .cover { - width: 100%; - border-radius: 6px; - max-height: 220px; - object-fit: cover; - margin-bottom: 6px; -} - -.postCard .title { - font-size: 24px; -} - -.postCard .subtitle { - font-weight: 500; -} - diff --git a/styles/code.css b/styles/code.css deleted file mode 100644 index dde7bdb..0000000 --- a/styles/code.css +++ /dev/null @@ -1,49 +0,0 @@ -pre { - background-color: var(--bg-alt); - border-radius: 6px; - padding: 6px; -} - -.prismjs code { color: var(--magnolia); } - -.prismjs .token.comment -{ font-style: italic; } - -.prismjs .token.keyword, -.prismjs .token.annotation -{ font-weight: 700; } - -.prismjs .token.string, -.prismjs .token.number -{ color: var(--fg); } - -.prismjs .token.comment { - color: var(--heliotrope-gray); - opacity: .7; -} - -.prismjs .token.keyword -{ color: var(--fire-opal); } - -.prismjs .token.annotation -{ color: var(--cyan-process); } - -.prismjs .token.punctuation:not(.annotation) -.prismjs .token.operator -{ opacity: .8; } - -@media (prefers-color-scheme: light) { - pre { background-color: var(--heliotrope-gray); } - - .prismjs code { color: var(--fg); } - - .prismjs .token.string, - .prismjs .token.number - { opacity: .8; } - - .prismjs .token.comment { - color: var(--oxford-blue); - opacity: .5; - } -} - diff --git a/styles/globals.css b/styles/globals.css deleted file mode 100644 index 5ccd71f..0000000 --- a/styles/globals.css +++ /dev/null @@ -1,49 +0,0 @@ -html, body { - padding: 0; - margin: 0; - - background-color: var(--bg); - color: var(--fg); - - hyphens: auto; -} - -.contentWrapper a { - color: var(--links); - text-decoration: none; - position: relative; - display: inline-block; -} - -.contentWrapper a::after { - content: ''; - position: absolute; - left: 0; - bottom: 0; - height: 1px; - width: 0%; - transition: width; - transition-duration: 150ms; - background-color: var(--links); -} - -.contentWrapper a:hover::after { - width: 100%; -} - -::-webkit-scrollbar { - width: 12px; - height: 12px; -} - -::-webkit-scrollbar-thumb { - border-radius: 6px; - border: 4px solid var(--bg); -} - -:focus { outline: none; } - -li { - margin-bottom: 6px; -} - diff --git a/styles/image.css b/styles/image.css deleted file mode 100644 index d354ab9..0000000 --- a/styles/image.css +++ /dev/null @@ -1,16 +0,0 @@ -.image, -.image img { - width: 100%; - max-width: 500px; -} - -.image { - margin: 0 auto var(--page-margins) auto; -} - -.image p { - text-align: left; - opacity: .8; - font-style: italic; - margin-top: 12px; -} diff --git a/styles/layout.css b/styles/layout.css deleted file mode 100644 index 706f5c9..0000000 --- a/styles/layout.css +++ /dev/null @@ -1,143 +0,0 @@ -:root { - --collapse-horizontal-gap: 0; - --nav-width: calc(200px * (1 - var(--collapse-horizontal-gap))) !important; - --page-width: 700px; - --page-margins: 24px; -} - -.centeredPage { - transition-property: gap, max-width; - transition-duration: 500ms; - - max-width: calc(var(--nav-width) + var(--page-width) + var(--page-margins)); - margin: 0 auto; - margin-top: 96px; - padding: 0 var(--page-margins); - - display: grid; - grid-auto-rows: auto; - - gap: var(--page-margins) calc((1 - var(--collapse-horizontal-gap)) * var(--page-margins)); -} - -.titleWrapper { - grid-column: 2; - grid-row: 1; -} -.titleWrapper > * { - margin: 0; - word-break: break-word; -} - -.navAreaWrapper { - grid-column: 1; - grid-row: 2; - - transition-property: width; - transition-duration: 500ms; - width: var(--nav-width); -} -.navAreaWrapper > .sticky { - position: sticky; - top: var(--page-margins); - bottom: var(--page-margins); - max-height: calc(100vh - 2 * var(--page-margins)); - - overflow-y: scroll; - overflow-x: hidden; - - border-radius: 8px; -} - -.contentWrapper { - grid-column: 2; - grid-row: 2; - - overflow-x: hidden; -} -.contentWrapper > * { - margin: 0; - margin-bottom: var(--page-margins); -} - -.contentWrapper p { - text-align: justify; -} - -.contentWrapper table, -.contentWrapper code, -.contentWrapper pre { - overflow-x: scroll; -} - -.recentPosts { - display: grid; - grid-gap: 12px; - grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) ); -} - -.mobileNav { - display: none; -} - -@media screen and (max-device-width: 550px) { - .centeredPage { - grid-template-columns: 0 1fr; - gap: var(--page-margins) 0; - padding: 0 12px; - } - - .navAreaWrapper { - grid-column: none; - grid-row: none; - - width: 100vw; - - position: fixed; - inset: 0px 0px 0px 0px; - - z-index: 2; - - transition-property: opacity; - transition-duration: .1s; - - opacity: 0; - pointer-events: none; - backdrop-filter: blur(50px); - } - - .navAreaWrapper:before { - content: ''; - position: absolute; - inset: 0px 0px 0px 0px; - - background-color: var(--bg-alt); - opacity: .7; - } - - .navAreaWrapper.navVisible { - pointer-events: initial; - opacity: 1; - } - - .navAreaWrapper .globalLinks { - display: none; - } - - .navAreaWrapper > .sticky { - position: absolute; - inset: 0px 0px 0px 0px; - - padding: 24px; - overflow-y: scroll; - } - - .mobileNav { - display: inline-block; - position: fixed; - bottom: 24px; - right: 24px; - z-index: 5; - } -} - diff --git a/styles/navbar.css b/styles/navbar.css deleted file mode 100644 index 26d0b1d..0000000 --- a/styles/navbar.css +++ /dev/null @@ -1,143 +0,0 @@ -.navbarItem .inner { - background-color: var(--bg-alt); - color: var(--fg); - - padding: 8px; - border-radius: 8px; - - transition-property: background-color, color; - transition-duration: .15s; - - position: relative; -} - -.navbarItem { - text-decoration: none; - display: block; -} - -.navbarItem .icon { display: inline-block; } - -.navbarItem .icon .collapseIcon { - transform: rotate(0deg); - transition-property: transform; - transition-duration: .3s; -} -.navbarItem .icon .collapseIcon.collapsed { - transform: rotate(-90deg); -} - -.navbarItem .icon, -.navbarItem .title { - cursor: pointer; -} - -.navbarItem.indentLevel0 { margin-bottom: 12px; } - -.navbarItem.active .inner, -.navbarItem.link:hover .inner { - background-color: var(--fg-alt); - color: var(--bg-alt); -} - -.navbarItem.chapter .inner, -.navbarItem.pinned .inner { - background-color: transparent; - color: var(--fg); - - padding: 4px 0; - overflow: visible; -} - -.navbarItem.pinned .inner .title { - margin: 0; - font-style: italic; - opacity: .8; - color: var(--fg-alt) -} -.navbarItem.pinned * { cursor: default !important; } - -.navbarItem .title { - vertical-align: top; - margin-left: 8px; - margin-top: 3px; - display: inline-block; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - width: calc(100% - 32px); -} -.navbarItem.chapter .title { margin-top: 1px; } - -.navbarItem.chapter .chapterChildren { - transition-property: height; - transition-duration: .3s; - - overflow: hidden; -} - -.navbarItem.chapter.childrenCollapsed > .chapterChildren { height: 0; } -.navbarItem.chapter > .chapterChildren { height: var(--children-height); } - -.navbarItem .inner, -.navbarItem .icon, -.navbarItem .icon .collapseIcon { - height: 24px; -} - -.navbarItem > div > svg { vertical-align: super; } - -@media (prefers-color-scheme: light) { - .navbarItem.active .inner, - .navbarItem.link:hover .inner { - background-color: var(--fg); - } - - .navbarItem.pinned .inner .title { - opacity: .6; - color: var(--fg-alt); - } -} - -.mobileNav { - width: 48px; - text-align: center; - line-height: 0; -} - -.mobileNav .button:last-child { - margin-bottom: 0; -} - -.mobileNav .button { - padding: 12px; - display: inline-block !important; - min-width: 0; - border-radius: 24px; - margin: 0; - box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 25%); - - width: 24px; - height: 24px; - position: relative; -} - -.mobileNav .button > svg { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - fill: currentColor !important; -} - -.mobileNav .button.small { - padding: 6px; - margin-bottom: 12px; - - opacity: 0; - transition: opacity .3s; -} - -.mobileNav.open .button.small { - opacity: 1; -} diff --git a/styles/print.css b/styles/print.css deleted file mode 100644 index 4867c83..0000000 --- a/styles/print.css +++ /dev/null @@ -1,19 +0,0 @@ -@media print { - :root { - --nav-width: 0px; - - --bg: #ffffff; - --fg: #000000; - - --heliotrope-gray: var(--bg); - --purple-navy: #989abb; - - --fire-opal: #ba3321; - --cyan-process: #397889; - --forest-green-crayola: #376848; - - } - - .centeredPage { grid-gap: var(--page-margins) 0; } - pre { border: solid 2px var(--fg); } -} diff --git a/styles/search.css b/styles/search.css deleted file mode 100644 index e424b6b..0000000 --- a/styles/search.css +++ /dev/null @@ -1,67 +0,0 @@ -.searchBar { - background-color: var(--fg-alt); - border-radius: 8px; - padding: 12px; - margin-bottom: 24px; -} - -.searchBar .input { - background-color: transparent; - border: 0; - - color: var(--bg); - - margin-left: 12px; - width: calc(100% - 48px - 12px); - padding: 14px 0; - - vertical-align: top; -} - -.searchBar .input::placeholder { - font-style: italic; - opacity: .75; - - color: var(--bg); -} - -.searchBar .button { - margin: 0; - display: inline-block !important; - line-height: 0; - min-width: unset; - background-color: var(--bg); - color: var(--fg-alt) !important; -} - -.searchResults .post::after { - display: none; -} - -.searchResults .post { - display: block; - border-radius: 8px; - - padding: 12px; - margin-bottom: 12px; - background-color: var(--bg-alt); - - color: var(--fg); -} - -.searchResults .post .title, -.searchResults .post .subtitle, -.searchResults .post .authordate { - margin: 4px 0; -} - -.searchResults .post .authordate { - font-style: italic; - opacity: .75; -} - -@media (prefers-color-scheme: light) { - .searchBar { background-color: var(--fg); } - .searchBar .button { color: var(--fg) !important; } -} - diff --git a/styles/tags.css b/styles/tags.css deleted file mode 100644 index 2468d3f..0000000 --- a/styles/tags.css +++ /dev/null @@ -1,45 +0,0 @@ -.tags { - margin-top: 12px; -} - -.tags .tag { - --tag-color: hsl(var(--tag-hue), 75%, 70%); - - padding: 4px 12px; - border-radius: 999px; - - text-decoration: none; - color: var(--fg); - - box-shadow: inset 0 0 0 2px var(--tag-color); - - position: relative; - z-index: 1; - - margin-top: 6px; - display: inline-block; -} - -@media (prefers-color-scheme: light) { - .tags .tag { - --tag-color: hsl(var(--tag-hue), 50%, 40%); - } -} - -.tags .tag::after { display: none; } - -.tags .tag::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: -1; - - border-radius: 999px; - background-color: var(--tag-color); - opacity: .25; -} - -.tags > * { margin-right: 6px; } diff --git a/styles/theme.css b/styles/theme.css deleted file mode 100644 index c3a8dee..0000000 --- a/styles/theme.css +++ /dev/null @@ -1,110 +0,0 @@ -:root { - --almond: #F4DEC9; - --heliotrope-gray: #A69CAC; - --purple-navy: #474973; - --oxford-blue: #161B33; - --xiketic: #0D0C1A; - --magnolia: #EFE9F4; - - --fire-opal: #EE6352; - --cyan-process: #08B2E3; - --forest-green-crayola: #57A773; - - --bg: var(--xiketic); - --fg: var(--almond); - - --bg-alt: var(--oxford-blue); - --fg-alt: var(--heliotrope-gray); - --links: var(--fire-opal); -} - -html, -.searchBar .input { - font-family: "Inter", sans-serif; - font-size: 16px; -} - -code, pre { - font-family: "JetBrainsMono", monospace; - font-size: 12px; -} - -.subtile { - font-style: italic; - opacity: .75; - color: var(--heliotrope-gray); -} - -h1, h2, h3 { - font-weight: 700; - margin: 0; -} - -h1 { font-size: 64px; } -h2 { font-size: 48px; } -h3 { font-size: 32px; } - -::-webkit-scrollbar-track { background-color: var(--bg); } -::-webkit-scrollbar-thumb { background-color: var(--purple-navy); } -::-webkit-scrollbar-thumb:hover { background-color: var(--fg); } - -.button { - background-color: var(--fire-opal); - color: var(--fg) !important; -} - -::selection { - background-color: var(--fire-opal); -} - -blockquote { - position: relative; - padding-left: 12px; - font-style: italic; - color: var(--fg-alt); -} - -blockquote:before { - position: absolute; - content: ''; - top: 0; - bottom: 0; - left: 0; - width: 3px; - background-color: var(--cyan-process); -} - -.mobileNav .button { - background-color: var(--fire-opal); - color: var(--fg); -} - -.mobileNav .button.small { - background-color: var(--fg-alt); - color: var(--bg) !important; -} - -@media (prefers-color-scheme: light) { - :root { - --heliotrope-gray: #dbdbe6; - --purple-navy: #989abb; - - --fire-opal: #ba3321; - --cyan-process: #397889; - --forest-green-crayola: #376848; - - --bg: var(--magnolia); - --fg: var(--xiketic); - --bg-alt: var(--heliotrope-gray); - --fg-alt: var(--oxford-blue); - } - - .subtile { - opacity: .6; - color: var(--fg); - } - - blockquote { opacity: .8; } - .button { color: var(--bg) !important; } -} - -- cgit v1.2.3

{{ page.title }}