whopper whopper whopper whopper

src/style/app/pulldown/accounts.scss

@@ -1,6 +1,6 @@
 .pulldown_display[name=accounts] {
     .notLoggedIn {
-        div {
+        .container_div {
             position:absolute;
             top:50%;
             transform:translateY(-50%);
@@ -29,6 +29,59 @@
                 margin: 0 0 10px 0;
             }
 
+            button {
+                cursor:pointer;
+                background-color:#393939;
+                color:#DDDDDD;
+                border:none;
+                outline:none;
+                padding:5px;
+                transition-duration: 250ms;
+                /*overflow:clip;*/
+
+                @media screen and (max-width: 500px) {
+                    font-size:16px;
+                    padding:10px;
+                }
+
+                &:hover {
+                    transition-duration: 250ms;
+                    background-color:#434343;
+                    color: #ffffff;
+                }
+                
+                flex-basis:50%;
+                flex-grow:1;
+            }
+
+            .lgBtnContainer {
+                display:flex;
+                position:relative;
+                left:20px;
+                width:calc( 100% - 40px );
+                gap:10px;
+            }
+
+            .fields {
+                display:flex;
+                flex-direction:column;
+                position:relative;
+                left:20px;
+                width:calc( 100% - 40px );
+                gap:5px;
+
+                input {
+                    border:none;
+                    border-radius:0;
+                    width:100%;
+                    padding:5px;
+                    background-color:#333333;
+                    color:#dddddd;
+                    outline:none;
+                }
+            }
+            
+            /*
             a {
                 text-decoration: none;
                 color:#999999;
@@ -53,6 +106,7 @@
                     }
                 }
             }
+            */
         }
 
     }

src/svelte/elem/pulldowns/Accounts.svelte

@@ -1,16 +1,32 @@
 <script>
     import Pulldown from "./Pulldown.svelte"
+    import { _void } from "../transition/_void"
+
+    let targetAction
 </script>
 
 <Pulldown name="accounts">
     <div class="notLoggedIn">
-        <div>
+        <div class="container_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>
+            {#if targetAction}
-            <br />
+
-            <a class="signIn" href="/login">Log in</a>
+                <div class="fields" transition:_void|local>
+                    <input placeholder="username">
+                    <input placeholder="password" type="password">
+                    <button>{targetAction=="login" ? "Log in" : "Create account"}</button>
+                </div>
+
+            {:else}
+
+                <div class="lgBtnContainer" transition:_void|local>
+                    <button on:click={() => targetAction="login"}>Log in</button>
+                    <button on:click={() => targetAction="create"}>Sign up</button>
+                </div>
+
+            {/if}
         </div>
     </div>
 </Pulldown>