diff --git a/astro.config.mjs b/astro.config.mjs index e762ba5..37f396a 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -1,5 +1,25 @@ +import htmx from "astro-htmx"; // @ts-check -import { defineConfig } from 'astro/config'; +import { defineConfig } from "astro/config"; +import alpinejs from "@astrojs/alpinejs"; +import partytown from "@astrojs/partytown"; +import sitemap from "@astrojs/sitemap"; +import bun from "@nurodev/astro-bun"; // https://astro.build/config -export default defineConfig({}); +export default defineConfig({ + site: "https://badblocks.dev", + adapter: bun(), + output: "static", + integrations: [ + alpinejs(), + partytown(), + sitemap(), + htmx(), + // sitemap({ + // filter: (page) => + // page !== "https://example.com/secret-vip-lounge-1/" && + // page !== "https://example.com/secret-vip-lounge-2/", + // }), + ], +}); diff --git a/bun.lockb b/bun.lockb index aae980d..8c6d14d 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index f983d0e..74aa1f6 100644 --- a/package.json +++ b/package.json @@ -1,17 +1,26 @@ { - "name": "", + "name": "badblocks-personal-site", "type": "module", "version": "0.0.1", "scripts": { "dev": "astro dev", + "start": "bun run ./dist/server/entry.mjs", "build": "astro build", "preview": "astro preview", "astro": "astro" }, "dependencies": { - "astro": "^5.16.6" + "@astrojs/alpinejs": "^0.4.9", + "@astrojs/partytown": "^2.1.4", + "@astrojs/sitemap": "^3.6.0", + "@nurodev/astro-bun": "^2.1.2", + "@types/alpinejs": "^3.13.11", + "alpinejs": "^3.15.3", + "astro": "^5.16.6", + "astro-htmx": "^1.0.6", + "htmx.org": "^2.0.8" }, "devDependencies": { "@types/bun": "^1.3.5" } -} \ No newline at end of file +} diff --git a/public/parallax/city-destroyed/0-sky.png b/public/parallax/city-destroyed/0-sky.png new file mode 100644 index 0000000..e1bfa29 Binary files /dev/null and b/public/parallax/city-destroyed/0-sky.png differ diff --git a/public/parallax/city-destroyed/1-buildingssmoke.png b/public/parallax/city-destroyed/1-buildingssmoke.png new file mode 100644 index 0000000..95cfe55 Binary files /dev/null and b/public/parallax/city-destroyed/1-buildingssmoke.png differ diff --git a/public/parallax/city-destroyed/2-water.png b/public/parallax/city-destroyed/2-water.png new file mode 100644 index 0000000..2ff4fdf Binary files /dev/null and b/public/parallax/city-destroyed/2-water.png differ diff --git a/public/parallax/city-destroyed/3-buildings.png b/public/parallax/city-destroyed/3-buildings.png new file mode 100644 index 0000000..1cdf187 Binary files /dev/null and b/public/parallax/city-destroyed/3-buildings.png differ diff --git a/public/parallax/city-destroyed/4-buildingreflection.png b/public/parallax/city-destroyed/4-buildingreflection.png new file mode 100644 index 0000000..9c8dfdd Binary files /dev/null and b/public/parallax/city-destroyed/4-buildingreflection.png differ diff --git a/public/parallax/city-destroyed/5-frontsmoke.png b/public/parallax/city-destroyed/5-frontsmoke.png new file mode 100644 index 0000000..7d30aed Binary files /dev/null and b/public/parallax/city-destroyed/5-frontsmoke.png differ diff --git a/public/bg-clouds.png b/public/parallax/sunnyvale-forest/0-clouds.png similarity index 100% rename from public/bg-clouds.png rename to public/parallax/sunnyvale-forest/0-clouds.png diff --git a/public/bg-mountains.png b/public/parallax/sunnyvale-forest/1-mountains.png similarity index 100% rename from public/bg-mountains.png rename to public/parallax/sunnyvale-forest/1-mountains.png diff --git a/public/bg-trees.png b/public/parallax/sunnyvale-forest/2-trees.png similarity index 100% rename from public/bg-trees.png rename to public/parallax/sunnyvale-forest/2-trees.png diff --git a/public/parallax/winternight/0-sky.png b/public/parallax/winternight/0-sky.png new file mode 100644 index 0000000..d6a3c83 Binary files /dev/null and b/public/parallax/winternight/0-sky.png differ diff --git a/public/parallax/winternight/1-backmountain.png b/public/parallax/winternight/1-backmountain.png new file mode 100644 index 0000000..88f10de Binary files /dev/null and b/public/parallax/winternight/1-backmountain.png differ diff --git a/public/parallax/winternight/2-midmountain.png b/public/parallax/winternight/2-midmountain.png new file mode 100644 index 0000000..6d9d815 Binary files /dev/null and b/public/parallax/winternight/2-midmountain.png differ diff --git a/public/parallax/winternight/3-midforest.png b/public/parallax/winternight/3-midforest.png new file mode 100644 index 0000000..520651c Binary files /dev/null and b/public/parallax/winternight/3-midforest.png differ diff --git a/public/parallax/winternight/4-frontfloor.png b/public/parallax/winternight/4-frontfloor.png new file mode 100644 index 0000000..83b3bb5 Binary files /dev/null and b/public/parallax/winternight/4-frontfloor.png differ diff --git a/public/style.css b/public/style.css new file mode 100644 index 0000000..f586a34 --- /dev/null +++ b/public/style.css @@ -0,0 +1,1172 @@ +/* Global reset */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* Base styles */ +body { + font-family: "Courier New", Courier, monospace; + background-color: var(--bg-color); + color: var(--text-color); + line-height: 1.6; + transition: + background-color 0.3s, + color 0.3s; +} + +header, +main, +footer { + width: 100%; + max-width: 800px; + padding: 20px; +} + +/* Containers */ +.container { + padding: 20px; + border: 2px solid var(--accent-color); + background-color: var(--section-bg); + max-width: 800px; + margin: 20px; + border-radius: 6px; + box-shadow: 0 4px 6px var(--shadow-color); +} + +/* Headers */ +h1, +h2, +h3, +h4, +h5, +h6 { + margin-bottom: 10px; + font-weight: normal; + text-transform: uppercase; + border-bottom: 1px solid var(--border-color); + padding-bottom: 5px; + color: var(--text-color); +} + +h1 { + font-size: 2rem; +} +h2 { + font-size: 1.8rem; +} +h3 { + font-size: 1.5rem; +} +h4 { + font-size: 1.2rem; +} +h5 { + font-size: 1rem; +} +h6 { + font-size: 0.8rem; +} + +/* Paragraphs */ +p, +label { + font-size: 1rem; + margin-bottom: 15px; + text-align: justify; +} + +/* Links */ +a { + color: var(--text-color); + text-decoration: none; + border-bottom: 1px dashed var(--border-color); + transition: + color 0.3s ease, + border-color 0.3s ease; +} + +a:hover { + color: var(--accent-color); + border-color: var(--accent-color); +} + +/* Lists */ +ul, +ol { + margin: 15px; + padding-left: 20px; +} + +li { + margin-bottom: 10px; + font-size: 1rem; +} + +/* Buttons */ +button { + padding: 10px 20px; + font-size: 1rem; + border: 1px solid var(--accent-color); + background-color: var(--accent-color); + color: var(--bg-color); + cursor: pointer; + transition: + background-color 0.3s ease, + transform 0.2s ease; +} + +button:hover { + background-color: var(--text-color); + transform: scale(1.05); +} + +/* Inputs */ +input[type="text"], +input[type="email"], +input[type="password"], +input[type="search"], +input[type="file"], +input[type="date"], +input[type="time"], +input[type="color"], +textarea, +select { + width: 100%; + padding: 10px; + margin: 10px 0; + font-size: 1rem; + border: 1px solid var(--border-color); + border-radius: 4px; + background-color: var(--input-bg); +} + +input[type="range"] { + width: 100%; + margin: 10px 0; +} + +/* Form */ +form { + display: flex; + flex-direction: column; + gap: 15px; + max-width: 600px; +} + +fieldset { + border: 1px solid var(--border-color); + padding: 15px; + margin: 10px 0; +} + +legend { + font-weight: bold; + padding: 0 5px; +} + +/* Code blocks */ +pre, +code { + background-color: var(--code-bg); + border: 1px solid var(--border-color); + padding: 10px; + border-radius: 4px; + font-size: 0.8rem; + overflow-x: auto; + color: var(--text-color); + white-space: pre-wrap; + word-break: break-word; + word-wrap: break-word; +} + +/* Inline code elements */ +code { + padding: 2px 4px; + white-space: normal; +} + +/* Blockquote */ +blockquote { + border-left: 3px solid var(--accent-color); + padding-left: 10px; + margin: 20px 0; + font-style: italic; + color: var(--blockquote-color); +} + +footer { + margin-top: 40px; + font-size: 0.6rem; + text-align: center; + color: var(--text-muted); +} + +/* Tables */ +table { + width: 100%; + border-collapse: collapse; + margin: 20px 0; +} + +table, +th, +td { + border: 1px solid var(--border-color); +} + +th, +td { + padding: 10px; + text-align: left; +} + +/* Figures */ +figure { + margin: 20px 0; +} + +figcaption { + font-size: 0.8rem; + text-align: center; + color: var(--figcaption-color); + margin-top: 5px; +} + +img { + max-width: 100%; + border-radius: 4px; +} + +/* Inline elements */ +strong { + font-weight: bold; +} +em { + font-style: italic; +} +u { + text-decoration: underline; +} +abbr, +kbd, +mark { + font-size: 0.8rem; + font-style: italic; +} + +/* Progress bar */ +progress { + width: 100%; + height: 15px; +} + +/* Details (accordion) */ +details { + margin: 15px 0; + padding: 10px; + border: 1px solid var(--border-color); + border-radius: 4px; + background-color: var(--section-bg); +} + +summary { + cursor: pointer; + font-weight: bold; + padding: 5px; +} + +/* Modals */ +dialog { + border: 1px solid var(--dialog-border); + padding: 20px; + border-radius: 4px; + max-width: 500px; +} + +dialog::backdrop { + background-color: var(--dialog-backdrop); +} + +/* Section styling */ +section { + margin: 20px 0; + padding: 15px; + border: 1px solid var(--border-color); + background-color: var(--section-bg); + border-radius: 4px; +} + +/* Header styling */ +header { + margin-bottom: 20px; + padding: 10px 0; + border-bottom: 2px solid var(--border-color); + text-align: center; +} + +/* Main content styling */ +main { + width: 100%; + padding: 20px; + flex-grow: 1; +} + +/* Horizontal rule */ +hr { + border: 0; + height: 1px; + background: var(--border-color); + margin: 20px 0; +} + +/* Mobile adjustments */ +@media (max-width: 600px) { + .container { + padding: 15px; + margin: 10px; + } + + h1 { + font-size: 1.8rem; + } + + button { + padding: 8px 16px; + font-size: 0.8rem; + } + + input[type="text"], + input[type="email"], + input[type="password"], + textarea, + select { + font-size: 0.8rem; + padding: 8px; + } +} + +/* Links Section */ +.links-section { + margin-top: 30px; + text-align: center; +} + +.links-section ul { + list-style-type: none; + padding: 0; +} + +.links-section li { + display: inline; + margin-right: 15px; +} + +.links-section a { + color: var(--text-color); + text-decoration: none; + border-bottom: 1px solid; +} + +.links-section a:hover { + color: var(--link-hover); +} + +/* Additional Styling for Install Section */ +.install-section { + margin-top: 20px; + text-align: left; +} + +.install-section pre { + background-color: var(--code-bg); + border: 1px solid var(--border-color); + padding: 10px; + border-radius: 4px; + font-size: 0.8rem; + overflow-x: auto; +} + +/* Definition Lists */ +dl { + margin: 15px 0; +} + +dt { + font-weight: bold; + margin-top: 10px; +} + +dd { + margin-left: 20px; + color: var(--text-muted); +} + +/* Article styling */ +article { + margin: 25px 0; + padding: 20px; + background-color: var(--section-bg); + border: 1px solid var(--border-color); + border-radius: 4px; +} + +/* Aside styling */ +aside { + padding: 15px; + margin: 15px 0; + background-color: var(--aside-bg); + border-left: 3px solid var(--aside-border); + font-size: 0.9em; +} + +/* Navigation enhancements */ +nav { + padding: 10px 0; + width: 100%; +} + +nav ul { + list-style: none; + padding: 0; + margin: 0; + display: flex; + gap: 20px; + justify-content: center; + flex-wrap: wrap; + row-gap: 10px; +} + +nav li { + margin: 0; + white-space: nowrap; +} + +/* Mark styling */ +mark { + background-color: var(--mark-bg); + color: var(--mark-color); +} + +/* Keyboard styling */ +kbd { + background-color: var(--input-bg); + border: 1px solid var(--border-color); + box-shadow: 0 1px 0 var(--border-color); + color: var(--text-color); +} + +/* Time and small elements */ +time, +small { + color: var(--text-muted); +} + +/* Address styling */ +address { + font-style: normal; + margin: 15px 0; + padding: 10px; + border-left: 2px solid var(--border-color); +} + +/* Description list improvements */ +dl { + display: grid; + grid-template-columns: auto 1fr; + gap: 10px 20px; + align-items: start; +} + +dt { + grid-column: 1; + font-weight: bold; +} + +dd { + grid-column: 2; + margin: 0; +} + +/* Form elements base styling */ +form { + display: flex; + flex-direction: column; + gap: 20px; + max-width: 600px; + margin: 20px 0; +} + +/* Fieldset styling */ +fieldset { + border: 2px solid var(--border-color); + padding: 20px; + margin: 0; + border-radius: 4px; + background-color: var(--section-bg); +} + +legend { + font-weight: bold; + padding: 0 10px; + background-color: var(--accent-color); + color: var(--bg-color); + border-radius: 2px; +} + +/* Label styling */ +label { + display: block; + margin-bottom: 5px; + font-weight: bold; + color: var(--text-color); +} + +/* Checkbox and radio container */ +label:has(> input[type="checkbox"]), +label:has(> input[type="radio"]) { + display: flex; + align-items: center; + gap: 8px; + margin: 8px 0; + cursor: pointer; +} + +/* Input fields */ +input[type="text"], +input[type="email"], +input[type="password"], +input[type="search"], +input[type="url"], +input[type="tel"], +input[type="number"], +input[type="date"], +input[type="time"], +input[type="datetime-local"], +textarea, +select { + width: 100%; + padding: 8px 12px; + margin: 4px 0 12px; + border: 2px solid var(--border-color); + border-radius: 4px; + background-color: var(--input-bg); + font-family: "Courier New", Courier, monospace; + font-size: 1rem; + transition: + border-color 0.2s, + box-shadow 0.2s; +} + +/* Input focus states */ +input:focus, +textarea:focus, +select:focus { + outline: none; + border-color: var(--accent-color); + box-shadow: 0 0 0 2px var(--shadow-color); +} + +/* Checkbox and radio styling */ +input[type="checkbox"], +input[type="radio"] { + appearance: none; + width: 18px; + height: 18px; + border: 2px solid var(--border-color); + background-color: var(--input-bg); + cursor: pointer; + position: relative; + vertical-align: middle; +} + +input[type="checkbox"] { + border-radius: 3px; +} + +input[type="radio"] { + border-radius: 50%; +} + +/* Checkbox and radio checked states */ +input[type="checkbox"]:checked, +input[type="radio"]:checked { + background-color: var(--accent-color); +} + +input[type="checkbox"]:checked::after { + content: "✓"; + position: absolute; + color: var(--checkbox-check-color); + font-size: 0.8rem; + left: 2px; + top: -1px; +} + +input[type="radio"]:checked::after { + content: ""; + position: absolute; + width: 8px; + height: 8px; + background-color: var(--radio-dot-color); + border-radius: 50%; + left: 3px; + top: 3px; +} + +/* Select styling */ +select { + appearance: none; + padding-right: 30px; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23333' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: calc(100% - 8px) center; +} + +/* File input styling */ +input[type="file"] { + border: 2px dashed var(--border-color); + padding: 20px; + text-align: center; + cursor: pointer; + background-color: var(--input-bg); +} + +input[type="file"]::file-selector-button { + background-color: var(--accent-color); + color: var(--bg-color); + padding: 8px 16px; + border: none; + border-radius: 4px; + cursor: pointer; + margin-right: 10px; + font-family: inherit; +} + +/* Range input styling */ +input[type="range"] { + appearance: none; + width: 100%; + height: 6px; + background-color: var(--border-color); + border-radius: 3px; + margin: 10px 0; +} + +input[type="range"]::-webkit-slider-thumb { + appearance: none; + width: 18px; + height: 18px; + background-color: var(--accent-color); + border: 2px solid var(--bg-color); + border-radius: 50%; + cursor: pointer; +} + +/* Color input styling */ +input[type="color"] { + width: 60px; + height: 40px; + padding: 2px; + border: 2px solid var(--border-color); + border-radius: 4px; + cursor: pointer; +} + +/* Textarea styling */ +textarea { + min-height: 100px; + resize: vertical; + line-height: 1.5; +} + +/* Form validation styling */ +input:invalid, +textarea:invalid, +select:invalid { + border-color: var(--error-color); +} + +/* Required field indicator */ +label.required::after { + content: "*"; + color: var(--required-color); + margin-left: 4px; +} + +/* Disabled state */ +input:disabled, +textarea:disabled, +select:disabled, +button:disabled { + opacity: 0.6; + cursor: not-allowed; +} + +/* Button styling (submit, reset, etc.) */ +button, +input[type="submit"], +input[type="reset"] { + padding: 10px 20px; + background-color: var(--accent-color); + color: var(--bg-color); + border: 2px solid var(--accent-color); + border-radius: 4px; + cursor: pointer; + font-family: inherit; + font-size: 1rem; + transition: all 0.2s; +} + +button:hover, +input[type="submit"]:hover, +input[type="reset"]:hover { + background-color: var(--text-color); + border-color: var(--text-color); + transform: translateY(-1px); +} + +button:active, +input[type="submit"]:active, +input[type="reset"]:active { + transform: translateY(1px); +} + +/* Progress element styling */ +progress { + width: 100%; + height: 20px; + border: 2px solid var(--border-color); + border-radius: 4px; + background-color: var(--input-bg); +} + +progress::-webkit-progress-bar { + background-color: var(--input-bg); + border-radius: 2px; +} + +progress::-webkit-progress-value { + background-color: var(--accent-color); + border-radius: 2px; +} + +/* Mobile adjustments */ +@media (max-width: 600px) { + fieldset { + padding: 15px; + } + + input[type="file"] { + padding: 15px; + } + + button, + input[type="submit"], + input[type="reset"] { + width: 100%; + } +} + +/* Base text size adjustments */ +p, +label, +li, +td, +th, +input, +select, +textarea, +button { + font-size: 1rem; +} + +small, +figcaption, +time, +.small-text { + font-size: 0.8rem; +} + +code, +pre { + font-size: 0.8rem; +} + +/* Form elements text color fix */ +input[type="text"], +input[type="email"], +input[type="password"], +input[type="search"], +input[type="url"], +input[type="tel"], +input[type="number"], +input[type="date"], +input[type="time"], +input[type="datetime-local"], +textarea, +select { + color: var(--text-color); +} + +/* Placeholder text color */ +::placeholder { + color: var(--blockquote-color); + opacity: 0.7; +} + +/* Select option text color */ +option { + color: var(--text-color); +} + +/* Mobile adjustments */ +@media (max-width: 600px) { + p, + label, + li, + td, + th, + input, + select, + textarea, + button { + font-size: 0.8rem; + } + + small, + figcaption, + time, + .small-text { + font-size: 0.6rem; + } +} + +/* Theme toggle button */ +#theme-toggle { + display: none; +} + +/* Theme-specific variables */ +:root { + /* Light theme (default) */ + --bg-color: #f4f4f4; + --text-color: #333; + --text-muted: #666; + --text-light: #555; + --link-color: #333; + --link-hover: #000; + --heading-color: #333; + --blockquote-color: #666; + --code-color: #333; + --label-color: #333; + --small-color: #666; + --figcaption-color: #555; + --time-color: #666; + --border-color: #ddd; + --hover-color: #f0f0f0; + --input-bg: #fff; + --section-bg: #fafafa; + --code-bg: #f0f0f0; + --shadow-color: rgba(0, 0, 0, 0.1); + --accent-color: #333; + --error-color: #d32f2f; + --mark-bg: #fff3bf; + --mark-color: #333; + --intro-bg: var(--section-bg); + --aside-bg: #f0f0f0; + --aside-border: var(--accent-color); + --dialog-border: var(--border-color); + --dialog-backdrop: rgba(0, 0, 0, 0.3); + --required-color: var(--error-color); + --checkbox-check-color: var(--bg-color); + --radio-dot-color: var(--bg-color); + --kbd-bg: #f5f5f5; + --kbd-border: #ccc; + --kbd-shadow: rgba(0, 0, 0, 0.1); + --progress-bg: #f0f0f0; + --progress-value: var(--accent-color); + --button-hover-bg: var(--hover-color); + --button-active-shadow: rgba(0, 0, 0, 0.2); + --file-button-hover: var(--hover-color); + --range-thumb-bg: var(--accent-color); + --range-track-bg: var(--border-color); + --dropdown-shadow: rgba(0, 0, 0, 0.1); +} + +/* Update dark theme variables */ +[data-theme="dark"] { + --bg-color: #1a1a1a; + --text-color: #f4f4f4; + --text-muted: #ccc; + --text-light: #ddd; + --link-color: #f4f4f4; + --link-hover: #fff; + --heading-color: #f4f4f4; + --blockquote-color: #ccc; + --code-color: #f4f4f4; + --label-color: #f4f4f4; + --small-color: #ccc; + --figcaption-color: #ccc; + --time-color: #ccc; + --border-color: #404040; + --hover-color: #333; + --input-bg: #262626; + --section-bg: #262626; + --code-bg: #333; + --shadow-color: rgba(0, 0, 0, 0.3); + --accent-color: #f4f4f4; + --error-color: #ff5252; + --mark-bg: #665c00; + --mark-color: #f4f4f4; + --intro-bg: #1a1a1a; + --aside-bg: var(--section-bg); + --aside-border: var(--accent-color); + --dialog-border: var(--border-color); + --dialog-backdrop: rgba(0, 0, 0, 0.5); + --required-color: var(--error-color); + --checkbox-check-color: var(--bg-color); + --radio-dot-color: var(--bg-color); + --kbd-bg: #333; + --kbd-border: #444; + --kbd-shadow: rgba(0, 0, 0, 0.2); + --progress-bg: #333; + --progress-value: var(--accent-color); + --button-hover-bg: #444; + --button-active-shadow: rgba(0, 0, 0, 0.4); + --file-button-hover: #444; + --range-thumb-bg: var(--accent-color); + --range-track-bg: #444; + --dropdown-shadow: rgba(0, 0, 0, 0.3); +} + +/* Fix hardcoded colors */ +/* Remove these hardcoded colors */ +section { + margin: 20px 0; + padding: 15px; + border: 1px solid var(--border-color); + background-color: var(--section-bg); +} + +header { + margin-bottom: 20px; + padding: 10px 0; + border-bottom: 2px solid var(--border-color); + text-align: center; +} + +hr { + border: 0; + height: 1px; + background: var(--border-color); + margin: 20px 0; +} + +fieldset { + border: 2px solid var(--border-color); + padding: 20px; + margin: 0; + border-radius: 4px; + background-color: var(--section-bg); +} + +legend { + font-weight: bold; + padding: 0 10px; + background-color: var(--accent-color); + color: var(--bg-color); + border-radius: 2px; +} + +label { + color: var(--text-color); +} + +address { + border-left: 2px solid var(--border-color); +} + +input[type="file"] { + border: 2px dashed var(--border-color); + background-color: var(--input-bg); +} + +input[type="file"]::file-selector-button { + background-color: var(--accent-color); + color: var(--bg-color); +} + +input[type="color"] { + border: 2px solid var(--border-color); +} + +/* Fix time and small elements */ +time, +small { + color: var(--text-muted); +} + +/* Remove old theme toggle button styles */ +#theme-toggle { + display: none; +} + +/* Update links section */ +.links-section a { + color: var(--text-color); +} + +.links-section a:hover { + color: var(--link-hover); +} + +/* Fix install section */ +.install-section pre { + background-color: var(--code-bg); + border: 1px solid var(--border-color); + padding: 10px; + border-radius: 4px; + font-size: 0.8rem; + overflow-x: auto; +} + +/* Update theme switcher dropdown styles */ +details.dropdown { + position: absolute; + top: 20px; + right: 20px; + z-index: 1000; +} + +details.dropdown summary { + padding: 8px 12px; + cursor: pointer; + border: 1px solid var(--border-color); + border-radius: 4px; + background-color: var(--section-bg); + color: var(--text-color); +} + +details.dropdown ul { + position: absolute; + right: 0; + min-width: 120px; + margin: 4px 0; + padding: 0; + background: var(--section-bg); + border: 1px solid var(--border-color); + border-radius: 4px; + list-style: none; + box-shadow: 0 2px 4px var(--shadow-color); +} + +details.dropdown ul a { + display: block; + padding: 8px 12px; + border: none; + color: var(--text-color); + text-decoration: none; +} + +details.dropdown ul a:hover { + background: var(--hover-color); +} + +/* Update section styling for better dark mode contrast */ +section { + margin: 20px 0; + padding: 15px; + border: 1px solid var(--border-color); + background-color: var(--section-bg); + border-radius: 4px; +} + +/* Add specific styling for the introduction section */ +#introduction { + margin: 20px 0; + padding: 15px; + border: 1px solid var(--border-color); + background-color: var(--intro-bg) !important; + border-radius: 4px; + color: var(--text-color); +} + +[data-theme="dark"] #introduction { + background-color: var(--intro-bg) !important; +} + +/* Update the aside within introduction */ +#introduction aside { + background-color: var(--section-bg); + padding: 15px; + margin: 10px 0; + border-left: 2px solid var(--accent-color); + border-radius: 0 4px 4px 0; +} + +/* Update kbd elements in introduction */ +#introduction kbd { + background-color: var(--section-bg); + border: 1px solid var(--border-color); + border-radius: 3px; + box-shadow: 0 1px 0 var(--border-color); + color: var(--text-color); + display: inline-block; + font-size: 0.85em; + padding: 2px 4px; + margin: 0 2px; +} + +/* Ensure proper contrast for strong elements */ +#introduction strong { + color: var(--text-color); +} + +/* Update blockquote styling */ +blockquote { + border-left: 3px solid var(--accent-color); + color: var(--blockquote-color); + background-color: var(--section-bg); +} + +/* Update code block styling */ +pre, +code { + background-color: var(--code-bg); + border-color: var(--border-color); + color: var(--code-color); +} + +/* Update table styling */ +table { + border-color: var(--border-color); +} + +th, +td { + border-color: var(--border-color); +} + +tr:nth-child(even) { + background-color: var(--section-bg); +} + +/* Update form elements */ +select option { + background-color: var(--input-bg); + color: var(--text-color); +} + +input::placeholder { + color: var(--text-muted); +} + +/* Update focus states */ +input:focus, +select:focus, +textarea:focus { + border-color: var(--accent-color); + box-shadow: 0 0 0 2px var(--shadow-color); +} diff --git a/src/env.d.ts b/src/env.d.ts new file mode 100644 index 0000000..852f2c7 --- /dev/null +++ b/src/env.d.ts @@ -0,0 +1,3 @@ +interface Window { + Alpine: import("alpinejs").Alpine; +} diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index acd48b5..0672a9b 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -5,20 +5,38 @@ - - + + + + + - -
-
- - -
-
- -
-
-

- © - badblocks -

-
-
+ +
+

badblocks.dev

+ +
+
+ +
+ diff --git a/src/pages/contact.astro b/src/pages/contact.astro index f0d4b28..f64e794 100644 --- a/src/pages/contact.astro +++ b/src/pages/contact.astro @@ -1,24 +1,52 @@ --- import Layout from "../layouts/BaseLayout.astro"; +export const prerender = false; --- Contact -
-
-

Contact

-

Contact information here

-
-
+

Contact

+

Use the below form to shoot me a quick text!

+
+ + + + +
diff --git a/src/pages/index.astro b/src/pages/index.astro index a8606c9..99cc513 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -6,11 +6,63 @@ import Layout from "../layouts/BaseLayout.astro"; Home -
-
-
-
-
+
+
+
+
+
+
+
+
-
-

Lorem Ipsum

-

- Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, - consectetur, adipisci velit. -

-
-
+

Lorem Ipsum

+

+ Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, + consectetur, adipisci velit. +

+ diff --git a/src/pages/projects.astro b/src/pages/projects.astro deleted file mode 100644 index 8e5155d..0000000 --- a/src/pages/projects.astro +++ /dev/null @@ -1,33 +0,0 @@ ---- -import Layout from "../layouts/BaseLayout.astro"; ---- - - - Projects - - -
-

Projects

-
-
Project 1
-
Project 2
-
Project 3
-
-
- - diff --git a/src/pages/robots.txt.ts b/src/pages/robots.txt.ts new file mode 100644 index 0000000..cbac251 --- /dev/null +++ b/src/pages/robots.txt.ts @@ -0,0 +1,78 @@ +import type { APIRoute } from "astro"; + +const getRobotsTxt = (sitemapURL: URL) => `\ +# Block all known AI crawlers and assistants +# from using content for training AI models. +# Source: https://robotstxt.com/ai +User-Agent: GPTBot +User-Agent: ClaudeBot +User-Agent: Claude-User +User-Agent: Claude-SearchBot +User-Agent: CCBot +User-Agent: Google-Extended +User-Agent: Applebot-Extended +User-Agent: Facebookbot +User-Agent: Meta-ExternalAgent +User-Agent: Meta-ExternalFetcher +User-Agent: diffbot +User-Agent: PerplexityBot +User-Agent: Perplexity‑User +User-Agent: Omgili +User-Agent: Omgilibot +User-Agent: webzio-extended +User-Agent: ImagesiftBot +User-Agent: Bytespider +User-Agent: TikTokSpider +User-Agent: Amazonbot +User-Agent: Youbot +User-Agent: SemrushBot-OCOB +User-Agent: Petalbot +User-Agent: VelenPublicWebCrawler +User-Agent: TurnitinBot +User-Agent: Timpibot +User-Agent: OAI-SearchBot +User-Agent: ICC-Crawler +User-Agent: AI2Bot +User-Agent: AI2Bot-Dolma +User-Agent: DataForSeoBot +User-Agent: AwarioBot +User-Agent: AwarioSmartBot +User-Agent: AwarioRssBot +User-Agent: Google-CloudVertexBot +User-Agent: PanguBot +User-Agent: Kangaroo Bot +User-Agent: Sentibot +User-Agent: img2dataset +User-Agent: Meltwater +User-Agent: Seekr +User-Agent: peer39_crawler +User-Agent: cohere-ai +User-Agent: cohere-training-data-crawler +User-Agent: DuckAssistBot +User-Agent: Scrapy +User-Agent: Cotoyogi +User-Agent: aiHitBot +User-Agent: Factset_spyderbot +User-Agent: FirecrawlAgent + +Disallow: / +DisallowAITraining: / + +# Block any non-specified AI crawlers (e.g., new +# or unknown bots) from using content for training +# AI models, while allowing the website to be +# indexed and accessed by bots. These directives +# are still experimental and may not be supported +# by all AI crawlers. +User-Agent: * +DisallowAITraining: / +Content-Usage: ai=n +Allow: / + +Sitemap: ${sitemapURL.href} +`; + +export const GET: APIRoute = ({ site }) => { + const sitemapURL = new URL("sitemap-index.xml", site); + return new Response(getRobotsTxt(sitemapURL)); +}; diff --git a/src/pages/tools.astro b/src/pages/tools.astro new file mode 100644 index 0000000..ad02ef6 --- /dev/null +++ b/src/pages/tools.astro @@ -0,0 +1,26 @@ +--- +import Layout from "../layouts/BaseLayout.astro"; +--- + + + Tools + + +
+

Tools

+
+
Tool 1
+
Tool 2
+
Tool 3
+
+
+ +