My agentic slop goes here. Not intended for anyone else!

more

+10 -10
arod-web/arod-menu.js
···
<style>
:host {
--menu-height: 3.5rem;
-
--menu-bg: #ffffff;
-
--menu-border: #e0e0e0;
-
--menu-text: #222;
-
--menu-hover: #0066cc;
--menu-mobile-breakpoint: 768px;
display: block;
···
}
:host([theme="light"]) {
-
--menu-bg: #ffffff;
-
--menu-border: #e0e0e0;
-
--menu-text: #222;
-
--menu-hover: #0066cc;
}
:host([theme="dark"]) {
···
}
.menu-logo {
-
font-size: 1.25rem;
-
font-weight: 600;
color: var(--menu-text);
text-decoration: none;
}
···
<style>
:host {
--menu-height: 3.5rem;
+
--menu-bg: #fffffc;
+
--menu-border: #666;
+
--menu-text: #1a1a1a;
+
--menu-hover: #090c8d;
--menu-mobile-breakpoint: 768px;
display: block;
···
}
:host([theme="light"]) {
+
--menu-bg: #fffffc;
+
--menu-border: #666;
+
--menu-text: #1a1a1a;
+
--menu-hover: #090c8d;
}
:host([theme="dark"]) {
···
}
.menu-logo {
+
font-size: 1.2rem;
+
font-weight: 700;
color: var(--menu-text);
text-decoration: none;
}
+53 -8
arod-web/arod-search.js
···
this.shadowRoot.innerHTML = `
<style>
:host {
-
--search-bg: #ffffff;
--search-border: #e0e0e0;
-
--search-text: #222;
--search-muted: #666;
-
--search-accent: #0066cc;
--search-overlay: rgba(0, 0, 0, 0.5);
}
···
}
}
.search-trigger {
display: flex;
align-items: center;
···
.search-trigger:hover {
border-color: var(--search-accent);
-
background: rgba(0, 102, 204, 0.05);
}
.search-icon {
···
.search-shortcut {
font-size: 0.75rem;
padding: 0.125rem 0.375rem;
-
background: var(--search-border);
border-radius: 3px;
color: var(--search-muted);
font-family: monospace;
···
}
.search-close:hover {
-
background: var(--search-border);
}
.search-results {
···
}
.search-result-item:hover {
-
background: rgba(0, 102, 204, 0.1);
}
.result-title {
···
.key {
padding: 0.125rem 0.375rem;
-
background: var(--search-border);
border-radius: 3px;
font-family: monospace;
}
@keyframes fadeIn {
···
this.shadowRoot.innerHTML = `
<style>
:host {
+
--search-bg: #fffffc;
--search-border: #e0e0e0;
+
--search-text: #1a1a1a;
--search-muted: #666;
+
--search-accent: #090c8d;
--search-overlay: rgba(0, 0, 0, 0.5);
}
···
}
}
+
/* Explicit light theme */
+
:host-context([data-theme="light"]) {
+
--search-bg: #fffffc;
+
--search-border: #e0e0e0;
+
--search-text: #1a1a1a;
+
--search-muted: #666;
+
--search-accent: #090c8d;
+
--search-overlay: rgba(0, 0, 0, 0.5);
+
}
+
+
/* Explicit dark theme */
+
:host-context([data-theme="dark"]) {
+
--search-bg: #1a1a1a;
+
--search-border: #444;
+
--search-text: #e0e0e0;
+
--search-muted: #999;
+
--search-accent: #4db8ff;
+
--search-overlay: rgba(0, 0, 0, 0.8);
+
}
+
.search-trigger {
display: flex;
align-items: center;
···
.search-trigger:hover {
border-color: var(--search-accent);
+
background: rgba(9, 12, 141, 0.05);
}
.search-icon {
···
.search-shortcut {
font-size: 0.75rem;
padding: 0.125rem 0.375rem;
+
background: rgba(0, 0, 0, 0.08);
border-radius: 3px;
color: var(--search-muted);
font-family: monospace;
···
}
.search-close:hover {
+
background: rgba(0, 0, 0, 0.08);
}
.search-results {
···
}
.search-result-item:hover {
+
background: rgba(9, 12, 141, 0.1);
}
.result-title {
···
.key {
padding: 0.125rem 0.375rem;
+
background: rgba(0, 0, 0, 0.08);
border-radius: 3px;
font-family: monospace;
+
}
+
+
/* Selected result highlighting */
+
.search-result-item.selected {
+
background: rgba(9, 12, 141, 0.15);
+
}
+
+
/* Dark mode adjustments for backgrounds */
+
@media (prefers-color-scheme: dark) {
+
.search-shortcut,
+
.key {
+
background: rgba(255, 255, 255, 0.1);
+
}
+
+
.search-close:hover {
+
background: rgba(255, 255, 255, 0.1);
+
}
+
+
.search-result-item:hover {
+
background: rgba(77, 184, 255, 0.1);
+
}
+
+
.search-result-item.selected {
+
background: rgba(77, 184, 255, 0.15);
+
}
}
@keyframes fadeIn {
+19 -18
arod-web/arod-sidenotes.js
···
--content-width: 40rem;
--sidenote-width: 18rem;
--gap: 2.5rem;
-
--bg: #ffffff;
-
--text: #222;
--text-muted: #666;
-
--accent: #0066cc;
--sidenote-bg: #fafafa;
--border: #e0e0e0;
···
.sidenote-wrapper {
position: absolute;
width: 100%;
-
font-size: 0.75rem;
-
line-height: 1.4;
color: var(--text-muted);
padding-left: 1rem;
border-left: 2px solid var(--border);
···
:host {
display: inline-block;
vertical-align: baseline;
-
font-size: 0.85em;
font-weight: 500;
-
margin: 0 0.15em;
}
.ref {
display: inline-flex;
align-items: center;
justify-content: center;
-
min-width: 1.4em;
-
height: 1.4em;
-
padding: 0 0.3em;
-
color: var(--accent, #0066cc);
-
background: rgba(0, 102, 204, 0.1);
-
border: 1px solid rgba(0, 102, 204, 0.3);
-
border-radius: 3px;
cursor: pointer;
text-decoration: none;
transition: all 0.2s ease;
font-variant-numeric: tabular-nums;
}
.ref:hover,
:host([highlighted]) .ref {
-
background: var(--accent, #0066cc);
border-color: var(--accent, #0066cc);
color: white;
transform: scale(1.05);
···
<style>
:host {
display: block;
-
font-size: 0.85rem;
-
line-height: 1.4;
color: var(--text-muted, #666);
margin: 1rem 0;
padding: 0.75rem 0.75rem 0.75rem 1rem;
···
.sidenote-mobile-number {
font-weight: bold;
-
color: var(--accent, #0066cc);
margin-right: 0.5em;
}
···
--content-width: 40rem;
--sidenote-width: 18rem;
--gap: 2.5rem;
+
--bg: #fffffc;
+
--text: #1a1a1a;
--text-muted: #666;
+
--accent: #090c8d;
--sidenote-bg: #fafafa;
--border: #e0e0e0;
···
.sidenote-wrapper {
position: absolute;
width: 100%;
+
font-size: 0.85rem;
+
line-height: 1.45;
color: var(--text-muted);
padding-left: 1rem;
border-left: 2px solid var(--border);
···
:host {
display: inline-block;
vertical-align: baseline;
+
font-size: 0.75em;
font-weight: 500;
+
margin: 0 0.25em;
}
.ref {
display: inline-flex;
align-items: center;
justify-content: center;
+
min-width: 1.5em;
+
height: 1.5em;
+
padding: 0 0.2em;
+
color: var(--accent, #090c8d);
+
background: rgba(9, 12, 141, 0.08);
+
border: 1px solid rgba(9, 12, 141, 0.2);
+
border-radius: 50%;
cursor: pointer;
text-decoration: none;
transition: all 0.2s ease;
font-variant-numeric: tabular-nums;
+
line-height: 1;
}
.ref:hover,
:host([highlighted]) .ref {
+
background: var(--accent, #090c8d);
border-color: var(--accent, #0066cc);
color: white;
transform: scale(1.05);
···
<style>
:host {
display: block;
+
font-size: 0.9em;
+
line-height: 1.45;
color: var(--text-muted, #666);
margin: 1rem 0;
padding: 0.75rem 0.75rem 0.75rem 1rem;
···
.sidenote-mobile-number {
font-weight: bold;
+
color: var(--accent, #090c8d);
margin-right: 0.5em;
}
+37 -14
arod-web/arod-theme.js
···
position: relative;
padding: 0.5rem;
background: transparent;
-
border: 1px solid var(--theme-border, #e0e0e0);
border-radius: 4px;
-
color: var(--theme-text, #222);
cursor: pointer;
transition: all 0.2s ease;
}
···
}
.theme-toggle:hover {
-
border-color: var(--theme-accent, #0066cc);
-
background: rgba(0, 102, 204, 0.05);
}
.theme-icon {
···
position: absolute;
top: calc(100% + 0.5rem);
right: 0;
-
background: var(--theme-menu-bg, #ffffff);
-
border: 1px solid var(--theme-border, #e0e0e0);
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
overflow: hidden;
···
@media (prefers-color-scheme: dark) {
.theme-menu {
-
--theme-menu-bg: #2a2a2a;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
}
···
padding: 0.75rem 1rem;
background: transparent;
border: none;
-
color: var(--theme-text, #222);
cursor: pointer;
width: 100%;
text-align: left;
transition: background 0.2s ease;
}
.theme-option:hover {
-
background: rgba(0, 102, 204, 0.1);
}
.theme-option.active {
-
background: rgba(0, 102, 204, 0.15);
-
color: var(--theme-accent, #0066cc);
}
.theme-label {
···
:host([data-theme="dark"]) .theme-toggle {
--theme-border: #444;
--theme-text: #e0e0e0;
-
--theme-menu-bg: #2a2a2a;
}
:host([data-theme="light"]) .theme-toggle {
--theme-border: #e0e0e0;
-
--theme-text: #222;
-
--theme-menu-bg: #ffffff;
}
</style>
···
position: relative;
padding: 0.5rem;
background: transparent;
+
border: 1px solid var(--theme-border, #666);
border-radius: 4px;
+
color: var(--theme-text, #1a1a1a);
cursor: pointer;
transition: all 0.2s ease;
}
···
}
.theme-toggle:hover {
+
border-color: var(--theme-accent, #090c8d);
+
background: rgba(9, 12, 141, 0.05);
}
.theme-icon {
···
position: absolute;
top: calc(100% + 0.5rem);
right: 0;
+
background: #fffffc;
+
border: 1px solid #e0e0e0;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
overflow: hidden;
···
@media (prefers-color-scheme: dark) {
.theme-menu {
+
background: #2a2a2a;
+
border-color: #444;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
}
···
padding: 0.75rem 1rem;
background: transparent;
border: none;
+
color: #1a1a1a;
cursor: pointer;
width: 100%;
text-align: left;
transition: background 0.2s ease;
}
+
@media (prefers-color-scheme: dark) {
+
.theme-option {
+
color: #e0e0e0;
+
}
+
}
+
.theme-option:hover {
+
background: rgba(9, 12, 141, 0.1);
}
.theme-option.active {
+
background: rgba(9, 12, 141, 0.15);
+
color: var(--theme-accent, #090c8d);
}
.theme-label {
···
:host([data-theme="dark"]) .theme-toggle {
--theme-border: #444;
--theme-text: #e0e0e0;
+
}
+
+
:host([data-theme="dark"]) .theme-menu {
+
background: #2a2a2a;
+
border-color: #444;
+
}
+
+
:host([data-theme="dark"]) .theme-option {
+
color: #e0e0e0;
}
:host([data-theme="light"]) .theme-toggle {
--theme-border: #e0e0e0;
+
--theme-text: #1a1a1a;
+
}
+
+
:host([data-theme="light"]) .theme-menu {
+
background: #fffffc;
+
border-color: #e0e0e0;
+
}
+
+
:host([data-theme="light"]) .theme-option {
+
color: #1a1a1a;
}
</style>
+52 -22
arod-web/example.html
···
<script src="arod-sidenotes.js"></script>
<style>
-
/* Base styles that respond to theme */
:root {
-
--bg: #ffffff;
-
--text: #222;
--text-muted: #666;
-
--accent: #0066cc;
--border: #e0e0e0;
}
[data-theme="dark"] {
···
--text: #e0e0e0;
--text-muted: #999;
--accent: #4db8ff;
--border: #444;
}
* {
···
}
body {
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-
line-height: 1.6;
color: var(--text);
background: var(--bg);
transition: background 0.3s ease, color 0.3s ease;
···
}
h1 {
-
font-size: 2.5rem;
-
margin: 2rem 0;
}
h2 {
-
font-size: 1.75rem;
-
margin: 2rem 0 1rem;
}
p {
-
margin-bottom: 1.25rem;
text-align: justify;
}
code {
font-family: 'SF Mono', Consolas, monospace;
-
font-size: 0.9em;
padding: 0.2em 0.4em;
-
background: var(--border);
border-radius: 3px;
}
pre {
padding: 1rem;
margin: 1.5rem 0;
-
background: var(--border);
border-radius: 4px;
overflow-x: auto;
}
pre code {
background: none;
padding: 0;
}
blockquote {
-
margin: 1.5rem 0;
-
padding-left: 1rem;
-
border-left: 3px solid var(--accent);
font-style: italic;
color: var(--text-muted);
}
.hero {
text-align: center;
-
padding: 4rem 0;
-
background: linear-gradient(135deg, rgba(0,102,204,0.1) 0%, rgba(0,102,204,0.05) 100%);
border-radius: 8px;
-
margin: 2rem 0;
}
.hero h1 {
-
margin-bottom: 1rem;
}
.hero p {
-
font-size: 1.25rem;
color: var(--text-muted);
text-align: center;
}
···
<script src="arod-sidenotes.js"></script>
<style>
+
/* Base styles that match anil.recoil.org */
:root {
+
--bg: #fffffc;
+
--text: #1a1a1a;
--text-muted: #666;
+
--accent: #01261b;
+
--link: #090c8d;
--border: #e0e0e0;
+
--secondary: #666;
}
[data-theme="dark"] {
···
--text: #e0e0e0;
--text-muted: #999;
--accent: #4db8ff;
+
--link: #4db8ff;
--border: #444;
+
--secondary: #999;
}
* {
···
}
body {
+
font-family: system-ui, -apple-system, sans-serif;
+
line-height: 1.45;
color: var(--text);
background: var(--bg);
transition: background 0.3s ease, color 0.3s ease;
···
}
h1 {
+
font-size: 1.0rem;
+
font-weight: 700;
+
margin-top: 0.5em;
+
margin-bottom: 0.6em;
}
h2 {
+
font-size: 1rem;
+
margin-bottom: 0.5em;
+
font-weight: 500;
+
}
+
+
h3 {
+
font-size: 1rem;
+
margin-bottom: 0.5em;
+
font-weight: 400;
}
p {
+
font-size: 0.9em;
+
margin-top: 0.2em;
+
margin-bottom: 0.5em;
text-align: justify;
}
code {
font-family: 'SF Mono', Consolas, monospace;
+
font-size: 0.85em;
padding: 0.2em 0.4em;
+
background: rgba(0, 0, 0, 0.05);
border-radius: 3px;
}
+
[data-theme="dark"] code {
+
background: rgba(255, 255, 255, 0.1);
+
}
+
pre {
padding: 1rem;
margin: 1.5rem 0;
+
background: rgba(0, 0, 0, 0.03);
+
border: 1px solid var(--border);
border-radius: 4px;
overflow-x: auto;
}
+
[data-theme="dark"] pre {
+
background: rgba(255, 255, 255, 0.05);
+
border-color: #444;
+
}
+
pre code {
background: none;
padding: 0;
}
blockquote {
+
position: relative;
+
padding: 0.5rem 1rem;
+
padding-top: 0;
+
margin: 0.5rem 0;
+
border-left: 4px solid #cdc;
font-style: italic;
+
padding-bottom: 0.1em;
color: var(--text-muted);
}
.hero {
text-align: center;
+
padding: 2rem 0;
+
background: linear-gradient(135deg, rgba(1,38,27,0.05) 0%, rgba(1,38,27,0.02) 100%);
border-radius: 8px;
+
margin: 1rem 0;
}
.hero h1 {
+
font-size: 1.2rem;
+
font-weight: 700;
+
margin-bottom: 0.5rem;
}
.hero p {
+
font-size: 0.9em;
color: var(--text-muted);
text-align: center;
}