fix: mobile ui (#1133)

cor · web-flow · commit 17fca7f2560c · 2024-01-15T12:31:19.000+01:00
diff --git a/site/src/layouts/layout.astro b/site/src/layouts/layout.astro
@@ -23,8 +23,8 @@ import XLogo from '#/assets/x.svg'
   <body
     class='font-sans flex flex-col min-h-screen grid-effect-bg flex-1 gap-8 shadow-effect-bg px-4 pb-12'
   >
-    <header class='flex justify-around mt-22'>
-      <div class='max-w-7xl flex flex-1 items-center md:px-4 gap-4 -mt-5'>
+    <header class='flex justify-around'>
+      <div class='max-w-7xl flex flex-1 items-center md:px-4 gap-4'>
         <a
           class='flex items-center gap-3 decoration-transparent visited:text-white'
           href='/'
@@ -34,7 +34,7 @@ import XLogo from '#/assets/x.svg'
             src='/logo.svg'
             alt='Union Logo'
           />
-          <p class='min-[420px]:block font-extrabold text-5xl'>Union</p>
+          <p class='min-[420px]:block font-extrabold text-3xl sm:text-5xl'>Union</p>
         </a>
         <nav class='flex flex-1 justify-end'>
           <ul class='flex gap-4 !text-xl! !md:text-2xl font-extrabold list-none align-middle my-auto'>
diff --git a/site/src/pages/blog/index.astro b/site/src/pages/blog/index.astro
@@ -15,7 +15,7 @@ blogEntries = blogEntries.sort((a, b) => (a.data.date > b.data.date ? -1 : 1))
   <main
     class='blog-post-container sm:text-xl px-4 sm:mt-0 mt-2 justify-center max-w-[45rem] self-center pb-40'
   >
-    <ul class='list-none'>
+    <ul class='list-none -ml-6 sm:ml-0'>
       {
         blogEntries.map(blogPostEntry => (
           <li class='mb-12'>
diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro
@@ -5,8 +5,8 @@ import Layout from '#/layouts/layout.astro'
 <Layout>
   <main class='flex flex-col flex-1 gap-[100px] md:gap-[200px] my-[50px] md:my-[100px]'>
     <div class='flex flex-col items-center'>
-      <div class='main-text'>Infrastructure for the</div>
-      <div class='next-century-text animate-character'>next century</div>
+      <div class='main-text leading-3'>Infrastructure for the</div>
+      <div class='next-century-text animate-character my-[0.5px]'>next century</div>
       <div class='tagline'>
         Union is a hyper-efficient, zero-knowledge interoperability layer<br />
         that connects Appchains, Layer 1, and Layer 2 networks.
@@ -93,9 +93,8 @@ import Layout from '#/layouts/layout.astro'
 	.main-text {
 		max-width: 72rem; 
 		font-size: 26px;
-		line-height: 2.5rem; 
 		font-weight: 900; 
-		text-align: center; 
+		text-align: center;
 
 		@media (min-width: 340px) {
 			font-size: 29px;
diff --git a/site/src/styles/index.css b/site/src/styles/index.css
@@ -14,6 +14,10 @@
   font-display: swap;
 }
 
+p {
+  text-wrap: balance;
+}
+
 p > a {
   color: #f9a8d4 !important;
   text-decoration: none;

Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ blogEntries = blogEntries.sort((a, b) => (a.data.date > b.data.date ? -1 : 1))`
`15`	`15`	`<main`
`16`	`16`	`class='blog-post-container sm:text-xl px-4 sm:mt-0 mt-2 justify-center max-w-[45rem] self-center pb-40'`
`17`	`17`	`>`
`18`		`- <ul class='list-none'>`
	`18`	`+ <ul class='list-none -ml-6 sm:ml-0'>`
`19`	`19`	`{`
`20`	`20`	`blogEntries.map(blogPostEntry => (`
`21`	`21`	`<li class='mb-12'>`