Merge pull request #166 from Schrodinger-Hat/feat/ai-conversion-step0

fix(grid): fix broken grid
Schroedinger-Hat · May 27, 2024 · b928cf5 · b928cf5
2 parents e1033e3 + 88af63c
commit b928cf5
Showing 1 changed file with 77 additions and 1 deletion.
diff --git a/src/ign-frontend/src/views/GoWild.vue b/src/ign-frontend/src/views/GoWild.vue
@@ -58,7 +58,7 @@
       </center>
       <div class="palette-grid container">
         <div @click="selectedPalette = palette.file" :class="{'palette-post': true, 'current-palette': (selectedPalette === palette.file)}" v-for="palette in palettes" :key="palette.name">
-          <div class="palette-img" :style="`background-image: url(${require('../assets/' + palette.img)})`"/>
+          <div class="palette-img" :style="`width: 100%; background-position: center; background-size: cover; object-fit: cover; background-image: url(${require('../assets/' + palette.img)})`" />
           <span class="palette-title">{{ palette.name }}</span>
         </div>
       </div>
@@ -122,6 +122,7 @@ export default {
   },
 };
 </script>
+
 <style scoped lang="scss">
 .canvas-container {
   svg {
@@ -237,6 +238,60 @@ export default {
   }
 }
 
+.palette-grid {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-around;
+  flex-direction: row;
+
+  .palette-post {
+    display: flex;
+    text-align: center;
+    width: 100%;
+    margin: 15px 10px;
+    flex: auto;
+    border: 8px solid transparent;
+    .palette-img {
+      -webkit-filter: brightness(0.6) blur(0);
+      filter: brightness(0.6) blur(0);
+    }
+
+    &:hover, &:focus, &:active, &.current-palette {
+      border-color: $nord12;
+      cursor: pointer;
+    }
+
+    .palette-title {
+      font-size: 25px;
+      text-align: center;
+      width: calc(100% - 16px);
+      padding-top: 5em;
+      height: 6em;
+      color: $nord6;
+      background: #757575c9;
+      font-weight: bold;
+      display: block;
+    }
+
+    .palette-img {
+      width: 100%;
+      aspect-ratio: 4/3;
+      object-fit: cover;
+      background-size: cover;
+      -webkit-filter: brightness(0.3) blur(2px);
+      filter: brightness(0.3) blur(2px);
+      overflow: hidden;
+    }
+
+    img {
+      max-width: 100%;
+      max-height: 215px;
+      border: 6px solid $nord4;
+      border-radius: 5px;
+    }
+  }
+}
+
 @media (min-width: 56.25em) {
   .slider-section {
     .slider-item {
@@ -250,6 +305,27 @@ export default {
       }
     }
   }
+  .palette-grid {
+    .palette-post {
+      display: inline-flex;
+      width: 30%;
+      margin: 15px 10px;
+      flex: auto;
+    }
+    .palette-title {
+      font-size: 25px;
+      text-align: center;
+      width: calc(100% - 16px);
+      padding-top: 5em;
+      height: 6em;
+      color: $nord6;
+      background: #757575c9;
+      font-weight: bold;
+      display: block;
+      border: 8px solid transparent;
+    }
+
+  }
 }
 
 .#{$dark-mode-class} {