Changed theme and layout improvement.

romu70 · Aug 26, 2024 · af2801d · af2801d
1 parent 4510653
commit af2801d
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 23 deletions.
diff --git a/src/components/Detail.astro b/src/components/Detail.astro
@@ -10,18 +10,22 @@ const { item, index } = Astro.props;
 const locationRoot = "https://www.openstreetmap.org/?";
 let url = locationRoot + item.data.geo;
 
+console.log("item.data.image.file", item.data.image.file);
+
 ---
 
 <div class="detail" data-index={index}>
   <div class="detail-left">
-    <Image src={item.data.image.file} alt={item.data.image.alt} data-index={index} />
+    <a href={item.data.image.file} target="_blank" rel="noreferrer noopener">
+      <Image src={item.data.image.file} alt={item.data.image.alt} data-index={index} />
+    </a>
   </div>
     <div class="detail-right">
-      <button class="close-button" type="button" aria-label="Close" >
+      <!-- <button class="close-button" type="button" aria-label="Close" >
         <svg class="close-svg" width="16px" height="16px">
           <use xlink:href="#close" />
         </svg>
-      </button>
+      </button> -->
       <div class="info">
         <div class="info-top">
           <h2><Location geo={item.data.geo} place={item.data.image.alt + ", " + item.data.place} /></h2>
@@ -31,14 +35,21 @@ let url = locationRoot + item.data.geo;
       </div>
       <button class="location-button"><a href={url} target="_blank">See location</a></button>
       <div class="buttons">
-        <button class="previous-button" type="button" aria-label="Previous" data-index={index} disabled>
-          <svg class="arrow-svg" width="24px" height="24px">
-            <use xlink:href="#left" />
-          </svg>
-        </button>
-        <button class="next-button" type="button" aria-label="Next" data-index={index}>
-          <svg class="arrow-svg" width="24px" height="24px">
-            <use xlink:href="#right" />
+        <div class="buttons-left">
+          <button class="previous-button" type="button" aria-label="Previous" data-index={index} disabled>
+            <svg class="arrow-svg" width="24px" height="24px">
+              <use xlink:href="#left" />
+            </svg>
+          </button>
+          <button class="next-button" type="button" aria-label="Next" data-index={index}>
+            <svg class="arrow-svg" width="24px" height="24px">
+              <use xlink:href="#right" />
+            </svg>
+          </button>
+        </div>
+        <button class="close-button" type="button" aria-label="Close" >
+          <svg class="close-svg" width="16px" height="16px">
+            <use xlink:href="#close" />
           </svg>
         </button>
       </div>
@@ -65,9 +76,16 @@ let url = locationRoot + item.data.geo;
     display: flex;
   }
 
-  .detail-left img {
+  .detail-left a {
+    display:flex;
     align-self: center;
     margin: auto;
+    height: 100%
+  }
+
+  .detail-left a img {
+    margin-top: auto;
+    margin-bottom: auto;
   }
 
   .detail-right {
@@ -88,13 +106,23 @@ let url = locationRoot + item.data.geo;
     justify-content: space-between;
     align-items: center;
     gap: 0.5rem;
-s  }
+  }
 
   .buttons {
     display:flex;
     flex-direction: row;
-		justify-content: center;
+  }
+
+  .buttons-left {
+    display:flex;
+    flex-direction: row;
+    align-self: flex-start;
     gap: 1rem;
+    flex-basis: 90%;
+  }
+
+  .close-button {
+    align-self: flex-end;
   }
 
   button {
@@ -162,7 +190,7 @@ s  }
       display: flex;
     }
 
-    .detail-left img {
+    .detail-left a {
       align-self: center;
       margin: auto;
     }
@@ -174,7 +202,6 @@ s  }
     .buttons {
       display:flex;
       flex-direction: row;
-      justify-content: flex-end;
       gap: 1rem;
     }
   }

diff --git a/src/components/Gallery.astro b/src/components/Gallery.astro
@@ -235,7 +235,7 @@ const { collection, compare } = Astro.props;
   }
 
   function onDetailCloseClick(this: HTMLElement, e: Event) {
-    hideDetail(this.parentNode?.parentNode as Div);
+    hideDetail(this.parentNode?.parentNode?.parentNode as Div);
   }
 
   function onDetailNextClick(this: HTMLElement, e: Event) {

diff --git a/src/components/Location.astro b/src/components/Location.astro
@@ -12,6 +12,6 @@ let url = locationRoot + geo;
 <style>
   .location a {
     color: var(--main-color);
-    font-weight: 600;
+    font-weight:500;
   }
 </style>
diff --git a/src/components/Menu.astro b/src/components/Menu.astro
@@ -46,7 +46,7 @@ const base = import.meta.env.BASE_URL;
     text-align: center;
     text-decoration: none;
     font-size: 1.2rem;
-    font-weight: 500;
+    font-weight:lighter;
     padding: 1rem;
   }
 

diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro
@@ -2,6 +2,7 @@
 import Header from "../components/Header.astro";
 import Heading from "../components/Heading.astro";
 import "../styles/gallery.css";
+import '@fontsource-variable/montserrat';
 const { title, rss } = Astro.props;
 const favi = import.meta.env.BASE_URL + "/favicon.svg";
 ---

diff --git a/src/styles/gallery.css b/src/styles/gallery.css
@@ -7,9 +7,9 @@
   --line-height: 1.25rem;
   font-family: Inter, sans-serif;
   font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
-  --main-color: rgb(245, 222, 179);
+  --main-color: white;
   --aspect-ratio: 1.618; /* golden ratio */
-  --active-background-color: #303030;
+  --active-background-color: #464646;
   --mobile-view-breakpoint: 768; /* px */
   --detail-pane-height: 20rem;
 }
@@ -29,12 +29,15 @@ body {
   /* padding-top: 1%; */
   font-size: 1rem;
   line-height: var(--line-height);
-  background-color: #464646;
+  background-color: #303030;
+  font-family: 'Montserrat Variable', sans-serif;
+  font-weight: lighter;
 }
 
 h1 {
   margin-bottom: 1rem;
   font-size: 3rem;
+  font-weight:lighter;
   line-height: normal;
   text-align: center;
   color:var(--main-color)
@@ -43,6 +46,7 @@ h1 {
 h2 {
   margin-bottom: 1rem;
   font-size: 1.5rem;
+  font-weight:lighter;
   line-height: normal;
   color:var(--main-color)
 }
@@ -58,11 +62,12 @@ svg, svg symbol {
   align-content: center;
   width: 90%;
   line-height: 160%;
+  font-weight:lighter;
 }
 
 #about a {
   color: var(--main-color);
-  font-weight: 600;
+  font-weight: 500;
 }
 
 @media (min-width: 360px) {