add: even cleaner code

src/components/Layout.astro

@@ -1,5 +1,4 @@
 ---
-import "../style.css";
 import Font from "astro/components/Font.astro";
 import Nav from "./Nav.astro";
 ---

src/misc.ts

@@ -1,4 +1,4 @@
-import { Photo } from "./photo";
+import { Photo } from "./models/photo";
 
 export function initPhoto(
   image: any,

src/pages/index.astro

@@ -1,7 +1,8 @@
 ---
+import "../styles/index.css";
 import Layout from "../components/Layout.astro";
 import Image from "../components/Image.astro";
-import { initPhotos } from "../funcs";
+import { initPhotos } from "../misc";
 const imagesObj: any = import.meta.glob("../assets/IMG/*.JPG", { eager: true });
 const images = initPhotos(imagesObj);
 ---

src/pages/photos/[filename].astro

@@ -1,11 +1,12 @@
 ---
 export const prerender = false;
+import "../../styles/detail.css";
 import ExifReader from "exifreader";
 import Layout from "../../components/Layout.astro";
-import { Photo } from "../../photo";
+import { Photo } from "../../models/photo";
 const { filename } = Astro.params;
 import { PHOTO_DIR_ABSOLUTE_PATH } from "astro:env/server";
-import { initPhoto, initPhotos } from "../../funcs";
+import { initPhoto, initPhotos } from "../../misc";
 
 const relativePath = `../../assets/IMG/${filename}`;
 const allImages: any = import.meta.glob("../../assets/IMG/*.JPG", {

src/style.css

@@ -1,101 +0,0 @@
-* {
-  box-sizing: border-box;
-}
-
-html,
-body {
-  color: #be5985;
-  background-color: #ffedfa;
-  font-family: var(--font-atkinson);
-  margin: 0;
-  width: 100%;
-  height: 100%;
-}
-
-header {
-  width: 95%;
-}
-
-footer {
-  margin: 4rem;
-}
-
-div {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-}
-
-button {
-  background-color: transparent;
-  border: none;
-  margin: 0;
-  padding: 0;
-  text-align: inherit;
-  font: inherit;
-  border-radius: 0;
-  appearance: none;
-}
-
-main {
-  max-width: 95%;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 1rem;
-
-  img {
-    width: 100%;
-    aspect-ratio: 16 / 9;
-    object-fit: cover;
-    border-radius: 4px;
-    transition: 0.2s;
-    border: 4px solid #ffb8e0;
-  }
-
-  img:hover {
-    scale: 1.02;
-    border: 3px solid #ec7fa9;
-  }
-}
-
-nav {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  border-radius: 2rem;
-  margin: 2rem 0;
-  background-color: #ffb8e0;
-
-  a,
-  button {
-    padding: 0 1rem;
-    text-decoration: none;
-    color: #be5985;
-    transition: 0.2s;
-  }
-
-  a:hover,
-  button:hover {
-    scale: 1.02;
-    cursor: pointer;
-    color: #ec7fa9;
-  }
-}
-
-article {
-  width: 95%;
-  display: flex;
-  flex-direction: column;
-
-  main {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    img {
-      max-width: 80%;
-      border: 4px solid #ffb8e0;
-      border-radius: 4px;
-    }
-  }
-}

src/styles/detail.css

@@ -0,0 +1,19 @@
+@import "global.css";
+
+article {
+  width: 95%;
+  display: flex;
+  flex-direction: column;
+
+  main {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    img {
+      max-width: 80%;
+      border: 4px solid #ffb8e0;
+      border-radius: 4px;
+    }
+  }
+}

src/styles/global.css

@@ -0,0 +1,69 @@
+:root {
+  --primary-background-color: #ffedfa;
+  --secondary-background-color: #ffb8e0;
+  --font-color: #be5985;
+  --font-hover: #ec7fa9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  color: var(--font-color);
+  background-color: var(--primary-background-color);
+  font-family: var(--font-atkinson);
+  margin: 0;
+  width: 100%;
+  height: 100%;
+
+  div {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+
+    header {
+      width: 95%;
+
+      nav {
+        display: flex;
+        align-items: baseline;
+        justify-content: space-between;
+        border-radius: 2rem;
+        margin: 2rem 0;
+        background-color: var(--secondary-background-color);
+
+        button {
+          background-color: transparent;
+          border: none;
+          margin: 0;
+          padding: 0;
+          text-align: inherit;
+          font: inherit;
+          border-radius: 0;
+          appearance: none;
+        }
+
+        a,
+        button {
+          padding: 0 1rem;
+          text-decoration: none;
+          color: var(--font-color);
+          transition: 0.2s;
+        }
+
+        a:hover,
+        button:hover {
+          scale: 1.02;
+          cursor: pointer;
+          color: var(--font-hover);
+        }
+      }
+    }
+
+    footer {
+      margin: 4rem;
+    }
+  }
+}

src/styles/index.css

@@ -0,0 +1,22 @@
+@import "global.css";
+
+main {
+  max-width: 95%;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+
+  img {
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    object-fit: cover;
+    border-radius: 4px;
+    transition: 0.2s;
+    border: 4px solid #ffb8e0;
+  }
+
+  img:hover {
+    scale: 1.02;
+    border: 3px solid #ec7fa9;
+  }
+}