Добавлен оверлей изображений

Author: Jumas-Cola

public/build/assets/app-BpzpszQv.js public/build/assets/app-CMvKAzkK.js

@@ -8,7 +8,7 @@
     "src": "node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff2"
   },
   "resources/css/app.scss": {
-    "file": "assets/app-BgXLvDwa.css",
+    "file": "assets/app-Dprx4ffe.css",
     "src": "resources/css/app.scss",
     "isEntry": true
   },
@@ -181,12 +181,12 @@
     "src": "resources/images/testimonial-author.jpg"
   },
   "resources/js/app.js": {
-    "file": "assets/app-BpzpszQv.js",
+    "file": "assets/app-CMvKAzkK.js",
     "name": "app",
     "src": "resources/js/app.js",
     "isEntry": true,
     "css": [
-      "assets/app-BgXLvDwa.css"
+      "assets/app-Dprx4ffe.css"
     ],
     "assets": [
       "assets/bootstrap-icons-BtvjY1KL.woff2",

public/build/assets/app-BgXLvDwa.css public/build/assets/app-Dprx4ffe.css

@@ -60,6 +60,14 @@
     color: #6a737d;
     padding: 0 1em;
   }
+
+  h1 {
+    font-size: 5rem;
+
+    @media (max-width: 992px) {
+      font-size: 3rem;
+    }
+  }
 }
 
 .cover {
@@ -68,6 +76,16 @@
   overflow: hidden;
   background: #fff no-repeat 50% 50% / cover;
 
+  .overlay {
+    background-color: rgba(0, 0, 0, 0.3);
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    z-index: 1;
+  }
+
   @media (max-width: 992px) {
     height: 180px;
   }

public/build/manifest.json

@@ -8,7 +8,13 @@
     </x-slot>
 
     @if (!Str::startsWith($page->image('cover'), 'data'))
-        <div class="cover" style="background-image: url({{ $page->image('cover') }})"></div>
+        <div class="cover d-flex" style="background-image: url({{ $page->image('cover') }})">
+            <div class="overlay d-flex">
+                <div class="container d-flex align-items-end">
+                    <h1 class="text-white fw-bold mb-2 mb-md-5">{{ $page->title }}</h1>
+                </div>
+            </div>
+        </div>
     @endif
 
     <div class="container mt-4">
@@ -17,9 +23,10 @@
                 <span class="badge text-bg-primary">{{ $tag->name }}</span>
             @endforeach
 
-            <h1 class="mt-3">{{ $page->title }}</h1>
 
-            {!! $page->renderBlocks() !!}
+            <div class="mt-3 mt-md-5">
+                {!! $page->renderBlocks() !!}
+            </div>
         </div>
     </div>