style: Style CTA (if any)

drikusroor · Apr 10, 2024 · abfbfda · abfbfda
1 parent d2bb808
commit abfbfda
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 14 deletions.
diff --git a/src/brazil_blog/static/css/brazil_blog_compiled.css b/src/brazil_blog/static/css/brazil_blog_compiled.css
@@ -1077,12 +1077,12 @@ video {
   margin-right: auto;
 }
 
-.mb-4 {
-  margin-bottom: 1rem;
+.mb-0 {
+  margin-bottom: 0px;
 }
 
-.mt-8 {
-  margin-top: 2rem;
+.ml-auto {
+  margin-left: auto;
 }
 
 .block {
@@ -1121,8 +1121,12 @@ video {
   flex-direction: row;
 }
 
-.items-end {
-  align-items: flex-end;
+.flex-col-reverse {
+  flex-direction: column-reverse;
+}
+
+.items-start {
+  align-items: flex-start;
 }
 
 .items-center {
@@ -1137,6 +1141,10 @@ video {
   gap: 0.75rem;
 }
 
+.gap-4 {
+  gap: 1rem;
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -1145,10 +1153,19 @@ video {
   border-radius: 9999px;
 }
 
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
 .rounded-xl {
   border-radius: 0.75rem;
 }
 
+.bg-blue-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
+}
+
 .bg-blue-800 {
   --tw-bg-opacity: 1;
   background-color: rgb(30 64 175 / var(--tw-bg-opacity));
@@ -1197,6 +1214,11 @@ video {
   padding-right: 1rem;
 }
 
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
 .py-4 {
   padding-top: 1rem;
   padding-bottom: 1rem;
@@ -1263,6 +1285,11 @@ video {
   transition-duration: 150ms;
 }
 
+.hover\:text-amber-300:hover {
+  --tw-text-opacity: 1;
+  color: rgb(252 211 77 / var(--tw-text-opacity));
+}
+
 .hover\:text-black:hover {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
@@ -1281,4 +1308,12 @@ video {
   .md\:max-w-5xl {
     max-width: 64rem;
   }
+
+  .md\:flex-row {
+    flex-direction: row;
+  }
+
+  .md\:items-end {
+    align-items: flex-end;
+  }
 }
diff --git a/src/home/templates/home/home_page.html b/src/home/templates/home/home_page.html
@@ -23,18 +23,20 @@
             {% else %}
                 <div class="h-80 bg-gray-300"></div>
             {% endif %}
-                <div class="h-full absolute top-0 p-4 w-full flex items-end bg-gradient-to-t to-transparent from-yellow-500">
-                    <h1 class="bold text-4xl mt-8 mb-4 text-black drop-shadow">
+                <div class="h-full absolute top-0 p-4 w-full flex flex-col-reverse md:flex-row items-start md:items-end justify-between bg-gradient-to-t to-transparent from-yellow-500">
+                    <h1 class="bold text-4xl mb-0 text-black drop-shadow">
                         {{ page.title }}
                     </h1>
+                    <div class="flex ml-auto items-center gap-4">
+                        <p>{{ page.hero_text }}</p>
+                        {% if page.hero_cta_link %}
+                        <a href="{% pageurl page.hero_cta_link %}" class="bg-blue-700 text-white px-4 py-2 rounded-lg no-underline hover:text-amber-300 transition-colors drop-shadow">
+                            {% firstof page.hero_cta page.hero_cta_link.title %}
+                        </a>
+                        {% endif %}
+                    </div>
                 </div>
             </div>
-            <p>{{ page.hero_text }}</p>
-            {% if page.hero_cta_link %}
-            <a href="{% pageurl page.hero_cta_link %}">
-                {% firstof page.hero_cta page.hero_cta_link.title %}
-            </a>
-            {% endif %}
 
             <article class="prose w-full max-w-none p-4">
                 {{ page.body|richtext }}