refactor: replace roboto by source sans 3 font

chore: minor front page styling
awesome-archive · Jan 2, 2022 · af0d2e8 · af0d2e8
1 parent 44a2e60
commit af0d2e8
Show file tree

Hide file tree

Showing 17 changed files with 173 additions and 125 deletions.
diff --git a/scripts/bundle_icons.js b/scripts/bundle_icons.js
@@ -44,7 +44,16 @@ let icons = [
     'fluent:key-32-filled',
     'majesticons:clipboard-copy',
     'fa-regular:calendar-alt',
-    'ph:books-bold'
+    'ph:books-bold',
+    'fa-solid:external-link-alt',
+    'bx:bx-code-curly',
+    'simple-icons:wakatime',
+    'bx:bxs-heart',
+    'heroicons-solid:light-bulb',
+    'ion:rocket',
+    'heroicons-solid:server',
+    'eva:checkmark-circle-2-fill',
+    'fluent:key-24-filled'
 ]
 
 const output = path.normalize(path.join(__dirname, '../static/assets/icons.js'))

diff --git a/static/assets/app.css b/static/assets/app.css
@@ -1,5 +1,5 @@
 body {
-    font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
+    font-family: 'Source Sans 3', 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
 }
 
 .bg-gray-850 {
@@ -22,4 +22,14 @@ body {
 
 .mt-14 {
     margin-top: 3.5rem;
+}
+
+.text-7xl {
+    font-size: 4.5rem;
+    line-height: 1.1;
+}
+
+.text-8xl {
+    font-size: 5rem;
+    line-height: 1.1;
 }
diff --git a/static/assets/app.js b/static/assets/app.js
@@ -39,6 +39,7 @@ let resizeCount = 0
 
 Chart.defaults.color = "#E2E8F0"
 Chart.defaults.borderColor = "#242b3a"
+Chart.defaults.font.family = 'Source Sans 3, Roboto, Helvetica Neue, Arial, sens-serif'
 
 String.prototype.toHHMMSS = function () {
     const sec_num = parseInt(this, 10)
@@ -387,22 +388,8 @@ function hexToRgb(hex) {
     } : null;
 }
 
-function showUserMenuPopup(event) {
-    const el = document.getElementById('user-menu-popup')
-    el.classList.remove('hidden')
-    el.classList.add('block')
-    event.stopPropagation()
-}
-
-function hideUserMenuPopup(event) {
-    const el = document.getElementById('user-menu-popup')
-    el.classList.remove('block')
-    el.classList.add('hidden')
-    event.stopPropagation()
-}
-
-function toggleTimePickerPopup(event) {
-    const el = document.getElementById('time-picker-popup')
+function togglePopup(event, id) {
+    const el = document.getElementById(id)
     if (el.classList.contains('hidden')) {
         el.classList.remove('hidden')
         el.classList.add('block')
@@ -413,13 +400,6 @@ function toggleTimePickerPopup(event) {
     event.stopPropagation()
 }
 
-function showApiKeyPopup(event) {
-    const el = document.getElementById('api-key-popup')
-    el.classList.remove('hidden')
-    el.classList.add('block')
-    event.stopPropagation()
-}
-
 function copyApiKey(event) {
     const el = document.getElementById('api-key-container')
     el.select()

diff --git a/static/assets/icons.js b/static/assets/icons.js
diff --git a/static/assets/vendor/roboto-latin-ext.woff2 b/static/assets/vendor/roboto-latin-ext.woff2
diff --git a/static/assets/vendor/roboto-latin.woff2 b/static/assets/vendor/roboto-latin.woff2
diff --git a/static/assets/vendor/roboto.css b/static/assets/vendor/roboto.css
diff --git a/static/assets/vendor/source-sans-3.css b/static/assets/vendor/source-sans-3.css
@@ -0,0 +1,36 @@
+/* latin-ext */
+@font-face {
+    font-family: 'Source Sans 3';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(source-sans-3_latin-ext_400.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: 'Source Sans 3';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(source-sans-3_latin_400.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+    font-family: 'Source Sans 3';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url(source-sans-3_latin-ext_600.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: 'Source Sans 3';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url(source-sans-3_latin_600.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
diff --git a/static/assets/vendor/source-sans-3_latin-ext_400.woff2 b/static/assets/vendor/source-sans-3_latin-ext_400.woff2
diff --git a/static/assets/vendor/source-sans-3_latin-ext_600.woff2 b/static/assets/vendor/source-sans-3_latin-ext_600.woff2
diff --git a/static/assets/vendor/source-sans-3_latin_400.woff2 b/static/assets/vendor/source-sans-3_latin_400.woff2
diff --git a/static/assets/vendor/source-sans-3_latin_600.woff2 b/static/assets/vendor/source-sans-3_latin_600.woff2
diff --git a/views/footer.tpl.html b/views/footer.tpl.html
@@ -1,13 +1,13 @@
-<footer class="flex justify-between w-full text-center text-gray-500 text-xs mt-12">
-    <div class="text-xs font-mono">
+<footer class="flex justify-between w-full text-center text-gray-500 text-xs mt-20">
+    <div class="text-xs font-mono font-semibold">
         v{{ getVersion }} @ {{ getDbType }}
     </div>
-    <div>
-        Made with &nbsp; <span class="iconify inline" data-icon="bi:heart-fill"></span> &nbsp; by <a href="https://muetsch.io" class="border-b border-green-700">Ferdinand Mütsch</a> as <a
-                href="https://github.com/muety/wakapi" class="border-b border-green-700">open-source</a> software
+    <div class="font-semibold text-sm">
+        Made with &nbsp; <span class="iconify inline" data-icon="bi:heart-fill"></span> &nbsp; by <a href="https://muetsch.io" class="text-gray-400 hover:text-gray-300">Ferdinand Mütsch</a> as <a
+                href="https://github.com/muety/wakapi" class="text-gray-400 hover:text-gray-300">open-source</a> software
     </div>
-    <div>
-        <a href="imprint" class="border-b border-green-700">Imprint, Cookies & Data Privacy</a>
+    <div class="text-sm">
+        <a href="imprint" class="font-semibold hover:text-gray-400">Imprint, Cookies & Data Privacy</a>
     </div>
 </footer>
 

diff --git a/views/head.tpl.html b/views/head.tpl.html
@@ -10,7 +10,7 @@
     <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon-16x16.png">
     <link rel="manifest" href="assets/site.webmanifest">
-    <link href="assets/vendor/roboto.css" rel="stylesheet">
+    <link href="assets/vendor/source-sans-3.css" rel="stylesheet">
     {{ if isDev }}
     <link href="assets/vendor/tailwind.css" rel="stylesheet">
     {{ else }}

diff --git a/views/index.tpl.html b/views/index.tpl.html
@@ -11,43 +11,31 @@
 
 <div class="absolute flex top-0 right-0 mr-8 mt-10 py-2">
     <div class="mx-1">
-        <a href="login" class="py-2 px-4 block rounded bg-green-700 hover:bg-green-800 text-white text-sm">
-            <span class="iconify inline" data-icon="fxemoji:key"></span> &nbsp;Login️</a>
+        <a href="login" class="py-2 px-4 block rounded bg-green-700 hover:bg-green-800 text-white text-sm font-semibold">
+            <span class="iconify inline" data-icon="fluent:key-24-filled"></span> &nbsp;Login️</a>
     </div>
 </div>
 
-<main class="mt-10 px-16 flex-grow flex justify-center w-full">
+<main class="mt-10 px-4 md:px-10 lg:px-24 flex-grow flex justify-center w-full">
     <div class="flex flex-col text-white">
-        <h1 class="text-4xl font-semibold antialiased text-center mb-2">Keep Track of <span
-                class="text-green-700">Your</span> Coding Time <span class="iconify inline" data-icon="flat-color-icons:clock"></span></h1>
+        <h1 class="text-8xl font-semibold antialiased text-center mb-10 leading-snug">Keep Track of<br><span
+                class="text-green-700">Your</span> Coding Time</h1>
         <p class="text-center text-gray-500 text-xl my-2">Wakapi is an open-source tool that helps you keep track of the
             time you have spent coding on different projects in different programming languages and more.<br>Ideal for
             statistics freaks and anyone else.</p>
 
-        <p class="text-center text-gray-500 text-xl my-4">
-            <span class="mr-1"><span class="iconify inline" data-icon="twemoji:light-bulb"></span> The system has tracked a total of </span>
-            {{ range $d := .TotalHours | printf "%d" | toRunes }}
-            <span class="bg-gray-900 rounded-sm p-1 border border-gray-700 font-mono" style="margin: auto -2px;" title="{{ $.TotalHours }} hours (updated every hour)">{{ $d }}</span>
-            {{ end }}
-            <span class="mx-1">hours of coding from</span>
-            {{ range $d := .TotalUsers | printf "%d" | toRunes }}
-            <span class="bg-gray-900 rounded-sm p-1 border border-gray-700 font-mono" style="margin: auto -2px;" title="{{ $.TotalUsers }} users (updated every hour)">{{ $d }}</span>
-            {{ end }}
-            <span class="ml-1">users.</span>
-        </p>
-
-        <div class="flex justify-center mt-4 mb-8 space-x-2">
+        <div class="flex justify-center mt-8 mb-4 space-x-2">
             <a href="login">
                 <button type="button"
-                        class="py-2 px-4 rounded bg-green-700 hover:bg-green-800 text-white font-semibold"><span class="iconify inline" data-icon="fxemoji:rocket"></span> Try it!
+                        class="py-2 px-4 rounded bg-green-700 hover:bg-green-800 text-white font-semibold"><span class="iconify inline" data-icon="ion:rocket"></span> Let's Go!
                 </button>
             </a>
             <a href="https://github.com/muety/wakapi#%EF%B8%8F-how-to-use" target="_blank" rel="noopener noreferrer">
-                <button type="button" class="py-2 px-4 rounded bg-gray-800 hover:bg-gray-850 text-white"><span class="iconify inline" data-icon="fxemoji:satelliteantenna"></span> Host it
+                <button type="button" class="py-2 px-4 rounded bg-gray-800 hover:bg-gray-850 text-white"><span class="iconify inline" data-icon="heroicons-solid:server"></span> Get Your Own
                 </button>
             </a>
             <a href="https://github.com/sponsors/muety" target="_blank" rel="noopener noreferrer">
-                <button type="button" class="py-2 px-4 rounded bg-gray-800 hover:bg-gray-850 text-white"><span class="iconify inline" data-icon="flat-color-icons:donate"></span> Support it
+                <button type="button" class="py-2 px-4 rounded bg-gray-800 hover:bg-gray-850 text-white"><span class="iconify inline" data-icon="bx:bxs-heart"></span> Support Us
                 </button>
             </a>
             <a href="https://github.com/muety/wakapi" target="_blank" rel="noopener noreferrer">
@@ -57,25 +45,37 @@ <h1 class="text-4xl font-semibold antialiased text-center mb-2">Keep Track of <s
             </a>
         </div>
 
+        <p class="text-center text-gray-500 text-sm mb-4">
+            This system has tracked a total of </span>
+            {{ range $d := .TotalHours | printf "%d" | toRunes }}
+            <span class="bg-gray-900 rounded-sm p-1 border border-gray-700 font-mono text-gray-400" style="margin: auto -1px;" title="{{ $.TotalHours }} hours (updated every hour)">{{ $d }}</span>
+            {{ end }}
+            <span class="mx-1">hours of coding from</span>
+            {{ range $d := .TotalUsers | printf "%d" | toRunes }}
+            <span class="bg-gray-900 rounded-sm p-1 border border-gray-700 font-mono text-gray-400" style="margin: auto -1px;" title="{{ $.TotalUsers }} users (updated every hour)">{{ $d }}</span>
+            {{ end }}
+            <span class="ml-1">users.</span>
+        </p>
+
         <div class="flex justify-center my-8">
             <img alt="App screenshot" src="assets/images/screenshot.png">
         </div>
 
         <div class="flex flex-col items-center mt-10">
-            <h1 class="font-semibold text-xl text-white m-0 border-b-4 border-green-700">Features</h1>
-            <div class="mt-4 text-lg">
+            <h1 class="font-semibold text-3xl text-white m-0">Features</h1>
+            <div class="mt-4 text-lg text-gray-500">
                 <ul>
-                    <li><span class="iconify inline text-green-700" data-icon="ant-design:check-square-filled"></span> &nbsp; 100 % free and open-source</li>
-                    <li><span class="iconify inline text-green-700" data-icon="ant-design:check-square-filled"></span> &nbsp; Built by developers for developers</li>
-                    <li><span class="iconify inline text-green-700" data-icon="ant-design:check-square-filled"></span> &nbsp; Fancy statistics and plots</li>
-                    <li><span class="iconify inline text-green-700" data-icon="ant-design:check-square-filled"></span> &nbsp; Cool badges for readmes</li>
-                    <li><span class="iconify inline text-green-700" data-icon="ant-design:check-square-filled"></span> &nbsp; Weekly e-mail reports</li>
-                    <li><span class="iconify inline text-green-700" data-icon="ant-design:check-square-filled"></span> &nbsp; Intuitive REST API</li>
-                    <li><span class="iconify inline text-green-700" data-icon="ant-design:check-square-filled"></span> &nbsp; Compatible with <a href="https://wakatime.com" target="_blank" rel="noopener noreferrer" class="underline">Wakatime</a></li>
-                    <li><span class="iconify inline text-green-700" data-icon="ant-design:check-square-filled"></span> &nbsp; <a href="https://prometheus.io" target="_blank" rel="noopener noreferrer" class="underline">Prometheus</a> metrics</li>
-                    <li><span class="iconify inline text-green-700" data-icon="ant-design:check-square-filled"></span> &nbsp; Lightning fast</li>
-                    <li title="Wakapi.dev is hosted in Germany, none of your data will leave the EU"><span class="iconify inline text-green-700" data-icon="ant-design:check-square-filled"></span> &nbsp; GDPR-compliant</li>
-                    <li><span class="iconify inline text-green-700" data-icon="ant-design:check-square-filled"></span> &nbsp; Self-hosted</li>
+                    <li><span class="iconify inline text-green-700" data-icon="eva:checkmark-circle-2-fill"></span> &nbsp; 100 % free and open-source</li>
+                    <li><span class="iconify inline text-green-700" data-icon="eva:checkmark-circle-2-fill"></span> &nbsp; Built by developers for developers</li>
+                    <li><span class="iconify inline text-green-700" data-icon="eva:checkmark-circle-2-fill"></span> &nbsp; Fancy statistics and plots</li>
+                    <li><span class="iconify inline text-green-700" data-icon="eva:checkmark-circle-2-fill"></span> &nbsp; Cool badges for readmes</li>
+                    <li><span class="iconify inline text-green-700" data-icon="eva:checkmark-circle-2-fill"></span> &nbsp; Weekly e-mail reports</li>
+                    <li><span class="iconify inline text-green-700" data-icon="eva:checkmark-circle-2-fill"></span> &nbsp; Intuitive REST API</li>
+                    <li><span class="iconify inline text-green-700" data-icon="eva:checkmark-circle-2-fill"></span> &nbsp; Compatible with <a href="https://wakatime.com" target="_blank" rel="noopener noreferrer" class="text-gray-400 hover:text-gray-300">Wakatime</a></li>
+                    <li><span class="iconify inline text-green-700" data-icon="eva:checkmark-circle-2-fill"></span> &nbsp; <a href="https://prometheus.io" target="_blank" rel="noopener noreferrer" class="text-gray-400 hover:text-gray-300">Prometheus</a> metrics</li>
+                    <li><span class="iconify inline text-green-700" data-icon="eva:checkmark-circle-2-fill"></span> &nbsp; Lightning fast</li>
+                    <li title="Wakapi.dev is hosted in Germany, none of your data will leave the EU"><span class="iconify inline text-green-700" data-icon="eva:checkmark-circle-2-fill"></span> &nbsp; GDPR-compliant</li>
+                    <li><span class="iconify inline text-green-700" data-icon="eva:checkmark-circle-2-fill"></span> &nbsp; Self-hosted</li>
                 </ul>
             </div>
         </div>