===========================
= index.html
===========================
she loves the color blue — index
visual diary of readings · experiments · diary · final pieces
About
Art studio documentation & internet diary. Built by hand. Blue-tinted.
===========================
= archive.html
===========================
she loves the color blue — archive
Archive
All
Book Readings
Experimentations
Diary
Final
01 Oct 2025
reading — blue marginalia
image
28 Sep 2025
experiment — screen duet
video
15 Sep 2025
diary — midnight notes
image
30 Aug 2025
final — blue persona
video
Tip: you can also make each entry its own HTML page; just link the title.
===========================
= style.css
===========================
/* Blue, minimal, artsy — early web energy */
:root{
--bg:#07122a; /* deep blue */
--ink:#dfeaff; /* light ink */
--muted:#9cb1d9; /* denim */
--line:#2a3c66; /* borders */
--glow:#71dfff; /* cyan accent */
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; color:var(--ink); font:16px/1.55 'Space Mono', ui-monospace, monospace;}
/* Backgrounds */
.bg-stars{background:
radial-gradient(800px 600px at 10% -10%, #0f2260 0%, transparent 60%),
radial-gradient(700px 500px at 80% 10%, #0b1b46 0%, transparent 60%),
linear-gradient(#08122a, #061026);}
.bg-grid{background:
linear-gradient(transparent 95%, rgba(113,223,255,.15) 96%),
linear-gradient(90deg, transparent 95%, rgba(113,223,255,.15) 96%),
linear-gradient(#08122a, #061026);
background-size:24px 24px, 24px 24px, 100% 100%;}
/* Nav */
.nav{display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border-bottom:1px solid var(--line)}
.nav a{color:var(--ink); text-decoration:none; margin-right:10px}
.nav a.active{border-bottom:1px solid var(--ink)}
.brand{font-weight:700}
/* Index */
.index{max-width:900px; margin:0 auto; padding:24px}
.hero{margin:0 0 16px}
.hero img{display:block; width:100%; height:auto; border:1px solid var(--line)}
.hero figcaption{font-size:.85rem; color:var(--muted); margin-top:6px}
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px}
.tile{display:block; padding:14px; border:1px solid var(--line); text-decoration:none}
.tile:hover{box-shadow:0 0 0 3px rgba(113,223,255,.18)}
.tile h2{margin:0 0 6px; font-size:1rem}
.tile p{margin:0; color:var(--muted)}
.buttons{margin:18px 0; display:flex; flex-wrap:wrap; gap:6px; opacity:.9}
.buttons img{height:31px; image-rendering:pixelated; border:1px solid var(--line)}
.about{max-width:900px; margin:24px auto; padding:0 24px}
.about h3{margin:0 0 8px}
/* Archive */
.archive{max-width:820px; margin:0 auto; padding:24px}
.archive h1{font-size:1.2rem; margin:4px 0 12px}
.filters{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px}
.filters button{background:transparent; color:var(--ink); border:1px solid var(--line); padding:6px 10px; cursor:pointer}
.filters button.active{box-shadow:0 0 0 3px rgba(113,223,255,.18)}
.list{display:grid; grid-template-columns:1fr; gap:8px}
.entry{display:grid; grid-template-columns:140px 1fr auto; gap:10px; align-items:center; border-bottom:1px dashed var(--line); padding:8px 0}
.entry time{color:var(--muted)}
.entry h3{font-size:1rem; margin:0}
.entry a{color:var(--glow)}
.note{color:var(--muted); margin-top:12px}
/* Cursor: optional cat paw */
body{cursor:url('assets/cursor-paw.png') 8 2, auto}
.nav a, .filters button, .tile{cursor:url('assets/cursor-paw-tap.png') 8 2, pointer}
/* Small glow focus ring */
:focus{outline:2px solid var(--glow); outline-offset:2px}
===========================
= script.js
===========================
// simple filter for archive
const filters = document.querySelectorAll('.filters button');
const list = document.getElementById('list');
if(filters && list){
filters.forEach(btn=>btn.addEventListener('click',()=>{
filters.forEach(b=>b.classList.remove('active'));
btn.classList.add('active');
const f = btn.dataset.filter;
list.querySelectorAll('.entry').forEach(it=>{
it.style.display = (f==='all'|| it.dataset.cat===f) ? 'grid' : 'none';
});
// update hash for deep links
if(f!=='all') location.hash = f; else history.replaceState(null,'',location.pathname);
}));
// deep link support: #readings etc
const initial = location.hash.replace('#','');
if(initial){ const target = Array.from(filters).find(b=>b.dataset.filter===initial); if(target) target.click(); }
}
