Modernize site design, new favicon, add Bob as team member

_includes/templates/head-includes.pug

@@ -24,9 +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 (Roboto & Varela Round)
-link(rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css")
-link(rel="stylesheet" href="http://fonts.googleapis.com/css?family=Varela+Round" type="text/css")
+// Fonts (Inter & Roboto)
+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")
 
 // jekyll-seo-tag
 | {% seo %}

_includes/templates/mixins.pug

@@ -5,7 +5,7 @@ mixin section(padding="2em 0em")
         block
 
 mixin button
-  a.rounded-md.border.mr-4.px-3.py-2.shadow(class="hover:bg-gray-100" target="_blank")&attributes(attributes)
+  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')
@@ -20,34 +20,39 @@ mixin sectitle
     block
 
 mixin footer
-  div.bg-slate-900.text-white.w-full.p-8.text-center(class!=attributes.class)
-    b Made with #[i.fas.fa-heart(style="color: red")] by Superuser Labs
+  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
 
-mixin teammember(name, imagename, role, github, linkedin, image_style)
-  .border.rounded-xl.shadow.bg-white.text-black
+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
-      div.h-72.rounded-t-xl(style=`background: url('/media/${imagename}') center / cover; ${image_style}`)
-    div.flex.p-3
+      div.h-64.rounded-t-2xl(style=`background: url('/media/${imagename}') center / cover; ${image_style || ''}`)
+    div.flex.items-center.p-4
       div.flex-grow
-        div.m-0 #{name}
+        div.font-medium #{name}
         div.text-sm.text-gray-500 #{role}
-      div
-        div.text-2xl.ml-2
-          a(href=`${github}`, style="color: #444")
-            i.fab.fa-github
-          if(linkedin)
-            a.ml-2(href=`${linkedin}`, style="color: #0077B5")
-              i.fab.fa-linkedin
+      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
+        if linkedin
+          a(href=`${linkedin}` target="_blank", class="text-gray-400 hover:text-blue-600 transition-colors")
+            i.fab.fa-linkedin.text-xl
+        if twitter
+          a(href=`${twitter}` target="_blank", class="text-gray-400 hover:text-blue-400 transition-colors")
+            i.fab.fa-twitter.text-xl
+        if website
+          a(href=`${website}` target="_blank", class="text-gray-400 hover:text-green-600 transition-colors")
+            i.fas.fa-globe.text-xl
 
 mixin analytics-superuserlabs(ua_id, ga_id)
   |<!-- Global site tag (gtag.js) - Google Analytics -->
-  |<script async src="https://www.googletagmanager.com/gtag/js?id=UA-121118459-1"></script>
+  |<script async src="https://www.googletagmanager.com/gtag/js?id=G-2MVEP1H2F6"></script>
   |<script>
   | window.dataLayer = window.dataLayer || [];
   | function gtag(){dataLayer.push(arguments);}
   | gtag('js', new Date());
   |
-  | gtag('config', 'UA-121118459-1');
   | gtag('config', 'G-2MVEP1H2F6');
   |</script>
 
@@ -61,43 +66,3 @@ mixin analytics-thankful
   |
   | gtag('config', 'UA-121109725-1');
   |</script>
-
-mixin analytics-linkout
-  |<script>
-  |// From: https://support.google.com/analytics/answer/7478520?hl=en
-  |/**
-  |* Function that registers a click on an outbound link in Analytics.
-  |* This function takes a valid URL string as an argument, and uses that URL string
-  |* as the event label. Setting the transport method to 'beacon' lets the hit be sent
-  |* using 'navigator.sendBeacon' in browser that support it.
-  |*/
-  |var getOutboundLink = function(urlOrEvent) {
-  |  let url;
-  |  let target;
-  |  if(typeof urlOrEvent === 'string') {
-  |    url = urlOrEvent;
-  |  } else {
-  |    let event = urlOrEvent || window.event;
-  |    let el = event.target || event.srcElement;
-  |    if(!el.href) el = el.parentNode;
-  |    url = el.href;
-  |    target = el.target;
-  |  }
-  |  //console.log(url);
-  |  //console.log(target);
-  |  if(window.google_tag_manager) {
-  |    gtag('event', 'click', {
-  |         'event_category': 'outbound',
-  |         'event_label': url,
-  |         'transport_type': 'beacon',
-  |         'event_callback': function() {
-  |           window.open(url, target);
-  |           //document.location = url;
-  |         }
-  |    });
-  |  } else {
-  |    window.open(url, target);
-  |  }
-  |}
-  |</script>
-

_includes/templates/navbar.pug

@@ -1,23 +1,21 @@
-header.flex.p-4.bg-slate-900.text-xl.whitespace-nowrap(style="font-family: 'Roboto', 'Helvetica', sans-serif;")
-  div.text-white
-    a.ml-4.font-semibold(href='{{ site.baseurl }}/', class="hover:underline")
+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')
       | Superuser Labs
 
-  div.hidden.text-gray-300(class="md:flex")
-    a.mx-10(href='https://activitywatch.net/' target="_blank", class="hover:underline")
-      img.inline-block.mr-2(src='/media/activitywatch-logo.png', alt='ActivityWatch', width='20px', height='20px')
+  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-10(href='https://github.com/ErikBjare/gptme' target="_blank", class="hover:underline")
-      img.inline-block.mr-2(src='/media/gptme-logo.png', alt='gptme', width='20px', height='20px')
+    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
-    a.mr-10(href='{{ site.baseurl }}/thankful/', class="hover:underline")
-      img.inline-block.mr-2(src='/media/thankful-logo.png', alt='Thankful', width='20px', height='20px')
-      | Thankful
 
-  div.flex-1.text-right
-    a.text-white.mx-2(href='https://github.com/{{ site.github_username }}' target="_blank")
+  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-white.mx-2(href='https://twitter.com/{{ site.twitter_username }}' target="_blank")
+    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-white.mx-2(href='https://www.linkedin.com/company/{{ site.linkedin_company }}' target="_blank")
+    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

_layouts/default.pug

@@ -5,7 +5,10 @@ html
         title {% if page.title %}{{ page.title | escape }} | {% endif %}{{ site.title | escape }}
 
         // Favicon
-        link(rel="shortcut icon" href="{{ layout.favicon | default: '/media/favicon.ico' }}" type="{{ layout.favicon_type | default: 'image/x-icon' }}")
+        link(rel="icon" href="{{ layout.favicon | default: '/media/favicon.ico' }}" type="{{ layout.favicon_type | default: 'image/x-icon' }}")
+        link(rel="icon" type="image/png" sizes="32x32" href="/media/favicon-32.png")
+        link(rel="icon" type="image/png" sizes="192x192" href="/media/favicon-192.png")
+        link(rel="apple-touch-icon" href="/media/apple-touch-icon.png")
 
         // Scripts and styles
         include templates/head-includes.pug
@@ -18,7 +21,7 @@ html
         | {% endif %}
 
     // set background color on body, to match navbar color when scrolling above viewport
-    body(style="background-color: rgb(15 23 42)")
+    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
         include templates/navbar.pug