From 67159abf39173f61640ba662de76f529291f092d Mon Sep 17 00:00:00 2001
From: Brieuc Dubois <git@bhasher.com>
Date: Tue, 16 Jan 2024 19:56:09 +0100
Subject: [PATCH] global media queries & sidebar style rewrite

---
 .../src/lib/components/project/Column.svelte  |  6 ++--
 .../src/lib/components/project/Header.svelte  |  2 +-
 .../src/lib/components/project/Project.svelte | 16 ++++++----
 .../src/lib/components/project/Sidebar.svelte | 32 +++++++++++--------
 frontend/src/lib/styles/breakpoints.less      | 21 ++++++++++++
 frontend/src/routes/+page.svelte              |  2 ++
 frontend/src/routes/project/+page.svelte      |  2 +-
 7 files changed, 56 insertions(+), 25 deletions(-)
 create mode 100644 frontend/src/lib/styles/breakpoints.less

diff --git a/frontend/src/lib/components/project/Column.svelte b/frontend/src/lib/components/project/Column.svelte
index afa42a5..8a535e1 100644
--- a/frontend/src/lib/components/project/Column.svelte
+++ b/frontend/src/lib/components/project/Column.svelte
@@ -127,13 +127,15 @@
 </div>
 
 <style lang="less">
+	@import '../../styles/breakpoints.less';
+
 	.column {
 		margin: 20px 10px;
 		width: 250px;
 
-		@media (max-width: 480px) {
+		.one-column({
 			scroll-snap-align: center;
-		}
+		});
 	}
 
 	header {
diff --git a/frontend/src/lib/components/project/Header.svelte b/frontend/src/lib/components/project/Header.svelte
index df1de08..b576b4d 100644
--- a/frontend/src/lib/components/project/Header.svelte
+++ b/frontend/src/lib/components/project/Header.svelte
@@ -106,7 +106,7 @@
 
 <style lang="less">
 	header {
-		margin: 0 50px;
+		margin: 0 2%;
 		padding: 20px 0;
 		display: flex;
 		align-items: center;
diff --git a/frontend/src/lib/components/project/Project.svelte b/frontend/src/lib/components/project/Project.svelte
index 971455c..7cbc68b 100644
--- a/frontend/src/lib/components/project/Project.svelte
+++ b/frontend/src/lib/components/project/Project.svelte
@@ -107,16 +107,14 @@
 {/if}
 
 <style lang="less">
+	@import '../../styles/breakpoints.less';
+
 	section {
 		display: flex;
 		flex-direction: column;
 		height: 100vh;
-		width: 100vw;
-
-		@media (min-width: 800px) {
-			margin-left: 250px;
-			width: calc(100vw - 250px);
-		}
+		flex-basis: 100%;
+		overflow: hidden;
 	}
 
 	.grid {
@@ -124,7 +122,11 @@
 		flex-direction: row;
 		flex: 1;
 		overflow: scroll;
-		padding: 0 40px;
+		padding: 0 2%;
 		scroll-snap-type: x mandatory;
+
+		.one-column({
+			padding-left: calc(50vw - (250px / 2));
+		});
 	}
 </style>
diff --git a/frontend/src/lib/components/project/Sidebar.svelte b/frontend/src/lib/components/project/Sidebar.svelte
index 453f078..eca2469 100644
--- a/frontend/src/lib/components/project/Sidebar.svelte
+++ b/frontend/src/lib/components/project/Sidebar.svelte
@@ -46,7 +46,7 @@
 		<div id="branding">
 			<a href="/">
 				<span id="title">Focus.</span>
-				<span id="version">v0.3.2</span>
+				<span id="version">v0.3.4</span>
 			</a>
 		</div>
 		<div id="views">
@@ -124,18 +124,19 @@
 </button>
 
 <style lang="less">
+	@import '../../styles/breakpoints.less';
+
 	nav {
-		position: fixed;
+		position: sticky;
 		top: 0;
-		left: 0;
-		bottom: 0;
-		width: 250px;
+		flex-shrink: 0;
+		width: clamp(200px, 20vw, 300px);
+		height: 100vh;
 		background-color: #273049;
 		display: flex;
 		flex-direction: column;
 		justify-content: space-between;
 		font-size: 2rem;
-		transition: transform 0.3s ease-in-out;
 	}
 
 	.toggle {
@@ -147,9 +148,6 @@
 		width: 50px;
 		height: 50px;
 		transform: scale(1);
-		transition-property: left, transform;
-		transition-duration: 0.3s;
-		transition-timing-function: ease-in-out;
 
 		&:hover {
 			cursor: pointer;
@@ -161,20 +159,26 @@
 		}
 
 		&.open {
-			left: 195px;
+			left: auto;
+			right: 5px;
 			transform: scaleX(-1);
 		}
 	}
 
-	@media (max-width: 800px) {
-		nav.hidden {
-			transform: translateX(-100%);
+	.nosidebar({
+		nav {
+			width: 100vw;
+			
+			&.hidden {
+				width: 0;
+				display: none;
+			}
 		}
 
 		.toggle {
 			visibility: visible;
 		}
-	}
+	});
 
 	#branding {
 		display: flex;
diff --git a/frontend/src/lib/styles/breakpoints.less b/frontend/src/lib/styles/breakpoints.less
new file mode 100644
index 0000000..e4ac1b1
--- /dev/null
+++ b/frontend/src/lib/styles/breakpoints.less
@@ -0,0 +1,21 @@
+@one-column: 480px;
+
+.one-column(@rules) {
+	@media (max-width: @one-column) {
+		@rules();
+	}
+}
+
+@sidebar: 800px;
+
+.sidebar(@rules) {
+	@media (min-width: @sidebar) {
+		@rules();
+	}
+}
+
+.nosidebar(@rules) {
+	@media (max-width: @sidebar) {
+		@rules();
+	}
+}
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 1c8ce05..74061bd 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -49,12 +49,14 @@
 	h2 {
 		text-align: center;
 		margin-bottom: 40px;
+		font-size: 3rem;
 	}
 
 	ul {
 		list-style: none;
 		padding: 0;
 		margin: 0;
+		font-size: 1.5rem;
 	}
 	#add {
 		width: 100%;
diff --git a/frontend/src/routes/project/+page.svelte b/frontend/src/routes/project/+page.svelte
index 8117511..30ea771 100644
--- a/frontend/src/routes/project/+page.svelte
+++ b/frontend/src/routes/project/+page.svelte
@@ -40,7 +40,7 @@
 	<SvelteToast />
 {/if}
 
-<style>
+<style lang="less">
 	div {
 		display: flex;
 	}