From daa1af796caa44a3b029aaaa5a08d5c1cd134076 Mon Sep 17 00:00:00 2001
From: geekan <geekan@bk.ru>
Date: Tue, 12 Oct 2021 21:08:03 +0300
Subject: [PATCH] Added a mobile layout

---
 src/views/components/banner.twig | 227 +++++++++++++++++++++----------
 1 file changed, 153 insertions(+), 74 deletions(-)

diff --git a/src/views/components/banner.twig b/src/views/components/banner.twig
index d440515..2956336 100644
--- a/src/views/components/banner.twig
+++ b/src/views/components/banner.twig
@@ -1,87 +1,166 @@
 <style>
-.hawk-bnnr__body {
-  width: 95%;
-  padding: 0 1%;
-  margin: 5% auto;
-  position: relative;
-  color: #fff;
-  font-family: 'SFProDisplay', Roboto, 'Open Sans', sans-serif;
-}
+  .hawk-bnnr__body {
+    width: 95%;
+    padding: 0 1%;
+    margin: 5% auto;
+    position: relative;
+    color: #fff;
+    font-family: 'SFProDisplay', Roboto, 'Open Sans', sans-serif;
+  }
 
-.hawk-bnnr__content {
-  position: absolute;
-  width: 30%;
-  font-size: 0.8vw;
-  margin-left: 3.5%;
-  top: 15%;
-}
+  .hawk-bnnr__content {
+    position: absolute;
+    width: 30%;
+    font-size: 0.8vw;
+    margin-left: 3.5%;
+    top: 15%;
+  }
 
-.hawk-bnnr__illustration {
-  width: 100%;
-  border-radius: 10px;
-}
+  .hawk-bnnr__illustration {
+    width: 100%;
+    border-radius: 10px;
+  }
 
-.hawk-bnnr__title {
-  font-size: 2.5em;
-  font-weight: bold;
-  margin-bottom: 5%;
-}
+  .hawk-bnnr__title {
+    font-size: 2.5em;
+    font-weight: bold;
+    margin-bottom: 5%;
+  }
 
-.hawk-bnnr__text {
-  font-size: 1.25em;
-  line-height: 1.5;
-  margin-bottom: 7.5%;
-  letter-spacing: -0.15px;
-}
+  .hawk-bnnr__text {
+    font-size: 1.25em;
+    line-height: 1.5;
+    margin-bottom: 7.5%;
+    letter-spacing: -0.15px;
+  }
 
-.hawk-bnnr__second_title {
-  font-size: 2.5em;
-  font-weight: bold;
-  margin-bottom: 2%;
-}
+  .hawk-bnnr__second_title {
+    font-size: 2.5em;
+    font-weight: bold;
+    margin-bottom: 2%;
+  }
 
-.hawk-bnnr__slogan {
-  font-size: 1.65em;
-  font-weight: 500;
-}
+  .hawk-bnnr__slogan {
+    font-size: 1.65em;
+    font-weight: 500;
+  }
 
-.hawk-bnnr__garage {
-  position: absolute;
-  width: 28%;
-  border-radius: 5px;
-  left: 50%;
-  transform: translate(-50%);
-  top: -8.5%;
-  border: 1px solid #30323d;
-  box-shadow: 0 12px 44px 0 rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
-}
+  .hawk-bnnr__garage {
+    position: absolute;
+    width: 28%;
+    border-radius: 5px;
+    left: 50%;
+    transform: translate(-50%);
+    top: -8.5%;
+    border: 1px solid #30323d;
+    box-shadow: 0 12px 44px 0 rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
+  }
 
-.hawk-bnnr__right-content {
-  position: absolute;
-  width: 20%;
-  font-size: 0.8vw;
-  right: 11.3%;
-  top: 15%;
-}
+  .hawk-bnnr__right-content {
+    position: absolute;
+    width: 20%;
+    font-size: 0.8vw;
+    right: 11.3%;
+    top: 15%;
+  }
 
-.hawk-bnnr__product-hunt {
-  margin-top: 5%;
-  width: 90%;
-}
+  .hawk-bnnr__product-hunt {
+    margin-top: 5%;
+    width: 90%;
+  }
+
+  .hawk-bnnr__product-hunt--mobile {
+    display: none;
+  }
+
+  @media(max-width: 750px) {
+    .hawk-bnnr__body {
+      width: 75%;
+      background-image: url('https://capella.pics/7f81d43a-f2d0-4daf-884f-011d25a48ab7.jpg');
+      padding: 30px 25px;
+      border-radius: 10px;
+    }
+
+    .hawk-bnnr__content {
+      position: inherit;
+      font-size: 11px;
+      width: 95%;
+      margin: 0 0 0 10px;
+    }
+
+    .hawk-bnnr__break {
+      display: none;
+    }
+
+    .hawk-bnnr__illustration {
+      display: none;
+    }
+
+    .hawk-bnnr__title {
+      font-size: 2.4em;
+      margin-bottom: 15px;
+    }
+
+    .hawk-bnnr__text {
+      width: 100%;
+      margin-bottom: 23px;
+      line-height: 1.43;
+    }
+
+    .hawk-bnnr__second_title {
+      font-size: 2em;
+    }
+
+    .hawk-bnnr__slogan {
+      font-size: 1.2em;
+    }
+
+    .hawk-bnnr__garage {
+      position: inherit;
+      width: 120%;
+      top: auto;
+      right: auto;
+    }
+
+    .hawk-bnnr__product-hunt {
+      display: none;
+    }
+
+    .hawk-bnnr__product-hunt--mobile {
+      display: block;
+      width: 200px;
+      margin: 20px auto 0;
+    }
+
+    .hawk-bnnr__right-content {
+      position: inherit;
+      width: auto;
+      font-size: 0.7em;
+      right: auto;
+      top: auto;
+      margin-left: 10px;
+      margin-bottom: 20px;
+    }
+  }
 </style>
-  <div class="hawk-bnnr__body">
-    <img class="hawk-bnnr__illustration" src="https://capella.pics/3b43621c-1d13-473c-bf6c-4ee5fd3de61d.jpg" alt="">
+<div class="hawk-bnnr__body">
+  <img class="hawk-bnnr__illustration" src="https://capella.pics/3b43621c-1d13-473c-bf6c-4ee5fd3de61d.jpg" alt="">
 
-    <div class="hawk-bnnr__content">
-      <div class="hawk-bnnr__title">What a day! 🥳🎈🎉 </div>
-      <div class="hawk-bnnr__text">Today we are releasing our next big open-source project.<br>As big as Editor.js or bigger. It is the error tracking service<br> called Hawk! Check it out.</div>
+  <div class="hawk-bnnr__content">
+    <div class="hawk-bnnr__title">What a day! 🥳🎈🎉
     </div>
-    <div class="hawk-bnnr__right-content">
-      <div class="hawk-bnnr__second_title">Hawk</div>
-      <div class="hawk-bnnr__slogan">Code problems. Resolved.</div>
-      <a href="https://www.producthunt.com/posts/editor-js?utm_source=badge-featured&amp;utm_medium=badge&amp;utm_souce=badge-editor-js" target="_blank">
-        <img class="hawk-bnnr__product-hunt" src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=150153&amp;theme=light">
-      </a>
-    </div>
-    <img class="hawk-bnnr__garage" src="https://capella.pics/ae86cbae-925b-453c-a89b-81334e39169d" alt="">
-  </div>
\ No newline at end of file
+    <div class="hawk-bnnr__text">Today we are releasing our next big open-source project.<br class="hawk-bnnr__break">As big as Editor.js or bigger. It is the error tracking service<br class="hawk-bnnr__break">
+      called Hawk! Check it out.</div>
+  </div>
+  <div class="hawk-bnnr__right-content">
+    <div class="hawk-bnnr__second_title">Hawk</div>
+    <div class="hawk-bnnr__slogan">Code problems. Resolved.</div>
+    <a href="https://www.producthunt.com/posts/editor-js?utm_source=badge-featured&amp;utm_medium=badge&amp;utm_souce=badge-editor-js" target="_blank">
+      <img class="hawk-bnnr__product-hunt" src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=150153&amp;theme=light">
+    </a>
+  </div>
+  <img class="hawk-bnnr__garage" src="https://capella.pics/ae86cbae-925b-453c-a89b-81334e39169d" alt="">
+  <a href="https://www.producthunt.com/posts/editor-js?utm_source=badge-featured&amp;utm_medium=badge&amp;utm_souce=badge-editor-js" target="_blank">
+    <img class="hawk-bnnr__product-hunt--mobile" src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=150153&amp;theme=light">
+  </a>
+</div>