Add new links, optimize styles for bg

New links:
- Appwrite
- VitePress
- void(0)
- Cypress
- Can I WebView...
- Accessibility Support

Author: alinnert

index.html

@@ -9,7 +9,7 @@
     <link rel="apple-touch-icon" href="/logo192.png" />
     <link rel="manifest" href="/manifest.json" />
 
-    <title>&lt;WebdevHome /&gt;</title>
+    <title>WebdevHome</title>
 
     <link rel="stylesheet" href="./index.css" />
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "webdevhome.github.io",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/components/Header/AppHeader.tsx

@@ -33,7 +33,8 @@ export const AppHeader: FC<Props> = ({ centerItems, actions }) => {
       className={classNames(
         'grid items-center',
         'grid-cols-[1fr,auto] grid-rows-[auto,auto] md:grid-cols-[1fr,auto,1fr] md:grid-rows-1',
-        'border-b border-black/10 dark:border-white/10',
+        // 'border-b border-black/10 dark:border-white/10',
+        'bg-black/5 dark:bg-white/5',
         'px-page',
       )}
     >

src/components/Links/LinkGroup.tsx

@@ -77,7 +77,7 @@ export const LinkGroup: FC<Props> = ({ group }) => {
             'flex-auto',
             'px-4 py-2',
             `bg-${group.color ?? 'gray'}-100 dark:bg-${group.color ?? 'gray'}-600`,
-            'text-center font-semibold uppercase tracking-wider',
+            'text-center font-semibold uppercase tracking-wider leading-tight',
             `text-${group.color ?? 'gray'}-800 dark:text-${group.color ?? 'gray'}-50`,
             'rounded-md',
             {

src/components/Links/LinkGroupButton.tsx

@@ -13,13 +13,17 @@ export const LinkGroupButton: FC<PropsWithChildren<Props>> = ({
     <button
       className={classNames(
         'justify-self-center',
-        'text-sm font-semibold text-gray-600 dark:text-gray-300',
+        'text-sm font-semibold',
         'tracking-wide',
         'my-2 px-4 py-1',
-        'border border-gray-300 hover:border-gray-400',
-        'dark:border-gray-500 dark:hover:border-gray-400',
-        'hover:bg-gray-200 active:bg-gray-300',
-        'dark:hover:bg-gray-600 dark:active:bg-gray-500',
+        'border',
+        'bg-clip-padding',
+        'text-gray-600 hover:text-gray-800 active:text-gray-800',
+        'dark:text-gray-300 dark:hover:text-gray-100 dark:active:text-gray-100',
+        'border-black/15 active:border-black/25',
+        'hover:bg-black/15 active:bg-black/25',
+        'dark:border-white/20 dark:hover:border-white/20 dark:active:border-white/25',
+        'dark:hover:bg-white/20 dark:active:bg-white/25',
         'rounded',
         'select-none',
         'cursor-default',

src/components/Search/SearchTargetLabel.tsx

@@ -51,7 +51,7 @@ export const SearchTargetLabel: FC<Props> = ({ title, icon, color }) => {
       className={classNames(
         'flex flex-col items-start gap-y-4 sm:flex-row sm:items-center',
         'sm:px-8',
-        'text-xl',
+        'text-base',
         'text-gray-700 dark:text-gray-100',
       )}
     >
@@ -60,8 +60,8 @@ export const SearchTargetLabel: FC<Props> = ({ title, icon, color }) => {
         className={classNames(
           'flex items-center',
           'mr-4 px-2 py-1',
-          'bg-gray-100 hover:bg-gray-200 active:bg-gray-300',
-          'dark:bg-gray-600 dark:hover:bg-gray-500 dark:active:bg-gray-400',
+          'bg-black/10 hover:bg-black/20 active:bg-black/25',
+          'dark:bg-white/15 dark:hover:bg-white/25 dark:active:bg-white/30',
           'rounded',
           'cursor-default select-none',
         )}

src/links.json

@@ -149,6 +149,12 @@
           "icon": "supabase",
           "color": "#3ecf8e"
         },
+        {
+          "title": "Appwrite",
+          "url": "https://appwrite.io",
+          "icon": "appwrite",
+          "color": "#FD366E"
+        },
         {
           "title": "DigitalOcean",
           "url": "https://www.digitalocean.com",
@@ -694,6 +700,13 @@
           "icon": "nuxtdotjs",
           "color": "#00DC82"
         },
+        {
+          "title": "VitePress",
+          "url": "https://vitepress.dev",
+          "description": "Static site generator powered by Vue.",
+          "icon": "vitepress",
+          "color": "#5C73E7"
+        },
         {
           "title": "Angular",
           "url": "https://angular.io",
@@ -1006,6 +1019,11 @@
           "icon": "createreactapp",
           "color": "#09D3AC"
         },
+        {
+          "title": "void(0)",
+          "url": "https://voidzero.dev",
+          "description": "A universal build chain from the creators of Vite."
+        },
         {
           "title": "Biome",
           "url": "https://biomejs.dev",
@@ -1064,6 +1082,13 @@
           "icon": "eslint",
           "color": "#4B32C3"
         },
+        {
+          "title": "Cypress",
+          "url": "https://www.cypress.io",
+          "description": "Library for test automation.",
+          "icon": "cypress",
+          "color": "#69D3A7"
+        },
         {
           "title": "Puppeteer",
           "url": "https://developers.google.com/web/tools/puppeteer",
@@ -1706,6 +1731,18 @@
           "searchUrl": "https://www.canidev.tools/?q={search}",
           "searchConcat": "+"
         },
+        {
+          "title": "Can I WebView...",
+          "url": "https://caniwebview.com",
+          "description": "Check system webviews for feature support.",
+          "searchUrl": "https://caniwebview.com/search/?s={search}",
+          "searchConcat": "+"
+        },
+        {
+          "title": "Accessibility Support",
+          "url": "https://a11ysupport.io",
+          "description": "Will your code work with assistive technologies?"
+        },
         {
           "title": "Web Platform Status",
           "url": "https://webstatus.dev",