From 5a4f7f896a2dc553479bed9e6d69d7ed82dab5f6 Mon Sep 17 00:00:00 2001
From: loks0n <22452787+loks0n@users.noreply.github.com>
Date: Wed, 7 Jun 2023 09:14:14 +0100
Subject: [PATCH 1/3] style: add 16/9 aspect ratio to object-og

---
 src/global.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/global.css b/src/global.css
index 820e93d..69d1445 100644
--- a/src/global.css
+++ b/src/global.css
@@ -58,7 +58,6 @@
 }
 
 .object-og {
-  aspect-ratio: 1.8 / 1;
   width: 100%;
   height: 100%;
 }
@@ -66,6 +65,8 @@
 .object-og img {
   width: 100%;
   object-fit: cover;
+  object-position: center;
+  aspect-ratio: 16 / 9;
 }
 
 .object-square {

From 7708de1598ef580cf14ca8531a8e24b9fc3bec17 Mon Sep 17 00:00:00 2001
From: loks0n <22452787+loks0n@users.noreply.github.com>
Date: Wed, 7 Jun 2023 10:05:44 +0100
Subject: [PATCH 2/3] style: add inner shadow to project images

---
 src/components/layout/Project.tsx         |  1 -
 src/components/layout/ProjectFeatured.tsx |  3 +--
 src/global.css                            | 26 +++++++++++++++++------
 src/routes/projects/[projectId]/index.tsx |  6 +++---
 4 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/components/layout/Project.tsx b/src/components/layout/Project.tsx
index a40068d..0cd7792 100644
--- a/src/components/layout/Project.tsx
+++ b/src/components/layout/Project.tsx
@@ -70,7 +70,6 @@ export default component$((props: { project: Project | null }) => {
 
       <div
         class="object-og u-cursor-pointer"
-        style="height: 200px;"
         onClick$={async () => await nav(`/projects/${project.$id}`)}
       >
         <img src={AppwriteService.getProjectThumbnail(project.imageId)} />
diff --git a/src/components/layout/ProjectFeatured.tsx b/src/components/layout/ProjectFeatured.tsx
index b0e2e47..8b136e4 100644
--- a/src/components/layout/ProjectFeatured.tsx
+++ b/src/components/layout/ProjectFeatured.tsx
@@ -14,11 +14,10 @@ export default component$((props: { project: Project }) => {
         <div class="u-flex-basis-50-percent u-flex-shrink-0">
           <button
             onClick$={async () => await nav(`/projects/${project.$id}`)}
-            class="object-og"
+            class="object-og object-og-rounded"
           >
             <img
               src={AppwriteService.getProjectThumbnail(project.imageId, 1920)}
-              style="border-radius: var(--border-radius-medium);"
             />
           </button>
         </div>
diff --git a/src/global.css b/src/global.css
index 69d1445..03e28ed 100644
--- a/src/global.css
+++ b/src/global.css
@@ -59,25 +59,37 @@
 
 .object-og {
   width: 100%;
-  height: 100%;
+  position: relative;
 }
 
 .object-og img {
+  display: block;
   width: 100%;
   object-fit: cover;
   object-position: center;
   aspect-ratio: 16 / 9;
 }
 
-.object-square {
-  aspect-ratio: 1 / 1;
+.object-og::after {
+  display: block;
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
   width: 100%;
+  height: 100%;
+  box-shadow: inset 0 0 0.5rem rgba(0, 0, 0, 0.1);
+  pointer-events: none;
 }
 
-.object-square img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+.theme-dark .object-og::after {
+  box-shadow: inset 0 0 0.5rem rgba(255, 255, 255, 0.1);
+}
+
+.object-og-rounded {
+  border-radius: var(--border-radius-medium);
+  overflow: hidden;
+  display: inline-block;
 }
 
 .vertical-button {
diff --git a/src/routes/projects/[projectId]/index.tsx b/src/routes/projects/[projectId]/index.tsx
index d5f2fbc..f9b480d 100644
--- a/src/routes/projects/[projectId]/index.tsx
+++ b/src/routes/projects/[projectId]/index.tsx
@@ -225,10 +225,10 @@ export default component$(() => {
             />
           </div>
         </div>
-        <div class="u-flex-vertical u-gap-24 u-width-full-line">
-          <div class="object-og u-width-full-line">
+
+        <div>
+          <div class="object-og object-og-rounded">
             <img
-              style="border-radius: var(--border-radius-medium);"
               src={AppwriteService.getProjectThumbnail(
                 projectData.value.project.imageId
               )}

From 56f5ddba4ac52c1770898cb658bc99c6bded97fa Mon Sep 17 00:00:00 2001
From: loks0n <22452787+loks0n@users.noreply.github.com>
Date: Wed, 7 Jun 2023 10:14:15 +0100
Subject: [PATCH 3/3] style: remove dark inner shadow

---
 src/global.css | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/global.css b/src/global.css
index 03e28ed..6213da5 100644
--- a/src/global.css
+++ b/src/global.css
@@ -82,10 +82,6 @@
   pointer-events: none;
 }
 
-.theme-dark .object-og::after {
-  box-shadow: inset 0 0 0.5rem rgba(255, 255, 255, 0.1);
-}
-
 .object-og-rounded {
   border-radius: var(--border-radius-medium);
   overflow: hidden;