UI: Fancier load animations

css/Pages/Home.css

@@ -10,6 +10,12 @@
 	width: 192px;
 	height: 192px;
 	object-fit: cover;
+	transition: transform .4s, opacity .4s;
+}
+
+.appicon.notloaded {
+	transform: scale(.8);
+	opacity: 0;
 }
 
 #theme-switcher i::after {

css/Pages/Pages.css

@@ -1,3 +1,82 @@
 @import url(Home.css);
 @import url(Services.css);
 @import url(Settings.css);
+
+.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, transform .4s, backdrop-filter .6s;
+}
+
+.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 i {
+	margin: 4px;
+	width: 56px;
+	height: 56px;
+	cursor: pointer;
+	border-radius: 20px;
+	transition: background .2s;
+}
+
+.back i:hover {
+	background: var(--hover);
+}
+
+.back i: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 i {
+	margin-top: 1px;
+	margin-right: 10px;
+}
+
+.header .text {
+	font-size: 26px;
+}

css/Pages/Settings.css

@@ -12,7 +12,7 @@
 	border-radius: 16px;
 	align-items: center;
 	text-align: left;
-	transition: background .4s;
+	transition: background .3s;
 }
 
 .setting i {
@@ -37,7 +37,7 @@
 	background: #8886;
 	border-radius: 100px;
 	margin: 0 4px 0 auto;
-	transition: border .4s, background .4s;
+	transition: border .4s, background .3s;
 }
 
 .setting .switch:after {
@@ -50,7 +50,7 @@
 	top: 50%;
 	border-radius: 10px;
 	transform: translateY(-50%);
-	transition: left .2s, background .4s;
+	transition: left .2s, background .3s;
 }
 
 .setting.checked .switch {