style: toolbar fade in

ubiquity · Dec 1, 2023 · e27d0ef · e27d0ef
1 parent cc4bc66
commit e27d0ef
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/src/home/display-github-user-information.ts b/src/home/display-github-user-information.ts
@@ -29,4 +29,5 @@ export function displayGitHubUserInformation(gitHubUser: GitHubUser) {
   authenticated.appendChild(div);
   toolbar.appendChild(authenticated);
   toolbar.setAttribute("data-authenticated", "true");
+  toolbar.classList.add("ready");
 }
diff --git a/src/home/github-login-button.ts b/src/home/github-login-button.ts
@@ -25,5 +25,8 @@ export function renderGitHubLoginButton() {
   button.id = "github-login-button";
   button.textContent = "Login with GitHub";
   button.addEventListener("click", gitHubLoginButton);
-  document.getElementById("toolbar")?.appendChild(button);
+  const toolbar = document.getElementById("toolbar");
+  if (!toolbar) throw new Error("toolbar not found");
+  toolbar.appendChild(button);
+  toolbar.classList.add("ready");
 }
diff --git a/static/style/style.css b/static/style/style.css
@@ -1,9 +1,13 @@
+:root {
+  --grid-background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABYWlDQ1BrQ0dDb2xvclNwYWNlRGlzcGxheVAzAAAokWNgYFJJLCjIYWFgYMjNKykKcndSiIiMUmB/yMAOhLwMYgwKicnFBY4BAT5AJQwwGhV8u8bACKIv64LMOiU1tUm1XsDXYqbw1YuvRJsw1aMArpTU4mQg/QeIU5MLikoYGBhTgGzl8pICELsDyBYpAjoKyJ4DYqdD2BtA7CQI+whYTUiQM5B9A8hWSM5IBJrB+API1klCEk9HYkPtBQFul8zigpzESoUAYwKuJQOUpFaUgGjn/ILKosz0jBIFR2AopSp45iXr6SgYGRiaMzCAwhyi+nMgOCwZxc4gxJrvMzDY7v////9uhJjXfgaGjUCdXDsRYhoWDAyC3AwMJ3YWJBYlgoWYgZgpLY2B4dNyBgbeSAYG4QtAPdHFacZGYHlGHicGBtZ7//9/VmNgYJ/MwPB3wv//vxf9//93MVDzHQaGA3kAFSFl7jXH0fsAAAA4ZVhJZk1NACoAAAAIAAGHaQAEAAAAAQAAABoAAAAAAAKgAgAEAAAAAQAAABigAwAEAAAAAQAAABgAAAAAwf1XlwAAACNJREFUSA3t0IEAAAAMBKFHm7/UTaQQWnXDgAEDBgwYMGDgAXaJAz4RVVHYAAAAAElFTkSuQmCC");
+}
+
 html,
 body {
   background-color: #06061aff;
   margin: 0;
   padding: 0;
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABYWlDQ1BrQ0dDb2xvclNwYWNlRGlzcGxheVAzAAAokWNgYFJJLCjIYWFgYMjNKykKcndSiIiMUmB/yMAOhLwMYgwKicnFBY4BAT5AJQwwGhV8u8bACKIv64LMOiU1tUm1XsDXYqbw1YuvRJsw1aMArpTU4mQg/QeIU5MLikoYGBhTgGzl8pICELsDyBYpAjoKyJ4DYqdD2BtA7CQI+whYTUiQM5B9A8hWSM5IBJrB+API1klCEk9HYkPtBQFul8zigpzESoUAYwKuJQOUpFaUgGjn/ILKosz0jBIFR2AopSp45iXr6SgYGRiaMzCAwhyi+nMgOCwZxc4gxJrvMzDY7v////9uhJjXfgaGjUCdXDsRYhoWDAyC3AwMJ3YWJBYlgoWYgZgpLY2B4dNyBgbeSAYG4QtAPdHFacZGYHlGHicGBtZ7//9/VmNgYJ/MwPB3wv//vxf9//93MVDzHQaGA3kAFSFl7jXH0fsAAAA4ZVhJZk1NACoAAAAIAAGHaQAEAAAAAQAAABoAAAAAAAKgAgAEAAAAAQAAABigAwAEAAAAAQAAABgAAAAAwf1XlwAAACNJREFUSA3t0IEAAAAMBKFHm7/UTaQQWnXDgAEDBgwYMGDgAXaJAz4RVVHYAAAAAElFTkSuQmCC");
+  background-image: var(--grid-background-image);
 }
 * {
   font-family: "Proxima Nova", "Ubiquity Nova", sans-serif;
@@ -234,6 +238,7 @@ button:active {
   /* text-align: center; */
   /* align-items: stretch; */
   justify-content: center;
+  -webkit-backdrop-filter: blur(4px);
 }
 #toolbar > * {
   /* justify-content: center; */
@@ -268,4 +273,11 @@ button:active {
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
+  opacity: 0;
+  transition: 1s opacity ease-in-out;
+  background-image: var(--grid-background-image);
+}
+
+#toolbar.ready {
+  opacity: 1;
 }