Hide beaker on tablet due to width

StubberG3 · Apr 10, 2024 · 0523841 · 0523841
1 parent 1954ad3
commit 0523841
Showing 1 changed file with 14 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -302,9 +302,6 @@
       .headline {
         background-color: var(--primary-color-dark);
         background: var(--primary-color-dark);
-        background-image:
-          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23504661' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E"),
-          url("images/beaker.svg");
         background-repeat: repeat, no-repeat;
       }
 
@@ -513,6 +510,16 @@
         }
       }
 
+      /* show beaker on smaller mobile */
+      @media (max-width: 450px) {
+        .headline {
+          background-image:
+          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23504661' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E"),
+          url("images/beaker.svg");
+          background-position: bottom;
+        }
+      }
+
       /* mobile */
       @media (max-width: 601px) {
         html {
@@ -538,7 +545,6 @@
 
         .headline {
           padding: 6rem 3rem 0;
-          background-position: center, left bottom;
         }
 
         .main-content {
@@ -571,6 +577,10 @@
           top: 0;
           height: 100vh;
           align-items: stretch;
+          background-image:
+            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23504661' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E"),
+            url("images/beaker.svg");
+          background-position: center, left bottom;
           background-position: bottom;
         }