more CSS

Mole1424 · Aug 14, 2023 · 8b72173 · 8b72173
1 parent cf88f88
commit 8b72173
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 12 deletions.
diff --git a/static/css/projects.css b/static/css/projects.css
@@ -5,8 +5,7 @@
 }
 
 .project {
-    height: 25vh;
-    width: 90%;
+    width: 100%;
     background-color: var(--background2);
     border-radius: 10px;
     color: var(--text);
@@ -26,9 +25,6 @@
     overflow: hidden;
     width: 100%;
     height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
     object-fit: cover;
     border-radius: 10px;
 }
@@ -56,9 +52,10 @@
 }
 
 .foreground {
-    max-width: 95%;
-    max-height: 95%;
+    max-width: 100%;
+    max-height: 100%;
     object-fit: contain;
+    border-radius: 10px;
 }
 
 .overlay {
@@ -100,7 +97,7 @@
 @media screen and (min-width: 567px) {
     .projects {
         display: grid;
-        gap: 10px;
+        gap: 1vw;
         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
         justify-items: center;
         align-items: stretch;
@@ -124,12 +121,12 @@
         display: flex;
         overflow: auto;
         scroll-snap-type: x mandatory;
-        scroll-padding: 0 2%;
+        scroll-padding: 0 5vw;
         padding: 0;
     }
 
     .project {
-        height: 80vh;
+        height: 50vh;
         width: 90vw;
         flex-shrink: 0;
         scroll-snap-align: start;

diff --git a/templates/projects.html b/templates/projects.html
@@ -3,10 +3,10 @@
     <a href="/projects/{{project.id}}" class="project">
         <div class="imgtitle">
             <div class="backgroundcontainer">
-                <img class="background" src="{{ project.image }}" alt="{{ project.title }}">
+                <img class="background" src="{{ project.image }}" alt="{{ project.title }} background">
             </div>
             <div class="foregroundcontainer">
-                <img class="foreground" src="{{ project.image }}" alt="{{ project.title }}">
+                <img class="foreground" src="{{ project.image }}" alt="{{ project.title }} foreground">
             </div>
             <div class="overlay">
                 <h1>{{ project.title }}</h1>