refactor

1 files changed, 57 insertions, 0 deletions

diff --git a/web/public/css/common.css b/web/public/css/common.css
index 05f429f..84aabfc 100644
--- a/web/public/css/common.css
+++ b/web/public/css/common.css
@@ -52,6 +52,8 @@ body {
 }
 
 header {
+	top: 0;
+	position: sticky;
 	height: 3.5rem;
 	background-color: var(--primary);
 	display: flex;
@@ -145,6 +147,10 @@ input:focus {
 	align-items: center;
 }
 
+.nav {
+	position: sticky;
+}
+
 .nav-right {
 	flex: 1;
 	justify-content: flex-end;
@@ -333,6 +339,30 @@ input:focus {
 	border-radius: .5rem;
 	display: flex;
 	flex-direction: column;
+	animation: fadeIn .1s, slideInModal .1s linear;
+}
+
+@keyframes slideInModal {
+	0% {
+		animation-timing-function: ease-in;
+		transform: translate(-50%, -60%);
+	}
+}
+
+@keyframes slideIn {
+	0% {
+		animation-timing-function: ease-out;
+		transform: translate(0, -50%);
+	}
+}
+
+@keyframes fadeIn {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
 }
 
 .modal>form {
@@ -402,3 +432,30 @@ button[type="submit"]:hover {
 	background-color: var(--logo);
 }
 
+#toast-container {
+	position: fixed;
+	top: 4rem;
+	left: 100%;
+	transform: translateX(-110%);
+	margin-top: 1rem;
+	z-index: 10000;
+}
+
+.toast {
+	padding: .75rem;
+	margin: .5rem;
+	border-radius: .5rem;
+	min-width: 15rem;
+	font-family: sfpro;
+	animation: fadeIn .1s, slideIn .25s linear;
+	display: flex;
+	justify-content: space-between;
+}
+
+.toast.error {
+	background-color: var(--error);
+}
+
+.toast.success {
+	background-color: var(--success);
+}