fix: update buttons to fix wrapping issue on mobile (#259)

- Fix issue where the text was wrapping inside the new universe buttons on mobile iOS - Added a cache buster to the CSS files
tari-project · Oct 17, 2024 · 6cfb1c0 · 6cfb1c0
1 parent a7d1312
commit 6cfb1c0
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 10 deletions.
diff --git a/_includes/head.html b/_includes/head.html
@@ -20,7 +20,7 @@
 
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
 <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/normalize.css" />
-<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/styles.css" />
+<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/styles.css?v=2" />
 <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/animsition.min.css" />
 <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/animate.css" />
 <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/faq.css" />
@@ -31,7 +31,7 @@
 
 <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/githubIssues.css" />
 <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/downloads.css" />
-<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/universe.css" />
+<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/universe.css?v=2" />
 
 <link rel="apple-touch-icon" sizes="57x57" href="{{ site.baseurl }}/assets/favicon/apple-icon-57x57.png" />
 <link rel="apple-touch-icon" sizes="60x60" href="{{ site.baseurl }}/assets/favicon/apple-icon-60x60.png" />

diff --git a/assets/css/universe.css b/assets/css/universe.css
@@ -103,7 +103,7 @@
   display: flex;
   width: 226px;
   height: 59px;
-  padding: 24px 80px 24px 30px;
+  padding: 0 54px 0 0;
   justify-content: center;
   align-items: center;
   gap: 30px;
@@ -121,6 +121,7 @@
   position: relative;
 
   transition: transform 0.2s ease-in-out;
+  white-space: nowrap;
 }
 
 #universe .universe_button-group .universe_button-purple:hover {
@@ -140,14 +141,23 @@
   align-items: center;
 }
 
-#universe .universe_button-group .universe_button-outline {
+#universe .universe_button-group .universe_button-purple .universe_button-text {
+  height: 100%;
+
   display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+#universe .universe_button-group .universe_button-outline {
   width: 226px;
   height: 59px;
-  padding: 24px 39px 24px 69px;
+
+  display: flex;
   justify-content: center;
   align-items: center;
-  gap: 14px;
+  gap: 5px;
 
   border-radius: 3px;
   border: 1px solid #9330ff;
@@ -160,6 +170,7 @@
   font-weight: 700;
   line-height: 93%;
   text-transform: uppercase;
+  white-space: nowrap;
 
   position: relative;
 
@@ -171,7 +182,8 @@
 }
 
 #universe .universe_button-gem {
-  position: absolute;
-  top: 10px;
-  left: 19px;
+  width: 42px;
+  height: unset !important;
+  flex: unset !important;
+  transform: translateY(1px);
 }
diff --git a/index.html b/index.html
@@ -15,7 +15,7 @@
 
     <div class="universe_button-group">
       <a href="https://universe.tari.com/" target="_blank" class="universe_button-purple">
-        Tari Universe
+        <span class="universe_button-text"> Tari Universe </span>
         <span class="universe_button-arrow">
           <svg width="19" height="11" viewBox="0 0 19 11" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M4.5 1L8.5 5.5L4.5 10" stroke="white" stroke-width="2" />