From 6ed1b3cba6c45ff64593efe31eed0615967d238c Mon Sep 17 00:00:00 2001
From: Nate <iamnbutler@gmail.com>
Date: Mon, 20 Sep 2021 14:41:52 -0400
Subject: [PATCH] mobile styles

---
 server/templates/partials/layout.hbs | 60 +++++++++++-----------------
 1 file changed, 23 insertions(+), 37 deletions(-)
diff --git a/server/templates/partials/layout.hbs b/server/templates/partials/layout.hbs
index 0d8d5f6c179a72650040c6b58f614a1b6aaedb24..09d077ddac8b35a1313ddcfa7e0920eaefa2e631 100644
--- a/server/templates/partials/layout.hbs
+++ b/server/templates/partials/layout.hbs
@@ -1,33 +1,20 @@
 <html>
 
 <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86">
     <link rel="icon" href="/static/images/favicon.png">
     <link rel="stylesheet" href="/static/styles.css">
     <link rel="stylesheet" href="/static/prose.css">
 
     <title>Zed – a lightning fast, collaborative code editor written natively in Rust</title>
 
-    <script>
-        {{!-- window.addEventListener("DOMContentLoaded", function () {
-            let avatar = document.getElementById("avatar");
-            let sign_out = document.getElementById("sign_out");
-            if (avatar && sign_out) {
-                avatar.addEventListener("click", function (event) {
-                    sign_out.classList.toggle("hidden");
-                    event.stopPropagation();
-                });
-                document.addEventListener("click", function (event) {
-                    sign_out.classList.add("hidden");
-                });
-            }
-        }); --}}
-    </script>
 </head>
 
 <body class="box-border font-light bg-black font-body text-main">
-    <main class="container flex flex-col mx-auto bg-white lg:flex-none lg:grid lg:min-h-full lg:grid-cols-4 max-w-screen-2xl gap-x-px text-gray-50">
-        <nav class="p-10 bg-black font-extralight lg:hidden">
-            <a href="/" class="font-display">
+    <main class="container flex flex-col mx-auto lg:bg-white lg:flex-none lg:grid lg:min-h-full lg:grid-cols-4 max-w-screen-2xl lg:gap-x-px text-gray-50">
+        <nav class="p-10 pb-0 bg-black font-extralight lg:hidden">
+            <a href="/">
                 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <mask id="path-2-inside-1" fill="white">
                 <path fill-rule="evenodd" clip-rule="evenodd" d="M16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0ZM16 4C9.37258 4 4 9.37258 4 16C4 22.6274 9.37258 28 16 28C22.6274 28 28 22.6274 28 16C28 9.37258 22.6274 4 16 4Z"/>
@@ -37,45 +24,45 @@
                 </svg>
             </a>
             
-            <div class="flex flex-row flex-wrap mt-5">
-                <a href="/team" class="mr-2 text-base leading-7 no-underline lowercase hover:underline">
-                    The Team
+            <div class="flex flex-row flex-wrap mt-10">
+                <a href="/team" class="mr-2 text-lg leading-loose no-underline lowercase hover:underline">
+                    Team
                 </a>
-                <p class="mr-2 text-base">·</p>
-                <a href="/story" class="relative mr-2 text-base leading-7 no-underline lowercase nav-active hover:underline">
+                <p class="pt-1 mr-2 text-lg text-gray-500">·</p>
+                <a href="/story" class="relative mr-2 text-lg leading-loose no-underline lowercase nav-active hover:underline">
                     Our Story
                 </a>
-                <p class="mr-2 text-base">·</p>
-                <a href="/community" class="mr-2 text-base leading-7 no-underline lowercase hover:underline">
+                <p class="pt-1 mr-2 text-lg text-gray-500">·</p>
+                <a href="/community" class="mr-2 text-lg leading-loose no-underline lowercase hover:underline">
                     Community
                 </a>
-                <p class="mr-2 text-base">·</p>
+                <p class="pt-1 mr-2 text-lg text-gray-500">·</p>
                 {{#if current_user}}
-                <a href="/updates" class="mr-2 text-base leading-7 no-underline lowercase hover:underline">
+                <a href="/updates" class="mr-2 text-lg leading-loose no-underline lowercase hover:underline">
                     Updates
                 </a>
-                <p class="mr-2 text-base">·</p>
-                <a href="/releases" class="mr-2 text-base leading-7 no-underline lowercase hover:underline">
+                <p class="pt-1 mr-2 text-lg text-gray-500">·</p>
+                <a href="/releases" class="mr-2 text-lg leading-loose no-underline lowercase hover:underline">
                     Releases
                 </a>
 
                 {{#if current_user.is_admin }}
-                    <p class="mr-2 text-base">·</p>
-                    <a href="/admin" class="inline-block mr-2 text-base leading-7 no-underline lowercase hover:underline">
+                    <p class="pt-1 mr-2 text-lg text-gray-500">·</p>
+                    <a href="/admin" class="inline-block mr-2 text-lg leading-loose no-underline lowercase hover:underline">
                         Manage Users
                     </a>
                 {{/if}}
 
-                <p class="mr-2 text-base">·</p>
-                <form id="sign_out" action="/sign_out" method="post" class="inline m-0 mr-2">
-                    <button class="text-base leading-7 no-underline lowercase hover:underline">Log out</button>
+                <p class="pt-1 mr-2 text-lg text-gray-500">·</p>
+                <form id="sign_out" action="/sign_out" method="post" class="inline m-0 mr-2 font-extralight">
+                    <button class="text-lg leading-loose no-underline lowercase font-extralight hover:underline">Log out</button>
                 </form>
 
                 {{else}}
 
                 <!-- Otherwise let user log in -->
                 <a href=" /sign_in"
-                    class="mr-2 text-base leading-7 no-underline lowercase hover:underline">
+                    class="mr-2 text-lg leading-loose no-underline lowercase hover:underline">
                     Log in
                 </a>
                 {{/if}}
@@ -140,8 +127,7 @@
             {{/if}}
        
             <div class="mt-10">
-                <!-- TODO: Dropdown is linked to #avatar, just using it for now. Come back and clean up later -->
-                <p id="avatar" class="text-base no-underline lowercase hover:underline">@{{current_user.github_login}}</p>
+                <p class="text-base no-underline lowercase hover:underline">@{{current_user.github_login}}</p>
                 <form id="sign_out" action="/sign_out" method="post">
                     <button class="mt-2 text-xs no-underline lowercase opacity-50 hover:underline">Sign out</button>
                 </form>
