css: Split into multiple files

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