Revize f5ea2a43

Issue #8008 @1h
[+] Vizualizace homepage pro desktop
[+] Přidání log ve formátu svg
[-] Odebrání log ve formátu png

public/css/app.css

@@ -10936 +10936 @@
   z-index: 1;
 }
 
+body .carousel .carousel-inner .museum-logo img {
+  width: 7.5rem;
+}
+
 body .carousel .carousel-inner .social-logo {
   text-align: center;
-  justify-content: space-between;
+  justify-content: space-around;
   flex-wrap: nowrap;
   position: absolute;
   top: 25%;
@@ -10947 +10951 @@
   z-index: 1;
 }
 
+body .carousel .carousel-inner .social-logo img {
+  width: 2.0625rem;
+}
+
 body .carousel .carousel-inner .carousel-button {
   bottom: 10%;
   left: 50%;
@@ -11705 +11713 @@
   }
 }
 
+@media (min-width: 1024px) {
+  body .kaplicky {
+    text-align: left !important;
+    font-size: 24pt;
+    line-height: 24pt;
+  }
+
+  body .text {
+    text-align: left;
+    font-size: 18pt;
+    line-height: 26pt;
+  }
+
+  body .carousel .carousel-inner .social-logo {
+    justify-content: center;
+    top: 90%;
+  }
+
+  body .carousel .carousel-inner .social-logo .logo {
+    margin-left: 10rem;
+  }
+
+  body .carousel .carousel-inner .social-logo .logo img {
+    width: 3.125rem;
+  }
+
+  body .carousel .carousel-inner .social-logo .logo:first-child {
+    margin-left: 0;
+  }
+
+  body .carousel .carousel-inner .carousel-button {
+    transform: none;
+    left: 76%;
+    bottom: 20%;
+  }
+
+  body .carousel .carousel-caption {
+    padding: 3.75rem 6.25rem 10em;
+  }
+
+  body .carousel .carousel-caption h2 {
+    margin-bottom: 1rem;
+  }
+
+  body .button-square {
+    font-size: 18pt;
+    width: 10.875rem;
+    height: 2.938rem;
+  }
+}
+

public/images/icons/facebook.svg

@@ +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#1c1c1a;}.cls-2{font-size:9px;fill:#c5c5c5;font-family:Avenir-Heavy, Avenir;font-weight:800;}</style></defs><title>Datový zdroj 1</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><circle class="cls-1" cx="8" cy="8" r="8"/><text class="cls-2" transform="translate(5.34 11.39)">f</text></g></g></svg>

public/images/icons/instagram.svg

@@ +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#1c1c1a;}.cls-2{fill:none;stroke:#c5c5c5;stroke-miterlimit:10;stroke-width:0.5px;}.cls-3{fill:#c5c5c5;}</style></defs><title>Datový zdroj 2</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><circle class="cls-1" cx="8" cy="8" r="8"/><path class="cls-2" d="M9.86,3.42H6.36A3.28,3.28,0,0,0,3,6.57V9.85A3.28,3.28,0,0,0,6.36,13h3.5a3.28,3.28,0,0,0,3.38-3.15V6.57A3.28,3.28,0,0,0,9.86,3.42ZM8.12,10.81A2.74,2.74,0,0,1,5.3,8.17,2.74,2.74,0,0,1,8.12,5.54,2.74,2.74,0,0,1,11,8.17,2.74,2.74,0,0,1,8.12,10.81Z"/><circle class="cls-3" cx="11.5" cy="5.5" r="0.5"/></g></g></svg>

public/images/icons/upm-logo.svg

@@ +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100.63 33.54"><defs><style>.cls-1{fill:#1d1d1b;}.cls-1,.cls-2{fill-rule:evenodd;}.cls-2{fill:#b5ada5;}</style></defs><title>Datový zdroj 4</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><path class="cls-1" d="M12.7,24.5a7.07,7.07,0,0,1-5.78,2.55C3,27.05,0,24.5,0,20.42V8.07H7V18.9c.08,1.82.51,3.73,2.67,3.73,3.44,0,3-3.78,3-4V8.07h7V21.78c0,1.62,0,2.72.21,4.72H12.78Z"/><path class="cls-2" d="M32.1,0C30.66,4.88,29,9.89,29,15s1.66,10.11,3.1,15H27.6c-1.91-4.88-4-9.68-4-15s2.12-10.15,4-15Z"/><path class="cls-2" d="M44.33,7.94A7.51,7.51,0,0,1,47,7.52c5.47,0,7.85,4.67,7.85,9.51,0,5.39-2.72,10-8.62,10a5.68,5.68,0,0,1-1.91-.34V23c2.93,0,3.35-3.39,3.35-5.73s-.42-5.73-3.35-5.73Zm-3.4,2.72H41a6.38,6.38,0,0,1,3.31-2.72v3.61h0c-2.93,0-3.4,3.4-3.4,5.73S41.4,23,44.33,23h0v3.7A7.47,7.47,0,0,1,41,24.29h-.09v9.25H34V8.07h7Z"/><path class="cls-2" d="M55.84,30c1.48-4.88,3.1-9.89,3-15s-1.61-10.15-3-15h4.54c1.91,4.88,4,9.68,4,15s-2.12,10.11-4,15Z"/><path class="cls-1" d="M75.12,11.13h0c1.31-2.55,3.73-3.49,6.49-3.49,2.21,0,4.76,1.15,5.52,3.4a7.61,7.61,0,0,1,6.54-3.52c4,0,6.92,2.59,6.92,6.66V26.5h-7V15.67c0-1.78-.51-3.74-2.68-3.74-3.44,0-3,3.78-3,4V26.5H81V15.67c-.09-1.78-.51-3.74-2.68-3.74-3.44,0-3,3.78-3,4V26.5h-7V12.82a39.23,39.23,0,0,0-.25-4.75H75Z"/></g></g></svg>

public/images/icons/wikipedia.svg

@@ +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#1c1c1a;}.cls-2{font-size:8px;fill:#c5c5c5;font-family:Avenir-Heavy, Avenir;font-weight:800;}</style></defs><title>Datový zdroj 3</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><circle class="cls-1" cx="8" cy="8" r="8"/><text class="cls-2" transform="translate(3.96 11.2)">W</text></g></g></svg>

resources/sass/_custom.scss

@@ -22 +22 @@
                 top: 5%;
                 width: 100%;
                 z-index: 1;
+
+                img {
+                    width: 7.5rem;
+                }
             }
 
             .social-logo {
                 text-align: center;
-                justify-content: space-between;
+                justify-content: space-around;
                 flex-wrap: nowrap;
                 position: absolute;
                 top: 25%;
                 padding-left: 25px;
                 width: 100%;
                 z-index: 1;
+
+                img {
+                    width: 2.0625rem;
+                }
             }
 
             .carousel-button {
@@ -855 +863 @@
         }
     }
 }
+
+@media (min-width: 1024px) {
+
+    body {
+        .kaplicky{
+            text-align: left !important;
+            font-size: 24pt;
+            line-height: 24pt;
+        }
+
+        .text {
+            text-align: left;
+            font-size: 18pt;
+            line-height: 26pt;
+        }
+
+        .carousel {
+            .carousel-inner {
+                .social-logo {
+                    justify-content: center;
+                    top: 90%;
+
+                    .logo {
+                        margin-left: 10rem;
+
+                        img {
+                            width: 3.125rem;
+                        }
+
+                        &:first-child {
+                            margin-left: 0;
+                        }
+                    }
+                }
+                .carousel-button {
+                    transform: none;
+                    left: 76%;
+                    bottom: 20%;
+                }
+            }
+
+            .carousel-caption{
+                padding: 3.75rem 6.25rem 10em;
+
+                h2 {
+                    margin-bottom: 1rem;
+                }
+            }
+        }
+
+        .button-square {
+            font-size: 18pt;
+            width: 10.875rem;
+            height: 2.938rem;
+        }
+    }
+}

resources/views/pages/index.blade.php

@@ -10 +10 @@
                 <div class="museum-logo">
                     <div class="text-center">
                         <a href="https://www.upm.cz/">
-                            <img src="{{ asset('images/icons/upm-logo.png') }}" alt="upm">
+                            <img src="{{ asset('images/icons/upm-logo.svg') }}" alt="upm">
                         </a>
                     </div>
                 </div>
                 <div class="row social-logo">
-                    <div class="col-md-4">
+                    <div class="logo">
                         <a href="https://www.facebook.com/upmpraha/">
-                            <img src="{{ asset('images/icons/facebook.png') }}" alt="facebook">
+                            <img src="{{ asset('images/icons/facebook.svg') }}" alt="facebook">
                         </a>
                     </div>
-                    <div class="col-md-4">
+                    <div class="logo">
                         <a href="https://www.instagram.com/museumofdecorativeartsprague/">
-                            <img src="{{ asset('images/icons/instagram.png') }}" alt="instagram">
+                            <img src="{{ asset('images/icons/instagram.svg') }}" alt="instagram">
                         </a>
                     </div>
-                    <div class="col-md-4">
+                    <div class="logo">
                         <a href="https://cs.wikipedia.org/wiki/Um%C4%9Bleckopr%C5%AFmyslov%C3%A9_muzeum_v_Praze">
-                            <img src="{{ asset('images/icons/wikipedia.png') }}" alt="wikipedia">
+                            <img src="{{ asset('images/icons/wikipedia.svg') }}" alt="wikipedia">
                         </a>
                     </div>
                 </div>