improved styling for dbms-icons on the homepage

Author: Barakudum

src/webpage/src/data/databases.data.ts

@@ -1,14 +1,46 @@
 export default {
     load(): Data[] {
         return <Data[]>[
-            { label: "ClickHouse", src: "/dbms-icons/clickhouse.svg" },
-            { label: "Microsoft SQL Server", src: "/dbms-icons/mssql.svg" },
-            { label: "MySQL", src: "/dbms-icons/mysql.svg" },
-            { label: "Oracle", src: "/dbms-icons/oracle.png" },
-            { label: "PostgreSQL", src: "/dbms-icons/postgresql.svg" },
-            { label: "Redshift", src: "/dbms-icons/redshift.svg" },
-            { label: "Snowflake", src: "/dbms-icons/snowflake.svg" },
-            { label: "SQLite", src: "/dbms-icons/sqlite.svg" },
+            {
+                label: "ClickHouse",
+                href: "https://clickhouse.com/",
+                src: "/dbms-icons/clickhouse.svg",
+            },
+            {
+                label: "Microsoft SQL Server",
+                href: "https://www.microsoft.com/en-us/sql-server",
+                src: "/dbms-icons/mssql.svg",
+            },
+            {
+                label: "MySQL",
+                href: "https://www.mysql.com/",
+                src: "/dbms-icons/mysql.svg",
+            },
+            {
+                label: "Oracle",
+                href: "https://www.oracle.com/database/",
+                src: "/dbms-icons/oracle.png",
+            },
+            {
+                label: "PostgreSQL",
+                href: "https://www.postgresql.org/",
+                src: "/dbms-icons/postgresql.svg",
+            },
+            {
+                label: "Redshift",
+                href: "https://aws.amazon.com/redshift/",
+                src: "/dbms-icons/redshift.svg",
+            },
+            {
+                label: "Snowflake",
+                href: "https://www.snowflake.com/",
+                src: "/dbms-icons/snowflake.svg",
+            },
+            {
+                label: "SQLite",
+                href: "https://www.sqlite.org/",
+                src: "/dbms-icons/sqlite.svg",
+            },
         ]
     }
 }

src/webpage/src/index.md

@@ -44,6 +44,31 @@ import { data as databases } from "/data/databases.data.ts";
 import { data as members } from "/data/members.data.ts";
 </script>
 
+<style scoped>
+#dbms-links {
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    padding: 2rem 0;
+}
+#dbms-links > a {
+    text-decoration: none;
+    color: var(--vp-c-text-1);
+}
+#dbms-links > a:hover {
+    text-decoration: underline;
+}
+#dbms-links > a > img {
+    height: 100px;
+    margin: 0 auto;
+    filter: grayscale(100%);
+    transition: filter 0.5s ease;
+}
+#dbms-links > a:hover > img {
+    filter: grayscale(0%);
+}
+</style>
+
 ---
 
 > [!IMPORTANT]
@@ -56,11 +81,11 @@ import { data as members } from "/data/members.data.ts";
 
 <h1 style="text-align: center">DynAPI supports (soon) multiple DBMS</h1>
 
-<div style="display: flex; justify-content: space-around; flex-wrap: wrap; padding: 2rem 0">
-    <div v-for="db in databases">
-        <img style="height: 100px; margin: 0 auto; filter: grayscale(1);" :alt="db.label" :src="withBase(db.src)" />
+<div id="dbms-links" style="">
+    <a v-for="db in databases" :href="db.href">
+        <img :alt="db.label" :src="withBase(db.src)" />
         <p style="text-align: center">{{ db.label }}</p>
-    </div>
+    </a>
 </div>
 
 [//]: # (- Vertica)