simplify App.vue, clean up excess css

frontend/src/App.vue

@@ -1,14 +1,16 @@
 <template lang="pug">
+sidebar
 main.f-col
     router-view
 </template>
 
 <script>
 import * as sss from '@/sss/import.css'
+import sidebar from './components/Sidebar.vue'
 
 export default {
     name: 'app',
-    components: {},
+    components: { sidebar,  },
 }
 </script>
 
@@ -16,10 +18,20 @@ export default {
 // prettier-ignore
 @import './sss/theme.sss'
 
+html
+    background-color: #e90d77
+
 #app
+    display: flex
+    flex-direction: row
     text-align: center
     color: $primary
     font-family: $sans
     background-color: $secondary
     overflow-x: hidden
+
+    > aside
+        background-color: yellow
+
+
 </style>

frontend/src/components/ProfileCardList.vue

@@ -13,10 +13,6 @@ section.profile_card_list.w-full
                 .card__content
                     h3.p-1.mv-0.b-solid.rounded {{ user.name }}
 
-        nav.swipe_icons.w-full.f-row.between
-            h2 A
-            h2 H
-            h2 P
 </template>
 
 <script>
@@ -84,7 +80,7 @@ export default {
     margin: 5vh 0 0 0
 
 .swipe
-    position: absolute
+    
 
 .card
     position: relative
@@ -100,8 +96,4 @@ export default {
         position: absolute
         bottom: 0
 
-.swipe_icons
-    position: fixed
-    bottom: 5vh
-    width: 250px
 </style>

frontend/src/views/Login.vue

@@ -44,168 +44,5 @@ export default {
 </script>
 
 <style lang="postcss">
-html
-  background-color: #e90d77
 
-.content
-  background: none
-
-.wrapper
-  position: unset
-
-.login__box
-  position: absolute
-  top: 50%
-  left: 50%
-  width: 300px
-  padding: 40px
-  transform: translate(-50%, -50%)
-  background: rgba(0, 0, 0, 0.5)
-  box-sizing: border-box
-  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6)
-  border-radius: 10px
-
-.login__box h2
-  margin: 0 0 30px
-  padding: 0
-  color: #fff
-  text-align: center
-
-.login__box .user__box
-  position: relative
-
-.login__box .user__box input
-  width: 100%
-  padding: 10px 0
-  font-size: 16px
-  color: #fff
-  margin-bottom: 30px
-  border: none
-  border-bottom: 1px solid #fff
-  outline: none
-  background: transparent
-
-.login__box .user__box label
-  position: absolute
-  top: 0
-  left: 0
-  padding: 10px 0
-  font-size: 16px
-  color: #fff
-  pointer-events: none
-  transition: 0.5s
-
-.login__box .user__box input:focus ~ label,
-.login__box .user__box input:valid ~ label
-  top: -20px
-  left: 0
-  color: #e90d77
-  font-size: 12px
-
-.login__box form button
-  position: relative
-  display: inline-block
-  padding: 10px 20px
-  color: #e90d77
-  font-size: 16px
-  text-decoration: none
-  text-transform: uppercase
-  overflow: hidden
-  transition: 0.5s
-  margin-top: 40px
-  letter-spacing: 4px
-  background: none
-  border: none
-
-.login__box button:hover
-  background: #e90d77
-  color: #fff
-  border-radius: 5px
-  box-shadow: 0 0 5px #e90d77, 0 0 25px #e90d77, 0 0 50px #e90d77,
-    0 0 100px #e90d77
-
-.login__box button span
-  position: absolute
-  display: block
-
-.login__box button span:nth-child(1)
-  top: 0
-  left: -100%
-  width: 100%
-  height: 2px
-  background: linear-gradient(90deg, transparent, #e90d77)
-  animation: btn-anim1 1s linear infinite
-
-.login__box form .forget__link
-  color: white
-  text-decoration: none
-
-.login__box form .forget__link:hover
-  color: #e90d77
-
-.login__box form .links
-  color: white
-  text-decoration: none
-  margin-left: 5px
-  padding: 10px
-
-.login__box form .links:hover
-  background: #e90d77
-  color: #fff
-  border-radius: 5px
-  box-shadow: 0 0 5px #e90d77, 0 0 25px #e90d77, 0 0 50px #e90d77,
-    0 0 100px #e90d77
-
-@keyframes btn-anim1
-  0%
-    left: -100%
-  50%, 100%
-    left: 100%
-
-.login__box button span:nth-child(2)
-  top: -100%
-  right: 0
-  width: 2px
-  height: 100%
-  background: linear-gradient(180deg, transparent, #e90d77)
-  animation: btn-anim2 1s linear infinite
-  animation-delay: 0.25s
-
-@keyframes btn-anim2
-  0%
-    top: -100%
-  50%, 100%
-    top: 100%
-
-
-.login__box button span:nth-child(3)
-  bottom: 0
-  right: -100%
-  width: 100%
-  height: 2px
-  background: linear-gradient(270deg, transparent, #e90d77)
-  animation: btn-anim3 1s linear infinite
-  animation-delay: 0.5s
-
-@keyframes btn-anim3
-  0%
-    right: -100%
-  50%, 100%
-    right: 100%
-
-
-.login__box a span:nth-child(4)
-  bottom: -100%
-  left: 0
-  width: 2px
-  height: 100%
-  background: linear-gradient(360deg, transparent, #e90d77)
-  animation: btn-anim4 1s linear infinite
-  animation-delay: 0.75s
-
-@keyframes btn-anim4
-  0%
-    bottom: -100%
-  50%, 100%
-    bottom: 100%
 </style>

frontend/src/views/Profile.vue

@@ -79,166 +79,6 @@ export default {
 </script>
 
 <style lang="postcss">
-html
-  background-color: #e90d77
 
-.content
-  background: none
 
-.wrapper
-  position: unset
-
-.login__box
-  position: absolute
-  top: 50%
-  left: 50%
-  width: 300px
-  padding: 40px
-  transform: translate(-50%, -50%)
-  background: rgba(0, 0, 0, 0.5)
-  box-sizing: border-box
-  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6)
-  border-radius: 10px
-
-.login__box h2
-  margin: 0 0 30px
-  padding: 0
-  color: #fff
-  text-align: center
-
-.login__box .user__box
-  position: relative
-
-.login__box .user__box input
-  width: 100%
-  padding: 10px 0
-  font-size: 16px
-  color: #fff
-  margin-bottom: 30px
-  border: none
-  border-bottom: 1px solid #fff
-  outline: none
-  background: transparent
-
-.login__box .user__box label
-  position: absolute
-  top: 0
-  left: 0
-  padding: 10px 0
-  font-size: 16px
-  color: #fff
-  pointer-events: none
-  transition: 0.5s
-
-.login__box .user__box input:focus ~ label,
-.login__box .user__box input:valid ~ label
-  top: -20px
-  left: 0
-  color: #e90d77
-  font-size: 12px
-
-.login__box form button
-  position: relative
-  display: inline-block
-  padding: 10px 20px
-  color: #e90d77
-  font-size: 16px
-  text-decoration: none
-  text-transform: uppercase
-  overflow: hidden
-  transition: 0.5s
-  margin-top: 40px
-  letter-spacing: 4px
-  background: none
-  border: none
-
-.login__box button:hover
-  background: #e90d77
-  color: #fff
-  border-radius: 5px
-  box-shadow: 0 0 5px #e90d77, 0 0 25px #e90d77, 0 0 50px #e90d77,
-    0 0 100px #e90d77
-
-.login__box button span
-  position: absolute
-  display: block
-
-.login__box button span:nth-child(1)
-  top: 0
-  left: -100%
-  width: 100%
-  height: 2px
-  background: linear-gradient(90deg, transparent, #e90d77)
-  animation: btn-anim1 1s linear infinite
-
-.login__box form .forget__link
-  color: white
-  text-decoration: none
-
-.login__box form .forget__link:hover
-  color: #e90d77
-
-.login__box form .links
-  color: white
-  text-decoration: none
-  margin-left: 5px
-  padding: 10px
-
-.login__box form .links:hover
-  background: #e90d77
-  color: #fff
-  border-radius: 5px
-  box-shadow: 0 0 5px #e90d77, 0 0 25px #e90d77, 0 0 50px #e90d77,
-    0 0 100px #e90d77
-
-@keyframes btn-anim1
-  0%
-    left: -100%
-  50%, 100%
-    left: 100%
-
-.login__box button span:nth-child(2)
-  top: -100%
-  right: 0
-  width: 2px
-  height: 100%
-  background: linear-gradient(180deg, transparent, #e90d77)
-  animation: btn-anim2 1s linear infinite
-  animation-delay: 0.25s
-
-@keyframes btn-anim2
-  0%
-    top: -100%
-  50%, 100%
-    top: 100%
-
-.login__box button span:nth-child(3)
-  bottom: 0
-  right: -100%
-  width: 100%
-  height: 2px
-  background: linear-gradient(270deg, transparent, #e90d77)
-  animation: btn-anim3 1s linear infinite
-  animation-delay: 0.5s
-
-@keyframes btn-anim3
-  0%
-    right: -100%
-  50%, 100%
-    right: 100%
-
-.login__box a span:nth-child(4)
-  bottom: -100%
-  left: 0
-  width: 2px
-  height: 100%
-  background: linear-gradient(360deg, transparent, #e90d77)
-  animation: btn-anim4 1s linear infinite
-  animation-delay: 0.75s
-
-@keyframes btn-anim4
-  0%
-    bottom: -100%
-  50%, 100%
-    bottom: 100%
 </style>

frontend/src/views/Register.vue

@@ -52,166 +52,5 @@ export default {
 </script>
 
 <style lang="postcss">
-html
-  background-color: #e90d77
 
-.content
-  background: none
-
-.wrapper
-  position: unset
-
-.register__box
-  position: absolute
-  top: 50%
-  left: 50%
-  width: 300px
-  padding: 40px
-  transform: translate(-50%, -50%)
-  background: rgba(0, 0, 0, 0.5)
-  box-sizing: border-box
-  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6)
-  border-radius: 10px
-
-.register__box h2
-  margin: 0 0 30px
-  padding: 0
-  color: #fff
-  text-align: center
-
-.register__box .user__box
-  position: relative
-
-.register__box .user__box input
-  width: 100%
-  padding: 10px 0
-  font-size: 16px
-  color: #fff
-  margin-bottom: 30px
-  border: none
-  border-bottom: 1px solid #fff
-  outline: none
-  background: transparent
-
-.register__box .user__box label
-  position: absolute
-  top: 0
-  left: 0
-  padding: 10px 0
-  font-size: 16px
-  color: #fff
-  pointer-events: none
-  transition: 0.5s
-
-.register__box .user__box input:focus ~ label,
-.register__box .user__box input:valid ~ label
-  top: -20px
-  left: 0
-  color: #e90d77
-  font-size: 12px
-
-.register__box form button
-  position: relative
-  display: inline-block
-  padding: 10px 20px
-  color: #e90d77
-  font-size: 16px
-  text-decoration: none
-  text-transform: uppercase
-  overflow: hidden
-  transition: 0.5s
-  margin-top: 40px
-  letter-spacing: 4px
-  background: none
-  border: none
-
-.register__box button:hover
-  background: #e90d77
-  color: #fff
-  border-radius: 5px
-  box-shadow: 0 0 5px #e90d77, 0 0 25px #e90d77, 0 0 50px #e90d77,
-    0 0 100px #e90d77
-
-.register__box button span
-  position: absolute
-  display: block
-
-.register__box button span:nth-child(1)
-  top: 0
-  left: -100%
-  width: 100%
-  height: 2px
-  background: linear-gradient(90deg, transparent, #e90d77)
-  animation: btn-anim1 1s linear infinite
-
-.register__box form .forget__link
-  color: white
-  text-decoration: none
-
-.register__box form .forget__link:hover
-  color: #e90d77
-
-.register__box form .links
-  color: white
-  text-decoration: none
-  margin-left: 5px
-  padding: 10px
-
-.register__box form .links:hover
-  background: #e90d77
-  color: #fff
-  border-radius: 5px
-  box-shadow: 0 0 5px #e90d77, 0 0 25px #e90d77, 0 0 50px #e90d77, 0 0 100px #e90d77
-
-@keyframes btn-anim1
-  0%
-    left: -100%
-  50%, 100%
-    left: 100%
-
-.register__box button span:nth-child(2)
-  top: -100%
-  right: 0
-  width: 2px
-  height: 100%
-  background: linear-gradient(180deg, transparent, #e90d77)
-  animation: btn-anim2 1s linear infinite
-  animation-delay: 0.25s
-
-@keyframes btn-anim2
-  0%
-    top: -100%
-  50%, 100%
-    top: 100%
-
-.register__box button span:nth-child(3)
-  bottom: 0
-  right: -100%
-  width: 100%
-  height: 2px
-  background: linear-gradient(270deg, transparent, #e90d77)
-  animation: btn-anim3 1s linear infinite
-  animation-delay: 0.5s
-
-@keyframes btn-anim3
-  0%
-    right: -100%
-  50%, 100%
-    right: 100%
-
-.register__box a span:nth-child(4)
-  bottom: -100%
-  left: 0
-  width: 2px
-  height: 100%
-  background: linear-gradient(360deg, transparent, #e90d77)
-  animation: btn-anim4 1s linear infinite
-  animation-delay: 0.75s
-
-@keyframes btn-anim4
-  0%
-    bottom: -100%
-  50%,
-  100%
-    bottom: 100%
 </style>

frontend/src/views/home.vue

@@ -5,17 +5,15 @@ article#home.w-full.f-row.reverse
             main-nav
 
         profile-card-list(:uid='uid' :users='swipables')
-    sidebar
 </template>
 
 <script>
 import mainNav from '../components/MainNav.vue'
-import sidebar from '../components/Sidebar.vue'
 import profileCardList from '../components/ProfileCardList.vue'
 
 export default {
     name: 'HomeView',
-    components: { mainNav, profileCardList, sidebar },
+    components: { mainNav, profileCardList },
     data: () => ({
         swipables: [],
         uid: null,
@@ -44,3 +42,4 @@ export default {
     },
 }
 </script>
+