Skip to content

Commit bba74ee

Browse files
ErikBjareErikBjare
authored
redesign: modernize site, new favicon, add Bob, clean up unused files (#35)
- Replace old "$su" favicon with superuserlabs-logo.png in multiple sizes (ICO, PNG 32/192, apple-touch-icon) - Add logo to navbar and hero section - Switch to Inter font, fix HTTP->HTTPS for Google Fonts - Modernize design: cleaner cards, better spacing, smoother transitions - Add Bob as team member (AI agent built with gptme) - Update gptme description with gptme.ai and improved copy - Streamline timeline with dedicated mixin - Remove deprecated UA analytics, keep only GA4 - Remove unused files: email signup forms, placeholder blog post, old favicon generator script, unused media (tty.gif, patrik-bkg.jpg) - Simplify discontinued Thankful signup pages - Clean up unused analytics-linkout mixin and MailChimp styles
1 parent 6e795ec commit bba74ee

19 files changed

Lines changed: 169 additions & 381 deletions

‎_includes/templates/email-signup-horizontal.pug‎

Lines changed: 0 additions & 25 deletions
This file was deleted.

‎_includes/templates/email-signup.pug‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎_includes/templates/head-includes.pug‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,10 @@ link(rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all
2424
// Custom CSS
2525
link(rel="stylesheet" href="/style.css")
2626

27-
// Fonts (Roboto & Varela Round)
28-
link(rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css")
29-
link(rel="stylesheet" href="http://fonts.googleapis.com/css?family=Varela+Round" type="text/css")
27+
// Fonts (Inter & Roboto)
28+
link(rel="preconnect" href="https://fonts.googleapis.com")
29+
link(rel="preconnect" href="https://fonts.gstatic.com" crossorigin)
30+
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")
3031

3132
// jekyll-seo-tag
3233
| {% seo %}

‎_includes/templates/mixins.pug‎

Lines changed: 22 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ mixin section(padding="2em 0em")
55
block
66

77
mixin button
8-
a.rounded-md.border.mr-4.px-3.py-2.shadow(class="hover:bg-gray-100" target="_blank")&attributes(attributes)
8+
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)
99
block
1010

1111
mixin fa(name, group='fas', color='black')
@@ -20,34 +20,39 @@ mixin sectitle
2020
block
2121

2222
mixin footer
23-
div.bg-slate-900.text-white.w-full.p-8.text-center(class!=attributes.class)
24-
b Made with #[i.fas.fa-heart(style="color: red")] by Superuser Labs
23+
div.bg-slate-900.text-gray-400.w-full.py-6.text-center.text-sm(class!=attributes.class)
24+
| Made with #[i.fas.fa-heart(style="color: #ef4444")] by Superuser Labs
2525

26-
mixin teammember(name, imagename, role, github, linkedin, image_style)
27-
.border.rounded-xl.shadow.bg-white.text-black
26+
mixin teammember(name, imagename, role, github, linkedin, twitter, website, image_style)
27+
.border.border-gray-100.rounded-2xl.shadow-sm.bg-white.text-black.overflow-hidden(class="hover:shadow-md transition-shadow")
2828
div
29-
div.h-72.rounded-t-xl(style=`background: url('/media/${imagename}') center / cover; ${image_style}`)
30-
div.flex.p-3
29+
div.h-64.rounded-t-2xl(style=`background: url('/media/${imagename}') center / cover; ${image_style || ''}`)
30+
div.flex.items-center.p-4
3131
div.flex-grow
32-
div.m-0 #{name}
32+
div.font-medium #{name}
3333
div.text-sm.text-gray-500 #{role}
34-
div
35-
div.text-2xl.ml-2
36-
a(href=`${github}`, style="color: #444")
37-
i.fab.fa-github
38-
if(linkedin)
39-
a.ml-2(href=`${linkedin}`, style="color: #0077B5")
40-
i.fab.fa-linkedin
34+
div.flex.items-center.gap-2
35+
if github
36+
a(href=`${github}` target="_blank", class="text-gray-400 hover:text-gray-700 transition-colors")
37+
i.fab.fa-github.text-xl
38+
if linkedin
39+
a(href=`${linkedin}` target="_blank", class="text-gray-400 hover:text-blue-600 transition-colors")
40+
i.fab.fa-linkedin.text-xl
41+
if twitter
42+
a(href=`${twitter}` target="_blank", class="text-gray-400 hover:text-blue-400 transition-colors")
43+
i.fab.fa-twitter.text-xl
44+
if website
45+
a(href=`${website}` target="_blank", class="text-gray-400 hover:text-green-600 transition-colors")
46+
i.fas.fa-globe.text-xl
4147

4248
mixin analytics-superuserlabs(ua_id, ga_id)
4349
|<!-- Global site tag (gtag.js) - Google Analytics -->
44-
|<script async src="https://www.googletagmanager.com/gtag/js?id=UA-121118459-1"></script>
50+
|<script async src="https://www.googletagmanager.com/gtag/js?id=G-2MVEP1H2F6"></script>
4551
|<script>
4652
| window.dataLayer = window.dataLayer || [];
4753
| function gtag(){dataLayer.push(arguments);}
4854
| gtag('js', new Date());
4955
|
50-
| gtag('config', 'UA-121118459-1');
5156
| gtag('config', 'G-2MVEP1H2F6');
5257
|</script>
5358

@@ -61,43 +66,3 @@ mixin analytics-thankful
6166
|
6267
| gtag('config', 'UA-121109725-1');
6368
|</script>
64-
65-
mixin analytics-linkout
66-
|<script>
67-
|// From: https://support.google.com/analytics/answer/7478520?hl=en
68-
|/**
69-
|* Function that registers a click on an outbound link in Analytics.
70-
|* This function takes a valid URL string as an argument, and uses that URL string
71-
|* as the event label. Setting the transport method to 'beacon' lets the hit be sent
72-
|* using 'navigator.sendBeacon' in browser that support it.
73-
|*/
74-
|var getOutboundLink = function(urlOrEvent) {
75-
| let url;
76-
| let target;
77-
| if(typeof urlOrEvent === 'string') {
78-
| url = urlOrEvent;
79-
| } else {
80-
| let event = urlOrEvent || window.event;
81-
| let el = event.target || event.srcElement;
82-
| if(!el.href) el = el.parentNode;
83-
| url = el.href;
84-
| target = el.target;
85-
| }
86-
| //console.log(url);
87-
| //console.log(target);
88-
| if(window.google_tag_manager) {
89-
| gtag('event', 'click', {
90-
| 'event_category': 'outbound',
91-
| 'event_label': url,
92-
| 'transport_type': 'beacon',
93-
| 'event_callback': function() {
94-
| window.open(url, target);
95-
| //document.location = url;
96-
| }
97-
| });
98-
| } else {
99-
| window.open(url, target);
100-
| }
101-
|}
102-
|</script>
103-

‎_includes/templates/navbar.pug‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,21 @@
1-
header.flex.p-4.bg-slate-900.text-xl.whitespace-nowrap(style="font-family: 'Roboto', 'Helvetica', sans-serif;")
2-
div.text-white
3-
a.ml-4.font-semibold(href='{{ site.baseurl }}/', class="hover:underline")
1+
header.flex.items-center.p-4.bg-slate-900.text-base.whitespace-nowrap
2+
div.text-white.flex.items-center
3+
a.ml-4.font-semibold.flex.items-center(href='{{ site.baseurl }}/', class="hover:opacity-80 transition-opacity")
4+
img.mr-2.rounded(src='/media/superuserlabs-logo-workspace-rounded.png', alt='Superuser Labs', width='28', height='28')
45
| Superuser Labs
56

6-
div.hidden.text-gray-300(class="md:flex")
7-
a.mx-10(href='https://activitywatch.net/' target="_blank", class="hover:underline")
8-
img.inline-block.mr-2(src='/media/activitywatch-logo.png', alt='ActivityWatch', width='20px', height='20px')
7+
div.hidden.text-gray-300.text-sm.items-center(class="md:flex")
8+
a.mx-8.flex.items-center(href='https://activitywatch.net/' target="_blank", class="hover:text-white transition-colors")
9+
img.inline-block.mr-2(src='/media/activitywatch-logo.png', alt='ActivityWatch', width='18', height='18')
910
| ActivityWatch
10-
a.mr-10(href='https://github.com/ErikBjare/gptme' target="_blank", class="hover:underline")
11-
img.inline-block.mr-2(src='/media/gptme-logo.png', alt='gptme', width='20px', height='20px')
11+
a.mr-8.flex.items-center(href='https://gptme.org/' target="_blank", class="hover:text-white transition-colors")
12+
img.inline-block.mr-2(src='/media/gptme-logo.png', alt='gptme', width='18', height='18')
1213
| gptme
13-
a.mr-10(href='{{ site.baseurl }}/thankful/', class="hover:underline")
14-
img.inline-block.mr-2(src='/media/thankful-logo.png', alt='Thankful', width='20px', height='20px')
15-
| Thankful
1614

17-
div.flex-1.text-right
18-
a.text-white.mx-2(href='https://github.com/{{ site.github_username }}' target="_blank")
15+
div.flex-1.text-right.flex.items-center.justify-end.gap-4
16+
a.text-gray-400.text-lg(href='https://github.com/{{ site.github_username }}' target="_blank", class="hover:text-white transition-colors")
1917
i.fab.fa-github
20-
a.text-white.mx-2(href='https://twitter.com/{{ site.twitter_username }}' target="_blank")
18+
a.text-gray-400.text-lg(href='https://twitter.com/{{ site.twitter_username }}' target="_blank", class="hover:text-white transition-colors")
2119
i.fab.fa-twitter
22-
a.text-white.mx-2(href='https://www.linkedin.com/company/{{ site.linkedin_company }}' target="_blank")
20+
a.text-gray-400.text-lg(href='https://www.linkedin.com/company/{{ site.linkedin_company }}' target="_blank", class="hover:text-white transition-colors")
2321
i.fab.fa-linkedin

‎_layouts/default.pug‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,10 @@ html
55
title {% if page.title %}{{ page.title | escape }} | {% endif %}{{ site.title | escape }}
66

77
// Favicon
8-
link(rel="shortcut icon" href="{{ layout.favicon | default: '/media/favicon.ico' }}" type="{{ layout.favicon_type | default: 'image/x-icon' }}")
8+
link(rel="icon" href="{{ layout.favicon | default: '/media/favicon.ico' }}" type="{{ layout.favicon_type | default: 'image/x-icon' }}")
9+
link(rel="icon" type="image/png" sizes="32x32" href="/media/favicon-32.png")
10+
link(rel="icon" type="image/png" sizes="192x192" href="/media/favicon-192.png")
11+
link(rel="apple-touch-icon" href="/media/apple-touch-icon.png")
912

1013
// Scripts and styles
1114
include templates/head-includes.pug
@@ -18,7 +21,7 @@ html
1821
| {% endif %}
1922

2023
// set background color on body, to match navbar color when scrolling above viewport
21-
body(style="background-color: rgb(15 23 42)")
24+
body.antialiased(style="background-color: rgb(15 23 42); font-family: 'Inter', 'Roboto', 'Helvetica', sans-serif;")
2225
div.flex.flex-col.min-h-screen.justify-between
2326
include templates/navbar.pug
2427

‎_posts/2023-11-04-welcome-to-jekyll.markdown‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

0 commit comments

Comments
 (0)