global media queries & sidebar style rewrite

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 {

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;

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;
+		flex-basis: 100%;
-
+		overflow: hidden;
-		@media (min-width: 800px) {
-			margin-left: 250px;
-			width: calc(100vw - 250px);
-		}
 	}
 
 	.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>

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;
+		flex-shrink: 0;
-		bottom: 0;
+		width: clamp(200px, 20vw, 300px);
-		width: 250px;
+		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) {
+	.nosidebar({
-		nav.hidden {
+		nav {
-			transform: translateX(-100%);
+			width: 100vw;
+			
+			&.hidden {
+				width: 0;
+				display: none;
+			}
 		}
 
 		.toggle {
 			visibility: visible;
 		}
-	}
+	});
 
 	#branding {
 		display: flex;

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();
+	}
+}

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%;

frontend/src/routes/project/+page.svelte

@@ -40,7 +40,7 @@
 	<SvelteToast />
 {/if}
 
-<style>
+<style lang="less">
 	div {
 		display: flex;
 	}