Merge pull request #283 from LaurierHawkHacks/fix/279/cumulative-layo…

…ut-shift-issue Fix: no more / rare content shift
LaurierHawkHacks · Apr 13, 2024 · bcad563 · bcad563
2 parents 986f9c8 + 36754f0
commit bcad563
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/src/components/sections/HeroStats.section.tsx b/src/components/sections/HeroStats.section.tsx
@@ -62,11 +62,15 @@ const HeroStatSection: React.FC = () => {
                     src={HeroAboutDesktop}
                     alt="Hawkhacks stats"
                     className="hidden w-full sm:block"
+                    width="1920"
+                    height="7149"
                 />
                 <img
                     src={HeroAboutMobile}
                     alt="Hawkhacks stats"
                     className="block w-full sm:hidden"
+                    width="1920"
+                    height="8127"
                 />
                 <div className="mt-16 px-4 sm:ml-16 sm:mt-16 sm:px-0 lg:ml-20 lg:mt-24 xl:ml-24 xl:mt-32 2xl:mt-10">
                     <img

diff --git a/src/index.css b/src/index.css
@@ -11,6 +11,10 @@ body {
     background-color: #fdddb7;
 }
 
+img {
+    aspect-ratio: attr(width) / attr(height);
+}
+
 @layer base {
     h1 {
         @apply text-8xl font-extrabold 2xl:text-8.5xl;
@@ -87,9 +91,9 @@ header::before {
 
 @keyframes spin {
     from {
-      transform: rotate(0deg);
+        transform: rotate(0deg);
     }
     to {
-      transform: rotate(360deg);
+        transform: rotate(360deg);
     }
-}
+}