main: minor css trims

main/static/main/css/styles.css

@@ -3040,7 +3040,7 @@ div.twitter-carousel .slick-arrow.slick-disabled:before, div.twitter-carousel .s
       display: block;
       height: 40px;
       line-height: 40px;
-      min-width: 150px;
+      min-width: 200px;
     }
 
 .footer-collapsible__toggle{
@@ -3536,6 +3536,10 @@ div.twitter-carousel .slick-arrow.slick-disabled:before, div.twitter-carousel .s
   margin-top: 6rem;
 }
 
+.mb-0{
+  margin-bottom: 0px;
+}
+
 .mt-16{
   margin-top: 4rem;
 }
@@ -3604,10 +3608,6 @@ div.twitter-carousel .slick-arrow.slick-disabled:before, div.twitter-carousel .s
   height: 15rem;
 }
 
-.h-12{
-  height: 3rem;
-}
-
 .h-fit{
   height: -webkit-fit-content;
   height: -moz-fit-content;
@@ -3903,10 +3903,6 @@ div.twitter-carousel .slick-arrow.slick-disabled:before, div.twitter-carousel .s
   padding: 1.75rem;
 }
 
-.p-3{
-  padding: 0.75rem;
-}
-
 .px-1{
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -3977,6 +3973,10 @@ div.twitter-carousel .slick-arrow.slick-disabled:before, div.twitter-carousel .s
   padding-top: 1rem;
 }
 
+.pl-3{
+  padding-left: 0.75rem;
+}
+
 .pt-20{
   padding-top: 5rem;
 }
@@ -4539,6 +4539,10 @@ a.icon-link:hover span{
     margin-bottom: 0px;
   }
 
+  .sm\:mr-0{
+    margin-right: 0px;
+  }
+
   .sm\:mb-2{
     margin-bottom: 0.5rem;
   }
@@ -4571,6 +4575,10 @@ a.icon-link:hover span{
     flex-direction: column;
   }
 
+  .sm\:items-center{
+    align-items: center;
+  }
+
   .sm\:pt-0{
     padding-top: 0px;
   }
@@ -4579,6 +4587,10 @@ a.icon-link:hover span{
     padding-right: 0px;
   }
 
+  .sm\:text-center{
+    text-align: center;
+  }
+
   .sm\:text-3xl{
     font-size: 1.875rem;
   }

main/styleguide/source/_patterns/molecules/twitter-box.mustache

 <a href="#" class="mb-5 p-4 w-full flex flex-col items-center justify-between text-center border border-grey-100 sm:mb-0 hover:no-underline">
   <div>
-    <div class="flex flex-row sm:flex-col items-center">
-      <img class="rounded-full shadow-sm w-12 h-12 mb-4 sm:mb-2" src="https://randomuser.me/api/portraits/women/56.jpg"
-           alt="user image"/>
+    <div class="flex flex-row sm:flex-col items-start sm:items-center">
+      <img
+        class="rounded-full shadow-sm w-12 mr-2 sm:mr-0 mb-0 sm:mb-2"
+        src="https://randomuser.me/api/portraits/women/56.jpg"
+        alt="user image"
+      />
       <div class="flex flex-col sm:flex-col">
-        <h5 class="font-alt text-xl mb-2 sm:text-base">Tomáš Marný</h5>
-        <small class="mb-4 text-turquoise-400">@pirat.tomas.marny</small>
+        <h5 class="font-alt text-xl mb-2 sm:text-base text-left sm:text-center">
+          Tomáš Marný
+        </h5>
+        <small class="mb-4 text-turquoise-400 text-left sm:text-center">
+          @pirat.tomas.marny
+        </small>
       </div>
     </div>
     <p class="text-small sm:text-base leading-6 mb-2">

main/styleguide/source/_patterns/organisms/header.mustache

@@ -11,7 +11,7 @@
       class="main-menu grid-content-with-right-side grid justify-between items-center shadow-2xl xl:shadow-none xl:py-6">
       <!-- Hamburger Icon -->
       <input class="hidden" type="checkbox" id="menuToggle"/>
-      <label class="p-3 z-50 hamb mr-3 text-white col-start-2 xl:mr-0 xl:hidden" for="menuToggle">
+      <label class="pl-3 py-3 z-50 hamb mr-1 mr-sm-3 text-white col-start-2 xl:mr-0 xl:hidden" for="menuToggle">
         <span class="container">
           <span class="bar1"></span>
           <span class="bar2"></span>

main/styleguide/source/css/organisms/footer.pcss

@@ -28,7 +28,7 @@
       display: block;
       height: 40px;
       line-height: 40px;
-      min-width: 150px;
+      min-width: 200px;
     }
   }
 }

main/templates/main/includes/layout/header.html

@@ -11,7 +11,7 @@
     <div class="main-menu grid-content-with-right-side grid justify-between items-center shadow-2xl xl:shadow-none xl:py-6">
       <!-- Hamburger Icon -->
       <input class="hidden" type="checkbox" id="menuToggle"/>
-      <label class="p-3 z-50 hamb mr-3 text-white col-start-2 xl:mr-0 xl:hidden" for="menuToggle">
+      <label class="pl-3 py-3 z-50 hamb mr-sm-3 text-white col-start-2 xl:mr-0 xl:hidden" for="menuToggle">
         <span class="container">
           <span class="bar1"></span>
           <span class="bar2"></span>

main/templates/main/includes/twitter_widget.html

@@ -6,17 +6,17 @@
         class="mb-5 p-4 w-full flex flex-col items-center justify-between text-center border border-grey-100 sm:mb-0 hover:no-underline"
       >
         <div>
-          <div class="flex flex-row sm:flex-col items-center">
+          <div class="flex flex-row sm:flex-col items-start sm:items-center">
             <img
-              class="rounded-full shadow-sm w-12 mb-2"
+              class="rounded-full shadow-sm w-12 mr-2 sm:mr-0 mb-0 sm:mb-2"
               src="{{ tweet.author_img_url }}"
               alt="user image"
             />
             <div class="flex flex-col sm:flex-col">
-              <h5 class="font-alt text-xl mb-2 sm:text-base">
+              <h5 class="font-alt text-xl mb-2 sm:text-base text-left sm:text-center">
                 {{ tweet.author_name }}
               </h5>
-              <small class="mb-4 text-turquoise-400">
+              <small class="mb-4 text-turquoise-400 text-left sm:text-center">
                 {{ tweet.author_username }}
               </small>
             </div>