diff --git a/.editorconfig b/.editorconfig
index 7db0ed0..50dddeb 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -1,8 +1,3 @@
 [*]
 indent_style = tab
-
-[*.json]
-tab_width = 4
-
-[*.{styl,css}]
 tab_width = 2
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..ea17cff
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,4 @@
+.idea/
+build/
+yarn.lock
+node_modules
\ No newline at end of file
diff --git a/README.md b/README.md
index 9209041..6caa41e 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,9 @@
 # Forgejo Modern
 
-An updated fork of [Gitea Modern](https://codeberg.org/Freeplay/Gitea-Modern) with focus on developer experience, and a consistent and up-to-date experience.
\ No newline at end of file
+An updated fork of [Gitea Modern](https://codeberg.org/Freeplay/Gitea-Modern) with focus on developer experience, and a consistent and up-to-date experience.
+
+## Usage
+1. Clone the repository
+2. Run `yarn` to install the dependencies
+3. Run `yarn build` to build the project
+4. Copy the output at `build/theme-forgejo-modern.css`
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..3a9b087
--- /dev/null
+++ b/package.json
@@ -0,0 +1,10 @@
+{
+	"name": "forgejo-modern",
+	"private": true,
+	"devDependencies": {
+		"stylus": "^0.61.0"
+	},
+	"scripts": {
+		"build": "stylus src --out build/theme-forgejo-modern.css"
+	}
+}
diff --git a/src/animations.styl b/src/animations.styl
new file mode 100644
index 0000000..e85f085
--- /dev/null
+++ b/src/animations.styl
@@ -0,0 +1,9 @@
+@keyframes slideInY {
+	from { opacity: 0; transform: scale(.97); }
+	to { opacity: 1; transform: scale(1); }
+}
+
+@keyframes slideOutY {
+	from { opacity: 1; transform: scale(1); }
+	to { opacity: 0; transform: scale(.97); }
+}
\ No newline at end of file
diff --git a/src/common.styl b/src/common.styl
new file mode 100644
index 0000000..4cd4716
--- /dev/null
+++ b/src/common.styl
@@ -0,0 +1,71 @@
+:root {
+	--base-border-radius: 6px;
+}
+
+html {
+	scroll-behavior: smooth;
+	scroll-snap-type: y mandatory;
+	scrollbar-width: auto !important;
+}
+
+.full.height {
+	padding-bottom: 30px;
+}
+
+html.theme-gitea, html.theme-arc-green {
+	--fonts-override: var(--fonts-regular);
+	accent-color: var(--color-primary);
+}
+
+a[rel*="nofollow"]:not(.ui), .link:not(.ui) {
+	&:hover, &:focus {
+		text-decoration: underline;
+		text-underline-offset: 5px;
+	}
+}
+
+*:not(input) {
+	outline: 0 dashed var(--color-primary);
+	outline-offset: -3px;
+	transition: outline-color .5s, outline-offset .5s;
+}
+
+:focus-visible:not(input) {
+	box-shadow: 0 0 5px 0 var(--color-primary) !important;
+	border-radius: 2px;
+	outline: 2px solid var(--color-primary) !important;
+	outline-offset: 0;
+}
+
+// Common border radius
+.ui.buttons .ui.basic.button {
+	border-radius: 0;
+}
+
+.ui.button, .ui.basic.button, .ui.menu, .input.action.fluid, .ui.label,
+.ui.form input:not([type]), .ui.form input[type="date"], .ui.form input[type="datetime-local"], .ui.form input[type="email"], .ui.form input[type="file"], .ui.form input[type="number"], .ui.form input[type="password"], .ui.form input[type="search"], .ui.form input[type="tel"], .ui.form input[type="text"], .ui.form input[type="time"], .ui.form input[type="url"],
+.ui.table, .tab-size-8
+{
+	border-radius: var(--base-border-radius);
+}
+
+.ui.menu:not(.secondary) > .item:first-child,
+.ui.buttons .button:first-child,
+.ui.buttons > .ui.basic.button:first-child {
+	border-radius: var(--base-border-radius) 0 0 var(--base-border-radius);
+}
+
+.ui.compact.menu:not(.secondary) .item:last-child,
+.ui.buttons .button:last-child,
+.ui.action.input > .button:last-child,
+.ui.buttons > .ui.basic.button:last-child {
+	border-radius: 0 var(--base-border-radius) var(--base-border-radius) 0;
+}
+
+.ui.top.attached.header {
+	border-radius: var(--base-border-radius) var(--base-border-radius) 0 0;
+}
+
+.ui.avatar {
+	border-radius: var(--base-border-radius) !important;
+}
\ No newline at end of file
diff --git a/src/components/alerts.styl b/src/components/alerts.styl
new file mode 100644
index 0000000..11289be
--- /dev/null
+++ b/src/components/alerts.styl
@@ -0,0 +1,17 @@
+.alert-primary.p-10 {
+	border: 0 !important;
+	padding: 20px !important;
+
+	.close {
+		span {
+			font-size: 1.7em;
+			font-weight: 200;
+			padding-right: 6px;
+		}
+	}
+
+	h4 {
+		margin-right: 1.7em;
+		font-weight: 600;
+	}
+}
\ No newline at end of file
diff --git a/src/components/button.styl b/src/components/button.styl
new file mode 100644
index 0000000..7a72a46
--- /dev/null
+++ b/src/components/button.styl
@@ -0,0 +1,18 @@
+.button {
+	text-overflow: ellipsis;
+}
+
+.ui.compact.button {
+	padding-top: .3em;
+	padding-bottom: .3em;
+	min-height: 2.4em;
+	display: inline-flex;
+	align-items: center;
+	svg {
+		margin-bottom: -1px !important;
+	}
+}
+
+.ui.basic.button, .ui.basic.label {
+	background: none;
+}
\ No newline at end of file
diff --git a/src/components/inputs.styl b/src/components/inputs.styl
new file mode 100644
index 0000000..bd42479
--- /dev/null
+++ b/src/components/inputs.styl
@@ -0,0 +1,32 @@
+.input.action.fluid {
+	border: 1px solid var(--color-secondary) !important;
+	height: auto;
+	background-color: var(--color-input-background);
+
+	input {
+		border: 0;
+	}
+
+	button {
+		margin: 2px !important;
+		margin-left: 0 !important;
+		padding-top: 0 !important;
+		padding-bottom: 0 !important;
+		box-sizing: border-box;
+		border-radius: var(--base-border-radius) !important;
+	}
+
+	.icon {
+		border: 0 !important;
+	}
+
+	&:focus-within {
+		// outline: 1px solid var(--color-primary);
+		// outline-offset: -1px;
+		border-color: var(--color-primary) !important;
+	}
+}
+
+.ui.form + .ui.divider {
+	display: none;
+}
\ No newline at end of file
diff --git a/src/components/labels.styl b/src/components/labels.styl
new file mode 100644
index 0000000..ef1bcef
--- /dev/null
+++ b/src/components/labels.styl
@@ -0,0 +1,25 @@
+.label:not(.basic) {
+	border-radius: 100px !important;
+	padding: 4px 8px !important;
+	font-weight: 700;
+	align-items: center;
+	justify-content: center;
+	min-width: 24px !important;
+	display: inline-flex;
+
+	&.sha > .detail {
+		margin-left: 6px !important;
+	}
+
+	svg {
+		margin-right: 4px;
+	}
+}
+
+.scope-parent > .scope-left {
+	border-radius: 100px 0 0 100px !important;
+}
+
+.scope-parent > .scope-right {
+	border-radius: 0 100px 100px 0 !important;
+}
diff --git a/src/components/menus.styl b/src/components/menus.styl
new file mode 100644
index 0000000..7ae4595
--- /dev/null
+++ b/src/components/menus.styl
@@ -0,0 +1,148 @@
+.ui.tabular.menu, .ui.tight.menu {
+	position: relative;
+	flex-direction: row !important;
+	flex-wrap: nowrap !important;
+	overflow: auto hidden !important;
+	scrollbar-width: thin;
+	padding-bottom: 2px;
+	scrollbar-color:var(--color-primary) var(--color-secondary);
+	border-bottom: 1px solid var(--color-secondary) !important;
+
+	&.ui.tight.menu > .item {
+		width: auto !important;
+		border-bottom-width: 0 !important;
+		position: relative !important;
+		padding: .85714286em 1.14285714em;
+		&::before {
+			content: "" !important;
+			position: absolute !important;
+			bottom: 0 !important;
+			left: 20px !important;
+			right: 20px !important;
+			top: unset !important;
+			width: unset !important;
+			height: 2px !important;
+			opacity: .7;
+			border-radius: 4px 4px 0 0;
+			background: none;
+			display: flex !important;
+			transition: left 2s;
+		}
+
+		&.active::before {
+			background-color: var(--color-primary) !important;
+			left: 0 !important;
+			right: 0 !important;
+		}
+	}
+}
+
+.ui.tabular.menu {
+	border-bottom: 0 !important;
+	position: relative;
+	&::before {
+		content: "";
+		position: absolute;
+		bottom: 1px;
+		left: 0;
+		right: 0;
+		z-index: -1;
+		border-top: 1px solid var(--color-secondary);
+	}
+}
+
+.ui.tabular.menu:not(.borderless) > .item {
+	width: auto !important;
+	padding: 16px 24px;
+	min-width: 70px;
+	justify-content: center;
+	position: relative;
+
+	svg {
+		margin-right: 10px !important;
+	}
+
+	&.active {
+		border-radius: 10px 10px 0 0 !important;
+		z-index: 1;
+	}
+
+	&.active::after {
+		content: "" !important;
+		position: absolute;
+		width: 6px;
+		height: 6px;
+		bottom: 1px;
+		right: -7px;
+		border-bottom-left-radius: 100px;
+		box-shadow: -1px 1px 0 0px var(--color-secondary), -3px 3px 0px 2px var(--color-body) ;
+
+	}
+
+	&.active::before {
+		all: unset;
+		content: "" !important;
+		position: absolute;
+		width: 6px;
+		height: 6px;
+		bottom: 1px;
+		left: -7px;
+		border-bottom-right-radius: 100px;
+		box-shadow: 1px 1px 0 0 var(--color-secondary), 3px 3px 0px 2px var(--color-body) ;
+		display: unset !important;
+	}
+
+	&.active:first-child {
+		&::before {
+			content: none !important;
+		}
+	}
+}
+
+// The menu right below the Header
+.ui.secondary.pointing.menu {
+	background: none !important;
+	.new-menu-inner {
+		width: 1150px;
+		padding: 0 20px;
+	}
+	.item {
+		border: none;
+	}
+	.active {
+		position: relative;
+
+		&::before {
+			all: unset;
+			content: "";
+			position: absolute;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			height: 2px;
+			background-color: var(--color-primary) !important;
+			display: flex !important;
+			opacity: .7;
+		}
+	}
+
+	.item:last-child {
+		padding-right:  1.14286em !important;
+	}
+
+	&::after {
+		content: unset !important;
+	}
+}
+
+.repository .filter.menu .menu {
+	max-height: 80vh;
+	width: max-content !important;
+
+	.info {
+		width: 100% !important;
+		padding: .8em !important;
+		line-height: 1.2em;
+		white-space: normal !important;
+	}
+}
\ No newline at end of file
diff --git a/src/components/popups.styl b/src/components/popups.styl
new file mode 100644
index 0000000..8718809
--- /dev/null
+++ b/src/components/popups.styl
@@ -0,0 +1,42 @@
+.popup.tiny.inverted {
+	background: var(--color-body);
+	color: var(--color-text);
+	box-shadow: var(--lt-shadowDefault) !important;
+	border: 1px solid var(--color-secondary);
+	pointer-events: none;
+	z-index: 9999999;
+
+	&::before {
+		background: var(--color-body) !important;
+		z-index: -99999 !important;
+		border-color: var(--color-secondary) !important;
+	}
+}
+
+.ui.left.popup::before {
+	border: 0;
+	border-top: 1px solid;
+	border-right: 1px solid;
+}
+
+.ui.right.popup::before {
+	border: 0;
+	border-left: 1px solid;
+	border-bottom: 1px solid;
+}
+
+.ui.top.popup::before {
+	border: 0;
+	border-right: 1px solid;
+	border-bottom: 1px solid;
+}
+
+.ui.bottom.popup::before {
+	border: 0;
+	border-top: 1px solid;
+	border-left: 1px solid;
+}
+
+.settings > .ui.container {
+	max-width: 1150px !important;
+}
\ No newline at end of file
diff --git a/src/layouts.styl b/src/layouts.styl
new file mode 100644
index 0000000..46e603c
--- /dev/null
+++ b/src/layouts.styl
@@ -0,0 +1,35 @@
+.three.column {
+	margin-left: 0;
+	margin-right: 0;
+
+	.column {
+		width: auto !important;
+		align-items: center !important;
+		display: flex !important;
+
+		.small:not(.modal), a {
+			max-height: 40px !important;
+			min-height: unset;
+			display: flex;
+			align-items: center;
+		}
+
+		form {
+			width: 100%;
+		}
+
+		&:first-child {
+			padding-left: 0;
+		}
+
+		&:last-child {
+			padding-right: 0;
+		}
+	}
+
+	.center {
+		flex-grow: 100;
+		padding-left: 0 !important;
+		padding-right: 0 !important;
+	}
+}
\ No newline at end of file
diff --git a/src/others/noscript.styl b/src/others/noscript.styl
new file mode 100644
index 0000000..3a0eb22
--- /dev/null
+++ b/src/others/noscript.styl
@@ -0,0 +1,32 @@
+.full.height > span[style="display: inline !important;"]:first-child {
+	margin: auto;
+	line-height: 40px;
+	padding: 30px;
+	text-align: center;
+
+	&::before {
+		content: "";
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		height: 40px;
+		background: var(--color-navbar);
+		border-bottom: 1px solid var(--color-secondary);
+		z-index: -1;
+	}
+
+	/* Remove stuff that isn't needed when JS is disabled */
+	& ~ .page-content {
+		#app, #dashboard-repo-list, #user-heatmap, #user-heatmap + .divider {
+			display: none !important;
+		}
+
+		.dashboard-navbar {
+			bottom: unset !important;
+			top: 10px !important;
+			align-self: flex-start !important;
+			padding-top: 10px;
+		}
+	}
+}
\ No newline at end of file
diff --git a/src/others/tweaks.styl b/src/others/tweaks.styl
new file mode 100644
index 0000000..b57ee51
--- /dev/null
+++ b/src/others/tweaks.styl
@@ -0,0 +1,42 @@
+// Filter buttons & New Issue buttons on mobile
+.ui.two.column.stackable.grid > .column {
+	width: auto !important;
+	flex-grow: 1;
+}
+
+.ui.compact.tiny.menu {
+	flex-grow: 1;
+
+	a {
+		flex-grow: 1;
+		justify-content: center;
+	}
+}
+
+// Better center content
+.page-content:not(.home) > .middle {
+	padding: calc(4vw + 1rem) 4vw !important;
+	width: 100% !important;
+
+	& > .column {
+		padding: 0 !important;
+	}
+}
+
+// Make heatmap not small on small screens
+#user-heatmap {
+	overflow: auto hidden;
+	justify-content: flex-start;
+	max-width: 900px;
+	margin: auto;
+	align-items: stretch;
+
+	.vch__wrapper {
+		min-width: 600px;
+	}
+}
+
+// Bold repo name, not author
+.repo-title a:nth-last-child(2) {
+	font-weight: 600 !important;
+}
\ No newline at end of file
diff --git a/src/parts/header.styl b/src/parts/header.styl
new file mode 100644
index 0000000..02095f5
--- /dev/null
+++ b/src/parts/header.styl
@@ -0,0 +1,92 @@
+.following.bar {
+	--min-height: 60px;
+	background: none !important;
+	border-bottom: 1px solid var(--color-secondary) !important;
+	background-color: var(--color-navbar) !important;
+	position: relative;
+	min-height: var(--min-height);
+	align-items: center;
+
+	#navbar {
+		padding: 0 calc(18px + 1%) !important;
+		background: none !important;
+		max-width: 100rem;
+		transition: padding 1s;
+		min-height: var(--min-height) !important;
+		margin: auto;
+
+
+		& > .item:not(.brand), & > .right > .item {
+			color: var(--color-text-dark) !important;
+			font-size: 1rem !important;
+			font-weight: 600;
+
+			padding: 0 calc(0px + 1%);
+			height: calc(var(--min-height) + 1px) !important;
+			margin: 0 !important;
+			border-radius: 0;
+			border-top: 1px solid transparent;
+			border-bottom: 1px solid transparent;
+			margin-bottom: -1px !important;
+			background: none !important;
+			box-sizing: border-box;
+			transition: border .5s, padding .7s;
+
+			& > span {
+				height: 100%;
+				display: flex;
+				align-items: center;
+			}
+
+			&:hover, &.active, &:focus {
+				border-bottom: 1px solid var(--color-primary);
+				transition: border .1s;
+				outline: none;
+			}
+		}
+
+		.item.brand {
+			padding: 0 !important;
+			min-height: var(--min-height) !important;
+		}
+
+		.item.brand a {
+			width: 35px;
+			height: 35px;
+			margin-right: 20px;
+			background-position: center;
+
+			img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+
+		.right {
+			position: sticky;
+			right: 1%;
+			background-color: var(--color-navbar);
+			box-shadow: 100px 0 0 var(--color-navbar);
+			width: 100%;
+			min-width: max-content;
+			justify-content: flex-end;
+
+			& > .item {
+				padding: 0 10px;
+
+				& > .text {
+					display: flex;
+					align-items: center;
+
+					span:not(.fitted) {
+						margin-left: 10px;
+					}
+
+					img ~ .fitted {
+						margin-left: 4px;
+					}
+				}
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/src/theme-forgejo-modern.styl b/src/theme-forgejo-modern.styl
index f715e09..e6610c7 100644
--- a/src/theme-forgejo-modern.styl
+++ b/src/theme-forgejo-modern.styl
@@ -1,546 +1,17 @@
 // main: theme-gitea-modern.user.styl, out: theme-gitea-modern.css, compress: true
 
-:root {
-	--base-border-radius: 6px;
-}
-html.theme-gitea, html.theme-arc-green {
-	--fonts-override: var(--fonts-regular);
-	accent-color: var(--color-primary);
-}
-a[rel*="nofollow"]:not(.ui), .link:not(.ui) {
-	&:hover, &:focus {
-		text-decoration: underline;
-		text-underline-offset: 5px;
-	}
-}
-
-*:not(input) {
-	outline: 0px dashed var(--color-primary);
-	outline-offset: -3px;
-	transition: outline-color .5s, outline-offset .5s;
-}
-:focus-visible:not(input) {
-	box-shadow: 0 0 5px 0px var(--color-primary) !important;
-	border-radius: 2px;
-	outline: 2px solid var(--color-primary) !important;
-	outline-offset: 0px;
-}
-
-@keyframes slideInY {
-	from { opacity: 0; transform: scale(.97); }
-	to { opacity: 1; transform: scale(1); }
-}
-@keyframes slideOutY {
-	from { opacity: 1; transform: scale(1); }
-	to { opacity: 0; transform: scale(.97); }
-}
-
-/*** Change Border Radius's ***/
-.ui.buttons .ui.basic.button {
-	border-radius: 0;
-}
-.ui.button, .ui.basic.button, .ui.menu, .input.action.fluid, .ui.label,
-.ui.form input:not([type]), .ui.form input[type="date"], .ui.form input[type="datetime-local"], .ui.form input[type="email"], .ui.form input[type="file"], .ui.form input[type="number"], .ui.form input[type="password"], .ui.form input[type="search"], .ui.form input[type="tel"], .ui.form input[type="text"], .ui.form input[type="time"], .ui.form input[type="url"],
-.ui.table, .tab-size-8,
-{
-	border-radius: var(--base-border-radius);
-}
-.ui.menu:not(.secondary) > .item:first-child,
-.ui.buttons .button:first-child,
-.ui.buttons > .ui.basic.button:first-child {
-	border-radius: var(--base-border-radius) 0 0 var(--base-border-radius);
-}
-.ui.compact.menu:not(.secondary) .item:last-child,
-.ui.buttons .button:last-child,
-.ui.action.input > .button:last-child,
-.ui.buttons > .ui.basic.button:last-child {
-	border-radius: 0 var(--base-border-radius) var(--base-border-radius) 0;
-}
-.ui.top.attached.header {
-	border-radius: var(--base-border-radius) var(--base-border-radius) 0 0;
-}
-
-.ui.avatar {
-	border-radius: var(--base-border-radius) !important;
-}
-
-/*** Buttons ***/
-.button {
-	text-overflow: ellipsis;
-}
-.ui.compact.button {
-	padding-top: .3em;
-	padding-bottom: .3em;
-	min-height: 2.4em;
-	display: inline-flex;
-	align-items: center;
-	svg {
-		margin-bottom: -1px !important;
-	}
-}
-.ui.basic.button, .ui.basic.label {
-	background: none;
-}
-
-
-/*** Inputs ***/
-
-.input.action.fluid {
-	border: 1px solid var(--color-secondary) !important;
-	height: auto;
-	background-color: var(--color-input-background);
-	input {
-		border: 0;
-	}
-	button {
-		margin: 2px !important;
-		margin-left: 0 !important;
-		padding-top: 0 !important;
-		padding-bottom: 0 !important;
-		box-sizing: border-box;
-		border-radius: var(--base-border-radius) !important;
-	}
-	.icon {
-		border: 0 !important;
-	}
-	&:focus-within {
-		// outline: 1px solid var(--color-primary);
-		// outline-offset: -1px;
-		border-color: var(--color-primary) !important;
-	}
-}
-.ui.form + .ui.divider {
-	display: none;
-}
-
-
-/*** Layouts ***/
-
-.three.column {
-	margin-left: 0;
-	margin-right: 0;
-	.column {
-		width: auto !important;
-		align-items: center !important;
-		display: flex !important;
-		.small:not(.modal), a {
-			max-height: 40px !important;
-			min-height: unset;
-			display: flex;
-			align-items: center;
-		}
-		form {
-			width: 100%;
-		}
-		&:first-child {
-			padding-left: 0;
-		}
-		&:last-child {
-			padding-right: 0;
-		}
-	}
-	.center {
-		flex-grow: 100;
-		padding-left: 0 !important;
-		padding-right: 0 !important;
-	}
-}
-
-
-/*** Popups ***/
-/* Tooltips */
-.popup.tiny.inverted {
-	background: var(--color-body);
-	color: var(--color-text);
-	box-shadow: var(--lt-shadowDefault) !important;
-	border: 1px solid var(--color-secondary);
-	pointer-events: none;
-	z-index: 9999999;
-	&::before {
-		background: var(--color-body) !important;
-		z-index: -99999 !important;
-		border-color: var(--color-secondary) !important;
-	}
-}
-.ui.left.popup::before {
-	border: 0;
-	border-top: 1px solid;
-	border-right: 1px solid;
-}
-.ui.right.popup::before {
-	border: 0;
-	border-left: 1px solid;
-	border-bottom: 1px solid;
-}
-.ui.top.popup::before {
-	border: 0;
-	border-right: 1px solid;
-	border-bottom: 1px solid;
-}
-.ui.bottom.popup::before {
-	border: 0;
-	border-top: 1px solid;
-	border-left: 1px solid;
-}
-
-
-.settings > .ui.container {
-	max-width: 1150px !important;
-}
-
-
-
-
-
-/** Other Elements **/
-
-// Filter buttons & New Issue buttons on mobile
-.ui.two.column.stackable.grid > .column {
-	width: auto !important;
-	flex-grow: 1;
-}
-.ui.compact.tiny.menu {
-	flex-grow: 1;
-	a {
-		flex-grow: 1;
-		justify-content: center;
-	}
-}
-
-/* Better center content */
-.page-content:not(.home) > .middle {
-	padding: calc(4vw + 1rem) 4vw !important;
-	width: 100% !important;
-	& > .column {
-		padding: 0 !important;
-	}
-}
-
-
-/* No Script Message */
-.full.height > span[style="display: inline !important;"]:first-child {
-	margin: auto;
-	line-height: 40px;
-	padding: 30px;
-	text-align: center;
-	&::before {
-		content: "";
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		height: 40px;
-		background: var(--color-navbar);
-		border-bottom: 1px solid var(--color-secondary);
-		z-index: -1;
-	}
-
-	/* Remove stuff that isn't needed when JS is disabled */
-	& ~ .page-content {
-		#app, #dashboard-repo-list, #user-heatmap, #user-heatmap + .divider {
-			display: none !important;
-		}
-		.dashboard-navbar {
-			bottom: unset !important;
-			top: 10px !important;
-			align-self: flex-start !important;
-			padding-top: 10px;
-		}
-	}
-
-}
-
-// Make heatmap not smoll on smoll screens
-#user-heatmap {
-	overflow: auto hidden;
-	justify-content: flex-start;
-	max-width: 900px;
-	margin: auto;
-	align-items: stretch;
-	.vch__wrapper {
-		min-width: 600px;
-	}
-}
-
-/* Bold repo name, not author*/
-.repo-title a:nth-last-child(2) {
-	font-weight: 600 !important;
-}
-
-/* Better labels */
-.label:not(.basic) {
-	border-radius: 100px !important;
-	padding: 4px 8px !important;
-	font-weight: 700;
-	align-items: center;
-	justify-content: center;
-	min-width: 24px !important;
-	display: inline-flex;
-	&.sha > .detail { /* Fix SHA Padding */
-		margin-left: 6px !important;
-	}
-	svg {
-		margin-right: 4px;
-	}
-}
-
-
-
-/* Alerts */
-.alert-primary.p-10 {
-	border: 0 !important;
-	padding: 20px !important;
-	.close {
-		// padding: 10px;
-		span {
-			font-size: 1.7em;
-			font-weight: 200;
-			padding-right: 6px;
-		}
-	}
-	h4 {
-		margin-right: 1.7em;
-		font-weight: 600;
-	}
-}
-
-
-/*** Menu's ***/
-.ui.tabular.menu, .ui.tight.menu {
-	position: relative;
-	flex-direction: row !important;
-	flex-wrap: nowrap !important;
-	overflow: auto hidden !important;
-	scrollbar-width: thin;
-	padding-bottom: 2px;
-	scrollbar-color:var(--color-primary) var(--color-secondary);
-	border-bottom: 1px solid var(--color-secondary) !important;
-	&.ui.tight.menu > .item {
-		width: auto !important;
-		border-bottom-width: 0px !important;
-		position: relative !important;
-		padding: .85714286em 1.14285714em;
-		&::before {
-			content: "" !important;
-			position: absolute !important;
-			bottom: 0 !important;
-			left: 20px !important;
-			right: 20px !important;
-			top: unset !important;
-			width: unset !important;
-			height: 2px !important;
-			opacity: .7;
-			border-radius: 4px 4px 0 0;
-			background: none;
-			display: flex !important;
-			transition: left 2s;
-		}
-		&.active::before {
-			background-color: var(--color-primary) !important;
-			left: 0 !important;
-			right: 0 !important;
-		}
-	}
-}
-.ui.tabular.menu {
-	border-bottom: 0 !important;
-	position: relative;
-	&::before {
-		content: "";
-		position: absolute;
-		bottom: 1px;
-		left: 0;
-		right: 0;
-		z-index: -1;
-		border-top: 1px solid var(--color-secondary);
-	}
-}
-.ui.tabular.menu:not(.borderless) > .item {
-	width: auto !important;
-	padding: 16px 24px;
-	min-width: 70px;
-	justify-content: center;
-	position: relative;
-	svg {
-		margin-right: 10px !important;
-	}
-	&.active {
-		border-radius: 10px 10px 0 0 !important;
-		z-index: 1;
-	}
-	&.active::after {
-		content: "" !important;
-		position: absolute;
-		width: 6px;
-		height: 6px;
-		bottom: 1px;
-		right: -7px;
-		border-bottom-left-radius: 100px;
-		box-shadow: -1px 1px 0 0px var(--color-secondary), -3px 3px 0px 2px var(--color-body) ;
-
-	}
-	&.active::before {
-		all: unset;
-		content: "" !important;
-		position: absolute;
-		width: 6px;
-		height: 6px;
-		bottom: 1px;
-		left: -7px;
-		border-bottom-right-radius: 100px;
-		box-shadow: 1px 1px 0 0px var(--color-secondary), 3px 3px 0px 2px var(--color-body) ;
-		display: unset !important;
-	}
-	&.active:first-child {
-		&::before {
-			content: none !important;
-		}
-	}
-}
-
-// That menu right below the Header
-.ui.secondary.pointing.menu {
-	background: none !important;
-	.new-menu-inner {
-		width: 1150px;
-		padding: 0 20px;
-	}
-	.item {
-		// font-weight: 600;
-		border: none;
-	}
-	.active {
-		position: relative;
-		&::before {
-			all: unset;
-			content: "";
-			position: absolute;
-			left: 0;
-			right: 0;
-			bottom: 0;
-			height: 2px;
-			background-color: var(--color-primary) !important;
-			display: flex !important;
-			opacity: .7;
-		}
-	}
-	.item:last-child {
-		padding-right:  1.14286em !important;
-	}
-	&::after {
-		content: unset !important;
-	}
-}
-
-.repository .filter.menu .menu {
-	max-height: 80vh;
-	width: max-content !important;
-	.info {
-		width: 100% !important;
-		padding: .8em !important;
-		line-height: 1.2em;
-		white-space: normal !important;
-	}
-}
-
-
-
-
-
-
-/*** Body ***/
-html {
-	scroll-behavior: smooth;
-	scroll-snap-type: y mandatory;
-	scrollbar-width: auto !important;
-}
-.full.height {
-	padding-bottom: 30px;
-}
-
-/*** Header ***/
-.following.bar {
-	--min-height: 60px;
-	background: none !important;
-	border-bottom: 1px solid var(--color-secondary) !important;
-	background-color: var(--color-navbar) !important;
-	position: relative;
-	min-height: var(--min-height);
-	align-items: center;
-	#navbar {
-		padding: 0 calc(18px + 1%) !important;
-		background: none !important;
-		max-width: 100rem;
-		transition: padding 1s;
-		min-height: var(--min-height) !important;
-		margin: auto;
-
-
-		& > .item:not(.brand), & > .right > .item {
-			color: var(--color-text-dark) !important;
-			font-size: 1rem !important;
-			font-weight: 600;
-
-			padding: 0 calc(0px + 1%);
-			height: calc(var(--min-height) + 1px) !important;
-			margin: 0 !important;
-			border-radius: 0;
-			border-top: 1px solid transparent;
-			border-bottom: 1px solid transparent;
-			margin-bottom: -1px !important;
-			background: none !important;
-			box-sizing: border-box;
-			transition: border .5s, padding .7s;
-			& > span {
-				height: 100%;
-				display: flex;
-				align-items: center;
-			}
-			&:hover, &.active, &:focus {
-				border-bottom: 1px solid var(--color-primary);
-				transition: border .1s;
-				outline: none;
-			}
-		}
-		.item.brand {
-			padding: 0 !important;
-			min-height: var(--min-height) !important;
-			// margin-right: calc(-30px + 2%)!important;
-		}
-		.item.brand a {
-			width: 35px;
-			height: 35px;
-			margin-right: 20px;
-			background-position: center;
-			img {
-				width: 100%;
-				height: 100%;
-			}
-		}
-		.right {
-			position: sticky;
-			right: 1%;
-			background-color: var(--color-navbar);
-			box-shadow: 100px 0px 0 var(--color-navbar);
-			width: 100%;
-			min-width: max-content;
-			justify-content: flex-end;
-			& > .item {
-				padding: 0 10px;
-				& > .text {
-					display: flex;
-					align-items: center;
-					span:not(.fitted) {
-						margin-left: 10px;
-					}
-					img ~ .fitted {
-						margin-left: 4px;
-					}
-				}
-			}
-		}
-	}
-}
+@import "common.styl"
+@import "layouts.styl"
+@import "animations.styl"
+@import "others/noscript.styl"
+@import "others/tweaks.styl"
+@import "components/button.styl"
+@import "components/labels.styl"
+@import "components/inputs.styl"
+@import "components/popups.styl"
+@import "components/alerts.styl"
+@import "components/menus.styl"
+@import "parts/header.styl"
 
 /* Page content when width is larger than 850px */
 @media  only screen and (min-width: 850px) {
@@ -631,61 +102,6 @@ html {
 					&::before {
 						content: unset !important;
 					}
-					// .item {
-					// 	display: flex;
-					// 	flex-direction: column;
-					// 	text-align: center;
-					// 	padding-top: 12px;
-					// 	padding-bottom: 18px;
-					// 	position: relative;
-					// 	background: none;
-					// 	color: var(--color-text);
-					// 	opacity: .7;
-					// 	border-radius: 12px !important;
-					// 	svg {
-					// 		margin: 0;
-					// 		width: 22px;
-					// 		height: 22px;
-					// 		max-width: unset !important;
-					// 		margin-bottom: 10px;
-					// 		margin-right: 0 !important;
-					// 		overflow: visible;
-					// 		order: -2;
-					// 	}
-					// 	.label {
-					// 		margin: 0 !important;
-					// 		margin-top: -3px !important;
-					// 		margin-bottom: 6px !important;
-					// 		order: -1;
-					// 		position: relative;
-					// 	}
-					// 	&.active {
-					// 		border: none;
-					// 		opacity: 1;
-					// 		&::before {
-					// 			content: unset !important;
-					// 		}
-					// 		&::after {
-					// 			all: unset;
-					// 			content: "";
-					// 			position: absolute;
-					// 			top: 2px;
-					// 			left: -5px;
-					// 			right: -5px;
-					// 			bottom: 5px;
-					// 			background: var(--color-primary);
-					// 			opacity: .1;
-					// 			border-radius: 12px !important;
-					// 			z-index: -1;
-					// 		}
-					// 	}
-					// 	&:hover {
-					// 		opacity: .9 !important;
-					// 	}
-					// }
-					// .right.menu {
-					// 	display: contents;
-					// }
 				}
 			}
 			.divider {
@@ -1021,7 +437,7 @@ html {
 
 				border-radius: var(--base-border-radius);
 				input {
-					width: 0px !important;
+					width: 0 !important;
 					min-width: unset;
 					flex-grow: 1;
 					border: 0;
@@ -1144,7 +560,7 @@ html {
 				background: var(--color-primary);
 				opacity: 0;
 			}
-			tr:hover td:nth-child(2)::before, tr:focus-within td:nth-child(2)::before {
+			tr:hover, td:nth-child(2)::before, tr:focus-within td:nth-child(2)::before {
 				opacity: .1;
 			}
 
@@ -1279,8 +695,6 @@ html {
 			top: unset;
 			align-self: flex-end;
 		}
-
-
 	}
 
 	/* Move the repo stats to the side, only when page width larger than 1000px */
@@ -1361,7 +775,7 @@ html {
 						padding-top: 1rem;
 					}
 					.list,
-					&.horizontal, // Activies buttons
+					&.horizontal // Activities buttons
 					{
 						flex-direction: column;
 						background: none !important;
@@ -1420,7 +834,6 @@ html {
 			}
 		}
 	}
-
 }
 
 /* ISSUES LIST / MILESTONES LIST, mostly issue's list though. */
@@ -1612,7 +1025,7 @@ html {
 							margin-top: 0;
 							background: var(--color-body);
 							position: sticky;
-							top: 0px;
+							top: 0;
 							z-index: 3;
 							box-shadow: 0 -5px 5px var(--color-body);
 						}
@@ -1668,7 +1081,6 @@ html {
 			width: 500px !important;
 			max-width: 100%;
 			.ui.secondary.stackable.pointing.tight.menu {
-				margin: 0 -2px;
 				margin: 0 -20px;
 				margin-left: -40px;
 				margin-bottom: 1.5rem;
@@ -1683,7 +1095,7 @@ html {
 					min-width: 40px;
 					display: block;
 					position: sticky;
-					left: 0px;
+					left: 0;
 					background: linear-gradient(to right, var(--color-body), transparent);
 					z-index: 1;
 				}
@@ -1923,7 +1335,7 @@ html {
 			display: contents;
 			& > p:first-child {
 				padding-top: 4px;
-				margin-bottom: 0px;
+				margin-bottom: 0;
 			}
 			& > * {
 				grid-column: 1 / span 4;
@@ -1967,7 +1379,7 @@ html {
 					height: 100%;
 					position: sticky;
 					display: flex;
-					right: 0px;
+					right: 0;
 					background: linear-gradient(to right, transparent, var(--color-box-body));
 					pointer-events: none;
 				}
@@ -2048,7 +1460,7 @@ html {
 			& > .item, & > .right > .item {
 
 				flex-direction: column;
-				margin: 0px !important;
+				margin: 0 !important;
 				text-align: center;
 				flex-grow: 1;
 				display: flex !important;
@@ -2061,7 +1473,7 @@ html {
 				text-indent: -.35em !important;
 
 				& > .dropdown, .button {
-					text-indent: 0px !important;
+					text-indent: 0 !important;
 				}
 				span {
 					text-align: center;
@@ -2210,13 +1622,11 @@ html {
 			bottom: -15px;
 			width: 200vw;
 			height: calc(100vh + 25px);
-			right: calc(100% - 15px);
 			right: 100%;
 			z-index: -100;
 			background: var(--color-light);
 			box-shadow: 200vw 0 var(--color-body),
 						inset 0 -8px 8px rgba(0,0,0,0.07);
-			// border-right: 1px solid var(--color-secondary);
 		}