From 849023c4510f5d197f66b497a26c2a50d376adbf Mon Sep 17 00:00:00 2001
From: OndraRehounek <ondra.rehounek@seznam.cz>
Date: Fri, 21 Oct 2022 09:40:27 +0200
Subject: [PATCH] main: minor css trims
---
main/static/main/css/styles.css | 30 +++++++++++++------
.../_patterns/molecules/twitter-box.mustache | 17 +++++++----
.../_patterns/organisms/header.mustache | 2 +-
.../source/css/organisms/footer.pcss | 2 +-
.../main/includes/layout/header.html | 2 +-
.../main/includes/twitter_widget.html | 8 ++---
6 files changed, 40 insertions(+), 21 deletions(-)
diff --git a/main/static/main/css/styles.css b/main/static/main/css/styles.css
index b7252c9d..5dc5146e 100644
--- a/main/static/main/css/styles.css
+++ b/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;
}
diff --git a/main/styleguide/source/_patterns/molecules/twitter-box.mustache b/main/styleguide/source/_patterns/molecules/twitter-box.mustache
index 5bffa8bd..05fd0732 100644
--- a/main/styleguide/source/_patterns/molecules/twitter-box.mustache
+++ b/main/styleguide/source/_patterns/molecules/twitter-box.mustache
@@ -1,11 +1,18 @@
<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">
diff --git a/main/styleguide/source/_patterns/organisms/header.mustache b/main/styleguide/source/_patterns/organisms/header.mustache
index 2989f2a8..966352db 100644
--- a/main/styleguide/source/_patterns/organisms/header.mustache
+++ b/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>
diff --git a/main/styleguide/source/css/organisms/footer.pcss b/main/styleguide/source/css/organisms/footer.pcss
index b34783ca..4a51164d 100644
--- a/main/styleguide/source/css/organisms/footer.pcss
+++ b/main/styleguide/source/css/organisms/footer.pcss
@@ -28,7 +28,7 @@
display: block;
height: 40px;
line-height: 40px;
- min-width: 150px;
+ min-width: 200px;
}
}
}
diff --git a/main/templates/main/includes/layout/header.html b/main/templates/main/includes/layout/header.html
index 8955d2a5..f1ef9d8d 100644
--- a/main/templates/main/includes/layout/header.html
+++ b/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>
diff --git a/main/templates/main/includes/twitter_widget.html b/main/templates/main/includes/twitter_widget.html
index e6d1e073..befe8e70 100644
--- a/main/templates/main/includes/twitter_widget.html
+++ b/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>
--
GitLab