From 96ea4e96b674c981692d55ffd014caca1e5ae4cc Mon Sep 17 00:00:00 2001 From: guamss Date: Thu, 4 Jun 2026 19:19:29 +0200 Subject: [PATCH] add: even cleaner code --- src/components/Layout.astro | 1 - src/{funcs.ts => misc.ts} | 2 +- src/{ => models}/photo.ts | 0 src/pages/index.astro | 3 +- src/pages/photos/[filename].astro | 5 +- src/style.css | 101 ------------------------------ src/styles/detail.css | 19 ++++++ src/styles/global.css | 62 ++++++++++++++++++ src/styles/index.css | 22 +++++++ 9 files changed, 109 insertions(+), 106 deletions(-) rename src/{funcs.ts => misc.ts} (94%) rename src/{ => models}/photo.ts (100%) delete mode 100644 src/style.css create mode 100644 src/styles/detail.css create mode 100644 src/styles/global.css create mode 100644 src/styles/index.css diff --git a/src/components/Layout.astro b/src/components/Layout.astro index 851d49f..74fc07c 100644 --- a/src/components/Layout.astro +++ b/src/components/Layout.astro @@ -1,5 +1,4 @@ --- -import "../style.css"; import Font from "astro/components/Font.astro"; import Nav from "./Nav.astro"; --- diff --git a/src/funcs.ts b/src/misc.ts similarity index 94% rename from src/funcs.ts rename to src/misc.ts index 0b96586..165597d 100644 --- a/src/funcs.ts +++ b/src/misc.ts @@ -1,4 +1,4 @@ -import { Photo } from "./photo"; +import { Photo } from "./models/photo"; export function initPhoto( image: any, diff --git a/src/photo.ts b/src/models/photo.ts similarity index 100% rename from src/photo.ts rename to src/models/photo.ts diff --git a/src/pages/index.astro b/src/pages/index.astro index 2d3cb23..00b3320 100644 --- a/src/pages/index.astro +++ b/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); --- diff --git a/src/pages/photos/[filename].astro b/src/pages/photos/[filename].astro index d0b05fa..c85724a 100644 --- a/src/pages/photos/[filename].astro +++ b/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", { diff --git a/src/style.css b/src/style.css deleted file mode 100644 index fbef6e0..0000000 --- a/src/style.css +++ /dev/null @@ -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; - } - } -} diff --git a/src/styles/detail.css b/src/styles/detail.css new file mode 100644 index 0000000..0818244 --- /dev/null +++ b/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; + } + } +} diff --git a/src/styles/global.css b/src/styles/global.css new file mode 100644 index 0000000..3603073 --- /dev/null +++ b/src/styles/global.css @@ -0,0 +1,62 @@ +* { + box-sizing: border-box; +} + +html, +body { + color: #be5985; + background-color: #ffedfa; + 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: #ffb8e0; + + 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: #be5985; + transition: 0.2s; + } + + a:hover, + button:hover { + scale: 1.02; + cursor: pointer; + color: #ec7fa9; + } + } + } + + footer { + margin: 4rem; + } + } +} diff --git a/src/styles/index.css b/src/styles/index.css new file mode 100644 index 0000000..12be442 --- /dev/null +++ b/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; + } +}