asasasas

src/style/app/pulldown.scss

@@ -1,5 +1,5 @@
 @use "../base";
-@use "pulldown/faq";
+@use "pulldown/help";
 @use "pulldown/accounts";
 
 #overlay {

src/style/app/pulldown/accounts.scss

@@ -1,16 +1,47 @@
 .pulldown_display[name=accounts] {
     .notLoggedIn {
+        div {
+            position:absolute;
+            top:50%;
+            transform:translateY(-50%);
+            width:100%;
+            text-align:center;
 
-        text-align:center;
+            @media screen and (max-width:500px) {
+                transform:scale(1.35) translateY(-50%);
+            }
 
-        h1 {
-            font-weight:600;
-            font-size:24px;
-        }
+            h1 {
+                font-weight:600;
+                font-size:24px;
+            }
 
-        .flavor {
-            font-size:14px;
-            color:#999999;
+            .flavor {
+                font-size:14px;
+                color:#999999;
+                margin: 0 0 10px 0;
+            }
+
+            a {
+                text-decoration: none;
+                color:#999999;
+                font-size:14px;
+
+                &::after {
+                    content:" ➜";
+                    font-size:0px;
+                    opacity: 0;
+                    transition-duration:250ms;
+                }
+
+                &:hover {
+                    &::after {
+                        font-size:13px;
+                        opacity: 1;
+                        transition-duration:250ms;
+                    }
+                }
+            }
         }
 
     }

src/style/app/pulldown/help.scss

@@ -1,9 +1,9 @@
-.pulldown_display[name=faq] {
+.pulldown_display[name=help] {
 
     overflow-y:auto;
 
     .faqGroup {
-        padding:10px;
+        padding:6px 10px 4px 10px;
 
         h2 {
             font-weight: 400;

src/svelte/elem/PulldownManager.svelte

@@ -4,13 +4,13 @@
     // can't find a better way to do this
     import Files from "./pulldowns/Files.svelte";
     import Accounts from "./pulldowns/Accounts.svelte";
-    import FAQ from "./pulldowns/FAQ.svelte";
+    import Help from "./pulldowns/Help.svelte";
 
     export let allPulldowns = new Map()
 
     allPulldowns
         .set("account",Accounts)
-        .set("faq",FAQ)
+        .set("help",Help)
         .set("files",Files)
 
     export const pulldownOpen = writable(false); 

src/svelte/elem/Topbar.svelte

@@ -23,7 +23,7 @@
 
     <button class="menuBtn" on:click={() => pulldown.openPulldown("files")}>files</button>
     <button class="menuBtn" on:click={() => pulldown.openPulldown("account")}>account</button>
-    <button class="menuBtn" on:click={() => pulldown.openPulldown("faq")}>faq</button>
+    <button class="menuBtn" on:click={() => pulldown.openPulldown("help")}>help</button>
 
     <div /> <!-- not sure what's offcenter but something is
                  so this div is here to ""fix"" that        -->

src/svelte/elem/pulldowns/Accounts.svelte

@@ -4,7 +4,13 @@
 
 <Pulldown name="accounts">
     <div class="notLoggedIn">
-        <h1>monofile <span style:color="#999999">accounts</span></h1>
-        <p class="flavor">Gain control of your uploads.</p>
+        <div>
+            <h1>monofile <span style:color="#999999">accounts</span></h1>
+            <p class="flavor">Gain control of your uploads.</p>
+            
+            <a class="signUp" href="/signup">Sign up</a>
+            <br />
+            <a class="signIn" href="/login">Log in</a>
+        </div>
     </div>
 </Pulldown>

src/svelte/elem/pulldowns/Help.svelte

@@ -13,7 +13,7 @@
     ]
 </script>
 
-<Pulldown name="faq">
+<Pulldown name="help">
     {#each faq as question}
         <div class="faqGroup">
             <h2>{question.question}</h2>

src/svelte/elem/pulldowns/Pulldown.svelte

@@ -8,7 +8,7 @@
 <div 
     class="pulldown_display"
     name={name}
-    transition:fade={{duration:200}} 
+    transition:fade={{duration:150}} 
 >
     <slot />
 </div>