diff options
Diffstat (limited to 'static')
| -rw-r--r-- | static/css/blog.css | 63 | ||||
| -rw-r--r-- | static/css/contact.css | 24 | ||||
| -rw-r--r-- | static/css/globalstyles.css | 120 | ||||
| -rw-r--r-- | static/css/home.css | 27 | ||||
| -rw-r--r-- | static/css/variables.css | 21 | ||||
| -rw-r--r-- | static/fonts/iosevka-medium.woff2 | bin | 0 -> 1208328 bytes | |||
| -rw-r--r-- | static/image/questcompass2-256.png | bin | 54415 -> 0 bytes | |||
| -rw-r--r-- | static/images/steam-deck-arch.jpg | bin | 0 -> 635559 bytes | |||
| -rw-r--r-- | static/images/steam-deck-gparted.jpg | bin | 0 -> 615514 bytes | |||
| -rw-r--r-- | static/images/steam-deck-partitions.jpg | bin | 0 -> 841262 bytes | |||
| -rw-r--r-- | static/scripts/purge.js | 15 | ||||
| -rw-r--r-- | static/scripts/rebuild.js | 14 | ||||
| -rw-r--r-- | static/scripts/spotify.js | 12 |
13 files changed, 191 insertions, 105 deletions
diff --git a/static/css/blog.css b/static/css/blog.css new file mode 100644 index 0000000..2b52dff --- /dev/null +++ b/static/css/blog.css @@ -0,0 +1,63 @@ +#title { + margin: 0 0 3rem 0; +} + +#title > h1 { + margin-bottom: 0.4rem; +} + +figure { + text-align: center; + font-style: italic; + font-size: 0.8rem; +} + +figure img { + max-width: 100%; + border-radius: 10px; +} + +.blog-post, .blog-post-header { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.blog-post-title { + flex-grow: 1; +} + +.blog-post { + padding: 0.2rem 0; +} + +.blog-post-header { + padding: 0.5rem 0; + color: var(--color-text-muted); +} + +.blog-post-header, .blog-post:last-of-type { + border-bottom: 1px dotted var(--color-text-muted); +} + +#content { + position: relative; +} + +#back-header { + position: relative; + font-size: 1rem; + top: -2rem; + font-family: var(--font-monospace); + width: 700px; +} + +#back-container { + position: absolute; + height: 0; + width: 0; +} + +#back-footer { + margin-top: 4rem; +} diff --git a/static/css/contact.css b/static/css/contact.css new file mode 100644 index 0000000..42bd8d9 --- /dev/null +++ b/static/css/contact.css @@ -0,0 +1,24 @@ +.grid-outer { + width: 100%; + display: flex; + flex-direction: column; + gap: 0; +} + +.grid-inner { + display: flex; + flex-direction: row; + align-items: center; + gap: 1rem; +} + +.grid-title { + flex-basis: 250px; + font-family: var(--font-monospace); + color: var(--color-text-muted); + text-align: right; +} + +.grid-content { + width: 100% +} diff --git a/static/css/globalstyles.css b/static/css/globalstyles.css index 1f22f5e..9fbb974 100644 --- a/static/css/globalstyles.css +++ b/static/css/globalstyles.css @@ -1,113 +1,81 @@ -@import url('https://fonts.googleapis.com/css2?family=Cousine:ital,wght@0,400;0,700;1,400;1,700&display=swap'); - -.website-name { - font-size: 10px; - font-weight: 700; - line-height: 1.2; - color: #ddd; - text-shadow: 0px 1px 10px #9876aa; -} +@import 'variables.css'; html, body { border: 0; margin: 0; background-color: #111; color: #ddd; - font-family: 'Cousine', monospace, sans-serif; - line-height: 1.3; + line-height: 1.6; + font-size: 18px; + font-family: var(--font-sans-serif); } -h1, h2, h3, h4, h5, h6 { - color: #cc7832 -} - -.code-block { - background-color: #222; - border: solid 1px #333; - padding: 10px; -} - -#navbar { - background-color: #222; - width: 100%; +#main-container { display: flex; flex-direction: row; - justify-content: flex-start; - align-items: stretch; - gap: 10px; + width: 100%; + max-height: calc(100vh - 1rem); } -.navbar-element { - background-color: #222; +#navbar { + padding: 2rem 1rem 1rem 6rem; display: flex; - height: 30px; - text-align: center; - line-height: 30px; - padding: 10px; -} - -.navbar-element:hover { - background-color: #888; - transition: 0.2s; - cursor: pointer; + flex-direction: column; + align-items: end; + gap: 0.4rem; + font-size: 0.9em; + font-family: var(--font-monospace); } -.navbar-element > a { - color: #fff; - text-decoration: none; +@media only screen and (max-width: 1000px) { + #navbar { + padding-left: 1rem; + } } -.navbar-element > .highlight { - color: #ffc66d; +a { + color: var(--color-text-link); + text-decoration: underline dotted var(--color-text-link); } -#main-container { - max-width: 1200px; - margin: 0 auto; +a:hover { + background-color: var(--color-text-link-bg); } #content-container { - box-shadow: 0px 0px 15px 10px rgba(152,118,170,0.05); + overflow: scroll; + max-height: 100%; + flex-grow: 1; + scrollbar-color: var(--color-scrollbar) var(--color-background); } -#content { - padding: 20px; - max-width: 1200px; - background-color: #2b2b2b; - margin: 0 auto; +::-webkit-scrollbar { + width: 4px; + background: var(--color-background); } -a { - color: #9876aa; - text-decoration: underline; +::-webkit-scrollbar-thumb { + background: var(--color-scrollbar); + border-radius: 2px; } -.highlight { - color: #ffc66d; +::-webkit-scrollbar-corner { + background: none; } -.footer { - font-size: 10px; -} - -.redlink { - color: #ff4136; +#content { + margin: 8rem auto 6rem auto; + width: 700px; } -.box { - border: solid 1px #fff; - padding: 10px; - background-color: rgba(0, 0, 0, 0.1); +h1, h2, h3, h4 { + font-family: var(--font-monospace); } -.box-red { - border: solid 1px rgba(255, 0, 0, 0.5); - padding: 10px; - background-color: rgba(255, 0, 0, 0.2); +.monospace { + font-family: var(--font-monospace); } -table, th, td { - border: 1px solid rgb(200, 200, 200); - border-collapse: collapse; - padding: 10px; +code { + font-family: var(--font-monospace); } diff --git a/static/css/home.css b/static/css/home.css new file mode 100644 index 0000000..4920ee3 --- /dev/null +++ b/static/css/home.css @@ -0,0 +1,27 @@ +.grid-outer { + width: 100%; + display: flex; + flex-direction: column; + gap: 4rem; +} + +.grid-inner { + display: flex; + flex-direction: row; + gap: 1rem; +} + +.grid-title { + flex-basis: 50px; + font-family: var(--font-monospace); + color: var(--color-text-muted); + text-align: right; +} + +.grid-content { + width: 100% +} + +.spacer { + height: 3rem; +} diff --git a/static/css/variables.css b/static/css/variables.css new file mode 100644 index 0000000..123ee30 --- /dev/null +++ b/static/css/variables.css @@ -0,0 +1,21 @@ +@import url('https://fonts.googleapis.com/css2?family=Chivo:wght@200&family=Hind&family=Noto+Sans&display=swap'); + +@font-face { + font-family: 'Iosevka Web'; + src: url(/fonts/iosevka-medium.woff2) format('woff2'); + font-stretch: condensed; + font-display: swap; +} + +:root { + --font-sans-serif: 'Hind', 'Noto Sans', 'Segoe UI', 'Chivo', sans-serif; + --font-monospace: 'Iosevka Web', monospace; + + --color-background: #111; + --color-text: #ddd; + --color-text-muted: #aaa; + --color-text-link: #ff851b; + --color-text-link-bg: rgba(255, 133, 27, 0.2); + + --color-scrollbar: rgba(255, 255, 255, 0.4); +} diff --git a/static/fonts/iosevka-medium.woff2 b/static/fonts/iosevka-medium.woff2 Binary files differnew file mode 100644 index 0000000..e8d53cd --- /dev/null +++ b/static/fonts/iosevka-medium.woff2 diff --git a/static/image/questcompass2-256.png b/static/image/questcompass2-256.png Binary files differdeleted file mode 100644 index 0d0194f..0000000 --- a/static/image/questcompass2-256.png +++ /dev/null diff --git a/static/images/steam-deck-arch.jpg b/static/images/steam-deck-arch.jpg Binary files differnew file mode 100644 index 0000000..35dbb42 --- /dev/null +++ b/static/images/steam-deck-arch.jpg diff --git a/static/images/steam-deck-gparted.jpg b/static/images/steam-deck-gparted.jpg Binary files differnew file mode 100644 index 0000000..70b72af --- /dev/null +++ b/static/images/steam-deck-gparted.jpg diff --git a/static/images/steam-deck-partitions.jpg b/static/images/steam-deck-partitions.jpg Binary files differnew file mode 100644 index 0000000..87d3d9e --- /dev/null +++ b/static/images/steam-deck-partitions.jpg diff --git a/static/scripts/purge.js b/static/scripts/purge.js deleted file mode 100644 index 5ee34f0..0000000 --- a/static/scripts/purge.js +++ /dev/null @@ -1,15 +0,0 @@ -$(() => { - $('#confirm').click(() => { - let page = $('#confirm').data('page'); - $.ajax({ - type: 'GET', - url: `/special/purge/${page}/confirm`, - success: () => { - $('#response').html('<div class=\'box\'>Successfully purged page.</div>'); - }, - error: () => { - $('#response').html('<div class=\'box\'>Could not purge page. Try again later.</div>'); - } - }); - }); -}); diff --git a/static/scripts/rebuild.js b/static/scripts/rebuild.js deleted file mode 100644 index 8fd0e2e..0000000 --- a/static/scripts/rebuild.js +++ /dev/null @@ -1,14 +0,0 @@ -$(() => { - $('#confirm').click(() => { - $.ajax({ - type: 'GET', - url: `/special/rebuild/confirm`, - success: () => { - $('#response').html('<div class=\'box\'>Successfully rebuilt page directory.</div>'); - }, - error: () => { - $('#response').html('<div class=\'box\'>Could not rebuild page directory. Try again later.</div>'); - } - }); - }); -}); diff --git a/static/scripts/spotify.js b/static/scripts/spotify.js new file mode 100644 index 0000000..e6551a8 --- /dev/null +++ b/static/scripts/spotify.js @@ -0,0 +1,12 @@ +const connectWebsocket = () => { + document.getElementById('connection-status').innerHTML = "Connecting..."; + let url = new URL(window.location.href); + url.protocol = url.protocol.replace('http', 'ws'); + const socket = new WebSocket(url); + socket.onmessage = (event) => { + const data = JSON.parse(event.data); + console.log(data); + } +} + +document.addEventListener("DOMContentLoaded", connectWebsocket); |
