Minor format changes + initial settings page

multistream-alerts/style.css

@@ -40,6 +40,7 @@ html {
 	display: block;
 	position: absolute;
 	width: 100%;
+	height: 100%;
 	padding: calc(2 * var(--margin));
 	box-sizing: border-box;
 }
@@ -84,6 +85,17 @@ html {
 	transition: inherit;
 }
 
+#theContentThatShowsLastInsteadOfFirst {
+	position: absolute;
+	display: block;
+	align-items: center;
+	z-index: 0;
+	position: absolute;
+	left: var(--margin);
+	top: var(--margin);
+	transition: inherit;
+}
+
 #avatar {
 	display: inline;
 	max-width: 100%;
@@ -93,6 +105,15 @@ html {
 	margin-right: 0.75em;
 }
 
+#avatarButItsSmallerThanTheOneFromBeforeForPrettinessPurposes {
+	display: inline;
+	max-width: 100%;
+	height: 2em;
+	filter: drop-shadow(0px 0px 7px rgba(0, 0, 0, 0.5));
+	object-fit: cover;
+	margin-right: 0.75em;
+}
+
 #contents {
 	flex-grow: 1;
 }
@@ -102,6 +123,11 @@ html {
 	font-weight: 600;
 }
 
+#usernameTheSecond {
+	font-size: 1em;
+	font-weight: 600;
+}
+
 #description {
 	font-size: 1em;
 	font-weight: 400;
@@ -121,7 +147,6 @@ html {
 }
 
 #message {
-	position: absolute;
 	width: calc(100% - 2 * var(--margin));
 	z-index: 0;
 	left: var(--margin);
@@ -154,6 +179,78 @@ html {
 	}
 }
 
+@keyframes slideInFromBottom {
+	0% {
+		transform: translateY(100%);
+		opacity: 0;
+	}
+
+	100% {
+		transform: translateY(0);
+		opacity: 1;
+	}
+}
+
+@keyframes slideBackDown {
+	0% {
+		transform: translateY(0);
+		opacity: 1;
+	}
+
+	100% {
+		transform: translateY(100%);
+		opacity: 0;
+	}
+}
+
+@keyframes slideInFromLeft {
+	0% {
+		transform: translateX(-100%);
+		opacity: 0;
+	}
+
+	100% {
+		transform: translateX(0);
+		opacity: 1;
+	}
+}
+
+@keyframes slideBackLeft {
+	0% {
+		transform: translateX(0);
+		opacity: 1;
+	}
+
+	100% {
+		transform: translateX(-100%);
+		opacity: 0;
+	}
+}
+
+@keyframes slideInFromRight {
+	0% {
+		transform: translateX(100%);
+		opacity: 0;
+	}
+
+	100% {
+		transform: translateX(0);
+		opacity: 1;
+	}
+}
+
+@keyframes slideBackRight {
+	0% {
+		transform: translateX(0);
+		opacity: 1;
+	}
+
+	100% {
+		transform: translateX(100%);
+		opacity: 0;
+	}
+}
+
 /*****************/
 /** CARD COLORS **/
 /*****************/