Merge pull request #7 from 40Q/fix/hotfixes

Hotfixes - add container & fix hero image
40Q · Mar 13, 2024 · befba45 · befba45
2 parents e344795 + fc83c91
commit befba45
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 8 deletions.
diff --git a/resources/views/blocks/banner.blade.php b/resources/views/blocks/banner.blade.php
@@ -1,6 +1,6 @@
 <section>
     <div class="relative py-20 lg:pt-12 lg:pb-11 px-1 md:px-17">
-        <div class="relative z-40 text-white flex flex-col items-center justify-center lg:justify-start lg:items-start gap-3 lg:gap-4">
+        <div class="container relative z-40 text-white flex flex-col items-center justify-center lg:justify-start lg:items-start gap-3 lg:gap-4">
             <x-section-header containerClasses="sm:w-3/4 text-center lg:text-start lg:w-full" headingClasses="lg:w-1/2 tracking-wider" textClasses="lg:w-1/2 lg:pr-20" :showEyebrow="$showEyebrow" :eyebrow="$eyebrow" :showHeading="$showHeading" :heading="$heading" :showText="$showText"
                 :text="$text" />
             @if ($buttonText)

diff --git a/resources/views/blocks/hero.blade.php b/resources/views/blocks/hero.blade.php
@@ -12,7 +12,7 @@
 </script>
 <section>
     <div class="container relative flex flex-col justify-center min-w-full">
-        <div class="absolute z-20 flex flex-col items-center justify-center w-full">
+        <div class="absolute z-20 flex h-full flex-col items-center justify-center w-full">
             <x-section-header :showEyebrow="$showEyebrow" :eyebrow="$eyebrow" :showHeading="$showHeading" :heading="$heading" :showText="$showText"
                 :text="$text" containerClasses="text-center lg:px-[20%]" eyebrowClasses="font-mono !text-auxiliar uppercase"
                 headingClasses="uppercase span-40q" textClasses="!tracking-normal" />
@@ -21,8 +21,8 @@
             @endif
         </div>
         @if ($id)
-            <x-image :image="$id" :alt="$alt" class="aspect-[2/3] lg:aspect-[12/5]" />
-            <div class="absolute w-full h-full z-10 bg-black opacity-50"></div>
+        <x-image :image="$id" :alt="$alt" class="w-full h-full object-cover" />
+        <div class="absolute h-full z-10 bg-black opacity-50"></div>
         @endif
     </div>
 </section>
diff --git a/resources/views/blocks/quote.blade.php b/resources/views/blocks/quote.blade.php
@@ -1,5 +1,5 @@
 <section class="quote-block py-17 md:pt-23 md:pb-16 {{ $darkMode ? 'bg-primary-dark' : 'bg-white' }}">
-  <div class="max-md:px-4 max-w-temp-container mx-auto">
+  <div class="container">
     <div class="w-full flex flex-col md:flex-row gap-8 md:gap-2 lg:gap-8 justify-center">
       <div class="flex flex-col gap-4 md:pr-10 md:pt-2.5 md:w-5/12 flex-shrink-0 box-border md:items-end">
         @if($heading)

diff --git a/resources/views/blocks/stats.blade.php b/resources/views/blocks/stats.blade.php
@@ -1,4 +1,4 @@
-<section class="stats-block flex justify-center">
+<section class="stats-block flex py-16 justify-center">
     <div class="container">
         <div class="grid grid-cols-4 gap-6">
             @foreach ($stats as $stat)

diff --git a/resources/views/sections/header.blade.php b/resources/views/sections/header.blade.php
@@ -1,6 +1,6 @@
 <header class="header">
     <div class="py-2.5 bg-primary-dark">
-        <div class="max-md:px-4 max-xl:px-10 max-w-temp-container mx-auto flex items-center justify-between">
+        <div class="container mx-auto flex items-center justify-between">
             <div class="flex flex-col md:flex-row gap-1 md:gap-6">
                 @if($universityEmail)
                     <div class="university-email flex items-center gap-1 text-back-light">

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -1,6 +1,8 @@
 // https://tailwindcss.com/docs/configuration
 import type { Config } from "tailwindcss";
 import forms from "@tailwindcss/forms";
+import typography from "@tailwindcss/typography";
+
 
 export default {
   content: [
@@ -55,6 +57,9 @@ export default {
       "detail-gray": "#D9D9D9",
     },
     extend: {
+      screens: {
+        '2xl': '1536px',
+      },
       fontSize: {
         "3xxl": "2rem",
       },
@@ -80,5 +85,34 @@ export default {
       },
     },
   },
-  plugins: [forms],
+  plugins: [
+    forms,
+    typography,
+    function ({ addComponents }) {
+      addComponents({
+        '.container': {
+          maxWidth: '100%',
+          marginLeft: "auto",
+          marginRight: "auto",
+          padding: '0 1.25rem',
+          '@screen sm': {
+            maxWidth: '540px',
+            padding: '0',
+          },
+          '@screen md': {
+            maxWidth: '720px',
+            padding: '0',
+          },
+          '@screen lg': {
+            maxWidth: '960px',
+            padding: '0',
+          },
+          '@screen xl': {
+            maxWidth: '1304px',
+            padding: '0',
+          },
+        },
+      });
+    },
+  ],
 } satisfies Config;