css: Split into multiple files

css/Background.css

@@ -0,0 +1,33 @@
+#background img {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	object-fit: cover;
+	transition: transform .4s, opacity .4s !important;
+}
+
+#background.scaled img {
+	transform: scale(var(--scale-factor));
+}
+
+body #background img {
+	opacity: 1;
+}
+
+body:not(.dark) #background img:last-child,
+body.dark #background img:first-child {
+	opacity: 0;
+}
+
+body.dark #background:not(.scaled) img:first-child,
+body:not(.dark) #background:not(.scaled) img:last-child {
+	transform: scale(var(--scale-factor));
+}
+
+body.dark #background.scaled img:first-child,
+body:not(.dark) #background.scaled img:last-child {
+	transform: none;
+}

css/Flags/Dark.css

@@ -0,0 +1,11 @@
+body.dark {
+	--color: #EEE;
+	--color2: #EEE9;
+	--background: #1118;
+	--bg2: #0008;
+	--hover: #FFF1;
+}
+
+body.dark #theme-switcher .icon::after {
+	content: "dark_mode"
+}

css/Flags/Flags.css

@@ -0,0 +1,19 @@
+@import url(Dark.css);
+
+body {
+	--color: #222;
+	--color2: #2229;
+	--background: #EEE8;
+	--bg2: #FFF8;
+	--hover: #0001;
+	--scale-factor: 1.15;
+	--blur: blur(16px);
+}
+
+body.noblur {
+	--blur: 0;
+}
+
+body.noanim * {
+	transition: none !important;
+}

css/PageManager.css

@@ -0,0 +1,78 @@
+.page {
+	position: fixed;
+	top: 0;
+	left: 50%;
+	width: 100%;
+	max-width: 920px;
+	height: 100vh;
+	transform: translateX(-50%);
+	overflow-y: scroll;
+	transition: top .4s, opacity .4s, visibility .4s, color .3s;
+}
+
+.page:not(.current) {
+	top: 240px;
+	visibility: hidden;
+	opacity: 0;
+}
+
+.wrapper {
+	box-shadow: 2px 2px 8px #0003;
+	background: var(--background);
+	padding: 3px;
+	backdrop-filter: var(--blur);
+	border-radius: 24px;
+	margin: -4px 12px 16px;
+	text-align: center;
+	overflow: hidden;
+	min-width: 340px;
+	transition: background .2s;
+}
+
+.back {
+	box-shadow: 2px 2px 8px #0002;
+	position: relative;
+	width: 64px;
+	height: 64px;
+	border-radius: 24px;
+	background: var(--background);
+	margin: 20px;
+	backdrop-filter: var(--blur);
+	transition: background .2s;
+}
+
+.back .icon {
+	margin: 4px;
+	width: 56px;
+	height: 56px;
+	cursor: pointer;
+	border-radius: 20px;
+	transition: background .2s;
+}
+
+.back .icon:hover {
+	background: var(--hover);
+}
+
+.back .icon:after {
+	content: "chevron_left";
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	margin: 20px 20px 16px;
+}
+
+.header .icon {
+	margin-top: 1px;
+	margin-right: 10px;
+}
+
+.header .text {
+	font-size: 26px;
+}

css/Pages/Home.css

@@ -0,0 +1,75 @@
+.main {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+
+.appicon {
+	width: 192px;
+	height: 192px;
+	object-fit: cover;
+}
+
+#theme-switcher .icon::after {
+	content: "light_mode"
+}
+
+.home.page {
+	top: 50%;
+	left: 50%;
+	width: 100%;
+	height: auto;
+	overflow: hidden;
+	transform: translate(-50%, -50%);
+}
+
+.home.page:not(.current) {
+	top: calc(50% - 64px);
+}
+
+.home .wrapper {
+	box-shadow: none;
+	background: transparent;
+	backdrop-filter: none;
+}
+
+.appname {
+	font-size: 48px;
+}
+
+.appdesc {
+	opacity: .6;
+	margin: 2px 12px;
+}
+
+.buttons {
+	box-shadow: 2px 2px 8px #0002;
+	display: flex;
+	margin: 16px auto 0;
+	backdrop-filter: var(--blur);
+	border-radius: 24px;
+	max-width: 480px;
+	background: var(--background);
+	padding: 2px;
+	justify-content: space-between;
+	transition: background .3s;
+}
+
+.buttons > div {
+	padding: 16px;
+	margin: 2px;
+	cursor: pointer;
+	border-radius: 20px;
+	width: 100%;
+	transition: background .2s;
+}
+
+.buttons > div:hover {
+	background: var(--hover);
+}
+
+.buttons .text {
+	margin-top: -2px;
+}

css/Pages/Pages.css

@@ -0,0 +1,3 @@
+@import url(Home.css);
+@import url(Services.css);
+@import url(Settings.css);

css/Pages/Services.css

@@ -0,0 +1,52 @@
+.boxes {
+	display: flex;
+	flex: 1 1 0;
+	flex-wrap: wrap;
+}
+
+.box {
+	min-width: 292px;
+	flex: 1;
+	margin: 2px;
+	border-radius: 20px;
+	padding: 8px;
+	display: flex;
+	align-items: center;
+	text-align: left;
+	text-decoration: none;
+	color: inherit;
+	transition: background .2s;
+}
+
+.box:hover {
+	background: var(--hover);
+}
+
+.box .icon {
+	font-size: 24px;
+	padding: 20px;
+	background: hsl(var(--color), 100%, 89%);
+	color: hsl(var(--color), 100%, 35%);
+	border-radius: 100px;
+	margin: 2px 12px 2px 2px;
+}
+
+a.box {
+	cursor: pointer;
+	padding: 14px;
+}
+
+.box img {
+	width: 64px;
+	height: 64px;
+	object-fit: cover;
+	margin-right: 12px;
+}
+
+.box .name {
+	font-size: 18px;
+}
+
+.box .desc {
+	opacity: .6;
+}

css/Pages/Settings.css

@@ -0,0 +1,72 @@
+.settings {
+	margin: 32px auto;
+	max-width: 800px;
+}
+
+.setting {
+	background: var(--bg2);
+	margin: 8px;
+	padding: 20px;
+	display: flex;
+	cursor: pointer;
+	border-radius: 16px;
+	align-items: center;
+	text-align: left;
+	transition: background .4s;
+}
+
+.setting .icon {
+	margin-right: 14px;
+	font-size: 28px;
+}
+
+.setting .name {
+	font-size: 16px;
+}
+
+.setting .desc {
+	opacity: .6;
+	margin-right: 16px;
+}
+
+.setting .switch {
+	position: relative;
+	width: 44px;
+	min-width: 44px;
+	height: 24px;
+	background: #8886;
+	border-radius: 100px;
+	margin: 0 4px 0 auto;
+	transition: border .4s, background .4s;
+}
+
+.setting .switch:after {
+	content: "";
+	position: absolute;
+	width: 16px;
+	height: 16px;
+	background: var(--color);
+	left: 4px;
+	top: 50%;
+	border-radius: 10px;
+	transform: translateY(-50%);
+	transition: left .2s, background .4s;
+}
+
+.setting.checked .switch {
+	background-color: #68F;
+	border-color: #68F;
+}
+
+.setting.checked .switch:after {
+	left: calc(100% - 20px);
+}
+
+.warn {
+	margin: 24px 0 -8px;
+	color: #F60;
+}
+
+.warn.hidden {
+	display: none;
+}

css/main.css

@@ -1,45 +1,11 @@
-@import url(../font/quicksand/quicksand.css);
+@import url(../fonts/Quicksand/Quicksand.css);
+@import url(../fonts/MaterialSymbolsRounded/MaterialSymbolsRounded.css);
 
-@font-face {
+@import url(Flags/Flags.css);
-	font-family: 'Material Symbols Rounded';
+@import url(PageManager.css);
-	font-style: normal;
+@import url(Background.css);
-	font-weight: 500;
+@import url(Pages/Pages.css);
-	src: url(../font/MaterialSymbolsRounded.woff2) format('woff2');
-}
 
-body {
-	--color: #222;
-	--color2: #2229;
-	--background: #EEE8;
-	--bg2: #FFF8;
-	--hover: #0001;
-	--scale-factor: 1.15;
-	--blur: blur(16px);
-}
-
-body.dark {
-	--color: #EEE;
-	--color2: #EEE9;
-	--background: #1118;
-	--bg2: #0008;
-	--hover: #FFF1;
-}
-
-#theme-switcher .icon::after {
-	content: "light_mode"
-}
-
-body.dark #theme-switcher .icon::after {
-	content: "dark_mode"
-}
-
-body.noblur {
-	--blur: 0;
-}
-
-body.noanim * {
-	transition: none !important;
-}
 
 body {
 	background: #000;
@@ -55,330 +21,3 @@ body {
 ::-webkit-scrollbar {
 	display: none;
 }
-
-.icon {
-	font-family: 'Material Symbols Rounded';
-	font-weight: normal;
-	font-style: normal;
-	font-size: 24px;
-	line-height: 1;
-	letter-spacing: normal;
-	text-transform: none;
-	display: inline-block;
-	white-space: nowrap;
-	word-wrap: normal;
-	direction: ltr;
-	-webkit-font-feature-settings: 'liga';
-	-webkit-font-smoothing: antialiased;
-}
-
-#background img {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	overflow: hidden;
-	object-fit: cover;
-	transition: transform .4s, opacity .4s !important;
-}
-
-#background.scaled img {
-	transform: scale(var(--scale-factor));
-}
-
-body #background img {
-	opacity: 1;
-}
-
-body:not(.dark) #background img:last-child,
-body.dark #background img:first-child {
-	opacity: 0;
-}
-
-body.dark #background:not(.scaled) img:first-child,
-body:not(.dark) #background:not(.scaled) img:last-child {
-	transform: scale(var(--scale-factor));
-}
-
-body.dark #background.scaled img:first-child,
-body:not(.dark) #background.scaled img:last-child {
-	transform: none;
-}
-
-.main {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-}
-
-.appicon {
-	width: 192px;
-	height: 192px;
-	object-fit: cover;
-}
-
-.page {
-	position: fixed;
-	top: 0;
-	left: 50%;
-	width: 100%;
-	max-width: 920px;
-	height: 100vh;
-	transform: translateX(-50%);
-	overflow-y: scroll;
-	transition: top .4s, opacity .4s, visibility .4s, color .3s;
-}
-
-.home.page {
-	top: 50%;
-	left: 50%;
-	width: 100%;
-	height: auto;
-	overflow: hidden;
-	transform: translate(-50%, -50%);
-}
-
-.page:not(.current) {
-	top: 240px;
-	visibility: hidden;
-	opacity: 0;
-}
-
-.home.page:not(.current) {
-	top: calc(50% - 64px);
-}
-
-.wrapper {
-	box-shadow: 2px 2px 8px #0003;
-	background: var(--background);
-	padding: 3px;
-	backdrop-filter: var(--blur);
-	border-radius: 24px;
-	margin: -4px 12px 16px;
-	text-align: center;
-	overflow: hidden;
-	min-width: 340px;
-	transition: background .2s;
-}
-
-.home .wrapper {
-	box-shadow: none;
-	background: transparent;
-	backdrop-filter: none;
-}
-
-.appname {
-	font-size: 48px;
-}
-
-.appdesc {
-	opacity: .6;
-	margin: 2px 12px;
-}
-
-.buttons {
-	box-shadow: 2px 2px 8px #0002;
-	display: flex;
-	margin: 16px auto 0;
-	backdrop-filter: var(--blur);
-	border-radius: 24px;
-	max-width: 480px;
-	background: var(--background);
-	padding: 2px;
-	justify-content: space-between;
-	transition: background .3s;
-}
-
-.buttons > div {
-	padding: 16px;
-	margin: 2px;
-	cursor: pointer;
-	border-radius: 20px;
-	width: 100%;
-	transition: background .2s;
-}
-
-.buttons > div:hover {
-	background: var(--hover);
-}
-
-.buttons .text {
-	margin-top: -2px;
-}
-
-.back {
-	box-shadow: 2px 2px 8px #0002;
-	position: relative;
-	width: 64px;
-	height: 64px;
-	border-radius: 24px;
-	background: var(--background);
-	margin: 20px;
-	backdrop-filter: var(--blur);
-	transition: background .2s;
-}
-
-.back .icon {
-	margin: 4px;
-	width: 56px;
-	height: 56px;
-	cursor: pointer;
-	border-radius: 20px;
-	transition: background .2s;
-}
-
-.back .icon:hover {
-	background: var(--hover);
-}
-
-.back .icon:after {
-	content: "chevron_left";
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-}
-
-.boxes {
-	display: flex;
-	flex: 1 1 0;
-	flex-wrap: wrap;
-}
-
-.box {
-	min-width: 292px;
-	flex: 1;
-	margin: 2px;
-	border-radius: 20px;
-	padding: 8px;
-	display: flex;
-	align-items: center;
-	text-align: left;
-	text-decoration: none;
-	color: inherit;
-	transition: background .2s;
-}
-
-.box:hover {
-	background: var(--hover);
-}
-
-.box .icon {
-	font-size: 24px;
-	padding: 20px;
-	background: hsl(var(--color), 100%, 89%);
-	color: hsl(var(--color), 100%, 35%);
-	border-radius: 100px;
-	margin: 2px 12px 2px 2px;
-}
-
-a.box {
-	cursor: pointer;
-	padding: 14px;
-}
-
-.box img {
-	width: 64px;
-	height: 64px;
-	object-fit: cover;
-	margin-right: 12px;
-}
-
-.box .name {
-	font-size: 18px;
-}
-
-.box .desc {
-	opacity: .6;
-}
-
-.header {
-	display: flex;
-	align-items: center;
-	margin: 20px 20px 16px;
-}
-
-.header .icon {
-	margin-top: 1px;
-	margin-right: 10px;
-}
-
-.header .text {
-	font-size: 26px;
-}
-
-.settings {
-	margin: 32px auto;
-	max-width: 800px;
-}
-
-.setting {
-	background: var(--bg2);
-	margin: 8px;
-	padding: 20px;
-	display: flex;
-	cursor: pointer;
-	border-radius: 16px;
-	align-items: center;
-	text-align: left;
-	transition: background .4s;
-}
-
-.setting .icon {
-	margin-right: 14px;
-	font-size: 28px;
-}
-
-.setting .name {
-	font-size: 16px;
-}
-
-.setting .desc {
-	opacity: .6;
-	margin-right: 16px;
-}
-
-.setting .switch {
-	position: relative;
-	width: 44px;
-	min-width: 44px;
-	height: 24px;
-	background: #8886;
-	border-radius: 100px;
-	margin: 0 4px 0 auto;
-	transition: border .4s, background .4s;
-}
-
-.setting .switch:after {
-	content: "";
-	position: absolute;
-	width: 16px;
-	height: 16px;
-	background: var(--color);
-	left: 4px;
-	top: 50%;
-	border-radius: 10px;
-	transform: translateY(-50%);
-	transition: left .2s, background .4s;
-}
-
-.setting.checked .switch {
-	background-color: #68F;
-	border-color: #68F;
-}
-
-.setting.checked .switch:after {
-	left: calc(100% - 20px);
-}
-
-.warn {
-	margin: 24px 0 -8px;
-	color: #F60;
-}
-
-.warn.hidden {
-	display: none;
-}

fonts/MaterialSymbolsRounded/MaterialSymbolsRounded.css

@@ -0,0 +1,22 @@
+@font-face {
+	font-family: 'Material Symbols Rounded';
+	font-style: normal;
+	font-weight: 500;
+	src: url(MaterialSymbolsRounded.woff2) format('woff2');
+}
+
+.icon {
+	font-family: 'Material Symbols Rounded';
+	font-weight: normal;
+	font-style: normal;
+	font-size: 24px;
+	line-height: 1;
+	letter-spacing: normal;
+	text-transform: none;
+	display: inline-block;
+	white-space: nowrap;
+	word-wrap: normal;
+	direction: ltr;
+	-webkit-font-feature-settings: 'liga';
+	-webkit-font-smoothing: antialiased;
+}

fonts/Quicksand/Quicksand.css

@@ -5,6 +5,7 @@
 	font-weight: 500;
 	src: local("Quicksand Medium"), local("Quicksand-Medium"), url(quicksand-medium.woff2) format("woff2");
 }
+
 /* quicksand-bold */
 @font-face {
 	font-family: Quicksand;
@@ -12,4 +13,3 @@
 	font-weight: 700;
 	src: local("Quicksand Bold"), local("Quicksand-Bold"), url(quicksand-bold.woff2) format("woff2");
 }
-