style: branding on toolbar

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

Hide file tree

Showing 3 changed files with 30 additions and 11 deletions.
diff --git a/src/home/display-github-user-information.ts b/src/home/display-github-user-information.ts
@@ -16,14 +16,6 @@ export function displayGitHubUserInformation(gitHubUser: GitHubUser) {
 
   const div = document.createElement("div");
 
-  // const filteredUserInfo = Object.entries(gitHubUser)
-  //   .filter(([key]) => !key.includes("url"))
-  //   .filter(([key]) => !key.includes("_id"))
-  //   .reduce((obj, [key, value]) => {
-  //     obj[key] = value;
-  //     return obj;
-  //   }, {});
-
   div.textContent = gitHubUser.name; // JSON.stringify(filteredUserInfo, null, 2);
 
   authenticated.appendChild(div);

diff --git a/static/index.html b/static/index.html
@@ -8,7 +8,7 @@
   </head>
   <body>
     <div id="issues-container"></div>
-    <div id="toolbar" data-authenticated="false"></div>
+    <div id="toolbar" data-authenticated="false"><div id="branding"><svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 151" fill="currentColor"><path d="M132 41.1c0-2.3-1.3-4.5-3.3-5.7L69.4 1.2c-1-.6-2.1-.9-3.3-.9-1.1 0-2.3.3-3.3.9L3.6 35.4c-2 1.2-3.3 3.3-3.3 5.7v68.5c0 2.3 1.3 4.5 3.3 5.7l59.3 34.2c2 1.2 4.5 1.2 6.5 0l59.3-34.2c2-1.2 3.3-3.3 3.3-5.7V41.1zm-11.9 62.5c0 2.7-1.4 5.2-3.7 6.5l-46.6 27.5c-1.1.7-2.4 1-3.7 1s-2.5-.3-3.7-1l-46.6-27.5c-2.3-1.3-3.7-3.8-3.7-6.5V54.1c0-1.2.6-2.4 1.7-3 1.1-.6 2.3-.6 3.4 0l8 4.7c1.9 1.1 3 3.3 4.4 5.8.3.5.5 1 .8 1.4 3.5 6.3 5.2 13 6.8 19.5 3 11.9 6 24.2 21.3 28.2 5 1.3 10.4 1.3 15.4 0 15.2-4 18.3-16.3 21.3-28.2C96.8 76 98.5 69.3 102 63c.3-.5.5-1 .8-1.4 1.3-2.5 2.5-4.6 4.4-5.8l8-4.7c1-.6 2.3-.6 3.4 0s1.7 1.7 1.7 3v49.5zM62.6 13.7c2.2-1.3 4.9-1.3 7.1 0L110 37.6c1 .6 1.6 1 1.6 2.2 0 1.2-.6 1.9-1.6 2.5l-7.7 4.6c-3.4 2-5.1 5.2-6.6 8.1l-.1.2c-.2.4-.4.7-.6 1.1-3.8 6.8-6.6 14-8.2 20.4C83.6 89.1 82.4 97.3 72 100c-1.9.5-3.9.7-5.8.7-2 0-3.9-.3-5.8-.7C50 97.3 48.7 89.1 45.6 76.6 44 70.2 41.2 63 37.4 56.2c-.2-.3-.4-.7-.6-1l-.1-.3c-1.5-2.8-3.3-6.1-6.6-8.1l-7.7-4.6c-1-.6-1.6-1.3-1.6-2.5s.6-1.6 1.6-2.2l40.2-23.8z"></path></svg><span>Ubiquity DAO | DevPool Directory</span></div></div>
     <script type="module" src="dist/home.js"></script>
   </body>
 </html>
diff --git a/static/style/style.css b/static/style/style.css
@@ -1,7 +1,20 @@
 :root {
   --grid-background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABYWlDQ1BrQ0dDb2xvclNwYWNlRGlzcGxheVAzAAAokWNgYFJJLCjIYWFgYMjNKykKcndSiIiMUmB/yMAOhLwMYgwKicnFBY4BAT5AJQwwGhV8u8bACKIv64LMOiU1tUm1XsDXYqbw1YuvRJsw1aMArpTU4mQg/QeIU5MLikoYGBhTgGzl8pICELsDyBYpAjoKyJ4DYqdD2BtA7CQI+whYTUiQM5B9A8hWSM5IBJrB+API1klCEk9HYkPtBQFul8zigpzESoUAYwKuJQOUpFaUgGjn/ILKosz0jBIFR2AopSp45iXr6SgYGRiaMzCAwhyi+nMgOCwZxc4gxJrvMzDY7v////9uhJjXfgaGjUCdXDsRYhoWDAyC3AwMJ3YWJBYlgoWYgZgpLY2B4dNyBgbeSAYG4QtAPdHFacZGYHlGHicGBtZ7//9/VmNgYJ/MwPB3wv//vxf9//93MVDzHQaGA3kAFSFl7jXH0fsAAAA4ZVhJZk1NACoAAAAIAAGHaQAEAAAAAQAAABoAAAAAAAKgAgAEAAAAAQAAABigAwAEAAAAAQAAABgAAAAAwf1XlwAAACNJREFUSA3t0IEAAAAMBKFHm7/UTaQQWnXDgAEDBgwYMGDgAXaJAz4RVVHYAAAAAElFTkSuQmCC");
 }
-
+#logo {
+  height: 28px;
+  margin-right: 2px;
+}
+#branding {
+  opacity: 0.5;
+  transition: 0.125s opacity ease-in-out;
+}
+#branding:hover {
+  opacity: 1;
+}
+#branding > span {
+  padding: 8px;
+}
 html,
 body {
   background-color: #06061aff;
@@ -239,12 +252,19 @@ button:active {
   /* align-items: stretch; */
   justify-content: center;
   -webkit-backdrop-filter: blur(4px);
+  /* display: flex; */
+  justify-content: space-between;
+  /* align-items: flex-end; This will align the items to the bottom of the container */
+  /* width: 100%; */
+  /* padding: 0 16.66%; Adding padding to the container so that items align approximately at 33% and 66% */
+
 }
 #toolbar > * {
   /* justify-content: center; */
   align-items: center;
   display: inline-flex;
   text-align: left;
+  padding: 8px 16px;
 }
 
 #authenticated > * {
@@ -274,10 +294,17 @@ button:active {
   -ms-user-select: none;
   user-select: none;
   opacity: 0;
-  transition: 1s opacity ease-in-out;
+  transition: 0.5s opacity ease-in-out;
   background-image: var(--grid-background-image);
 }
 
 #toolbar.ready {
   opacity: 1;
 }
+
+#branding {
+  text-transform: uppercase;
+  letter-spacing: 1.5px;
+  font-weight: 400;
+  text-rendering: geometricPrecision;
+}