feat: made responsive, many misc improvements

index.pug

@@ -14,16 +14,16 @@ html
  +section.bg-teal-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.
 
  +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
  | 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!).
@@ -35,64 +35,76 @@ html
 
  +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")
@@ -129,27 +141,24 @@ html
 
  +section.p-10
  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-2.gap-10.max-w-xl.mx-auto
+ +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,21 @@
-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
+header.flex.p-4.bg-slate-900.text-xl.whitespace-nowrap(style="font-family: 'Roboto', 'Helvetica', sans-serif;")
+ div.text-white
+ a.pl-4.font-semibold(href='https://superuserlabs.org/', class="hover:underline")
+ | Superuser Labs
+
+ div.hidden.text-gray-300(class="md:flex")
+ a.px-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.pr-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.pr-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.px-2(href='https://github.com/SuperuserLabs/' target="_blank")
- i.fab.fa-github.text-2xl
+ i.fab.fa-github
  a.text-white.px-2(href='https://twitter.com/SuperusrLabs' target="_blank")
- i.fab.fa-twitter.text-2xl
+ i.fab.fa-twitter