feat: made responsive, many misc improvements

Author: ErikBjare

index.pug

@@ -11,88 +11,100 @@ html
         include /templates/navbar.pug
 
         main.bg-white
-          +section.bg-teal-950.text-white
+          +section.bg-slate-950.text-white
             div.text-center.h-96.flex.flex-col.justify-center
               div
-                div.text-4xl
+                div.text-2xl
                   | Turning you into a
-                div.text-9xl Superuser
+                div.text-7xl Superuser
               div.pt-10
-                | We build #[b(class="text-yellow-500") free and open-source software] that empowers users.
+                | We build #[b(class="text-yellow-300") free and open-source software] that empowers users.
 
           +section.bg-gray-100.py-10
-            div.max-w-4xl.mx-auto
-              p
-                div.text-4xl.mb-4.text-center About us
+            div.p-4.max-w-4xl.mx-auto
+              p.text-center.text-2xl
+                | About us
               div
-                p.mb-4
+                p.my-4
                   | We are a small team of developers and researchers who are passionate about free and open-source software, and we are building such software to empower users (like you!).
-                p.mb-4
+                p.my-4
                   | Originally based in #[span(class="text-blue-950") 🇸🇪 Sweden], we have been active since 2017, and have experience working with technologies in a wide range of fields,
                   | including full-stack development, machine learning, algorithmic trading, smart contracts, and decentralized systems.
-                p.mb-4
+                p.my-4
                   | We also offer consulting services in the fields of software development, machine learning, blockchain technology, and computational neuroscience.
 
           +section.max-w-4xl.mx-auto.py-10
             mixin project(name, imgname)
-              div.flex.mb-10
+              div.flex.flex-col.mb-10.p-6(class="md:flex-row")
                 // set width to fix image size
-                div.w-32.flex-shrink-0
-                  img.w-32(src=`/media/${imgname}`)
-                div.ml-10
+                div.w-32.shrink-0.mx-auto(class="md:mx-0 md:mr-10")
+                  img(src=`/media/${imgname}`)
+                div.text-sm
                   h3.text-3xl.mb-2= name
                   div&attributes(attributes)
                     block
 
+            mixin github-stars-badge(repo)
+              a(href=`https://github.com/${repo}`, target="_blank")
+                img.opacity-80(class="hover:opacity-100" src=`https://img.shields.io/github/stars/${repo}?style=social`)
+
             div.text-4xl.mb-10.text-center Projects
 
-            +project("ActivityWatch", "activitywatch-logo.png").text-sm
-              p
+            +project("ActivityWatch", "activitywatch-logo.png")
+              p.mb-4
                 | The world's best free and open-source automated time-tracker.
                 br
-                | Cross-platform, local-first, extensible, and secure.
+                | Cross-platform, local-first, extensible.
 
-              div.flex.text-sm.py-4
-                +button.bg-green-600.border-green-600.text-white(href="https://activitywatch.net/downloads/", class='hover:bg-green-700')
+              div.flex.flex-wrap
+                +button.mb-3.bg-green-600.border-green-600.text-white(href="https://activitywatch.net/downloads/", class='hover:bg-green-700')
                     | #[i.fas.fa-download.mr-1] Downloads
-                +button(href="https://activitywatch.net/")
+                +button.mb-3(href="https://activitywatch.net/")
                     | #[i.fas.fa-globe] Website
-                +button.border-gray-300(href="https://github.com/ActivityWatch/activitywatch/")
+                +button.mb-3.border-gray-300(href="https://github.com/ActivityWatch/activitywatch/")
                     | #[i.fab.fa-github] GitHub
-                +button(href="https://docs.activitywatch.net/")
+                +button.mb-3(href="https://docs.activitywatch.net/")
                   | #[i.fas.fa-book] Docs
+              div.flex.flex-wrap
+                +github-stars-badge('ActivityWatch/activitywatch')
 
-            +project("gptme", "gptme-logo.png").text-sm
-              p
+            +project("gptme", "gptme-logo.png")
+              p.mb-4
                 | A chat-CLI for conveniently interacting with LLMs in your terminal, similar to ChatGPT's "Advanced Data Analysis".
                 | Has access to tools to run code and modify files on the host machine, to speed up your workflow.
-              div.flex.text-sm.py-4
-                +button(href="https://github.com/ErikBjare/gptme")
+              div.flex.flex-wrap
+                +button.mb-3(href="https://github.com/ErikBjare/gptme")
                   | #[i.fab.fa-github] GitHub
-                +button(href="https://erik.bjareholt.com/gptme/docs/")
+                +button.mb-3(href="https://erik.bjareholt.com/gptme/docs/")
                   | #[i.fas.fa-book] Docs
+              div.flex.flex-wrap
+                +github-stars-badge('ErikBjare/gptme')
 
-            +project("Thankful", "thankful-logo.png").text-sm
-              p.mb-2.text-sm Donate crypto directly to every content creator that you like. Automatically and without middlemen.
-              p.text-gray-500
-                | #[b Note:] Thankful was discontinued in 2019. We've talked about reviving it, but it's not a priority.
+            +project("Thankful", "thankful-logo.png")
+              p.mb-1 Donate crypto directly to every content creator that you like. Automatically and without middlemen.
+              p.mb-4.text-gray-500
+                  | #[b Note:] Thankful was discontinued in 2019. We've talked about reviving it, but it's not a priority.
               // TODO: Change URL to actual website once fixed
               //+button(href="https://github.com/SuperuserLabs/thankful", class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded")
                   | #[i.fas.fa-download] Get the extension
-              div.flex.text-sm.py-4
-                +button(href="https://superuserlabs.org/thankful/")
+              div.flex.flex-wrap
+                +button.mb-3(href="https://superuserlabs.org/thankful/")
                     | #[i.fas.fa-globe] Website
-                +button(href="https://github.com/SuperuserLabs/thankful")
+                +button.mb-3(href="https://github.com/SuperuserLabs/thankful")
                     | #[i.fab.fa-github] GitHub
+              div.flex.flex-wrap
+                +github-stars-badge('SuperuserLabs/thankful')
 
-            +project("uniswap-python", "uniswap-python.png").text-sm
-              p
+            +project("uniswap-python", "uniswap-python.png")
+              p.mb-4
                 | The unofficial Python library for Uniswap. Funded by #[a(href="https://bounties.gitcoin.co/grants/2631/uniswap-python") Gitcoin] and the Uniswap Grants Program.
-              div.flex.py-4
-                +button(href="https://github.com/uniswap-python/uniswap-python")
+              div.flex.flex-wrap
+                +button.mb-3(href="https://github.com/uniswap-python/uniswap-python")
                     | #[i.fab.fa-github] GitHub
-                +button(href="https://uniswap-python.com/")
+                +button.mb-3(href="https://uniswap-python.com/")
                   | #[i.fas.fa-book] Docs
+              div.flex.flex-wrap
+                +github-stars-badge('uniswap-python/uniswap-python')
 
           //+section.bg-gray-800.text-white
             div(class="flex")
@@ -127,29 +139,26 @@ html
                       p.font-bold 2023
                       p First consulting client: University of Ghent
 
-          +section.p-10
+          +section.p-10.max-w-3xl.mx-auto(class="sm:p-20")
             h2.text-center.text-4xl.mb-10 Team
-            div.grid.grid-cols-12.gap-10
-              div.col-span-6.col-start-1(class="lg:col-span-3 lg:col-start-4")
-                +teammember("Erik Bjäreholt", "erik.jpg", "CEO, Developer", github="http://github.com/ErikBjare", linkedin="https://www.linkedin.com/in/erikbjareholt/")
-              div.col-span-6(class="lg:col-span-3")
-                +teammember("Johan Bjäreholt", "johan.png", "Developer", github="https://github.com/johan-bjareholt", linkedin="https://www.linkedin.com/in/johanbjareholt/")
+            div.grid.grid-cols-1.gap-10(class="sm:grid-cols-2")
+              +teammember("Erik Bjäreholt", "erik.jpg", "CEO, Developer", github="http://github.com/ErikBjare", linkedin="https://www.linkedin.com/in/erikbjareholt/")
+              +teammember("Johan Bjäreholt", "johan.png", "Developer", github="https://github.com/johan-bjareholt", linkedin="https://www.linkedin.com/in/johanbjareholt/")
 
           div.w-full.bg-gray-800.text-white.p-10.pb-20
             div(class="xl:w-3/4").mx-auto.text-sm
-              h2.text-center.text-3xl.mb-10 Past team members
-              div.grid.grid-cols-12.gap-10
-                div.col-span-2(class="md:col-span-3")
+              details
+                summary.text-center.text-3xl.py-10(class="hover:cursor-pointer")
+                  | Past team members
+                  div.text-xs.text-gray-500
+                    | (click to expand)
+
+                div.grid.grid-cols-1.gap-10(class="sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4")
                   +teammember("Johannes Ahnlide", "johannes.jpg", "Developer", github="https://github.com/ahnlabb")
-                div.col-span-2(class="md:col-span-3")
                   +teammember("Jacob Karlsson", "jacob.jpg", "Developer", github="https://github.com/powersource", linkedin="https://www.linkedin.com/in/jacob-karlsson-6a483bb1/")
-                div.col-span-2(class="md:col-span-3")
                   +teammember("Patrik Laurell", "patrik.jpg", "Developer", github="https://github.com/patrik-laurell", linkedin="https://www.linkedin.com/in/patrik-laurell-ba5b306b/")
-                div.col-span-2(class="md:col-span-3")
                   +teammember("Valthor Halldórsson", "valthor.jpg", "Developer", github="https://github.com/vlthr", linkedin="https://www.linkedin.com/in/valthor-halldorsson-002aaa13a/")
-                div.col-span-2(class="md:col-span-3")
                   +teammember("Dwight Lidman", "dwight.jpg", "Developer", github="https://github.com/dwilid", linkedin="https://www.linkedin.com/in/dwight-lidman/", image_style="background-position-y: 10%")
-                div.col-span-2(class="md:col-span-3")
                   +teammember("Michael Young", "michael.jpg", "Developer", github="https://github.com/Miyou", linkedin="https://www.linkedin.com/in/michael-young-522148142/")
 
         +footer

templates/mixins.pug

@@ -6,14 +6,12 @@ mixin section(padding="2em 0em")
 
 
 mixin button
-  a.rounded-md.border.mr-4.px-3.py-2.shadow(target="_blank")&attributes(attributes)
+  a.rounded-md.border.mr-4.px-3.py-2.shadow(class="hover:bg-gray-100" 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

templates/navbar.pug

@@ -1,20 +1,23 @@
-header.flex.justify-between.items-center.bg-slate-900.p-4(style="font-family: 'Roboto', 'Helvetica', sans-serif;")
-  div.flex.items-center.flex-grow
-    span.text-white.text-xl
-      a.pl-4.pr-10.font-semibold(href='https://superuserlabs.org/', class="hover:underline")
-        | Superuser Labs
-    div.flex.text-lg.align-middle.items-center.text-gray-300
-      a.pr-10(href='https://activitywatch.net/' target="_blank", class="hover:underline")
-        img.inline-block.mr-2.py-2(src='/media/activitywatch-logo.png', alt='ActivityWatch', width='20px', height='20px')
-        | ActivityWatch
-      a.pr-10(href='https://github.com/ErikBjare/gptme' target="_blank", class="hover:underline")
-        img.inline-block.mr-2.py-2(src='/media/gptme-logo.png', alt='gptme', width='20px', height='20px')
-        | gptme
-      a.pr-10(href='https://superuserlabs.org/thankful/', class="hover:underline")
-        img.inline-block.mr-2.py-2(src='/media/thankful-logo.png', alt='Thankful', width='20px', height='20px')
-        | Thankful
-  div.flex
-    a.text-white.px-2(href='https://github.com/SuperuserLabs/' target="_blank")
-      i.fab.fa-github.text-2xl
-    a.text-white.px-2(href='https://twitter.com/SuperusrLabs' target="_blank")
-      i.fab.fa-twitter.text-2xl
+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='https://superuserlabs.org/', class="hover:underline")
+      | 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')
+      | 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')
+      | gptme
+    a.mr-10(href='https://superuserlabs.org/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/SuperuserLabs/' target="_blank")
+      i.fab.fa-github
+    a.text-white.mx-2(href='https://twitter.com/SuperusrLabs' target="_blank")
+      i.fab.fa-twitter
+    a.text-white.mx-2(href='https://www.linkedin.com/company/superuser-labs' target="_blank")
+      i.fab.fa-linkedin