Improve styles

Author: tabuna

public/build/assets/app-Dq9x9Vhz.css public/build/assets/app-D-h4X_Cb.csspublic/build/assets/app-Dq9x9Vhz.css renamed to public/build/assets/app-D-h4X_Cb.css

@@ -16,7 +16,7 @@
     "src": "public/img/ui/blockquote/warning.svg"
   },
   "resources/css/app.scss": {
-    "file": "assets/app-Dq9x9Vhz.css",
+    "file": "assets/app-D-h4X_Cb.css",
     "src": "resources/css/app.scss",
     "isEntry": true
   },

public/build/manifest.json

@@ -88,6 +88,19 @@ $utilities: (
             5: 5,
         ),
     ),
+    'ratio': (
+        property: aspect-ratio,
+        class: ratio,
+        responsive: true,
+        values: (
+            '1x1': 1,
+            '16x9': 16 / 9,
+            '4x3': 4 / 3,
+            '3x2': 3 / 2,
+            '21x9': 21 / 9,
+            'auto': auto,
+        ),
+    ),
 );
 
 %heading {

resources/css/app.scss

@@ -384,6 +384,24 @@ main,
     }
 }
 
+@include media-breakpoint-down(md) {
+    main,
+    .main,
+    .post {
+        blockquote {
+            &:before {
+                width: 1em;
+                border: none;
+                background-image: none;
+                margin: 0;
+                padding: 0;
+                min-width: 1em;
+            }
+        }
+    }
+}
+
+
 .doc-navigation {
     -ms-overflow-style: none; /* IE and Edge */
     scrollbar-width: none; /* Firefox */

resources/css/docs.scss

@@ -62,10 +62,14 @@ pre {
             color: #d2cdea;
         }
 
+        .hl-addition, .hl-deletion {
+            display: inline-block;
+        }
+
         .hl-deletion {
             color: #d2cdea;
             min-width: 100%;
-            background-color: #ff000033;
+            background-color: #ef535033;
         }
 
         .hl-addition {

resources/css/highlight.scss

@@ -19,7 +19,7 @@
     <div class="row g-4">
         <div class="col-md-6 col-lg-8">
 
-            <div class="bg-primary bg-opacity-10 rounded p-4 p-xl-5 position-relative overflow-hidden mb-4">
+            <div class="bg-primary bg-opacity-10 rounded p-4 p-xl-5 position-relative overflow-hidden mb-4 ratio-1x1 ratio-md-auto">
                 <img src="/img/bird.svg" class="position-absolute w-50 bottom-0 end-0">
                 <div class="row">
                     <div class="col-sm-7">
@@ -38,7 +38,7 @@ class="link-body-emphasis text-decoration-none icon-link icon-link-hover stretch
             </div>
 
             <div class="row">
-                <div class="col-lg-6 mb-4 mb-lg-0">
+                <div class="col-lg-6 mb-4 mb-lg-0 ratio-1x1">
                     <div class="bg-primary bg-opacity-10 rounded p-5 h-100 position-relative overflow-hidden">
                         <div class="d-flex flex-column position-relative h-100">
                             <h3 class="mb-3 fw-bold">Советы по безопасности</h3>
@@ -54,7 +54,7 @@ class="link-body-emphasis text-decoration-none icon-link icon-link-hover stretch
                         </div>
                     </div>
                 </div>
-                <div class="col-lg-6">
+                <div class="col-lg-6 ratio-1x1">
 
                     <div class="bg-secondary bg-opacity-10 rounded p-5 h-100 position-relative overflow-hidden">
                         <div class="d-flex flex-column position-relative h-100">
@@ -98,7 +98,7 @@ class="link-body-emphasis text-decoration-none icon-link icon-link-hover stretch
 
 
         <div class="col-md-6 col-lg-4">
-            <div class="bg-secondary bg-opacity-10 rounded p-5 h-100 position-relative overflow-hidden">
+            <div class="bg-secondary bg-opacity-10 rounded p-5 h-100 position-relative overflow-hidden ratio-1x1">
                 <div class="d-flex flex-column position-relative h-100">
                     <h3 class="mb-3 fw-bold">Действия</h3>
                     <p class="mb-auto fw-light">

resources/views/library/index.blade.php

@@ -23,7 +23,7 @@ class="link-body-emphasis fw-semibold text-decoration-none icon-link icon-link-h
 
     <div class="row row-cols-lg-3 row-cols-1 g-4 sponsors">
         <div class="col">
-            <div class="p-4 p-xl-5 bg-body-tertiary rounded d-flex flex-column h-100 position-relative">
+            <div class="p-4 p-xl-5 bg-body-tertiary rounded d-flex flex-column h-100 position-relative ratio-xl-1x1">
                 <img src="/img/sponsors/am.svg" class="d-block mb-4 me-auto" height="64">
                 <p class="fw-normal">
                     Инструменты для управления эмоциями, которые помогают людям контролировать свою жизнь и лучше понимать себя.
@@ -37,7 +37,7 @@ class="link-body-emphasis fw-semibold text-decoration-none icon-link icon-link-h
 
         </div>
         <div class="col">
-            <div class="p-4 p-xl-5 bg-body-tertiary rounded d-flex flex-column h-100 position-relative">
+            <div class="p-4 p-xl-5 bg-body-tertiary rounded d-flex flex-column h-100 position-relative ratio-xl-1x1">
                 <img src="/img/sponsors/soidet.svg" class="d-block mb-4 me-auto" height="64">
                 <p class="fw-normal">
                     Подкасты c зажигательными эпизодами, которые заставят
@@ -51,7 +51,7 @@ class="link-body-emphasis fw-semibold text-decoration-none icon-link icon-link-h
             </div>
         </div>
         <div class="col d-none d-lg-block">
-            <div class="p-4 p-xl-5 bg-body-tertiary rounded d-flex flex-column h-100 position-relative d-flex bg-opacity-75 opacity-50 align-items-center">
+            <div class="p-4 p-xl-5 bg-body-tertiary rounded d-flex flex-column h-100 position-relative d-flex bg-opacity-75 opacity-50 align-items-center ratio-xl-1x1">
                 <a class="icon-link icon-link-hover stretched-link link-body-emphasis text-decoration-none d-block text-center my-auto" href="{{ route('advertising') }}">
 
                     <span class="d-block mb-3">