style: hide ubiquity dao in branding if limited screen space

ubiquity · Jan 23, 2024 · 69ca27e · 69ca27e
1 parent 947aad4
commit 69ca27e
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 7 deletions.
diff --git a/static/index.html b/static/index.html
@@ -39,7 +39,7 @@
           <path
             d="M132 41.1c0-2.3-1.3-4.5-3.3-5.7L69.4 1.2c-1-.6-2.1-.9-3.3-.9-1.1 0-2.3.3-3.3.9L3.6 35.4c-2 1.2-3.3 3.3-3.3 5.7v68.5c0 2.3 1.3 4.5 3.3 5.7l59.3 34.2c2 1.2 4.5 1.2 6.5 0l59.3-34.2c2-1.2 3.3-3.3 3.3-5.7V41.1zm-11.9 62.5c0 2.7-1.4 5.2-3.7 6.5l-46.6 27.5c-1.1.7-2.4 1-3.7 1s-2.5-.3-3.7-1l-46.6-27.5c-2.3-1.3-3.7-3.8-3.7-6.5V54.1c0-1.2.6-2.4 1.7-3 1.1-.6 2.3-.6 3.4 0l8 4.7c1.9 1.1 3 3.3 4.4 5.8.3.5.5 1 .8 1.4 3.5 6.3 5.2 13 6.8 19.5 3 11.9 6 24.2 21.3 28.2 5 1.3 10.4 1.3 15.4 0 15.2-4 18.3-16.3 21.3-28.2C96.8 76 98.5 69.3 102 63c.3-.5.5-1 .8-1.4 1.3-2.5 2.5-4.6 4.4-5.8l8-4.7c1-.6 2.3-.6 3.4 0s1.7 1.7 1.7 3v49.5zM62.6 13.7c2.2-1.3 4.9-1.3 7.1 0L110 37.6c1 .6 1.6 1 1.6 2.2 0 1.2-.6 1.9-1.6 2.5l-7.7 4.6c-3.4 2-5.1 5.2-6.6 8.1l-.1.2c-.2.4-.4.7-.6 1.1-3.8 6.8-6.6 14-8.2 20.4C83.6 89.1 82.4 97.3 72 100c-1.9.5-3.9.7-5.8.7-2 0-3.9-.3-5.8-.7C50 97.3 48.7 89.1 45.6 76.6 44 70.2 41.2 63 37.4 56.2c-.2-.3-.4-.7-.6-1l-.1-.3c-1.5-2.8-3.3-6.1-6.6-8.1l-7.7-4.6c-1-.6-1.6-1.3-1.6-2.5s.6-1.6 1.6-2.2l40.2-23.8z"
           ></path></svg
-        ><span><span class="full">Ubiquity DAO | </span><span class="full">DevPool Directory</span></span></div
+        ><span><span class="full">Ubiquity DAO | </span><span class="mid">DevPool Directory</span></span></div
       ><div id="filters"></div
     ></div>
     <script type="module" src="dist/src/home/home.js"></script>

diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css
@@ -340,6 +340,16 @@
     left: 0;
     background-color: #00ffff;
   }
+
+  @media screen and (max-width: 804px) {
+    .mid {
+      display: none !important;
+    }
+    #branding > span {
+      padding: 0;
+    }
+  }
+
   @media screen and (max-width: 1139px) {
     .full {
       display: none !important;
@@ -354,11 +364,18 @@
       margin: auto;
       margin-left: 12px;
     }
-    #branding > span {
-      padding: 0;
+
+    #toolbar {
+      overflow-x: auto;
+      white-space: nowrap;
+      margin: 0;
+      padding-left: 0;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
     }
     #toolbar > * {
-      margin: auto;
+      margin-left: 12px;
     }
     #toolbar > button {
       padding: 12px 16px;
@@ -595,9 +612,13 @@
     width: 100%;
     height: 16px;
     text-align: center;
+    min-width: 80px;
   }
   #filters input[type="text"]::placeholder {
     font-size: 12px;
     letter-spacing: 0.5px;
   }
+  button#github-login-button {
+    margin-left: 0;
+  }
 }
diff --git a/static/style/style.css b/static/style/style.css
@@ -340,6 +340,16 @@
     left: 0;
     background-color: #0ff;
   }
+
+  @media screen and (max-width: 804px) {
+    .mid {
+      display: none !important;
+    }
+    #branding > span {
+      padding: 0;
+    }
+  }
+
   @media screen and (max-width: 1139px) {
     .full {
       display: none !important;
@@ -354,11 +364,18 @@
       margin: auto;
       margin-left: 12px;
     }
-    #branding > span {
-      padding: 0;
+
+    #toolbar {
+      overflow-x: auto;
+      white-space: nowrap;
+      margin: 0;
+      padding-left: 0;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
     }
     #toolbar > * {
-      margin: auto;
+      margin-left: 12px;
     }
     #toolbar > button {
       padding: 12px 16px;
@@ -595,9 +612,13 @@
     width: 100%;
     height: 16px;
     text-align: center;
+    min-width: 80px;
   }
   #filters input[type="text"]::placeholder {
     font-size: 12px;
     letter-spacing: 0.5px;
   }
+  button#github-login-button {
+    margin-left: 0;
+  }
 }