some Fomat-Tweaks for Text of Cards

css/tweaks.css

@@ -1,63 +1,80 @@
 @font-face {
-    font-family: 'Comfortaa';
-    font-style: normal;
-    font-weight: 300;
-    src: url(../fonts/comfortaa.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  font-family: 'Comfortaa';
+  font-style: normal;
+  font-weight: 300;
+  src: url(../fonts/comfortaa.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+
 .bd-placeholder-img {
-    font-size: 1.125rem;
-    text-anchor: middle;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    user-select: none;
-  }
-
-  @media (min-width: 768px) {
-    .bd-placeholder-img-lg {
-      font-size: 3.5rem;
-    }
-  }
-
-  .b-example-divider {
-    height: 3rem;
-    background-color: rgba(0, 0, 0, .1);
-    border: solid rgba(0, 0, 0, .15);
-    border-width: 1px 0;
-    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
-  }
-
-  .b-example-vr {
-    flex-shrink: 0;
-    width: 1.5rem;
-    height: 100vh;
-  }
-
-  .bi {
-    vertical-align: -.125em;
-    fill: currentColor;
-  }
-
-  .nav-scroller {
-    position: relative;
-    z-index: 2;
-    height: 2.75rem;
-    overflow-y: hidden;
-  }
-
-  .nav-scroller .nav {
-    display: flex;
-    flex-wrap: nowrap;
-    padding-bottom: 1rem;
-    margin-top: -1px;
-    overflow-x: auto;
-    text-align: center;
-    white-space: nowrap;
-    -webkit-overflow-scrolling: touch;
-  }
-
-  .card-img-top {
-    width: 100%;
-    height: 15vw;
-    object-fit: scale-down;
+  font-size: 1.125rem;
+  text-anchor: middle;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+@media (min-width: 768px) {
+  .bd-placeholder-img-lg {
+    font-size: 3.5rem;
+  }
+}
+
+.b-example-divider {
+  height: 3rem;
+  background-color: rgba(0, 0, 0, .1);
+  border: solid rgba(0, 0, 0, .15);
+  border-width: 1px 0;
+  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
+}
+
+.b-example-vr {
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 100vh;
+}
+
+.bi {
+  vertical-align: -.125em;
+  fill: currentColor;
+}
+
+.nav-scroller {
+  position: relative;
+  z-index: 2;
+  height: 2.75rem;
+  overflow-y: hidden;
+}
+
+.nav-scroller .nav {
+  display: flex;
+  flex-wrap: nowrap;
+  padding-bottom: 1rem;
+  margin-top: -1px;
+  overflow-x: auto;
+  text-align: center;
+  white-space: nowrap;
+  -webkit-overflow-scrolling: touch;
+}
+
+.card-img-top {
+  width: 100%;
+  height: 15vw;
+  object-fit: scale-down;
+  padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
+}
+
+.card-text {
+  min-height: 3em;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.card-title {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 }

img/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="img/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

img/gift.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gift" viewBox="0 0 16 16">
+  <path d="M3 2.5a2.5 2.5 0 0 1 5 0 2.5 2.5 0 0 1 5 0v.006c0 .07 0 .27-.038.494H15a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1v7.5a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 1 14.5V7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h2.038A2.968 2.968 0 0 1 3 2.506V2.5zm1.068.5H7v-.5a1.5 1.5 0 1 0-3 0c0 .085.002.274.045.43a.522.522 0 0 0 .023.07zM9 3h2.932a.56.56 0 0 0 .023-.07c.043-.156.045-.345.045-.43a1.5 1.5 0 0 0-3 0V3zM1 4v2h6V4H1zm8 0v2h6V4H9zm5 3H9v8h4.5a.5.5 0 0 0 .5-.5V7zm-7 8V7H2v7.5a.5.5 0 0 0 .5.5H7z"/>
+</svg>

img/safari-pinned-tab.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="700.000000pt" height="700.000000pt" viewBox="0 0 700.000000 700.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M2225 6985 c-102 -20 -110 -22 -178 -46 -378 -133 -657 -466 -720
+-861 -14 -83 -15 -304 -3 -360 6 -27 5 -28 -36 -29 -24 0 -234 -1 -467 -1
+-460 0 -499 -4 -594 -55 -76 -42 -145 -117 -186 -203 l-36 -75 -2 -520 c-2
+-574 -1 -581 60 -684 64 -107 180 -185 306 -206 l66 -10 1 -1655 c1 -910 4
+-1678 7 -1706 34 -272 244 -501 514 -559 103 -22 4983 -22 5088 0 236 49 430
+235 495 475 l23 85 0 1678 c0 1194 4 1680 11 1682 6 1 40 8 75 15 161 30 294
+155 336 315 23 89 22 999 -1 1092 -39 156 -151 270 -308 313 -53 15 -120 17
+-529 18 -258 0 -470 1 -472 3 -2 2 1 36 5 74 8 69 5 244 -5 317 -9 65 -55 208
+-90 285 -98 213 -276 399 -485 507 -81 42 -186 83 -239 92 -13 3 -53 11 -89
+18 -107 23 -326 14 -447 -18 -113 -30 -292 -113 -375 -176 -125 -93 -235 -219
+-313 -357 -62 -110 -123 -294 -126 -380 -2 -46 -17 -21 -29 46 -32 190 -139
+406 -270 546 -159 172 -347 278 -597 336 -75 17 -308 20 -390 4z m347 -445
+c244 -56 454 -294 484 -546 10 -87 10 -295 0 -301 -15 -9 -1267 -6 -1276 3
+-17 17 -23 70 -24 199 0 97 5 145 18 190 76 253 306 448 557 471 35 4 65 7 66
+8 5 4 124 -12 175 -24z m2235 -16 c102 -33 167 -75 253 -163 79 -80 134 -170
+165 -271 31 -99 26 -362 -7 -395 -9 -9 -1267 -10 -1275 -1 -9 8 -7 233 2 304
+20 162 120 331 257 435 87 67 245 122 368 129 65 4 154 -10 237 -38z m-1297
+-508 c0 -3 -4 -8 -10 -11 -5 -3 -10 -1 -10 4 0 6 5 11 10 11 6 0 10 -2 10 -4z
+m-449 -773 c0 -5 1 -200 2 -436 1 -278 -1 -427 -8 -428 -5 -1 -596 -2 -1312
+-3 l-1303 -1 -1 25 c-1 31 -1 844 0 848 2 6 2621 1 2622 -5z m3500 -5 c1 -16
+1 -839 0 -853 -1 -12 -2605 -15 -2617 -3 -5 6 -10 775 -5 856 1 9 270 12 1311
+12 1041 0 1310 -3 1311 -12z m-3500 -1337 c4 -179 1 -3450 -4 -3457 -3 -5
+-430 -9 -1004 -8 -982 1 -999 1 -1044 21 -53 24 -82 52 -112 108 l-21 40 -1
+1666 0 1666 1092 0 1093 0 1 -36z m3064 -1631 l-1 -1665 -21 -40 c-30 -56 -59
+-84 -112 -108 -45 -20 -62 -20 -1039 -21 -547 -1 -999 2 -1004 6 -8 4 -11 537
+-10 1740 0 953 1 1738 1 1744 1 8 311 11 1094 10 l1092 -1 0 -1665z"/>
+</g>
+</svg>

img/site.webmanifest

@@ -1 +1,19 @@
-{"name":"","short_name":"","icons":[{"src":"/static/img/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/static/img/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

index.php

@@ -21,6 +21,12 @@ include_once('config/config.php');
   <link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
   <link rel="manifest" href="img/site.webmanifest">
+  <link rel="mask-icon" href="img/safari-pinned-tab.svg" color="#5bbad5">
+  <link rel="shortcut icon" href="img/favicon.ico">
+  <meta name="msapplication-TileColor" content="#da532c">
+  <meta name="msapplication-config" content="img/browserconfig.xml">
+  <meta name="theme-color" content="#ffffff">
+  <link rel="manifest" href="img/site.webmanifest">
 </head>
 
 <body>
@@ -29,9 +35,8 @@ include_once('config/config.php');
     <div class="navbar navbar-dark bg-dark shadow-sm">
       <div class="container">
         <a href="#" class="navbar-brand d-flex align-items-center">
-          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="me-2" viewBox="0 0 24 24">
-            <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path>
-            <circle cx="12" cy="13" r="4"></circle>
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="me-2 bi bi-gift" viewBox="0 0 16 16">
+            <path d="M3 2.5a2.5 2.5 0 0 1 5 0 2.5 2.5 0 0 1 5 0v.006c0 .07 0 .27-.038.494H15a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1v7.5a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 1 14.5V7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h2.038A2.968 2.968 0 0 1 3 2.506V2.5zm1.068.5H7v-.5a1.5 1.5 0 1 0-3 0c0 .085.002.274.045.43a.522.522 0 0 0 .023.07zM9 3h2.932a.56.56 0 0 0 .023-.07c.043-.156.045-.345.045-.43a1.5 1.5 0 0 0-3 0V3zM1 4v2h6V4H1zm8 0v2h6V4H9zm5 3H9v8h4.5a.5.5 0 0 0 .5-.5V7zm-7 8V7H2v7.5a.5.5 0 0 0 .5.5H7z" />
           </svg>
           <strong>Simple Wishlist</strong>
         </a>
@@ -126,7 +131,7 @@ include_once('config/config.php');
 
             <label for="ItemDescription" class="form-label">Beschreibung</label>
             <div class="input-group mb-3">
-              <textarea class="form-control" id="ItemDescription" name="ItemDescription"  rows="3"></textarea>
+              <textarea class="form-control" id="ItemDescription" name="ItemDescription" rows="3"></textarea>
             </div>
 
             <label for="ItemPrice" class="form-label">Preis</label>