Initial commit

Update .gitignore, LICENSE-CC0, and 70 more files...

scss/site/layouts/commons.scss

@@ -0,0 +1,15 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+/* Site > Layouts */
+
+/* Site > Layouts > Commons */
+
+html, body {
+	// Do not use 100vh, it includes the search bar  !
+	min-width: 100vw;
+	min-height: 100%;
+	width: 100vw !important;
+	height: 100% !important;
+	max-width: 100vw;
+	max-height: 100%;
+}

scss/site/layouts/generic.scss

@@ -0,0 +1,161 @@
+// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
+
+/* Site > Layouts > Generic */
+
+/* Site > Layouts > Generic > Main Grid */
+
+body.layout-generic {
+	display: grid;
+	grid-template-columns: min-content 1fr;
+	grid-template-rows: min-content 1fr min-content;
+	gap: 0;
+	
+	& > nav {
+		grid-column: 1;
+		grid-row: 1 / span 2;
+		overflow-x: hidden;
+		overflow-y: auto;
+		z-index: #{$z-index-sidebar};
+	}
+	
+	& > header {
+		grid-column: 2;
+		grid-row: 1;
+		
+		// Inner content
+		display: grid;
+		grid-template-columns: 1fr min-content;
+		grid-template-rows: min-content;
+		
+		& > h1 {
+			grid-column: 1;
+		}
+		
+		& > #lang-selector {
+			grid-column: 2;
+		}
+	}
+	
+	& > main {
+		grid-column: 2;
+		grid-row: 2;
+		overflow-x: hidden;
+		overflow-y: auto;
+		position: relative; // Helps with some absolute alignments inside it
+	}
+	
+	& > footer {
+		grid-column: 1 / span 2;
+		grid-row: 3;
+	}
+}
+
+
+/* Site > Layouts > Generic > Mobile Fixes */
+
+@media only screen and (max-width: 768px) {
+	body.layout-generic {
+		& > nav {
+			//border-right: 1px solid #{$color-border-all};
+			border-right: 1px solid #{$color-border-main};
+		}
+		
+		& > header {
+			grid-column: 1 / span 2;
+		}
+		
+		& > main {
+			grid-column: 1 / span 2;
+			// TODO: Remove scrolling here
+		}
+	}
+}
+
+
+/* Site > Layouts > Generic > Sidebar */
+
+body.layout-generic {
+	.sidebar {
+		width: #{$size-sidebar};
+		max-width: #{$size-sidebar};
+		min-height: 100%;
+		
+		&.retracted {
+			width: 0;
+			padding-left: 0;
+			padding-right: 0;
+			overflow: hidden;
+		}
+		
+		.sidebar-entry {
+			display: flex;
+			align-items: center;
+			justify-content: left;
+		}
+	}
+}
+
+
+/* Site > Layouts > Generic > Sidebar > Mobile Fixes */
+
+// Inverting the sidebar's states for mobile devices
+@media only screen and (max-width: 768px) {
+	body.layout-generic {
+		.sidebar {
+			width: 0;
+			padding-left: 0;
+			padding-right: 0;
+			overflow: hidden;
+			
+			&.retracted {
+				width: #{$size-sidebar};
+				max-width: #{$size-sidebar};
+				min-height: 100%;
+				overflow: auto;
+				overflow-x: hidden;
+				// Inherited from .p-m
+				padding-left: 1rem;
+				padding-right: 1rem;
+			}
+			
+			.sidebar-entry {
+				display: flex;
+				align-items: center;
+				justify-content: left;
+			}
+		}
+	}
+}
+
+
+/* Site > Layouts > Generic > Main Extras */
+
+@media only screen and (max-width: 768px) {
+	body.layout-generic {
+		main {
+			border-left: 0 !important;
+			border-radius: 0 !important;
+		}
+	}
+}
+
+@media only screen and (min-width: 768px) {
+	body.layout-generic {
+		main {
+			&.expanded {
+				border-left: 0;
+				border-radius: 0;
+			}
+		}
+	}
+}
+
+
+/* Site > Layouts > Generic > Transitions */
+
+body.layout-generic {
+	main, .sidebar {
+		transition: width 0.4s, padding 0.4s, border-width 0.4s, border-radius 0.4s;
+		transition-timing-function: cubic-bezier(.25, .8, .25, 1.1);
+	}
+}