Add dark/light mode and responsive images 💀

xSarscov · Feb 25, 2024 · b41b592 · b41b592
1 parent 5d05cbc
commit b41b592
Show file tree

Hide file tree

Showing 5 changed files with 300 additions and 141 deletions.
diff --git a/assets/css/image_search.css b/assets/css/image_search.css
@@ -4,12 +4,88 @@ html {
 }
 
 body {
-    background-color: #202124;
-    color: white;
     font-size: 14px;
     font-family: arial, sans-serif;
 }
 
+[data-bs-theme="dark"] {
+    background-color: #202124 !important;
+    color: #fff !important;
+
+    .navbar a {
+        color: #fff !important;
+    }
+
+    #google-apps:hover,
+    #google-acc:hover {
+        background-color: #2F3034;
+    }
+
+    .search-input .google-search>input:hover {
+        background-color: #303134;
+        box-shadow: 0 1px 6px 0 #171717;
+        border-color: rgba(223, 225, 229, 0);
+    }
+
+    .google-search>input {
+        border: #5F6368 1px solid;
+        color: #fff;
+    }
+
+    footer {
+        background-color: #171717;
+    }
+
+    .country {
+        border-bottom: #3C4043 1px solid;
+    }
+}
+
+[data-bs-theme="light"] {
+    background-color: #fff !important;
+    color: #000 !important;
+
+    .navbar a {
+        color: #000;
+    }
+
+
+    #google-apps {
+        color: #5F6368 !important;
+    }
+
+    #google-apps:hover,
+    #google-acc:hover {
+        background-color: rgba(60,64,67,.08);
+    }
+
+    .google-search>input {
+        border: #DADCE0 1px solid !important;
+
+    }
+
+    .search-input .google-search>input:hover {
+        background-color: #fff;
+        box-shadow: 0 1px 6px rgba(32,33,36,.28);
+        border-color: rgba(223,225,229,0);
+
+    }
+
+    .google-search>input {
+        border: #DADCE0 1px solid !important;
+    }
+
+
+
+    footer {
+        background-color: #EEEEEE !important;
+    }
+
+    .country {
+        border-bottom: #D6D8DC 1px solid !important;
+    }   
+}
+
 .navbar {
     padding: 0.6rem 0 !important;
 }
@@ -22,10 +98,6 @@ main section {
     gap: 1.6rem;
 }
 
-footer {
-    background-color: #171717;
-}
-
 footer ul {
     padding: 0 !important;
     margin: 0 !important;
@@ -40,22 +112,14 @@ footer li {
     width: 40px !important;
 }
 
-#google-apps:hover,
-#google-acc:hover {
-    background-color: #2F3034;
-}
-
-
 .navbar .nav-link:hover,
 .navbar-nav .nav-link:hover {
     text-decoration: underline;
 }
 
 .country {
-    border-bottom: #3C4043 1px solid;
     padding: 12.4px 30px 12px;
     font-size: 15px;
-
 }
 
 .quick-links {
@@ -72,7 +136,7 @@ footer li {
 }
 
 .google-logo {
-    height: 218px;
+    height: 288px;
 }
 
 .search-input {
@@ -83,14 +147,6 @@ footer li {
     height: 48px;
     width: 100%;
     background-color: transparent;
-    border: #5F6368 1px solid;
-    color: #fff;
-}
-
-.search-input .google-search>input:hover {
-    background-color: #303134;
-    box-shadow: 0 1px 6px 0 #171717;
-    border-color: rgba(223, 225, 229, 0);
 }
 
 .search-input .google-search>input:focus-visible {
@@ -109,61 +165,17 @@ footer li {
     right: 18px;
 }
 
-.google-btns {
-    margin-top: 1.9rem;
-    gap: .7rem;
-}
-
-.google-btns input {
-    background-color: #303134;
-    font-size: 14px;
-    padding: .4rem 1rem;
-}
-
-.google-btns input:hover {
-    background-color: #303134;
-    border: #5F6368 1px solid;
-}
-
-.google-btns input:active {
-    background-color: #303134 !important;
-    border: #5F6368 1px solid !important;
-}
-
-.google-btns input:focus {
-    border: #5F6368 1px solid !important;
-}
-
-.lang {
-    margin-top: 1.1rem;
-}
-
-.lang>span {
-    font-size: small;
-    color: #bdc1c6;
-}
-
-.lang span>a {
-    text-decoration: none;
-    color: #8AB4D6;
-    padding: 0 3px;
-}
-
-.lang span>a:hover {
-    text-decoration: underline;
-}
-
 .image-text {
     color: #4487f6;
     font: 16px/16px roboto-regular, arial, sans-serif;
-    left: 215px;
     white-space: nowrap;
 }
 
 #menu {
     display: none !important;
 }
 
+
 @media (max-width: 1200px) {
 
     .quick-links ul {
@@ -204,7 +216,9 @@ footer li {
 
 
     .quick-links ul div {
+        justify-content: center;
         align-items: center !important;
+        flex-wrap: wrap;
 
         div {
             gap: 0;
@@ -215,4 +229,21 @@ footer li {
         font-size: 12px;
         padding: 6px;
     }
+}
+
+@media (-webkit-min-device-pixel-ratio: 1) {
+    .image-text {
+      left: 215px;
+    }
+}
+
+@media (-webkit-min-device-pixel-ratio: 1.5) {
+    .image-text {
+        left: 167px;
+    }
+
+    .google-logo {
+        height: 130px;
+    }
+
 }