Initial commit with LFS

src/assets/css/style.css

@@ -0,0 +1,117 @@
+:root {
+  --bg: #fff;
+  --fg: #222;
+  --accent: #007acc;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #111;
+    --fg: #eee;
+    --accent: #46c;
+  }
+}
+/* Explicit “.dark” toggle override */
+html.dark {
+  --bg: #111;
+  --fg: #eee;
+  --accent: #46c;
+}
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background-color: var(--bg);
+  color: var(--fg);
+}
+.lightbox-open {
+  overflow: hidden;
+}
+.site-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  background: var(--bg);
+  border-bottom: 1px solid #ccc;
+}
+.emoji-button {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: var(--accent);
+}
+.gallery-grid {
+  column-count: 1;
+  column-gap: 1rem;
+  padding: 1rem;
+}
+@media (min-width: 768px) {
+  .gallery-grid { column-count: 2; }
+}
+@media (min-width: 1024px) {
+  .gallery-grid { column-count: 3; }
+}
+.gallery-item {
+  margin: 0 0 1rem;
+  position: relative;
+  cursor: pointer;
+}
+.gallery-item img {
+  width: 100%;
+  display: block;
+  border-radius: 8px;
+}
+.gallery-item figcaption {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  padding: 0.5rem;
+  background: rgba(0,0,0,0.6);
+  color: #fff;
+  font-size: 0.9rem;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+.gallery-item:focus figcaption,
+.gallery-item:hover figcaption {
+  opacity: 1;
+}
+#lightbox {
+  position: fixed;
+  top:0; left:0; right:0; bottom:0;
+  background: rgba(0,0,0,0.9);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+#lightbox[aria-hidden="false"] {
+  visibility: visible;
+  opacity: 1;
+}
+#lb-content img,
+#lb-content video {
+  max-width: 90vw;
+  max-height: 80vh;
+  border-radius: 8px;
+}
+#lb-caption {
+  color: #fff;
+  margin-top: 0.5rem;
+  text-align: center;
+  max-width: 90vw;
+}
+#lb-close {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  background: none;
+  border: none;
+  font-size: 2rem;
+  color: #fff;
+  cursor: pointer;
+}