Landing + other fixes (#909)

assets/styles/global.scss

@@ -111,6 +111,7 @@ html {
     rgba(129, 137, 175, 0.75) 0%,
     rgba(66, 71, 97, 0.34) 100%
   );
+  --landing-border-color: rgba(129, 137, 175, 0.55);
   --landing-creator-gradient: linear-gradient(
     180deg,
     #f8f8f8 0%,
@@ -242,6 +243,7 @@ html {
     rgba(168, 177, 221, 0.75) 0%,
     rgba(168, 177, 221, 0.18) 100%
   );
+  --landing-border-color: rgba(168, 177, 221, 0.55);
   --landing-creator-gradient: linear-gradient(180deg, #000000 0%, #0e101d 100%);
 
   --landing-blob-gradient: radial-gradient(

components/ui/Modal.vue

@@ -9,17 +9,15 @@
       @click="hide"
     />
     <div class="modal-body" :class="{ shown: shown }">
-      <template v-if="shown">
-        <div v-if="header" class="header">
-          <h1>{{ header }}</h1>
-          <button class="iconified-button icon-only transparent" @click="hide">
-            <CrossIcon />
-          </button>
-        </div>
-        <div class="content">
-          <slot></slot>
-        </div>
-      </template>
+      <div v-if="header" class="header">
+        <h1>{{ header }}</h1>
+        <button class="iconified-button icon-only transparent" @click="hide">
+          <CrossIcon />
+        </button>
+      </div>
+      <div class="content">
+        <slot></slot>
+      </div>
     </div>
   </div>
 </template>

pages/index.vue

@@ -54,7 +54,7 @@
             <nuxt-link
               v-for="project in row"
               :key="project.id"
-              class="project gradient-border button-animation"
+              class="project button-animation"
               :to="`/${project.project_type}/${project.slug}`"
             >
               <Avatar
@@ -775,9 +775,9 @@ export default {
         padding: 1rem;
         gap: 1rem;
         border-radius: 1rem;
+        border: 1px solid var(--landing-border-color);
         transition: background 0.5s ease-in-out, transform 0.05s ease-in-out;
         // Removed due to lag on mobile :(
-        // backdrop-filter: blur(0.25rem);
 
         &:hover {
           z-index: -2;
@@ -802,6 +802,7 @@ export default {
           font-weight: 600;
           font-size: 1.25rem;
           line-height: 110%;
+          display: block;
         }
 
         .description {

pages/search.vue

@@ -886,20 +886,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-// Mobile-first CSS: search page is grid on mobile...
-.search-page {
-  display: grid;
-  grid-template-rows: auto;
-  grid-template-columns: 100%;
-
-  // ...and flex on desktop
-  @media screen and (min-width: 1024px) {
-    display: flex;
-
-    // Note that the actual flex layout properties come from .normal-page
-  }
-}
-
 .normal-page__content {
   // Passthrough children as grid items on mobile
   display: contents;