Improve layout on mobile devices and Add footer with socials (PR#6)

franciscunha · Jan 16, 2025 · 23080c9 · 23080c9
2 parents 0664afe + 686508d
commit 23080c9
Show file tree

Hide file tree

Showing 8 changed files with 87 additions and 59 deletions.
diff --git a/src/lib/project_card.svelte b/src/lib/project_card.svelte
@@ -8,7 +8,10 @@
 
 <a href={'/project/' + id}>
 	<div
-		class="flex h-[30rem] w-[26rem] gap-4 rounded-lg border-2 border-bordercolor max-md:flex-col max-md:pb-2 md:h-[16rem] md:w-[36rem] md:pr-4 lg:w-[34vw]"
+		class={[
+			'flex gap-4 rounded-lg border-2 border-bordercolor max-md:flex-col max-md:pb-2',
+			'max-sm:h-[24rem] max-sm:w-[90vw] sm:h-[30rem] sm:w-[26rem] md:h-[16rem] md:w-[36rem] md:pr-4 lg:w-[34vw]'
+		]}
 	>
 		{#await data}
 			<div class="flex h-full w-full items-center justify-center">

diff --git a/src/lib/socials.svelte b/src/lib/socials.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import EmailIcon from '$lib/icons/email_icon.svelte';
+	import GithubIcon from '$lib/icons/github_icon.svelte';
+	import ItchioIcon from '$lib/icons/itchio_icon.svelte';
+	import LinkedinIcon from '$lib/icons/linkedin_icon.svelte';
+
+	let socials = [
+		{ href: 'mailto:hello@franciscunha.com', label: 'hello@franciscunha.com', icon: EmailIcon },
+		{ href: 'https://github.com/franciscunha', label: 'franciscunha', icon: GithubIcon },
+		{
+			href: 'https://www.linkedin.com/in/francunha/',
+			label: '/in/francunha',
+			icon: LinkedinIcon
+		},
+		{ href: 'https://moonsheep.itch.io/', label: 'moonsheep.itch.io', icon: ItchioIcon }
+	];
+
+	let { horizontal }: { horizontal: boolean } = $props();
+</script>
+
+<div
+	class={[
+		'flex max-sm:flex-col max-sm:items-start max-sm:gap-2',
+		!horizontal && 'sm:flex-col sm:items-start sm:gap-2',
+		horizontal && 'sm:w-full sm:flex-row sm:justify-center sm:gap-12'
+	]}
+>
+	{#each socials as social}
+		<a href={social.href} class="flex flex-row items-center gap-2"
+			><social.icon size={2} />{social.label}</a
+		>
+	{/each}
+</div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
 	import '../app.css';
+
+	import Socials from '$lib/socials.svelte';
 	import LoopingStrings from './looping_strings.svelte';
 	import Navigation from './navigation.svelte';
 
+	import { page } from '$app/state';
+
 	let { children } = $props();
 </script>
 
@@ -13,7 +17,7 @@
 	<div class="flex h-full w-full items-center justify-between md:w-3/4">
 		<!-- Title -->
 		<div>
-			<h1 class="text-4xl">Francisco Cunha</h1>
+			<h1 class="max-sm:text-3xl sm:text-4xl">Francisco Cunha</h1>
 			<LoopingStrings strings={['Game developer', 'Graphics programmer', 'Web developer']} />
 		</div>
 
@@ -22,10 +26,15 @@
 </div>
 
 <!-- Contents -->
-<div
-	class="min-w-screen flex min-h-screen justify-center border-bordercolor bg-bgcolor px-4 pb-12 pt-40 text-fontcolor"
->
-	<div class="w-full md:w-3/4">
+<div class="flex justify-center border-bordercolor bg-bgcolor px-4 pb-12 pt-40 text-fontcolor">
+	<div class="w-screen md:w-3/4">
 		{@render children()}
 	</div>
 </div>
+
+<!-- Footer -->
+{#if page.url.pathname !== '/'}
+	<div class="flex w-full justify-center py-4 text-fontcolor">
+		<Socials horizontal={true} />
+	</div>
+{/if}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,25 +1,11 @@
 <script>
-	import EmailIcon from '$lib/icons/email_icon.svelte';
-	import GithubIcon from '$lib/icons/github_icon.svelte';
-	import ItchioIcon from '$lib/icons/itchio_icon.svelte';
-	import LinkedinIcon from '$lib/icons/linkedin_icon.svelte';
 	import ProjectCard from '$lib/project_card.svelte';
+	import Socials from '$lib/socials.svelte';
 	import AboutMe from './about_me.md';
 
 	import { get_highlighted } from '$lib/load_project';
 	import { fly } from 'svelte/transition';
 
-	let socials = [
-		{ href: 'mailto:hello@franciscunha.com', label: 'hello@franciscunha.com', icon: EmailIcon },
-		{ href: 'https://github.com/franciscunha', label: 'franciscunha', icon: GithubIcon },
-		{
-			href: 'https://www.linkedin.com/in/francunha/',
-			label: '/in/francunha',
-			icon: LinkedinIcon
-		},
-		{ href: 'https://moonsheep.itch.io/', label: 'moonsheep.itch.io', icon: ItchioIcon }
-	];
-
 	let highlighted_projects = get_highlighted();
 
 	let project_index = $state(0);
@@ -28,7 +14,7 @@
 </script>
 
 <div
-	class="flex w-full place-items-center gap-24 max-md:flex-col-reverse md:flex-row md:justify-center"
+	class="flex w-full place-items-center gap-24 max-lg:flex-col-reverse lg:flex-row lg:justify-center"
 >
 	<div class="max-md:flex max-md:flex-col-reverse">
 		<img
@@ -38,13 +24,7 @@
 		/>
 		<div class="max-md:-mt-32 max-md:mb-8 md:mt-8">
 			<h1 class="text-bold mb-2">Find me at</h1>
-			<div class="flex flex-col items-start gap-2">
-				{#each socials as social}
-					<a href={social.href} class="flex flex-row items-center gap-2"
-						><social.icon size={2} />{social.label}</a
-					>
-				{/each}
-			</div>
+			<Socials horizontal={false} />
 		</div>
 	</div>
 	<div class="max-w-2xl max-md:flex max-md:flex-col">
@@ -55,7 +35,7 @@
 
 		<h2 class="my-8 mt-14">
 			<span class="font-semibold">Highlighted projects</span> |
-			<a href="/portfolio" class="underline">All projects</a>
+			<a href="/portfolio" class="underline max-sm:text-base">All projects</a>
 		</h2>
 
 		<div class="w-max max-md:self-center">

diff --git a/src/routes/looping_strings.svelte b/src/routes/looping_strings.svelte
@@ -18,5 +18,5 @@
 </script>
 
 {#key i}
-	<h2 class="text-2xl" in:fly={{ x: 20 }}>{strings[i] || ''}</h2>
+	<h2 class="max-sm:text-xl sm:text-2xl" in:fly={{ x: 20 }}>{strings[i] || ''}</h2>
 {/key}
diff --git a/src/routes/navigation.svelte b/src/routes/navigation.svelte
@@ -9,7 +9,7 @@
 	];
 </script>
 
-<div class="text-2xl">
+<div class="w-1/4 text-right text-2xl">
 	{#each navigation_items as item, i}
 		<a
 			href={item.route}
@@ -20,9 +20,9 @@
 		</a>
 		{#if i + 1 != navigation_items.length}
 			<!-- on large screens: pipe character -->
-			<span class="max-md:hidden">|</span>
+			<span class="max-lg:hidden">|</span>
 			<!-- on small screens: new line -->
-			<span class="md:hidden"><br /></span>
+			<span class="lg:hidden"><br /></span>
 		{/if}
 	{/each}
 </div>
diff --git a/src/routes/portfolio/[[filters]]/+page.svelte b/src/routes/portfolio/[[filters]]/+page.svelte
@@ -31,7 +31,7 @@
 </script>
 
 <!-- Tag filters -->
-<div class="flex h-[2rem] flex-row flex-wrap items-center gap-2">
+<div class="flex min-h-[2rem] flex-row flex-wrap items-center gap-2">
 	<!-- Selected tags -->
 	<button onclick={filter_icon_onclick}>
 		{#if unselected_tags.length === 0}
@@ -51,24 +51,28 @@
 		</button>
 	{/each}
 </div>
-<div class="mb-8 flex h-[2rem] flex-row flex-wrap items-center gap-2">
-	<!-- Unselected tags -->
-	<div class="w-[1.5rem]"></div>
-	{#each unselected_tags as tag (tag)}
-		<button
-			onclick={() => tag_onclick(tag)}
-			class="opacity-50"
-			in:receive={{ key: tag }}
-			out:send={{ key: tag }}
-			animate:flip={{ duration: 20 }}
-		>
-			<Tag>{tag}</Tag>
-		</button>
-	{/each}
-</div>
+{#if unselected_tags.length > 0}
+	<div class="mt-2 flex min-h-[2rem] flex-row flex-wrap items-center gap-2">
+		<!-- Unselected tags -->
+		{#each unselected_tags as tag (tag)}
+			<button
+				onclick={() => tag_onclick(tag)}
+				class="opacity-50"
+				in:receive={{ key: tag }}
+				out:send={{ key: tag }}
+				animate:flip={{ duration: 20 }}
+			>
+				<Tag>{tag}</Tag>
+			</button>
+		{/each}
+	</div>
+{/if}
+<div class="my-8"></div>
 
 <!-- Project cards -->
-<div class="flex flex-row flex-wrap gap-12 max-md:justify-center md:justify-between">
+<div
+	class="flex flex-row flex-wrap max-md:justify-center max-sm:gap-8 sm:gap-12 md:justify-between"
+>
 	{#each projects as project}
 		{#if selected_tags.some((tag) => project.tags.includes(tag))}
 			<ProjectCard id={project.id} />

diff --git a/src/routes/project/[slug]/+page.svelte b/src/routes/project/[slug]/+page.svelte
@@ -6,10 +6,10 @@
 	let has_sidebar = data.meta.sidebar && data.meta.sidebar.length > 0;
 </script>
 
-<div class={'border-bordercolor md:rounded-lg md:border-2 md:p-8'}>
-	<div class="mb-12 flex justify-between max-md:flex-col md:flex-row">
+<div class={'border-bordercolor lg:rounded-lg lg:border-2 lg:p-8'}>
+	<div class="mb-12 flex justify-between max-lg:flex-col lg:flex-row">
 		<h1 class="mr-8 font-bold">{data.meta.name}</h1>
-		<div class="flex flex-row flex-wrap gap-2 max-md:mt-4 md:justify-end">
+		<div class="flex flex-row flex-wrap gap-2 max-lg:mt-4 lg:justify-end">
 			{#each data.meta.tags as tag}
 				<a href={'/portfolio/' + tag}>
 					<Tag>{tag}</Tag>
@@ -20,12 +20,12 @@
 	</div>
 
 	<div class="flex gap-8 max-lg:flex-col lg:flex-row">
-		<div class={['project-wrapper flex flex-col gap-4', has_sidebar && 'md:w-2/3']}>
+		<div class={['project-wrapper flex flex-col gap-4', has_sidebar && 'lg:w-2/3']}>
 			<data.content class="project-wrapper" />
 		</div>
 
 		{#if has_sidebar}
-			<div class="flex flex-col gap-8 md:w-1/3">
+			<div class="flex flex-col gap-8 lg:w-1/3">
 				{#each data.meta.sidebar as src, i}
 					<img {src} alt={'Showcase of ' + data.meta.name + ' #' + i} />
 				{/each}
@@ -41,14 +41,13 @@
 
 	.project-wrapper :global(iframe) {
 		@apply self-center;
-		@apply max-md:w-full;
+		@apply max-lg:w-full;
 	}
 
 	.project-wrapper :global(iframe.video) {
 		@apply aspect-video;
 		@apply h-auto;
-		@apply md:w-4/5;
-		@apply max-md:w-full;
+		@apply lg:w-4/5;
 	}
 
 	.project-wrapper :global(img) {