From 54a669eb112f01d190159cadc7e2ca3bd4ad0a5e Mon Sep 17 00:00:00 2001
From: christian <christian@rannes.com>
Date: Mon, 10 Jun 2024 01:33:29 +0200
Subject: [PATCH] more mobile css

---
 src/app/_jobcard/JobCard.tsx              | 8 ++++----
 src/app/_jobcard/JobCardIcon.tsx          | 4 ++--
 src/app/_jobcard/JobCardIconContainer.tsx | 2 +-
 src/app/page.tsx                          | 4 ++--
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/app/_jobcard/JobCard.tsx b/src/app/_jobcard/JobCard.tsx
index e2a76e7..5a6ffc6 100644
--- a/src/app/_jobcard/JobCard.tsx
+++ b/src/app/_jobcard/JobCard.tsx
@@ -52,16 +52,16 @@ export default async function JobCard(props: { job: JobPosting }) {
                 <h2 className="text-xl sm:text-2xl text-left block sm:hidden">
                   {title.length > 50 ? title.slice(0, 50) + "..." : title}
                 </h2>
-                <h2 className="text-2xl sm:text-2xl text-left sm:block hidden">
+                <h2 className="text-xl sm:text-2xl text-left sm:block hidden">
                   {title}
                 </h2>
 
-                <div className="text-left items-center space-x-4">
+                <div className="text-left items-center text-sm sm:text-base space-x-4">
                   <span className="">{company}</span>
-                  <span className="text-xs md:text-sm  text-stone-500">
+                  <span className="text-xs sm:text-sm  text-stone-500">
                     {location}
                   </span>
-                  <span className="text-xs md:text-sm  text-stone-500">
+                  <span className="text-xs sm:text-sm  text-stone-500">
                     {type}
                   </span>
                 </div>
diff --git a/src/app/_jobcard/JobCardIcon.tsx b/src/app/_jobcard/JobCardIcon.tsx
index 6e2d259..77fac44 100644
--- a/src/app/_jobcard/JobCardIcon.tsx
+++ b/src/app/_jobcard/JobCardIcon.tsx
@@ -3,9 +3,9 @@ import Image from "next/image";
 export default function JobCardIcon(props: { src: string }) {
   const { src } = props;
   return (
-    <div className="flex justify-center items-center h-auto w-6 md:min-w-14">
+    <div className="flex justify-center items-center h-auto w-6 sm:min-w-14">
       <Image
-        className="h-auto w-6 md:min-w-12"
+        className="h-auto w-6 sm:min-w-12"
         src={src}
         alt={`${src} icon`}
         width={50}
diff --git a/src/app/_jobcard/JobCardIconContainer.tsx b/src/app/_jobcard/JobCardIconContainer.tsx
index 3788dbd..1221f7a 100644
--- a/src/app/_jobcard/JobCardIconContainer.tsx
+++ b/src/app/_jobcard/JobCardIconContainer.tsx
@@ -20,7 +20,7 @@ type Skills = {
 export default function JobCardIconContainer(props: { skills: Skills }) {
   const { skills } = props;
   return (
-    <div className="flex flex-col md:flex-row md:justify-end gap-2 ml-2">
+    <div className="flex flex-col sm:flex-row sm:justify-end gap-2 ml-2">
       {skills.react && <JobCardIcon src={react} />}
       {skills.python && <JobCardIcon src={python} />}
       {skills.golang && <JobCardIcon src={golang} />}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index f8fb520..b9f3bd9 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -4,8 +4,8 @@ export default async function Home() {
   return (
     <main className="container">
       <div>
-        <h1 className="text-4xl pt-4">Software Developer Jobs</h1>
-        <h2 className="text-2xl">
+        <h1 className="text-2xl sm:text-4xl pt-4">Software Developer Jobs</h1>
+        <h2 className="text-xl sm:text-2xl pt-4">
           Get entry- and mid level software developer jobs in Denmark as soon as
           they are posted!
         </h2>