adds mobile styles to detail page

syntaxfm · Jun 30, 2023 · 59ff8e0 · 59ff8e0 · vercel · Jun 30, 2023
1 parent a25ec1a
commit 59ff8e0
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 8 deletions.
diff --git a/src/routes/shows/+page.svelte b/src/routes/shows/+page.svelte
@@ -2,10 +2,8 @@
 	import { queryParameters } from 'sveltekit-search-params';
 	import SelectMenu from '$lib/SelectMenu.svelte';
 	import ShowCard from '$lib/ShowCard.svelte';
-	import type { PageData } from './$types';
 
-	let sort = 'nto';
-	export let data: PageData;
+	export let data;
 	$: ({ shows } = data);
 	const store = queryParameters();
 </script>

diff --git a/src/routes/shows/[show_number]/[slug]/+page.svelte b/src/routes/shows/[show_number]/[slug]/+page.svelte
@@ -46,7 +46,10 @@
 	}
 
 	:global(.show-page > *) {
-		grid-column: content/content;
+		grid-column: start/end;
+		@media (--above_med) {
+			grid-column: content/content;
+		}
 	}
 
 	header {

diff --git a/src/styles/base.css b/src/styles/base.css
@@ -139,6 +139,12 @@
 	p {
 		line-height: 1.7;
 	}
+	ul {
+		@media (--below_med) {
+			padding: 0;
+		}
+	}
+
 	li {
 		line-height: 2.2;
 		list-style-type: circle;

diff --git a/src/styles/variables.css b/src/styles/variables.css
@@ -1,8 +1,16 @@
 :root {
 	/* NEW SHIT */
 	/* 🧑‍🚒 SHIT */
-	@custom-media --small-medium (width > 650px);
-	@custom-media --test (max-width: 30em);
+
+	@custom-media --below_small (width < 400px);
+	@custom-media --below_med (width < 700px);
+	@custom-media --below_large (width < 900px);
+	@custom-media --below_xlarge (width < 1200px);
+
+	@custom-media --above_small (width >400px);
+	@custom-media --above_med (width > 700px);
+	@custom-media --above_large (width > 900px);
+	@custom-media --above_xlarge (width > 1200px);
 
 	--yellow-hue: 81.72;
 	--yellow-1: oklch(99% 0.02 var(--yellow-hue));
@@ -94,9 +102,9 @@
 	/* Light Theme as the default */
 	--sheet-bg: var(--white);
 	--bg: var(--blackish);
-	--bg-2: var(--black-9);
+	--bg-2: var(--black-2);
 	--color: var(--white);
-	--color-2: var(--black-2);
+	--color-2: var(--black-9);
 	--sheet-color: var(--black);
 	--primary: var(--yellow);
 	--accent: var(--teal);