UI tweaks

css/main.css

@@ -727,7 +727,7 @@ menu {
   align-items: center;
   grid-template-columns: 1fr auto;
   gap: 1rem;
-  padding: max(1rem, 3vw);
+  padding: max(1rem, 2vw) max(1rem, 3vw);
   grid-column: 1/-1;
   view-transition-name: main-header;
 }
@@ -862,23 +862,32 @@ theme-toggle {
   fill: rgba(var(--background-color), 1);
 }
 
-#dapps_menu {
-  view-transition-name: dapps-menu;
-}
-
 #hamburger_menu_trigger {
   padding: 0.5rem;
   margin-left: -0.5rem;
 }
 
+.hamburger-menu-wrapper {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  view-transition-name: dapps-menu;
+}
+
+.hamburger-menu {
+  overflow-y: auto;
+}
+
 .hamburger-menu__item {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.5rem 1rem;
+  padding: 0.6rem;
   border-radius: 0.5rem;
   font-size: 0.9rem;
   color: rgba(var(--text-color), 0.8);
+  margin-left: -0.6rem;
+  font-weight: 500;
 }
 .hamburger-menu__item:hover {
   background-color: rgba(var(--text-color), 0.06);
@@ -955,6 +964,14 @@ theme-toggle {
   #dapp_search_input {
     width: 20rem;
   }
+  .hamburger-menu-wrapper {
+    border-right: solid thin rgba(var(--text-color), 0.5);
+    padding-right: 1rem;
+  }
+  .hamburger-menu {
+    padding-left: 1rem;
+    margin-left: -1rem;
+  }
 }
 @media only screen and (min-width: 1280px) {
   .page {

css/main.scss

@@ -672,7 +672,7 @@ menu {
   align-items: center;
   grid-template-columns: 1fr auto;
   gap: 1rem;
-  padding: max(1rem, 3vw);
+  padding: max(1rem, 2vw) max(1rem, 3vw);
   grid-column: 1/-1;
   view-transition-name: main-header;
   h4 {
@@ -804,23 +804,28 @@ theme-toggle {
     }
   }
 }
-#dapps_menu {
-  view-transition-name: dapps-menu;
-}
 #hamburger_menu_trigger {
   padding: 0.5rem;
   margin-left: -0.5rem;
 }
+.hamburger-menu-wrapper {
+  position: sticky;
+  top: 0;
+  view-transition-name: dapps-menu;
+}
 .hamburger-menu {
+  overflow-y: auto;
 }
 .hamburger-menu__item {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.5rem 1rem;
+  padding: 0.6rem;
   border-radius: 0.5rem;
   font-size: 0.9rem;
   color: rgba(var(--text-color), 0.8);
+  margin-left: -0.6rem;
+  font-weight: 500;
   &:hover {
     background-color: rgba(var(--text-color), 0.06);
     text-decoration: none;
@@ -901,6 +906,14 @@ theme-toggle {
   #dapp_search_input {
     width: 20rem;
   }
+  .hamburger-menu-wrapper {
+    border-right: solid thin rgba(var(--text-color), 0.5);
+    padding-right: 1rem;
+  }
+  .hamburger-menu {
+    padding-left: 1rem;
+    margin-left: -1rem;
+  }
 }
 @media only screen and (min-width: 1280px) {
   .page {

index.html

@@ -439,6 +439,15 @@
                 tags: ['news', 'articles', 'content'],
                 category: 'content'
             },
+            {
+                name: 'Certify',
+                description: 'Create and distribute blockchain based certificates',
+                icon: ``,
+                appLink: 'https://ranchimall.github.io/certify',
+                moreLink: '#/dapps/certify',
+                tags: ['certificates', 'certify', 'certification'],
+                category: 'identity'
+            },
         ].sort((a, b) => a.name.localeCompare(b.name))
         router.addRoute('home', renderHome)
         router.addRoute('', renderHome)
@@ -559,7 +568,7 @@
                     <ul class="flex flex-direction-column gap-0-3">
                         ${dappsList.map(dapp => html`
                             <li>
-                                <a class=${`hamburger-menu__item ${dapp.moreLink.includes(activePage) ? 'hamburger-menu__item--active' : ''}`} href=${dapp.moreLink}>${dapp.name}</a>
+                                <a class=${`hamburger-menu__item interactive ${dapp.moreLink.includes(activePage) ? 'hamburger-menu__item--active' : ''}`} href=${dapp.moreLink}>${dapp.name}</a>
                             </li>
                         `)}
                     </ul>
@@ -595,10 +604,16 @@
                             <h1>${name}</h1>
                         </div>
                         <p>${description}</p>
-                        <a href=${appLink} class="button dapp-card__link dapp-card__link--primary margin-right-auto" target="_blank">
+                        <div class="flex align-center gap-0-5">
-                            Try it
+                            <a href=${`https://github.com/ranchimall/${appLink.split('/').pop()}/archive/refs/heads/master.zip`} class="button dapp-card__link" title="Download dapp Zip">
-                            <svg class="icon margin-left-0-5" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0z" fill="none"></path> <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"></path> </svg>    
+                                Download
-                        </a>
+                                <svg class="icon margin-left-0-5" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M17,11l-1.41-1.41L13,12.17V4h-2v8.17L8.41,9.59L7,11l5,5 L17,11z"/></g></svg>
+                            </a>
+                            <a href=${appLink} class="button dapp-card__link dapp-card__link--primary margin-right-auto" target="_blank">
+                                Try it
+                                <svg class="icon margin-left-0-5" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0z" fill="none"></path> <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"></path> </svg>    
+                            </a>
+                        </div>
                     </section>
                 `
             ]