Make image on home even brighter on mobiles

subugoe · Sep 26, 2024 · 9b9f8e2 · 9b9f8e2
1 parent dba9813
commit 9b9f8e2
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/src/assets/archive-very-bright.jpg b/src/assets/archive-very-bright.jpg
diff --git a/src/index.css b/src/index.css
@@ -24,3 +24,13 @@
     @apply text-gray-700 flex items-center justify-between px-4 py-2 rounded-t border-b
         bg-gray-100
 }
+/* custom classes with breakpoints (responsive classes dependend on width) don't work in component-scoped-styles */
+@layer utilities {
+  .home-img {
+    background-image: url("@/assets/archive.jpg");
+  }
+
+  .home-img-bright {
+    background-image: url("@/assets/archive-very-bright.jpg");
+  }
+}
diff --git a/src/layout/main/index.vue b/src/layout/main/index.vue
@@ -1,12 +1,12 @@
 <template>
   <div
     id="search-header"
-    class="h-96 bg-cover bg-gray-400 bg-center p-12 home-img"
+    class="h-96 bg-cover bg-gray-400 bg-center p-12 xl:home-img home-img-bright"
   >
-    <h1 class="flex justify-center m-5 text-4xl font-bold text-blue-600">
+    <h1 class="text-center m-5 text-4xl font-bold text-blue-600">
       OLA-HD
     </h1>
-    <h2 class="flex justify-center m-5 text-2xl" >OCR Long-Term Archive</h2>
+    <h2 class="text-center m-5 text-2xl" >OCR Long-Term Archive</h2>
     <div class="mx-auto">
       <form @submit.prevent="submit" class="float">
         <div class="grid grid-cols-7">
@@ -86,9 +86,7 @@ export default {
 </script>
 
 <style scoped>
-.home-img {
-  background-image: url("@/assets/archive.jpg");
-}
+
 
 :deep(.p-multiselect-label), :deep(.p-icon) {
   margin: -4px;