fix media print & smaller screens styling issues (#17)

* fix section component styling & typography * fix media print styling * format code
grzegorzxpatyk · Oct 10, 2023 · 00c0be6 · 00c0be6
1 parent 8c44370
commit 00c0be6
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 39 deletions.
diff --git a/src/lib/components/section.svelte b/src/lib/components/section.svelte
@@ -8,12 +8,12 @@
     export let isLast: boolean = false;
 </script>
 
-<section class={"pb-8 mb-8" + (!isLast ? ' border-b border-b-zinc-700 dark:border-b-zinc-400': '')}>
-	<h3 class="text-2xl mb-6 font-semibold">{title}</h3>
+<section class={(!isLast ? 'pb-8 mb-8 border-b border-b-zinc-700 dark:border-b-zinc-400': '')}>
+	<h3 class="text-2xl mb-6 font-bold">{title}</h3>
 	{#if type === 'list' && listItems}
 		{#each listItems as item}
 			<div class="mb-6">
-				<h4 class="text-lg block border-b-zinc-500 dark:border-b-zinc-800 font-medium">{item.title}</h4>
+				<h4 class="text-lg block border-b-zinc-500 dark:border-b-zinc-800 font-semibold">{item.title}</h4>
 				<div class="flex flex-row justify-between items-center text-sm mb-3">
 					<span>{item.organisation}</span>
 					<span>{item.timePeriod}</span>

diff --git a/src/lib/components/themeSwitch.svelte b/src/lib/components/themeSwitch.svelte
@@ -85,7 +85,7 @@
 </svelte:head>
 
 <div
-    class="fixed top-4 right-4 p-2 hidden sm:grid grid-cols-2 gap-2 bg-zinc-300 dark:bg-zinc-500 bg-opacity-30 rounded-md print:hidden"
+    class="fixed top-4 right-4 p-2 hidden sm:grid grid-cols-2 gap-2 bg-zinc-300 dark:bg-zinc-500 bg-opacity-30 rounded-md print:hidden print:sm:hidden"
 >
     <ThemeSwitchButton
         variant="light"

diff --git a/src/lib/components/themeSwitchButton.svelte b/src/lib/components/themeSwitchButton.svelte
@@ -1,42 +1,47 @@
 <script lang="ts">
-    import { Moon, Sun } from 'radix-icons-svelte';
+	import { Moon, Sun } from 'radix-icons-svelte';
 
-    export let variant: 'light' | 'dark';
-    export let clickHandler: () => void;
-    export let isActive: boolean;
+	export let variant: 'light' | 'dark';
+	export let clickHandler: () => void;
+	export let isActive: boolean;
 
-    let isLabelVisible: boolean = false;
+	let isLabelVisible: boolean = false;
 
-    function handleMouseOver(event: Event) {
-        isLabelVisible = true;
-    }
+	function handleMouseOver(event: Event) {
+		isLabelVisible = true;
+	}
 
-    function handleMouseLeave(event: Event) {
-        isLabelVisible = false;
-    }
+	function handleMouseLeave(event: Event) {
+		isLabelVisible = false;
+	}
 </script>
 
 <button
-    name="theme-{variant}-switch"
-    class="p-2 bg-zinc-50 dark:bg-zinc-200 bg-opacity-30 dark:bg-opacity-30 hover:bg-opacity-50 dark:hover:bg-opacity-50 rounded-md border-2 {isActive
-        ? 'border-blue-400'
-        : 'border-zinc-300 dark:border-zinc-300'}"
-    on:click={clickHandler}
-    on:mouseover={handleMouseOver}
-    on:focus={handleMouseOver}
-    on:mouseleave={handleMouseLeave}
-    on:blur={handleMouseLeave}
+	name="theme-{variant}-switch"
+	class="p-2 bg-zinc-50 dark:bg-zinc-200 bg-opacity-30 dark:bg-opacity-30 hover:bg-opacity-50 dark:hover:bg-opacity-50 rounded-md border-2 {isActive
+		? 'border-blue-400'
+		: 'border-zinc-300 dark:border-zinc-300'}"
+	on:click={clickHandler}
+	on:mouseover={handleMouseOver}
+	on:focus={handleMouseOver}
+	on:mouseleave={handleMouseLeave}
+	on:blur={handleMouseLeave}
 >
-    {#if variant === 'dark'}
-        <Moon size={16} />
-    {:else}
-        <Sun size={16} />
-    {/if}
+	{#if variant === 'dark'}
+		<Moon size={16} />
+	{:else}
+		<Sun size={16} />
+	{/if}
 </button>
-<label for="theme-{variant}-switch" class="{isLabelVisible ? 'block' : 'hidden'} absolute top-16 p-2 dark:bg-zinc-300 dark:bg-opacity-50 bg-zinc-200 bg-opacity-50 rounded-md font-semibold text-sm w-full text-center ">
-    {#if isActive}
-        OS Default
-    {:else}
-        {variant} theme
-    {/if}
+<label
+	for="theme-{variant}-switch"
+	class="{isLabelVisible
+		? 'block'
+		: 'hidden'} absolute top-16 p-2 dark:bg-zinc-300 dark:bg-opacity-50 bg-zinc-200 bg-opacity-50 rounded-md font-semibold text-sm w-full text-center"
+>
+	{#if isActive}
+		OS Default
+	{:else}
+		{variant} theme
+	{/if}
 </label>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -11,12 +11,12 @@
 </svelte:head>
 
 <main
-	class="min-h-screen h-fit flex flex-col bg-100% m-0 bg-fixed bg-no-repeat bg-zinc-100 bg-opacity-70 dark:bg-gradient-to-t dark:from-dark-blue-gradient dark:to-dark-gray-gradient sm:p-6 md:p-12 lg:p-24 print:p-0 print:m-0 print:pt-12"
+	class="min-h-screen h-fit flex flex-col bg-100% m-0 bg-fixed bg-no-repeat bg-zinc-100 bg-opacity-70 dark:bg-gradient-to-t dark:from-dark-blue-gradient dark:to-dark-gray-gradient p-0 sm:p-6 md:p-12 lg:p-24 print:p-0 print:lg:p-0 print:md:p-0 print:sm:p-0 print:m-0 print:pt-12"
 >
 	<div
-		class="md:p-5 text-zinc-950 dark:text-zinc-300 flex flex-col justify-center items-start md:grid md:grid-cols-4 print:grid-cols-6 print:border-0"
+		class="sm:p-5 print:p-0 text-zinc-950 dark:text-zinc-300 flex flex-col justify-center items-start md:grid md:grid-cols-4 print:grid print:grid-cols-6 print:md:grid-cols-6"
 	>
-		<div class="min-h-screen h-fit md:h-fit md:border-r border-zinc-800 dark:border-zinc-400 p-6 md:pr-12 print:col-span-2">
+		<div class="min-h-screen h-full print:min-h-full md:border-r print:border-r border-zinc-800 dark:border-zinc-400 p-6 md:pr-12 print:pr-12 print:col-span-2 print:md:col-span-2">
 			<Bio
 				{profile}
 				picDescription="Grzegorz profile - square composition portrait of a brunette man wearing a choker"
@@ -55,7 +55,7 @@
 				]}
 			/>
 		</div>
-		<div class="md:col-span-3 print:col-span-4 md:ml-6 p-6">
+		<div class="md:col-span-3 print:col-span-4 print:md:col-span-4 md:ml-6 print:ml-6 p-6">
 			<Section
 				title="Profile"
 				type="description"