From 6a52d03329ec62e86d7c5a06153119bf5790fbcc Mon Sep 17 00:00:00 2001
From: Geometrically <18202329+Geometrically@users.noreply.github.com>
Date: Fri, 13 Jan 2023 12:01:20 -0700
Subject: [PATCH] Landing + other fixes (#909)

---
 assets/styles/global.scss |  2 ++
 components/ui/Modal.vue   | 20 +++++++++-----------
 pages/index.vue           |  5 +++--
 pages/search.vue          | 14 --------------
 4 files changed, 14 insertions(+), 27 deletions(-)

diff --git a/assets/styles/global.scss b/assets/styles/global.scss
index 9c21ddb6f..a4e9caed4 100644
--- a/assets/styles/global.scss
+++ b/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(
diff --git a/components/ui/Modal.vue b/components/ui/Modal.vue
index 5ece46b44..f27cdb036 100644
--- a/components/ui/Modal.vue
+++ b/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>
diff --git a/pages/index.vue b/pages/index.vue
index 3fb5a24ae..b213df804 100644
--- a/pages/index.vue
+++ b/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 {
diff --git a/pages/search.vue b/pages/search.vue
index f28ecdfd3..5303ac923 100644
--- a/pages/search.vue
+++ b/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;