Bold redesign: full dark theme, bento grid, visual hierarchy

_includes/templates/head-includes.pug

@@ -24,10 +24,10 @@ link(rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all
 // Custom CSS
 link(rel="stylesheet" href="/style.css")
 
-// Fonts (Inter & Roboto)
+// Fonts (Inter)
 link(rel="preconnect" href="https://fonts.googleapis.com")
 link(rel="preconnect" href="https://fonts.gstatic.com" crossorigin)
-link(rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap")
+link(rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap")
 
 // jekyll-seo-tag
 | {% seo %}

_includes/templates/mixins.pug

@@ -4,46 +4,46 @@ mixin section(padding="2em 0em")
       .grid
         block
 
-mixin button
-  a.rounded-lg.border.border-gray-200.mr-3.px-4.py-2.text-sm.font-medium(class="hover:bg-gray-50 hover:border-gray-300 transition-colors" target="_blank")&attributes(attributes)
-    block
-
 mixin fa(name, group='fas', color='black')
   i(class=`${group} fa-${name} fa-8x text-${color}`)
 
 mixin cell(cols)
   div(class=`col-span-${cols}`)&attributes(attributes)
     block
 
-mixin sectitle
-  h4.text-4xl(style="mt-0")
-    block
-
 mixin footer
-  div.bg-slate-900.text-gray-400.w-full.py-6.text-center.text-sm(class!=attributes.class)
-    | Made with #[i.fas.fa-heart(style="color: #ef4444")] by Superuser Labs
+  div.border-t.border-slate-800.text-slate-500.w-full.py-8.text-center.text-sm
+    div.max-w-6xl.mx-auto.px-6.flex.flex-col.items-center.gap-4(class="sm:flex-row sm:justify-between")
+      span Made with #[i.fas.fa-heart(style="color: #ef4444")] by Superuser Labs
+      div.flex.items-center.gap-5
+        a.text-slate-600(href='https://github.com/SuperuserLabs' target="_blank", class="hover:text-slate-300 transition-colors")
+          i.fab.fa-github
+        a.text-slate-600(href='https://twitter.com/SuperusrLabs' target="_blank", class="hover:text-slate-300 transition-colors")
+          i.fab.fa-twitter
+        a.text-slate-600(href='https://www.linkedin.com/company/superuser-labs' target="_blank", class="hover:text-slate-300 transition-colors")
+          i.fab.fa-linkedin
 
 mixin teammember(name, imagename, role, github, linkedin, twitter, website, image_style)
-  .border.border-gray-100.rounded-2xl.shadow-sm.bg-white.text-black.overflow-hidden(class="hover:shadow-md transition-shadow")
+  div.group.rounded-2xl.bg-slate-900.border.border-slate-800.overflow-hidden(class="hover:border-slate-700 transition-all")
     div
-      div.h-64.rounded-t-2xl(style=`background: url('/media/${imagename}') center / cover; ${image_style || ''}`)
+      div.aspect-square(style=`background: url('/media/${imagename}') center / cover; ${image_style || ''}`)
     div.flex.items-center.p-4
       div.flex-grow
-        div.font-medium #{name}
-        div.text-sm.text-gray-500 #{role}
+        div.font-medium.text-white #{name}
+        div.text-sm.text-slate-400 #{role}
       div.flex.items-center.gap-2
         if github
-          a(href=`${github}` target="_blank", class="text-gray-400 hover:text-gray-700 transition-colors")
-            i.fab.fa-github.text-xl
+          a(href=`${github}` target="_blank", class="text-slate-600 hover:text-white transition-colors")
+            i.fab.fa-github.text-lg
         if linkedin
-          a(href=`${linkedin}` target="_blank", class="text-gray-400 hover:text-blue-600 transition-colors")
-            i.fab.fa-linkedin.text-xl
+          a(href=`${linkedin}` target="_blank", class="text-slate-600 hover:text-blue-400 transition-colors")
+            i.fab.fa-linkedin.text-lg
         if twitter
-          a(href=`${twitter}` target="_blank", class="text-gray-400 hover:text-blue-400 transition-colors")
-            i.fab.fa-twitter.text-xl
+          a(href=`${twitter}` target="_blank", class="text-slate-600 hover:text-sky-400 transition-colors")
+            i.fab.fa-twitter.text-lg
         if website
-          a(href=`${website}` target="_blank", class="text-gray-400 hover:text-green-600 transition-colors")
-            i.fas.fa-globe.text-xl
+          a(href=`${website}` target="_blank", class="text-slate-600 hover:text-green-400 transition-colors")
+            i.fas.fa-globe.text-lg
 
 mixin analytics-superuserlabs(ua_id, ga_id)
   |<!-- Global site tag (gtag.js) - Google Analytics -->

_includes/templates/navbar.pug

@@ -1,21 +1,13 @@
-header.flex.items-center.p-4.bg-slate-900.text-base.whitespace-nowrap
-  div.text-white.flex.items-center
-    a.ml-4.font-semibold.flex.items-center(href='{{ site.baseurl }}/', class="hover:opacity-80 transition-opacity")
-      img.mr-2.rounded(src='/media/superuserlabs-logo-workspace-rounded.png', alt='Superuser Labs', width='28', height='28')
+header.border-b.border-slate-800
+  div.max-w-6xl.mx-auto.flex.items-center.px-6.py-3
+    a.font-semibold.flex.items-center.text-white(href='{{ site.baseurl }}/', class="hover:opacity-80 transition-opacity")
+      img.rounded-lg(src='/media/superuserlabs-icon-padded.png', alt='Superuser Labs', width='34', height='34', class="mr-2.5", style="background: rgb(2,6,23);")
       | Superuser Labs
 
-  div.hidden.text-gray-300.text-sm.items-center(class="md:flex")
-    a.mx-8.flex.items-center(href='https://activitywatch.net/' target="_blank", class="hover:text-white transition-colors")
-      img.inline-block.mr-2(src='/media/activitywatch-logo.png', alt='ActivityWatch', width='18', height='18')
-      | ActivityWatch
-    a.mr-8.flex.items-center(href='https://gptme.org/' target="_blank", class="hover:text-white transition-colors")
-      img.inline-block.mr-2(src='/media/gptme-logo.png', alt='gptme', width='18', height='18')
-      | gptme
-
-  div.flex-1.text-right.flex.items-center.justify-end.gap-4
-    a.text-gray-400.text-lg(href='https://github.com/{{ site.github_username }}' target="_blank", class="hover:text-white transition-colors")
-      i.fab.fa-github
-    a.text-gray-400.text-lg(href='https://twitter.com/{{ site.twitter_username }}' target="_blank", class="hover:text-white transition-colors")
-      i.fab.fa-twitter
-    a.text-gray-400.text-lg(href='https://www.linkedin.com/company/{{ site.linkedin_company }}' target="_blank", class="hover:text-white transition-colors")
-      i.fab.fa-linkedin
+    div.flex-1.flex.items-center.justify-end.gap-5
+      a.text-slate-500.text-lg(href='https://github.com/{{ site.github_username }}' target="_blank", class="hover:text-white transition-colors")
+        i.fab.fa-github
+      a.text-slate-500.text-lg(href='https://twitter.com/{{ site.twitter_username }}' target="_blank", class="hover:text-white transition-colors")
+        i.fab.fa-twitter
+      a.text-slate-500.text-lg(href='https://www.linkedin.com/company/{{ site.linkedin_company }}' target="_blank", class="hover:text-white transition-colors")
+        i.fab.fa-linkedin

_layouts/default.pug

@@ -1,6 +1,6 @@
 include templates/mixins.pug
 doctype html
-html
+html.dark
     head
         title {% if page.title %}{{ page.title | escape }} | {% endif %}{{ site.title | escape }}
 
@@ -20,12 +20,11 @@ html
         +analytics-superuserlabs
         | {% endif %}
 
-    // set background color on body, to match navbar color when scrolling above viewport
-    body.antialiased(style="background-color: rgb(15 23 42); font-family: 'Inter', 'Roboto', 'Helvetica', sans-serif;")
-      div.flex.flex-col.min-h-screen.justify-between
+    body.antialiased.bg-slate-950.text-gray-100(style="font-family: 'Inter', system-ui, sans-serif;")
+      div.flex.flex-col.min-h-screen
         include templates/navbar.pug
 
-        main.bg-white
+        main
           | {{ content }}
 
         +footer