fixed some images ratio for seo

Lazy-Solutions · Jul 25, 2024 · 718d872 · 718d872
1 parent cd43e45
commit 718d872
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 3 deletions.
diff --git a/css/style.css b/css/style.css
@@ -47,6 +47,7 @@ header .LogoWrapper {
 }
 header .LogoWrapper .Logo-Desktop {
   display: none;
+  aspect-ratio: 96/19;
   max-width: 80%;
   fill: #4c7071;
 }
@@ -58,6 +59,7 @@ header .LogoWrapper .Logo-Desktop {
 header .LogoWrapper .Logo-Mobile {
   width: 100%;
   fill: #4c7071;
+  aspect-ratio: 26/5;
 }
 @media screen and (min-width: 1280px) {
   header .LogoWrapper .Logo-Mobile {
@@ -107,11 +109,13 @@ header #navigation a {
 }
 header #navigation a .lazy_icon {
   height: 45px;
+  aspect-ratio: 15/13;
 }
 header #navigation a .lazy_logo {
   height: 35px;
   padding-left: 10px;
   transition: opacity 0.5s;
+  aspect-ratio: 26/5;
 }
 header #navigation div {
   display: flex;
@@ -391,6 +395,7 @@ header #navigation div a:hover {
 #Team .team .staff .portrait img {
   position: relative;
   width: 100%;
+  aspect-ratio: 1/1;
 }
 #Team .team .staff h3 {
   margin: 10px;

diff --git a/css/style.css.map b/css/style.css.map
diff --git a/css/style.scss b/css/style.scss
@@ -97,6 +97,7 @@ header {
 
         .Logo-Desktop {
             display: none;
+            aspect-ratio: 96 / 19;
             max-width: 80%;
             fill: $LogoColor;
 
@@ -108,6 +109,8 @@ header {
         .Logo-Mobile {
             width: 100%;
             fill: $LogoColor;
+            aspect-ratio: 26 / 5;
+
 
             @include ms(desk) {
                 display: none;
@@ -165,12 +168,14 @@ header {
 
             .lazy_icon {
                 height: 45px;
+                aspect-ratio: 15 / 13;
             }
 
             .lazy_logo {
                 height: 35px;
                 padding-left: 10px;
                 transition: opacity 0.5s;
+                aspect-ratio: 26 / 5;
             }
         }
 
@@ -264,6 +269,7 @@ header {
             height: 500px;
             width: 100%;
             background-position: center;
+
             padding: 5%;
             box-sizing: border-box;
 
@@ -487,6 +493,7 @@ header {
                 img {
                     position: relative;
                     width: 100%;
+                    aspect-ratio: 1 / 1;
                 }
             }
 

diff --git a/index.html b/index.html
@@ -21,8 +21,8 @@
     <link rel="preload" href="https://kit.fontawesome.com/f15145c18c.js" as="script" crossorigin="anonymous">
 
     <!-- Styles and Scripts -->
-    <link rel="stylesheet" href="css/style.css">
-    <script src="js/jquery.min.js"></script>
+    <link preload rel="stylesheet" href="css/style.css">
+    <script defer src="js/jquery.min.js"></script>
     <script defer src="https://kit.fontawesome.com/f15145c18c.js" crossorigin="anonymous"></script>
     <script defer src="js/script.js"></script>
 

diff --git a/media/images/bg.webp b/media/images/bg.webp