Edit A Media Queries For A Landing Section And Edit A Path For Images…

… For Landing
GziXnine · Aug 28, 2024 · 97db4d8 · 97db4d8
1 parent dbc77df
commit 97db4d8
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 30 deletions.
diff --git a/css/pages/_options.scss b/css/pages/_options.scss
@@ -176,14 +176,14 @@
   position: fixed;
   top: 0;
   left: 0;
-  background-color: rgba(0, 0, 0, 0.6);
+  background-color: rgba(0, 0, 0, 0.8);
   z-index: 2000;
 }
 
 .popUp {
   position: fixed;
-  padding: 40px 20px;
-  width: 500px;
+  padding: 20px 20px 40px;
+  width: 850px;
   border: 1px solid #eee;
   z-index: 2001;
   left: 50%;
@@ -217,17 +217,19 @@
     position: absolute;
     top: -13px;
     right: -13px;
-    width: 26px;
-    padding: 6px 4px;
+    width: 40px;
+    height: 40px;
+    padding: 6px 4px 5px;
     color: white;
     background-color: var(--main-color);
     border-color: white;
     outline: none;
+    font-weight: bold;
   }
 
   h3 {
     text-align: center;
-    margin: -8px 0 20px;
+    margin: 1px 0 20px;
     color: var(--main-color);
   }
 }

diff --git a/css/style.css b/css/style.css
@@ -290,14 +290,14 @@ html body .scroller {
   position: fixed;
   top: 0;
   left: 0;
-  background-color: rgba(0, 0, 0, 0.6);
+  background-color: rgba(0, 0, 0, 0.8);
   z-index: 2000;
 }
 
 .popUp {
   position: fixed;
-  padding: 40px 20px;
-  width: 500px;
+  padding: 20px 20px 40px;
+  width: 850px;
   border: 1px solid #eee;
   z-index: 2001;
   left: 50%;
@@ -331,16 +331,18 @@ html body .scroller {
   position: absolute;
   top: -13px;
   right: -13px;
-  width: 26px;
-  padding: 6px 4px;
+  width: 40px;
+  height: 40px;
+  padding: 6px 4px 5px;
   color: white;
   background-color: var(--main-color);
   border-color: white;
   outline: none;
+  font-weight: bold;
 }
 .popUp h3 {
   text-align: center;
-  margin: -8px 0 20px;
+  margin: 1px 0 20px;
   color: var(--main-color);
 }
 
@@ -400,10 +402,11 @@ html body .scroller {
 .landing .header .container .logo {
   width: 300px;
   padding: 15px;
-  font-weight: bold;
   font-size: 20px;
   display: flex;
   align-items: center;
+  letter-spacing: -1px;
+  font-family: "Matemasie", sans-serif;
 }
 .landing .header .container .links-container {
   text-align: right;
@@ -421,7 +424,7 @@ html body .scroller {
     background-color: #fff;
     display: block;
     position: absolute;
-    left: -380%;
+    left: -450%;
     top: 40px;
     width: -moz-fit-content;
     width: fit-content;
@@ -437,7 +440,7 @@ html body .scroller {
     display: block;
     margin: 10px;
     width: 100%;
-    padding: 10px 70px;
+    padding: 10px 60px;
   }
   .landing .header .container .links-container .links.open li:not(:last-of-type) {
     border-bottom: 1px solid #eee;
@@ -455,6 +458,7 @@ html body .scroller {
   color: #fff;
   text-decoration: none;
   transition: 0.3s;
+  font-weight: 500;
 }
 .landing .header .container .links-container .links li a:hover, .landing .header .container .links-container .links li a.active {
   color: var(--main-color);
@@ -468,8 +472,9 @@ html body .scroller {
   top: -24px;
   border-bottom-color: white;
   top: 17px;
+  z-index: 5;
 }
-@media (min-width: 991px) {
+@media (min-width: 992px) {
   .landing .header .container .links-container .toggle-menu::before {
     display: none;
   }
@@ -553,7 +558,7 @@ html body .scroller {
   color: var(--main-color);
   opacity: 0.5;
 }
-@media (max-width: 767px) {
+@media (max-width: 991px) {
   .landing .mouse-show .mouse {
     display: none;
   }
@@ -568,12 +573,12 @@ html body .scroller {
   color: var(--main-color);
   opacity: 0.5;
 }
-@media (min-width: 767px) {
+@media (min-width: 992px) {
   .landing .mouse-show .phone {
     display: none;
   }
 }
-@media (max-width: 767px) {
+@media (max-width: 991px) {
   .landing .mouse-show .phone {
     width: 30px;
     height: 30px;

diff --git a/css/style.css.map b/css/style.css.map
diff --git a/css/style.scss b/css/style.scss
@@ -49,10 +49,11 @@
       .logo {
         width: 300px;
         padding: 15px;
-        font-weight: bold;
         font-size: 20px;
         display: flex;
         align-items: center;
+        letter-spacing: -1px;
+        font-family: "Matemasie", sans-serif;
       }
 
       .links-container {
@@ -70,7 +71,7 @@
               background-color: #fff;
               display: block;
               position: absolute;
-              left: -380%;
+              left: -450%;
               top: 40px;
               width: fit-content;
               border-radius: 4px;
@@ -85,7 +86,7 @@
                 display: block;
                 margin: 10px;
                 width: 100%;
-                padding: 10px 70px;
+                padding: 10px 60px;
 
                 &:not(:last-of-type) {
                   border-bottom: 1px solid #eee;
@@ -107,6 +108,7 @@
               color: #fff;
               text-decoration: none;
               transition: 0.3s;
+              font-weight: 500;
 
               &:hover,
               &.active {
@@ -120,8 +122,9 @@
           &::before {
             @include shape("triangle", "top", white, 50%);
             top: 17px;
+            z-index: 5;
 
-            @media (min-width: 991px) {
+            @media (min-width: 992px) {
               display: none;
             }
           }
@@ -210,7 +213,7 @@
       color: var(--main-color);
       opacity: 0.5;
 
-      @media (max-width: 767px) {
+      @media (max-width: 991px) {
         display: none;
       }
     }
@@ -227,11 +230,11 @@
       color: var(--main-color);
       opacity: 0.5;
 
-      @media (min-width: 767px) {
+      @media (min-width: 992px) {
         display: none;
       }
 
-      @media (max-width: 767px) {
+      @media (max-width: 991px) {
         width: 30px;
         height: 30px;
       }

diff --git a/index.html b/index.html
@@ -17,7 +17,7 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet"
-    href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wdth,wght@0,75..100,300..800;1,75..100,300..800&display=swap">
+    href="https://fonts.googleapis.com/css2?family=Matemasie&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap">
 </head>
 
 <body>

diff --git a/js/main.js b/js/main.js
@@ -38,7 +38,7 @@ if (localbg !== null) {
         .classList.add("active");
     } else {
       document.querySelector(".random-backgrounds .no").classList.add("active");
-      landingPage.style.cssText = `background-image: url("../images/${localbgImg}")`;
+      landingPage.style.backgroundImage = 'url("images/' + localbgImg + '")';
     }
   });
 }
@@ -170,7 +170,7 @@ img.forEach((ele) => {
     popUpImg.src = ele.src;
 
     let myButton = document.createElement("button");
-    myButton.innerHTML = "x";
+    myButton.innerHTML = "X";
 
     myButton.addEventListener("click", function () {
       div.remove();