From e8ada1e11f8ffc675266359818d2fbdfdc4d09d2 Mon Sep 17 00:00:00 2001
From: Jimi Robaer <jimi.robaer@hey.com>
Date: Fri, 22 Nov 2024 14:53:07 +0100
Subject: [PATCH] Tweaks to styling

---
 app/Livewire/TopSecretComponent.php            |  2 +-
 resources/css/front/utilities/black-friday.css |  6 ++++++
 .../front/pages/top-secret/index.blade.php     | 18 +++++++++---------
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/app/Livewire/TopSecretComponent.php b/app/Livewire/TopSecretComponent.php
index 3a478dae..2e40ae09 100644
--- a/app/Livewire/TopSecretComponent.php
+++ b/app/Livewire/TopSecretComponent.php
@@ -143,7 +143,7 @@ public function render(): View
         return view('front.pages.top-secret.index')
             ->layout('layout.blank', [
                 'title' => 'Top Secret',
-                'bodyClass' => 'bg-bf-gray min-h-screen overflow-hidden antialiased',
+                'bodyClass' => 'bg-bf-gray min-h-screen md:overflow-hidden antialiased',
                 'image' => '/backgrounds/bf-24-desk.jpg',
             ]);
     }
diff --git a/resources/css/front/utilities/black-friday.css b/resources/css/front/utilities/black-friday.css
index ae2b14b2..237b8c8b 100644
--- a/resources/css/front/utilities/black-friday.css
+++ b/resources/css/front/utilities/black-friday.css
@@ -35,6 +35,12 @@
     
 }
 
+.bf-pre {
+    @apply bg-transparent font-special-elite;
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+}
+
 .challenge-sheet {
     display: flex;
     flex-direction: column;
diff --git a/resources/views/front/pages/top-secret/index.blade.php b/resources/views/front/pages/top-secret/index.blade.php
index d7cc96f1..5c00ffd7 100644
--- a/resources/views/front/pages/top-secret/index.blade.php
+++ b/resources/views/front/pages/top-secret/index.blade.php
@@ -65,9 +65,9 @@ class="bf-page page-challenge"
         >
             <div class="grid justify-center h-full mt-16">
 
-                <div class="relative challenge-sheet">
+                <div class="relative challenge-sheet overflow-scroll md:overflow-visible">
 
-                    <div class="w-full max-w-[800px] m-auto">
+                    <div class="w-full max-w-[100vw] md:max-w-[800px] m-auto">
 
                         @if ($reward)
                             <div class="red-sticky absolute right-0 -bottom-[4.5em] md:aspect-square w-32 flex items-center z-[1]">
@@ -92,19 +92,19 @@ class="underline hover:no-underline"
 
                         <div class="flex flex-col gap-6 p-8 pb-0 lg:p-20 lg:pb-4 bg-white shadow-bf-hard">
 
-                            <div class="font-special-elite">
+                            <div class="text-sm md:text-base font-special-elite">
                                 @if ($reward)
-                                    <p class="mb-2">{{ $question }}</p>
+                                    <pre class="bf-pre mb-2">{{ $question }}</pre>
                                     <p class="text-blue mb-2">> {{ $answer }}</p>
                                 @elseif($days[$currentDay]->endOfDay()->isPast())
-                                    <p>{{ $question }}</p>
+                                    <pre class="bf-pre">{{ $question }}</pre>
                                 @else
                                     <div x-data="{
                                     showInput: @entangle('showInput').live,
-                                }" class="grid gap-6 items-start">
+                                }" class="flex flex-col gap-6">
                                         <div x-on:click="showInput = true" class="paper-markup group"
                                              x-bind:class="showInput ? '' : 'cursor-pointer'">
-                                            <p class="group-hover:underline">{{ $question }}</p>
+                                            <pre class="bf-pre group-hover:underline">{{ $question }}</pre>
                                         </div>
 
                                         <textarea x-show="showInput" x-on:click="$el.focus();$el.select();"
@@ -129,7 +129,7 @@ class="form-input border border-bf-gray resize-none h-24 font-sans" name="answer
 
                     </div>
 
-                    <div class="p-12 lg:p-24 flex flex-wrap text-white gap-4 justify-center">
+                    <div class="p-12 lg:p-18 flex flex-wrap text-white gap-4 justify-center">
                         @foreach ($days as $day => $date)
                             <div class="p-2 lg:p-8
                                     {{ $currentDay === $day ? 'bf-date-border' : '' }}
@@ -271,7 +271,7 @@ class="relative max-w-[760px] bg-paper-cover-beige overflow-hidden paper-stack-i
                         <div class="flex flex-col items-center text-center h-full">
                             <img src="../images/black-friday/spatie-logo.svg" alt="Spatie" class="w-56 mb-8">
                             <h1
-                                class="font-obviously-condensed font-bold text-[3.5rem] uppercase leading-[80%] text-bf-brown text-balance md:text-[7rem]">
+                                class="font-obviously-condensed font-bold text-[3.5rem] uppercase leading-[80%] text-bf-brown text-balance md:text-[6rem]">
                                 Instructions for new Agents</h1>
                             <img src="../images/black-friday/confidential-stamp.png" alt=""
                                  class="w-[360px]">