:fire: removing postcss

frontend/src/App.vue

@@ -1,6 +1,16 @@
 <template lang="pug">
 w-app
-    w-button My Button
+    w-badge
+        template(#badge) 3
+            w-button(color="primary")
+                w-icon(class="mr1") mdi mdi-email
+                    Emails
+    w-flex.my12(:gap="3" align-center wrap)
+        | Show menu on:
+        w-menu
+            template(#activator="{ on }")
+                w-button(v-on="on") Show menu
+            | Menu content
     SideBar(
         v-if="showSidebar"
         :pid="getPid"
@@ -15,8 +25,6 @@ w-app
 </template>
 
 <script>
-import * as sss from '@/sss/import.css'
-
 import SideBar from './components/SideBar.vue'
 
 import { Chatter, currentProfile, StonkAlert } from './services'
@@ -76,30 +84,3 @@ export default {
     },
 }
 </script>
-
-<style lang="postcss">
-/* prettier-ignore */
-@import './sss/theme.sss'
-
-#app
-    height: 100%
-    flex-direction: row
-    .w-app
-        display: flex
-        text-align: center
-        color: $primary
-        font-family: $sans
-        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
-</style>

frontend/src/components/MainNav.vue

@@ -1,9 +1,9 @@
 <template lang="pug">
-nav#main-header.w-full.z-top.f-row.around.p-2
+nav#main-header
     button(@click="$emit('show-sidebar')") toggle sidebar
-    router-link.header__icon.mobile--only(:to="`/matches`") matches
-    router-link.header__icon(to='/') home
-    router-link.header__icon.mobile--only(:to="`/survey`") survey
+    router-link(:to="`/matches`") matches
+    router-link(to='/') home
+    router-link(:to="`/survey`") survey
 </template>
 
 <script>
@@ -11,17 +11,3 @@ export default {
     name: 'MainNav',
 }
 </script>
-
-<style lang="postcss">
-/* prettier-ignore */
-#main-header
-  position: absolute
-  bottom: 1vh
-  right: 0
-
-
-@media only screen and (min-width: 768px)
-  .mobile--only
-    /* display: none */
-    display: block
-</style>

frontend/src/components/Messages.vue

@@ -7,11 +7,10 @@
         :key='profile.profile_id' 
         :class="[pid == profile.profile_id ? 'active' : '', 'sidebar__message', 'f-col', 'start']"
     )
-    .f-row.start
-        img(:src='profile.avatar')
-        .message__right.f-col
-            h4.message__name {{ profile.name }}
-            p.message__content {{ profile.metadata.rawMetadata || "Hello I'm using tinder!" }}
+    img(:src='profile.avatar')
+    .message__right
+        h4.message__name {{ profile.name }}
+        p.message__content {{ profile.metadata.rawMetadata || "Hello I'm using tinder!" }}
 </template>
 
 <script>
@@ -28,44 +27,3 @@ export default {
     },
 }
 </script>
-
-<style lang="postcss">
-/* prettier-ignore */
-.sidebar
-    &--messages
-        padding: 20px 10px
-        /* overflow-y: scroll */
-        text-align: left
-        a
-            color: black
-            text-decoration: none
-            &:hover
-                background: #f9f9ff
-                transition: 0.5s
-            &.active
-                background: #ececff
-                transition: 0.5s
-    &__message
-        display: flex
-        align-items: center
-        margin: 20px 0
-        img
-            object-fit: cover
-            width: 70px
-            height: 70px
-            border-radius: 50%
-
-.message
-    &__title
-        color: #fd5068
-        text-transform: uppercase
-        margin-bottom: 10px
-    &__right
-        margin-left: 10px
-    &__name
-        padding-top: 5px
-        font-weight: 600
-    &__content
-        padding-top: 10px
-        line-height: 1em
-</style>

frontend/src/components/ProfileCardList.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-section.profile-card-list.w-full
+section.profile-card-list
     .swipe(
         v-if="!isGrid"
         :config="config"
@@ -8,14 +8,14 @@ section.profile-card-list.w-full
         v-for="(profile, i) in loadedProfiles"
         :style="{ 'z-index': 1000-i }"
     )
-        .card.b-solid.bg-cover.randomize(
+        .card.randomize(
             :style="{ 'background-image': `url(${profile.avatar})`, 'top': `${randomize(10)}px`, 'right': `${randomize(20)}px`, 'transform': `rotate(${randomize(7)}deg)` }"
         )
-            .card--content.f-col.between
-                p(style="color: magenta;").f-grow profile: {{ profile.pid }}
-                .card--content--lower.ph-1.w-full.f-col.between
-                    h4.w-full.pv-1 {{ profile.name }}
-                    nav.swipe_icons.pv-1.w-full.f-grow.f-row
+            .card--content
+                p(style="color: magenta;") profile: {{ profile.pid }}
+                .card--content--lower
+                    h4 {{ profile.name }}
+                    nav.swipe_icons
                         //- Accept
                         button(@click="accept") Accept
                         button(@click="view(profile.pid)") view
@@ -26,15 +26,15 @@ section.profile-card-list.w-full
         v-else
         :key="profile.pid"
         v-for="(profile, i) in loadedProfiles"
-    ).f-row
-            .card.b-solid.bg-cover(
+    )
+            .card.bg-cover(
                 :style="{ 'background-image': `url(${profile.avatar})` }"
             )
-                .card--content.f-col.between
-                    p(style="color: magenta;").f-grow profile: {{ profile.pid }}
-                    .card--content--lower.ph-1.w-full.f-col.between
-                        h4.w-full.pv-1 {{ profile.name }}
-                        nav.swipe_icons.pv-1.w-full.f-grow.f-row
+                .card--content
+                    p(style="color: magenta;") profile: {{ profile.pid }}
+                    .card--content--lower
+                        h4 {{ profile.name }}
+                        nav.swipe_icons
                             button(@click="view(profile.pid)") view
 </template>
 
@@ -118,32 +118,3 @@ const config = {
 // Copy profiles so we don't mutate the original
 const loadedProfiles = [...props.profiles]
 </script>
-
-<style lang="postcss">
-/* prettier-ignore */
-.profile-card-list
-    display: flex
-    justify-content: center
-
-.swipe
-    position: absolute
-.randomize
-    position: relative
-
-.card
-    position: relative
-    background-color: #fff
-    height: 60vw
-    width: 40vw
-    max-height: 600px
-    max-width: 400px
-    background-position: center
-    &--content
-        width: 100%
-        height: 100%
-        font-size: 3vw
-        &--lower
-            background-color: goldenrod
-            nav > button
-                font-size: 2vw
-</style>

frontend/src/components/SideBar.vue

@@ -1,12 +1,10 @@
 <template lang="pug">
-aside.sidebar.p-1.f-col.z-top
-    .temp-control-box.f-row.start.center
+aside.sidebar
+    .temp-control-box
         input(v-model="switchToPID")
-        button(@click="$emit('updatePid', switchToPID)").t-up.p-0 switch profile
+        button(@click="$emit('updatePid', switchToPID)") switch profile
     
     Messages(:matches="matches" :pid="pid")
-    
-    .spacer.f-grow
 </template>
 
 <script>
@@ -39,19 +37,3 @@ export default {
     },
 }
 </script>
-
-<style lang="postcss">
-/* prettier-ignore */
-aside.sidebar
-    background-color: yellow
-    height: 100vh
-    position: fixed
-    h3
-        padding: 2vh
-
-.search
-    display: flex
-    flex-direction: row
-    input
-        border: 0
-</style>

frontend/src/sss/_variables.sss

@@ -1,48 +0,0 @@
-@import './partials/_ratios.sss'
-
-/**
-  * Misc
-  */
-$transition: 300ms
-
-/**
-  * Page
-  */
-$max-width: 80vw
-
-
-/**
-  * Fonts
-  */
-$sans: 'helvetica', 'calibri', 'sans-serif'
-$serif: 'georgia', 'serif'
-$mono: 'input', 'consolas','monospace'
-
-
-/**
-  * Modular Scale
-  */
-$base: 0.7em
-$scale: $golden
-
-$ms-0: calc($base)
-$ms-1: calc($ms-0 * $scale)
-$ms-2: calc($ms-1 * $scale)
-$ms-3: calc($ms-2 * $scale)
-$ms-4: calc($ms-3 * $scale)
-$ms-5: calc($ms-4 * $scale)
-$ms-6: calc($ms-5 * $scale)
-$ms-7: calc($ms-6 * $scale)
-$ms-8: calc($ms-7 * $scale)
-$ms-9: calc($ms-8 * $scale)
-
-/**
-  * Color Scale
-  */
-$cbase: 0.3
-$cs-0: calc($cbase)
-$cs-1: calc($cs-0 * $scale)
-$cs-2: calc($cs-1 * $scale)
-$cs-3: calc($cs-2 * $scale)
-$cs-4: calc($cs-3 * $scale)
-$cs-5: calc($cs-4 * $scale)

frontend/src/sss/card.scss

@@ -1,18 +0,0 @@
-$n: 100;
-$cardbase: 2px;
-$cardtop: -1px;
-$index: 9999;
-
-@for $i from 0 through $n {
-  .swipe:nth-child(#{$i}) {
-    position: absolute;
-    left: calc($cardbase * $i);
-    top: calc($cardtop * $i);
-    z-index: calc($index - $i);
-  }
-}
-
-
-.swipe .card h3 {
-    color: blue!important;
-}

frontend/src/sss/import.css

@@ -1,4 +0,0 @@
-@import './partials/_reset.sss'
-@import './partials/_ratios.sss'
-@import './partials/_helpers.sss'
-@import './partials/_typography.sss'

frontend/src/sss/partials/_helpers.sss

@@ -1,217 +0,0 @@
-@import '../_variables.sss'
-@import '../theme.sss'
-
-.w
-    &-full
-        width: 100%
-    &-half
-        width: 50%
-    
-/* Flex box  */
-%flexy
-    display: flex
-    justify-content: center
-    align-items: center
-
-.f
-    &-row, &-col
-        @extend %flexy
-        &.start
-            align-items: flex-start
-            justify-content: flex-start
-        &.end 
-            align-items: flex-end
-            justify-content: flex-end
-        &.between
-            justify-content: space-between
-        &.around
-            justify-content: space-around
-        &.even
-            justify-content: space-evenly
-        &.stretch
-            align-content: stretch
-        &.baseline
-            align-items: baseline
-        &.center
-            align-items: flex-start
-            justify-content: flex-start
-        &.wrap
-            flex-wrap: wrap
-    &-row
-        flex-direction: row
-        &.reverse
-            flex-direction: row-reverse
-    &-col
-        flex-direction: column
-        &.reverse
-            flex-direction: column-reverse
-    &-grow
-        flex-grow: 1
-
-/* Borders */
-.b
-    &-none
-        border: none
-    &-solid
-        border: 1px solid $dark
-    &-dot
-        border: 1px dotted $dark
-    &-solid, &-dot
-        &.rounded
-            border-radius: $ms-0
-        &.invert
-            border-color: $light
-
-/* Backgrounds */
-.bg
-    &-none
-        background-color: none
-    &-primary
-        background-color: $primary
-    &-dark
-        background-color: $dark
-    &-light
-        background-color: $light
-    &-cover
-        background-size: cover
-    &-contain
-        background-size: contain
-    &-repeat
-        background-repeat: repeat
-
-/* Colors */
-.primary
-    color: $primary
-.dark
-    color: $dark
-.light
-    color: $light
-
-/* Padding */
-.p
-    &-none
-        padding: none
-    &-0
-        padding: $ms-0
-    &-1
-        padding: $ms-1
-    &-2
-        padding: $ms-2
-    &h
-        &-0
-            padding: 0 $ms-0
-        &-1
-            padding: 0 $ms-1
-        &-2
-            padding: 0 $ms-2
-    &v
-        &-0
-            padding: $ms-0 0
-        &-1
-            padding: $ms-1 0
-        &-2
-            padding: $ms-2 0
-    &t
-        &-0
-            padding-top: $ms-0
-        &-1
-            padding-top: $ms-1
-        &-2
-            padding-top: $ms-2
-    &b
-        &-0
-            padding-bottom: $ms-0
-        &-1
-            padding-bottom: $ms-1
-        &-2
-            padding-bottom: $ms-2
-    &l
-        &-0
-            padding-left: $ms-0
-        &-1
-            padding-left: $ms-1
-        &-2
-            padding-left: $ms-2
-    &r
-        &-0
-            padding-right: $ms-0
-        &-1
-            padding-right: $ms-1
-        &-2
-            padding-right: $ms-2
-
-/* Margin */
-.m
-    &-none
-        margin: none
-    &-0
-        margin: $ms-0
-    &-1
-        margin: $ms-1
-    &-2
-        margin: $ms-2
-    &h
-        &-0
-            margin: 0 $ms-0
-        &-1
-            margin: 0 $ms-1
-        &-2
-            margin: 0 $ms-2
-    &v
-        &-0
-            margin: $ms-0 0
-        &-1
-            margin: $ms-1 0
-        &-2
-            margin: $ms-2 0
-    &t
-        &-0
-            margin-top: $ms-0
-        &-1
-            margin-top: $ms-1
-        &-2
-            margin-top: $ms-2
-    &b
-        &-0
-            margin-bottom: $ms-0
-        &-1
-            margin-bottom: $ms-1
-        &-2
-            margin-bottom: $ms-2
-    &l
-        &-0
-            margin-left: $ms-0
-        &-1
-            margin-left: $ms-1
-        &-2
-            margin-left: $ms-2
-    &r
-        &-0
-            margin-right: $ms-0
-        &-1
-            margin-right: $ms-1
-        &-2
-            margin-right: $ms-2
-
-.z
-    &-bottom
-        position: relative
-        z-index: -1
-    &-10
-        position: relative
-        z-index: 10
-    &-20
-        position: relative
-        z-index: 20
-    &-30
-        position: relative
-        z-index: 30
-    &-40
-        position: relative
-        z-index: 40
-    &-50
-        position: relative
-        z-index: 50
-    &-top
-        position: relative
-        z-index: 10001

frontend/src/sss/partials/_ratios.sss

@@ -1,13 +0,0 @@
-$minor-second: 1.067
-$major-second: 1.125
-$minor-third: 1.2
-$major-third: 1.25
-$perfect-fourth: 1.333
-$augmented-fourth: 1.414
-$perfect-fifth: 1.5
-$minor-sixth: 1.6
-$golden: 1.618
-$major-sixth: 1.667
-$minor-seventh: 1.778
-$major-seventh: 1.875
-$octave: 2

frontend/src/sss/partials/_reset.sss

@@ -1,40 +0,0 @@
-@import '../_variables.sss'
-@import '../theme.sss'
-
-*
-    margin: 0
-    padding: 0
-    box-sizing: border-box
-    &:before, &:after
-        background-repeat: no-repeat
-        box-sizing: inherit
-    $:focus
-        outline: none !important
-
-::before, ::after
-    text-decoration: inherit
-    vertical-align: inherit
-
-html
-    cursor: default
-    font-family: system-ui
-    line-height: $ms-0
-    tab-size: 4
-
-body
-    margin: 0
-    font-size: $ms-1
-    font-family: $sans
-
-nav
-    ol, ul
-        list-style: none
-
-// Good for SPAs
-html, body
-    height: 100%
-
-button, input, select, textarea
-    font-family: inherit
-    font-size: inherit
-    line-height: inherit

frontend/src/sss/partials/_typography.sss

@@ -1,43 +0,0 @@
-@import '../_variables.sss'
-@import '../theme.sss'
-
-h1
-    font-size: $ms-5
-    line-height: $ms-5
-h2
-    font-size: $ms-3
-    line-height: $ms-3
-h3
-    font-size: $ms-2
-    line-height: $ms-2
-h4
-    font-size: $ms-1
-    line-height: $ms-2
-p
-    font-size: $ms-1
-    line-height: $ms-2
-
-.t
-    &-center
-        width: 100%
-        text-align: center
-    &-right
-        width: 100%
-        text-align: right
-    &-left
-        width: 100%
-        text-align: left
-    &-up
-        text-transform: uppercase
-    &-cap
-        text-transform: capitalize
-    &-sans
-        font-family: $sans
-    &-serif
-        font-family: $serif
-    &-mono
-        font-family: $mono
-
-a
-    &:hover
-        cursor: pointer

frontend/src/sss/theme.sss

@@ -1,16 +0,0 @@
-@import './_variables.sss'
-
-/**
- * Colors
- */
-$hue: 50
-$bg: calc($hue * $cs-5)
-$bright: 70%
-$opacity: 1
-
-$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(100, 100%, calc($bright * $cs-0), $opacity)
-$dark: hsla(001, 0%, 5%, $opacity)

frontend/src/views/HomeView.vue

@@ -1,12 +1,8 @@
 <template lang="pug">
-main.view--home.f-col.start.w-full
+main.view--home
     header
         h2 home - profile: {{ pid }}
-        w-badge
-            template(#badge) 3
-            w-button(color="primary")
-                w-icon(class="mr1") mdi mdi-email
-                    Emails
+        
     article(v-if="cards.length && !loading")
         ProfileCardList(:profiles="cards" :pid="pid" @reload="getCards")
 
@@ -56,18 +52,3 @@ export default {
     },
 }
 </script>
-
-<style lang="postcss">
-/* prettier-ignore */
-main
-    position: relative
-    height: 100%
-    > article
-        height: 100%
-        width: 100%
-        flex-direction: column
-
-    input, button
-        position: relative
-        z-index: 1000
-</style>

frontend/src/views/LoginView.vue

@@ -44,7 +44,3 @@ export default {
     },
 }
 </script>
-
-<style lang="postcss">
-/* prettier-ignore */
-</style>

frontend/src/views/MatchesView.vue

@@ -52,10 +52,3 @@ export default {
     },
 }
 </script>
-
-<style lang="postcss">
-/* prettier-ignore */
-.row
-    display: flex
-    flex-direction: row
-</style>

frontend/src/views/ProfileView.vue

@@ -60,7 +60,3 @@ export default {
     },
 }
 </script>
-
-<style lang="postcss">
-/* prettier-ignore */
-</style>

frontend/src/views/SurveyView.vue

@@ -264,76 +264,3 @@ export default {
     },
 }
 </script>
-
-<style lang="postcss">
-/* prettier-ignore */
-.slide-up
-    &-leave, &-enter
-        &-active
-            transition-delay: 500ms
-            transition-property: opacity, background-color, font-size, transform, color
-            transition-timing-function: cubic-bezier(1, 0.3, 0.5, 1)
-            transition-duration: 300ms
-    &-enter-from, &-leave-to
-        opacity: 0
-
-.fade
-    animation: fadeIn 1200ms ease-in
-
-@keyframes fadeIn
-    0%
-        opacity: 0
-    50%
-        opacity: 0.5
-    100%
-        opacity:1
-
-h1
-    color: white
-
-main
-    padding: 5vh
-    display: flex
-    header
-        p
-            color: #666
-            line-height: 1.3em
-        color: #ccc
-        font-style: italic
-        text-align: left
-
-article
-    height: 100%
-    width: 100%
-    flex-direction: column
-    ul
-        height: 100%
-        list-style: none
-        button
-            padding: 1em
-        p
-            padding: 1em
-            color: white
-.form
-    border: 1px solid #fff
-    width: 100%
-    header, footer, ul
-        padding: 1vh
-    ul
-        display: flex
-        width: 100%
-        > li
-            flex-direction: column
-            border: 0px solid yellow
-            width: 100%
-            padding: 0
-            text-align: left
-            label
-                margin-right: 1vh
-            > h3
-                text-transform: capitalize
-                padding: 1vh 0
-            > div > span
-                display: block
-                text-align: center
-</style>

frontend/vite.config.js

@@ -9,11 +9,4 @@ export default defineConfig({
             '@': require('path').resolve(__dirname, 'src'),
         },
     },
-    css: {
-        preprocessorOptions: {
-            scss: {
-                additionalData: '$use-layout-classes: false;@import "/src/../node_modules/wave-ui/src/wave-ui/scss/_variables.scss";',
-            },
-        },
-    },
 })