feat() replace img, disable hover in mobile

Author: MartinMeer

.phcode.json

@@ -0,0 +1,6 @@
+{
+    "livePreviewUseDevServer": false,
+    "livePreviewServerProjectPath": "/",
+    "livePreviewHotReloadSupported": false,
+    "livePreviewFramework": "Custom"
+}

css/styles.css

@@ -215,6 +215,12 @@ figure img {
 .hover-image:hover {
   transform: scale(3); /* Увеличиваем изображение при наведении */
 }
+@media (max-width: 768px) {
+  .hover-image:hover {
+    transform: none; /* Убираем увеличение при наведении на мобильных устройствах */
+    transition: none; /* Убираем переход на мобильных устройствах (по желанию) */
+  }
+}
 
 footer {
     background-color: #333;

css/styles18.css

@@ -10017,6 +10017,7 @@ body.fixed-header .header {
   box-shadow: 0 5px currentColor, 0 -5px currentColor;
 }
 
+
 .footer {
   background: #fff;
   border-top: 1px solid rgba(0, 40, 100, 0.12);

html/ost22.html

@@ -5,17 +5,18 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <meta name="description" content="ОСТ 22">
-<title>ОСТ 22</title>
+<title>ОСТ 1 00022-80 Неуказанные предельные отклонения</title>
 
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
 
+
 <link rel="icon" href="favicon.ico"> <!-- 32×32 -->
 <link rel="icon" href="images/favicons/icon.svg" type="image/svg+xml">
 <link rel="apple-touch-icon" href="images/favicons/apple.png">  <!-- 180×180 -->
-<link rel="manifest" href="manifest.webmanifest">
+<link rel="manifest" href="../manifest.webmanifest">
 
 <link href="../css/styles18.css" rel="stylesheet">
 <link rel="stylesheet" href="../css/styles.css">
@@ -118,17 +119,15 @@
 
 <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom"><h1 class="h2">ОСТ 22 - <small class="text-muted">неуказанные предельные отклонения</small></h1></div>
 
-<!--p><strong>ОСТ 22</strong> Неуказанные предельные отклонения</!--p-->
-
 <section class="calculation-section">
             <h4>Размеры элементов отверстий и валов</h4>
             <div class="image-row">
-                <img src="../img/ost22-1.jpg" alt="Отверстия" class="hover-image">
-                <img src="../img/ost22-2.jpg" alt="Валы" class="hover-image">
+                <img src="../img/ost22-hole.webp" alt="Отверстия" class="hover-image">
+                <img src="../img/ost22-shaft.webp" alt="Валы" class="hover-image">
             </div>
             <h4>Размеры, не относящиеся к отверстиям и валам</h4>
             <div class="image-row">
-                <img src="../img/ost22-3.jpg" alt="Общие размеры" class="hover-image">
+                <img src="../img/ost22-undef.webp" alt="Общие размеры" class="hover-image">
             </div>
             <div class="input-section">
                 <label>Введите размер с чертежа:</label>

manifest.webmanifest

@@ -1,5 +1,3 @@
-manifest.webmanifest
-
 {
   "icons": [
     { "src": "images/favicons/192.png", "type": "image/png", "sizes": "192x192" },