Make website responsive

singlelink-co · Mar 6, 2021 · 6c0be12 · 6c0be12
1 parent 767df5e
commit 6c0be12
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 16 deletions.
diff --git a/www/layouts/default.vue b/www/layouts/default.vue
@@ -1,24 +1,25 @@
 <template>
   <div class="interface wide">
-    <div style="background:rgba(0,0,0,.85);" class="w-screen position absolute top-0 left-0 right-0 flex flex-row py-2 px-2 text-center text-white items-center justify-center">
+    <!--<div style="background:rgba(0,0,0,.85);" class="w-screen position absolute top-0 left-0 right-0 flex flex-row py-2 px-2 text-center text-white items-center justify-center">
       <div class="interface row wide">
         <img style="width:18px;height:18px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Y_Combinator_logo.svg/1200px-Y_Combinator_logo.svg.png"/>
         <span class="max-w-xl text-white text-xs font-medium ml-4">
         We're currently live on Hacker News!
         </span>
         <a class="ml-auto px-2 py-1 hover:bg-gray-900 rounded-lg text-white text-xs font-semibold" href="#">Check it out 👉</a>
       </div>
-    </div>
+    </div>-->
     <!-- Overlay gradients -->
     <!--
       <div class="overlays"><div style="background: linear-gradient(to top, rgb(83, 83, 236), transparent); opacity: 0.05; z-index: 5;"></div> <div style="background: linear-gradient(185deg, rgb(255, 0, 229), transparent); opacity: 0.08; z-index: 4;"></div> <div style="background: linear-gradient(135deg, rgb(0, 255, 255), transparent); opacity: 0.08; z-index: 3;"></div> <div style="background: radial-gradient(circle at center top, rgb(83, 83, 236), transparent); opacity: 0.15; z-index: 2;"></div> <div style="background: linear-gradient(rgb(255, 255, 255), transparent); opacity: 0.05; z-index: 1;"></div></div>
     -->
     <header class="mt-12 mb-10 lg:mt-16 flex flex-row w-full justify-start items-center">
       <a href="/" class=""><img style="height:40px;width:auto;" src="/singlelink-brandmark-shadow.png"/></a>
-      <a class="ml-auto px-6 py-2 rounded-lg text-sm font-medium hover:underline" target="_blank" href="https://discord.gg/3pBM4Px">Community</a>
-      <a class="px-6 py-2 rounded-lg text-sm font-medium hover:underline" href="/pricing">Pricing</a>
-      <a class="mx-0 px-6 py-2 rounded-lg text-sm font-medium hover:underline" href="https://app.singlelink.co">Sign in</a>
-      <a href="https://app.singlelink.co/create-account" class="sign-in">Get started free<img class="w-3 ml-4" src="/arrow.svg"/></a>
+      <a class="hidden lg:flex ml-auto px-6 py-2 rounded-lg text-sm font-medium hover:underline" target="_blank" href="https://discord.gg/3pBM4Px">Community</a>
+      <a class="hidden lg:flex px-6 py-2 rounded-lg text-sm font-medium hover:underline" href="/pricing">Pricing</a>
+      <!--<a class="px-6 py-2 rounded-lg text-sm font-medium hover:underline" href="/pricing">Leaderboard</a>-->
+      <a class="hidden lg:flex mx-0 px-6 py-2 rounded-lg text-sm font-medium hover:underline" href="https://app.singlelink.co">Sign in</a>
+      <a href="https://app.singlelink.co/create-account" class="ml-auto flex lg:ml-0 sign-in">Get started free<img class="hidden md:flex w-3 ml-4" src="/arrow.svg"/></a>
     </header>
     <Nuxt class="interface" />
     <footer class="interface">
@@ -53,6 +54,7 @@
             <a href="https://app.singlelink.co/create-account" class="text-gray-600 font-medium hover:text-indigo-500">Sign up free</a>
             <a href="/analytics" class="text-gray-600 font-medium hover:text-indigo-500">Analytics</a>
             <a href="/~https://github.com/Neutron-Creative/Singlelink/projects" class="text-gray-600 font-medium hover:text-indigo-500">Roadmap</a>
+            <a href="/leaderboard" class="text-gray-600 font-medium hover:text-indigo-500">Leaderboard</a>
             <a href="/~https://github.com/Neutron-Creative/Singlelink/blob/master/CHANGELOG.md" class="text-gray-600 font-medium hover:text-indigo-500">Changelog</a>
             <a href="https://status.singlelink.co" class="text-gray-600 font-medium hover:text-indigo-500">Status</a>
           </div>
@@ -196,7 +198,7 @@ html {
   }
 
   .sign-in {
-    @apply flex flex-row items-center justify-center rounded-lg text-sm px-4 py-2;
+    @apply flex-row items-center justify-center rounded-lg text-sm px-4 py-2;
     background: rgba(255,255,255,.25);
     backdrop-filter: blur(5px);
     border: solid 1px rgba(255,255,255,.5);
@@ -229,8 +231,11 @@ html {
       padding-right: 30px;
     }
     .interface > .interface {
-      padding-left: 0;
-      padding-right: 0;
+      transform:translateX(-30px);
+    }
+
+    .interface.row {
+      @apply flex-col;
     }
   }
 
@@ -251,6 +256,23 @@ html {
   p {
     @apply leading-relaxed text-lg w-full;
   }
+
+  @media(max-width:720px) {
+    h1 {
+      @apply text-4xl;
+    }
+
+    h2 {
+      @apply text-4xl;
+    }
+
+    h3 {
+      @apply text-2xl;
+    }
+    p {
+      @apply text-base;
+    }
+  }
 </style>
 
 <script>

diff --git a/www/pages/index.vue b/www/pages/index.vue
@@ -6,7 +6,7 @@
       <div class="flex flex-row items-center justify-center lg:space-x-10 relative">
         <img data-aos="fade-in"  data-aos-easing="ease" data-aos-duration="1000" data-aos-delay="500" style="width:180px;height:auto;position:absolute;z-index:11;left:102px;top:178px;" src="/Pink-arrow.svg"/>
         <img data-aos="fade-in"  data-aos-easing="ease" data-aos-duration="1000" data-aos-delay="500" style="width:120px;height:auto;position:absolute;z-index:11;right:190px;top:130px;" src="/Purple-arrow.svg"/>
-        <div class="phone-container">
+        <div class="phone-container opacity-0 md:opacity-100">
           <div class="mini phone-display relative">
               <div class="w-full h-full" style="background-image:url('/Instagram-Screen.svg');background-position:top left;background-size: 100% auto;"></div>
           </div>
@@ -17,15 +17,15 @@
               <iframe class="w-full" id="preview-frame" src="https://singlel.ink/u/influencer" scrolling="no"/>
           </div>
         </div>
-        <div class="phone-container">
+        <div class="phone-container opacity-0 md:opacity-100">
           <div class="mini phone-display relative">
               <div class="w-full h-full" style="background-image:url('/Amazon-Screen.svg');background-position:top left;background-size: 100% auto;"></div>
           </div>
         </div>
       </div>
       <!---->
       <div class="w-full flex flex-col items-center"  data-aos="fade-up"  data-aos-easing="ease" data-aos-duration="1000" data-aos-delay="1000">
-        <h1 style="margin-top: -115px; margin-bottom: 12px;">Increase engagement by 50% or more with<a href="/gallery" style="text-shadow: 0 0 15px rgba(83,83,238,.5);" class="text-indigo-600 ml-4">Singlelink.</a></h1>
+        <h1 style="margin-top: -115px; margin-bottom: 12px;max-width: ">The open-source micro-site platform,<a href="/gallery" style="text-shadow: 0 0 15px rgba(83,83,238,.5);" class="text-indigo-600 ml-4">Singlelink.</a></h1>
         <p class="mb-6 text-2xl max-w-2xl mx-auto">
           The powerful, easy-to-use, and customizable micro-site that gets your content to your consumers in fewer clicks.
         </p>
@@ -42,7 +42,7 @@
         <testimonial data-aos="fade-up"  data-aos-easing="ease" data-aos-duration="1000" :at="false" style="top:300px;" class="shadow absolute right-0" date="Dec 18, 2020" avatar="/adrenaline-hunter.png" platform="discord" name="Umberto Gnocchi" handle="CGI & Motion Design Artist" content="Thank you! What I like is that in 5 minutes I’ve configured everything."/>
       </div>
       <div class="flex flex-col lg:ml-12 flex-grow justify-start">
-        <h3>Getting online has never been easier</h3>
+        <h3 class="neg-top">Getting online has never been easier</h3>
         <p class="text-xl mb-8">Building your Singlelink takes just minutes, and publishing to your link or custom domain is instant. There’s no-code needed, and we have hundreds of available themes for you to choose from.</p>
         <a style="width:fit-content;" class="text-center shadow-lg lg:w-auto font-bold text-white px-8 py-6 lg:py-5 rounded-lg purple-btn hover:bg-indigo-500" href="https://app.singlelink.co/create-account">Create your free Singlelink</a>
       </div>
@@ -54,7 +54,7 @@
         <p class="text-xl mb-8">Building & customizing your Singlelink from top-to-bottom is easy with our optimized no-code builder. You can control every detail without code from your phone or desktop, and go further with available custom HTML & CSS if you choose.</p>
         <a style="width:fit-content;" class="text-center shadow-lg lg:w-auto font-bold text-white px-8 py-6 lg:py-5 rounded-lg purple-btn hover:bg-indigo-500" href="https://app.singlelink.co/create-account">Create your free Singlelink</a>
       </div>
-      <div class="flex flex-col relative justify-start">
+      <div class="order-first lg:order-2 flex flex-col relative justify-start">
         <div class="phone-display relative" style="left:50px;">
             <iframe class="w-full" id="preview-frame" src="https://singlel.ink/u/Vibez" scrolling="no"/>
         </div>
@@ -267,4 +267,8 @@ import wallOfLove from '../components/wall-of-love.vue';
 .phone-display > div {
   border-radius: 50px;
 }
+
+.interface.wide.row.mx-none {
+  transform:translateX(0px)
+}
 </style>
diff --git a/www/pages/pricing.vue b/www/pages/pricing.vue
@@ -10,8 +10,8 @@
       <div class="flex items-center justify-end w-full flex-row mb-6">
         <span class="text-gray-700 font-semibold mr-4 text-sm">Viewing plans for</span>
         <select v-model="intent" class="toggle">
-          <option value="personal">personal use</option>
-          <option value="business">commercial use</option>
+          <option value="personal">Personal use</option>
+          <option value="business">Commercial use</option>
         </select>
       </div>
       <div class="p-12 rounded-lg shadow bg-white flex flex-col mb-8" v-if="intent=='personal'">