adds main layout and place content utilities

syntaxfm · Jul 5, 2023 · 44ca804 · 44ca804 · vercel · Jul 5, 2023
1 parent b39de73
commit 44ca804
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 16 deletions.
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -28,8 +28,8 @@
 <div class={'theme-' + $theme + ' theme-wrapper'}>
 	<Header {user} />
 
-	<div class="page-layout">
-		<main>
+	<div class="page-layout main-layout">
+		<main class="place-content">
 			<slot />
 		</main>
 	</div>
@@ -56,7 +56,6 @@
 
 	main {
 		padding: 2rem;
-		grid-column: 2;
 		@media (min-width: 1280px) {
 			padding: 0;
 		}
@@ -70,9 +69,6 @@
 
 	@media (min-width: 1280px) {
 		.page-layout {
-			gap: 48px;
-			display: grid;
-			grid-template-columns: 144px minmax(0, 18fr) 144px;
 			grid-auto-flow: column;
 			grid-template-rows: 1fr;
 		}

diff --git a/src/routes/Header.svelte b/src/routes/Header.svelte
@@ -8,8 +8,8 @@
 	$: header_element = $page.route.id === '/' ? 'h1' : 'h2';
 </script>
 
-<header>
-	<div class="header-container">
+<header class="main-layout">
+	<div class="header-container place-content">
 		<svelte:element this={header_element}>
 			<a href="/">
 				<svg width="80px" viewBox="0 0 1371 1212" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -55,27 +55,20 @@
 	}
 
 	header {
-
 		background-image: url('https://syntax.fm/static/background.jpg');
 		background-color: var(--bg);
 		color: var(--color);
 		@media (min-width: 1280px) {
-			column-gap: 48px;
-			display: grid;
-			grid-template-columns: [start margin] 144px [margin content] minmax(0, 18fr) [content end-margin] 144px [end-margin end];
 			grid-auto-flow: column;
 			grid-template-rows: 1fr auto;
-			
 		}
 	}
 
 	.header-container {
 		display: grid;
 		padding: 10px 0;
 		align-items: center;
-		grid-column: content / content;
 		row-gap: 20px;
-		width: 100%;
 		grid-template-columns: [start logo] 88px [logo actions] auto [actions end];
 		max-width: 1600px;
 		margin: 0 auto;

diff --git a/src/routes/style.css b/src/routes/style.css
@@ -15,11 +15,12 @@
 
 /* The main css entry. Primarily used to import stuff */
 
-@layer reset base theme utilities;
+@layer reset base layout theme utilities;
 
 /* Import all css themes */
 @import '../styles/base.css';
 @import '../styles/variables.css';
+@import '../styles/layout.css';
 @import '../styles/buttons.css';
 
 /* FYI you have to use import-glob for all of these or else it gets mad */

diff --git a/src/styles/layout.css b/src/styles/layout.css
@@ -0,0 +1,14 @@
+@layer layout {
+	.main-layout {
+		@media (min-width: 1280px) {
+			column-gap: 48px;
+			display: grid;
+			grid-template-columns: [start margin] 144px [margin content] minmax(0, 18fr) [content end-margin] 144px [end-margin end];	
+		}
+	}
+
+	.place-content {
+		grid-column: content / content;	
+		width: 100%;
+	}
+}