Merge pull request #164 from Frontesque/main

Website Improvements & Extension button hover

Extensions/chrome/popup.css

@@ -33,8 +33,12 @@ button {
   border: none;
   border-radius: 4px;
   font-weight: 500;
-  box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%),
-    0 1px 10px 0 rgb(0 0 0 / 12%);
+  box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%);
+  transition: .4s;
+}
+
+button:hover {
+  background: #444;
 }
 
 #advancedToggle {

Extensions/firefox/popup.css

@@ -32,6 +32,11 @@ button {
     border-radius: 4px;
     font-weight: 500;
     box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%);
+    transition: .4s;
+}
+
+button:hover {
+    background: #444;
 }
 
 #advancedToggle {

Website/layouts/default.vue

@@ -1,9 +1,7 @@
 <template>
-  <v-app id="inspire" dark>
-    <v-app-bar app flat class="glassy fly-in-from-top"
+  <v-app dark>
+    <v-app-bar app flat class="topBar fly-in-from-top"
       :class="$vuetify.breakpoint.mobile ? 'ma-4' : 'my-4 mx-auto'"
-      :style="$vuetify.breakpoint.mobile ? '' : 'width: 50%'"
-      style="border-radius: 1rem; overflow: hidden;"
       >
       <v-tabs centered center-active color="primary" router show-arrows>
         <v-tab v-for="link in links" :key="link.path" :to="link.path">
@@ -43,13 +41,13 @@ html, body {
   display: none;
 }
 
-/* Glassmorphism effect */
-.glassy {
-  backdrop-filter: blur(16px) saturate(180%);
-  -webkit-backdrop-filter: blur(16px) saturate(180%);
-  background-color: rgba(42, 42, 42, 0.75) !important;
+.topBar {
+  background-color: #222 !important;
   border-radius: 12px;
-  /* border: 1px solid rgba(255, 255, 255, 0.125); */
+  width: fit-content !important;
+  padding: 0 50px;
+  border-radius: 1rem !important;
+  overflow: hidden;
 }
 
 .fly-in-from-top {
@@ -68,6 +66,14 @@ html, body {
     transform: scale(1) translateY(0);
   }
 }
+/*
+@media (min-width: 1234px) { 
+  .topBar { 
+    width: 95%; 
+  } 
+}
+*/
+
 </style>
 
 <script>

Website/layouts/default_legacy.vue

@@ -1,72 +0,0 @@
-<template>
-  <v-app id="inspire" dark>
-    <v-app-bar app color="lighten-2" flat>
-
-      <v-tabs centered class="ml-n9" color="primary" router>
-        <v-tab v-for="link in links" :key="link" :to="link.path">
-          {{ link.name }}
-        </v-tab>
-      </v-tabs>
-    </v-app-bar>
-
-    <v-main>
-
-      <v-img src="/ui/abstract.svg" style="position: absolute; top: 0; right: 0; width: 100%; height: 100%;" />
-      
-
-      
-      <nuxt />
-
-
-    </v-main>
-  </v-app>
-</template>
-
-<style>
-html, body {
-  overflow: hidden;
-}
-
-section {
-  height: 90vh;
-  width: 100vw;
-}
-.mainAltButton {
-  margin: 0.25em;
-}
-.center {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-</style>
-
-<script>
-  export default {
-    data: () => ({
-      links: [
-        {
-          name: 'Home',
-          path: '/'
-        },
-        {
-          name: 'Install',
-          path: '/install'
-        },
-        {
-          name: 'FAQ',
-          path: '/faq'
-        },
-        {
-          name: 'Donate',
-          path: '/donate'
-        },
-        {
-          name: 'Links',
-          path: '/links'
-        },
-      ],
-    }),
-  }
-</script>