fixes and style changes

georgebaskervil · May 18, 2024 · 346503e · 346503e
1 parent f1a7b2b
commit 346503e
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 4 deletions.
diff --git a/src/components/picturesect.astro b/src/components/picturesect.astro
@@ -8,14 +8,39 @@ const images = getImages();
 <article class="flex flex-col gap-4">
     <section class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
         {images.slice(start, end).map((image) => (
-            <picture style="position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden; border-radius: 10px; transition: transform 0.3s ease; width: 100%; aspect-ratio: 3 / 2;">
+            <picture class="image-container">
                 <source srcset={`/image-assets/${image}.avif`} type="image/avif">
-                <img data-src={`/image-assets/${image}.webp`} alt="Image" style="width: 100%; height: 100%; display: block; object-fit: cover;" class="lazy" />
+                <img data-src={`/image-assets/${image}.webp`} alt="Image" class="lazy" />
             </picture>
         ))}
     </section>
 </article>
 
+<style>
+.image-container {
+    position: relative; 
+    display: flex; 
+    justify-content: center; 
+    align-items: center; 
+    overflow: hidden; 
+    border-radius: 10px; 
+    transition: transform 0.3s ease; 
+    width: 100%; 
+    aspect-ratio: 3 / 2;
+}
+
+.image-container img {
+    width: 100%; 
+    height: 100%; 
+    display: block; 
+    object-fit: cover;
+}
+
+.image-container:hover {
+    transform: scale(1.05);
+}
+</style>
+
 <script>
   window.onload = () => {
     const observer = new IntersectionObserver((entries, observer) => {

diff --git a/src/pages/pictures.astro b/src/pages/pictures.astro
@@ -23,7 +23,9 @@ const sections = Array.from({length: 4}, (_, i) => i * imagesPerSection);
 <div class="background-animation"></div>
 <Layout>
   <h1 class="text-4xl font-bold mb-1 text-text">Latest Pictures:</h1>
-  <p class="mt-0 mb-5 text-text" style="opacity:0.8; font-style: italic;">Images licensed under CC0 1.0 Universal. Download them on the <a href="https://github.com/georgebaskervil/Personal-Website/tree/main/public/image-assets" style="text-decoration: underline;" target="_blank">GitHub repo</a></p>
+  <p class="bottom-0 text-left text-white text-sm mt-0 mb-3" style="opacity:0.4; font-style: italic; font-family: monospace;">
+// Images licensed under CC0 1.0 Universal. Download them on the <a href="https://github.com/georgebaskervil/Personal-Website/tree/main/public/image-assets" class="hover:underline" target="_blank">GitHub repo</a>
+</p>
   {sections.map((start, index) => (
     <>
       <PictureSect start={start} end={start + imagesPerSection} key={index} />

diff --git a/src/pages/posts/index.astro b/src/pages/posts/index.astro
@@ -25,7 +25,9 @@ const posts = (await getCollection("posts")).sort(
 <Layout>
 
   <h1 class="text-4xl font-bold mb-1 text-text">Latest Posts:</h1>
-  <p class="mt-0 mb-5 text-text" style="opacity:0.8; font-style: italic;">Articles licensed under CC0 1.0 Universal. Download them on the <a href="https://github.com/georgebaskervil/Personal-Website/tree/main/src/content/posts" style="text-decoration: underline;" target="_blank">GitHub repo</a></p>
+<p class="bottom-0 text-left text-white text-sm mt-0 mb-5" style="opacity:0.4; font-style: italic; font-family: monospace;">
+// Articles licensed under CC0 1.0 Universal. Download them on the <a href="https://github.com/georgebaskervil/Personal-Website/tree/main/src/content/posts" class="hover:underline" target="_blank">GitHub repo</a>
+</p>
 
   <article class="flex flex-col gap-4">
     <section class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">