:art: altering some styles to start making this look nice

frontend/src/App.vue

 <style lang="postcss">
 @import './sss/theme.sss'
 
-html
-    background-color: #e90d77
-
 #app
     display: flex
     flex-direction: row
     text-align: center
-    color: $light
+    color: $primary
     font-family: $sans
-    background-color: $secondary
+    background-color: $dark
     overflow-x: hidden
     height: 100%
     > main
         position: relative
         height: 100%
+        > header
+            h2
+                font-size: $ms-1
         > article
             height: 100%
             width: 100%
             flex-direction: column
+    
+    button
+        padding: $ms-0
+        background-color: $primary
+        border: 1px transparent solid
+        border-radius: $ms-1
+        transition: $transition
+        &:hover
+            background-color: $secondary
+            border: 1px transparent solid
+            border-radius: $ms-1
+            cursor: pointer
+            color: $primary
+        &:disabled
+            cursor: default
+            color: $primary
+            background-color: $light
 </style>

frontend/src/components/MainNav.vue

 <template lang="pug">
-nav#main-header.w-full.f-row.around.p-2
+nav#main-header.w-full.z-top.f-row.around.p-2
     button(@click="$emit('show-sidebar')") toggle sidebar
     router-link.header__icon.mobile--only(:to="`/matches`") matches
     router-link.header__icon(to='/') home

frontend/src/components/SideBar.vue

 <template lang="pug">
-aside.sidebar.p-1.f-col
+aside.sidebar.p-1.f-col.z-top
     .temp-control-box.f-row.start.center
         input(v-model="switchToPID")
         button(@click="$emit('updatePid', switchToPID)").t-up.p-0 switch profile
 aside.sidebar
     background-color: yellow
     height: 100vh
+    position: fixed
     h3
         padding: 2vh
 

frontend/src/sss/_variables.sss

 /**
   * Modular Scale
   */
-$base: 0.5em
+$base: 0.7em
 $scale: $golden
 
 $ms-0: calc($base)
 /**
   * Color Scale
   */
-$cbase: 0.5
+$cbase: 0.3
 $cs-0: calc($cbase)
 $cs-1: calc($cs-0 * $scale)
 $cs-2: calc($cs-1 * $scale)

frontend/src/sss/theme.sss

 @import './_variables.sss'
 
 /**
-  * Colors
-*/
-$hue: 200
-$bg: calc($hue * $cs-1)
-$bright: 50%
+ * Colors
+ */
+$hue: 50
+$bg: calc($hue * $cs-5)
+$bright: 70%
 $opacity: 1
 
-$primary: hsla($hue, 20%, calc($bright * $cs-1), $opacity)
-$secondary: hsla($bg, 20%, calc($bright * $cs-1), $opacity)
-$hilite: hsla($hue, 50%, calc($bright * $cs-0), $opacity)
+$primary: hsla($hue, 80%, calc($bright * $cs-5), $opacity)
+$secondary: hsla($bg, 20%, calc($bright * $cs-0), $opacity)
+$hilite: hsla($hue, 80%, calc($bright * $cs-0), $opacity)
 
-$light: hsla(255, 50%, calc($bright * $cs-0), $opacity)
-$dark: hsla(001, 50%, calc($bright * $cs-0), $opacity)
+$light: hsla(100, 100%, calc($bright * $cs-0), $opacity)
+$dark: hsla(001, 0%, 5%, $opacity)

frontend/src/views/SurveyView.vue

 main.view--survey.f-col.start.w-full
     header.w-full.f-col
         p survey for profile: {{ current }}
-        //- Transition(name="slide-up" :duration="1600")
-        //-     h3(v-if="step == 0") hello, what shall i call you?
-        //-         span(v-for="letter in name" class="fade") {{ letter }}
-
-        //-     h3(v-else-if="step == 1") Hi {{ name}}. 
-        //-         span What can i help you with?
-        //-         br
-        //-         span I am seeking a 
-        //-             span(v-if="!seeking") ___________.
-        //-             span(v-else class="fade") {{ seeking }}.
-            
-        //-     h3(v-else-if="step == 2") Looking for a {{ seeking }} then. 
-        //-         span You're in the right place. 
-        //-         br
-        //-         span How would you like to use siimee? 
-        //-         br
-        //-         span I am 
-        //-             span(v-if="!urgency") ___________.
-        //-             span(v-else class="fade") {{ urgency }}.
-            
-        //-     h3(v-else-if="[3, 4, 5, 6].includes(step)")
-        //-         span I am a 
-        //-         span(v-if="!role && !experience" class="fade") _________ _________
-        //-         span(v-else-if="role && !experience" class="fade") _________ {{ role }}
-        //-         span(v-else-if="!role && experience" class="fade") {{ experience }} _________
-        //-         span(v-else class="fade") {{ experience }} {{ role }}
-        //-         span . 
-        //-         br
-        //-         span Looking for a 
-        //-         span(v-if="!distance && !duration" class="fade") ________ ________ 
-        //-         span(v-else-if="!distance && duration" class="fade") {{ duration }} ________ 
-        //-         span(v-else-if="distance && !duration" class="fade") _________ {{ distance }} 
-        //-         span(v-else class="fade") {{ duration }} {{ distance }} 
-        //-         span role.
-        
-        //-     h3(v-else)
-        //-         p My name is {{ name }}.
-        //-             span(v-if="pronouns") My pronouns are {{ pronouns }}.
-        //-         p I am 
-        //-             span a {{ experience }}
-        //-             span {{ role }}
-        //-         p Looking for a {{ duration }}, 
-        //-             span {{ distance }} 
-        //-             span {{ seeking }}.
-        //-         p I am proficient in 
-        //-             span(v-for="(lang, i) in language") {{ lang }}  
-        //-                 span(v-if="i > 1") , 
-
     article.match.w-full
         ul.w-full
             template(v-for="(q, i) in profileQuestions" :key="q.response_key_prompt")
                         span {{q.response_key_prompt}}? 
                         span {{q.response_key_description}} 
 
+                        //- Select
                         div(v-if="q.responses.length")
                             button(
                                 v-for="(res, index) in q.responses"
                                 @click="profile[q.response_key_prompt] = res; step++"
                                 :disabled="profile[q.response_key_prompt] == res"
                             ).p-0 {{res}}
+                        
+                        //- Fill in the blank
                         div(v-else-if="q.response_key_category === 'profile'")
                             input(v-model="profile[q.response_key_prompt]" @keyup.enter="step++") 
                             label >{{ profile[q.response_key_prompt]}}
+                        
+                        //- Questionaire
                         div(v-else).f-col
                             input(type="range" min="-3" max="3" list="ticks" v-model="questionaire[q.response_key_category]").w-full
                             label {{ questionaireResponses[parseInt(questionaire[q.response_key_category]) + 3] }} 
                         button(:disabled="step == 0" @click="step--") back
                         p {{step + 1}} of {{profileQuestions.length}}
                         button(@click="step++") next
+                
+            //- Confirmation
             li(v-if="step == profileQuestions.length")
                 p Does this look correct?
                 h4 {{ profile }}
                     button(@click="step--") back
                     p(@click="step = 0").p-1 start over
                     button(@click="$router.push({ name: 'HomeView' })") save
-            
+
     MainNav(@show-sidebar="$emit('show-sidebar')")
 </template>
 
         return {
             validSurvey: null,
             componentMap: stepToComponentMap,
+            slideDuration: 1200,
             step: 0,
             profile: {
                 name: '',
         opacity: 0
 
 .fade
-    animation: fadeIn 300ms ease-in
+    animation: fadeIn 1200ms ease-in
 
 @keyframes fadeIn
     0%
         padding: 1vh
     ul
         display: flex
-        /* color: blue */
         width: 100%
-        li
+        > li
             flex-direction: column
             border: 0px solid yellow
             width: 100%