rannes.dev/sw-jobs-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more mobile css
All checks were successful
Vercel Production Deployment / Deploy-Production (push) Successful in 1m34s
Details

Browse Source
This commit is contained in:
christian 2024-06-10 01:33:29 +02:00
parent 2e0ed5e3bb
commit 54a669eb11
4 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/_jobcard/JobCard.tsx
View File

@ -52,16 +52,16 @@ export default async function JobCard(props: { job: JobPosting }) {
<h2 className="text-xl sm:text-2xl text-left block sm:hidden"> <h2 className="text-xl sm:text-2xl text-left block sm:hidden">
{title.length > 50 ? title.slice(0, 50) + "..." : title} {title.length > 50 ? title.slice(0, 50) + "..." : title}
</h2> </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} {title}
</h2> </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="">{company}</span>
<span className="text-xs md:text-sm text-stone-500"> <span className="text-xs sm:text-sm text-stone-500">
{location} {location}
</span> </span>
<span className="text-xs md:text-sm text-stone-500"> <span className="text-xs sm:text-sm text-stone-500">
{type} {type}
</span> </span>
</div> </div>

4
src/app/_jobcard/JobCardIcon.tsx
View File

@ -3,9 +3,9 @@ import Image from "next/image";
export default function JobCardIcon(props: { src: string }) { export default function JobCardIcon(props: { src: string }) {
const { src } = props; const { src } = props;
return ( 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 <Image
className="h-auto w-6 md:min-w-12" className="h-auto w-6 sm:min-w-12"
src={src} src={src}
alt={`${src} icon`} alt={`${src} icon`}
width={50} width={50}

2
src/app/_jobcard/JobCardIconContainer.tsx
View File

@ -20,7 +20,7 @@ type Skills = {
export default function JobCardIconContainer(props: { skills: Skills }) { export default function JobCardIconContainer(props: { skills: Skills }) {
const { skills } = props; const { skills } = props;
return ( 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.react && <JobCardIcon src={react} />}
{skills.python && <JobCardIcon src={python} />} {skills.python && <JobCardIcon src={python} />}
{skills.golang && <JobCardIcon src={golang} />} {skills.golang && <JobCardIcon src={golang} />}

4
src/app/page.tsx
View File

@ -4,8 +4,8 @@ export default async function Home() {
return ( return (
<main className="container"> <main className="container">
<div> <div>
<h1 className="text-4xl pt-4">Software Developer Jobs</h1> <h1 className="text-2xl sm:text-4xl pt-4">Software Developer Jobs</h1>
<h2 className="text-2xl"> <h2 className="text-xl sm:text-2xl pt-4">
Get entry- and mid level software developer jobs in Denmark as soon as Get entry- and mid level software developer jobs in Denmark as soon as
they are posted! they are posted!
</h2> </h2>