From 91ee5eb3e46faf419ba40d4a2ab868406ae3a247 Mon Sep 17 00:00:00 2001
From: Techit Thawiang <techit@thawia.ng>
Date: Sat, 18 Oct 2025 20:36:22 +0700
Subject: [PATCH] To v 16.1.1: merge card css classes

---
 app/assets/css/main.css                  | 253 ++++++++++++-----------
 app/components/post-card.vue             |   6 +-
 app/components/posts-article-list.vue    |   2 +-
 app/components/project-card.vue          |   4 +-
 app/components/projects-article-list.vue |   2 +-
 app/components/web-footer.vue            |   2 +-
 app/pages/contact.vue                    |  48 ++---
 app/pages/fonts.vue                      |  12 +-
 app/pages/index.vue                      |  18 +-
 app/pages/portal.vue                     |  10 +-
 package.json                             |   2 +-
 11 files changed, 188 insertions(+), 171 deletions(-)

diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index ac9cf92..014f681 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -1,11 +1,10 @@
-
 :root {
     --ui-spacing: 0.25rem;
     --ui-primary: var(--color-deep-dark);
     --ui-container: 64rem;
     --ui-container-narrow: 48rem;
     --ui-header-logo-inverted: 1;
-    --ui-header-height: calc(var(--ui-spacing)*14);
+    --ui-header-height: calc(var(--ui-spacing)*14);
     --ui-header-height-collapsed: calc(var(--ui-spacing)*12);
 
     --color-surface-background: #f9f9f9;
@@ -61,6 +60,9 @@
     outline: var(--ui-ring-size) solid var(--ui-ring-color);
     outline-offset: var(--ui-ring-offset);
 }
+button, .btn {
+    user-select: none!important;
+}
 body,main {
     font-family: var(--font-sans);
     padding: 0;
@@ -93,7 +95,7 @@ h6 { font-size: 0.90em; }
 .material-symbols-outlined {
     font-variation-settings:
         'FILL' 0,
-        'wght' 400,
+        'wght' 100,
         'GRAD' 0,
         'opsz' 24
 }
@@ -112,9 +114,9 @@ h6 { font-size: 0.90em; }
     top: 0;
     height: var(--ui-header-height-collapsed);
     z-index: 998;
-}
+}
 @media screen and (min-width: 1024px) {
-    .web-header, .hamburger-menu-header {
+    .web-header, .hamburger-menu-header {
         height: var(--ui-header-height);
     }
 }
@@ -133,11 +135,25 @@ h6 { font-size: 0.90em; }
     border-radius: 0;
 }
 .web-header-title {
-    font-size: 18px;
+    display: none;
+    visibility: hidden;
+    font-size: 16px;
     font-weight: 700;
     margin: 0;
     margin-inline: calc(var(--ui-spacing)*2);
 }
+@media screen and (min-width: 480px) {
+    .web-header-title {
+        display: block;
+        visibility: visible;
+    }
+}
+@media screen and (max-width: 479px) {
+    .web-header-logo-banner > .web-header-logo {
+        width: var(--ui-header-height-collapsed);
+        height: var(--ui-header-height-collapsed);
+    }
+}
 .web-nav, .web-footer-content, .article {
     width: 100%;
 }
@@ -292,7 +308,7 @@ p {
 .web-section.web-section-narrow {
     max-width: var(--ui-container-narrow);
 }
-.project-card-container, .font-card-container, .post-card-container {
+.card-container {
     margin-block: 1em;
     background: var(--color-container);
     color: var(--color-on-container);
@@ -305,90 +321,85 @@ p {
     overflow: hidden;
     box-shadow: 0 1px 1px rgb(0,0,0,.1);
 }
-/* .project-card-container > li:not(:last-child):not(:first-child):not(:only-child) > .project-card,
-.post-card-container > a.post-card:not(:last-child):not(:first-child):not(:only-child),
-.font-card-container > li:not(:last-child):not(:first-child):not(:only-child) > .font-card {
-    border-radius: calc(var(--ui-spacing)*1);
-}
-.project-card-container > li:last-child:not(:only-child) > .project-card,
-.post-card-container > a.post-card:last-child:not(:only-child),
-.font-card-container > li:last-child:not(:only-child) > .font-card {
-    border-top-left-radius: calc(var(--ui-spacing)*1);
-    border-top-right-radius: calc(var(--ui-spacing)*1);
-}
-.project-card-container > li:first-child:not(:only-child) > .project-card,
-.post-card-container > a.post-card:first-child:not(:only-child),
-.font-card-container > li:first-child:not(:only-child) > .font-card {
-    border-bottom-left-radius: calc(var(--ui-spacing)*1);
-    border-bottom-right-radius: calc(var(--ui-spacing)*1);
-} */
-.project-card-container > li, .post-card-container > li, .font-card-container > li { margin-left: 0; }
-.project-card, .font-card, .post-card {
+.card-container > li { margin-left: 0; }
+.card {
     height: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     background: var(--ui-bg-muted);
     margin-left: 0;
-    h3 {
-        font-size: 24px;
-        overflow: hidden;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 1;
-    }
-    h3, p { z-index: 1; }
-    img {
-        aspect-ratio: 16/9;
-        object-fit: cover;
-        width: 100%;
-        border-radius: 0;
-    }
-    p {
-        margin: 0;
-        width: 100%;
-        overflow: hidden;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 2;
-    }
-    .iconify {
-        background-color: var(--ui-text);
-        width: calc(var(--ui-spacing)*16);
-        height: calc(var(--ui-spacing)*16);
-    }
-    .project-card-content, .font-card-content, .post-card-content {
-        display: block;
-        width: 100%;
-        padding: calc(var(--ui-spacing)*3);
-        h3 {
-            margin: 0;
-        }
-    }
-    &.disabled {
-        opacity: 0.5;
-        pointer-events: none;
-        cursor: not-allowed;
-    }
 }
-.project-card:hover, .font-card:hover, .post-card:hover {
+.card.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+    cursor: not-allowed;
+    z-index: 1;
+}
+.card > h3 {
+    font-size: 24px;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    z-index: 1;
+}
+.card > p {
+    z-index: 1;
+    margin: 0;
+    width: 100%;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+}
+.card > img {
+    aspect-ratio: 16/9;
+    object-fit: cover;
+    width: 100%;
+    border-radius: 0;
+}
+.card > .iconify,
+.card > .material-symbols-outlined {
+    background: var(--color-primary);
+    color: var(--color-on-primary);
+    width: calc(var(--ui-spacing)*16);
+    height: calc(var(--ui-spacing)*16);
+}
+.card > .material-symbols-outlined {
+    align-content: center;
+    text-align: center;
+    font-size: 48px;
+    font-variation-settings:
+        'opsz' 48
+}
+.card > .card-content {
+    display: block;
+    width: 100%;
+    padding: calc(var(--ui-spacing)*3);
+}
+.card > .card-content h3 {
+    margin: 0;
+}
+.card:hover {
     background: var(--color-secondary);
 }
-.project-card:not(:only-child):not(:last-child),
-.font-card:not(:only-child):not(:last-child),
-.post-card:not(:only-child):not(:last-child) {
+.card-container > .card:not(:only-child):not(:last-child) {
     border-bottom: 1px solid var(--color-outline);
 }
+.card.card-always-long {
+    flex-direction: row;
+}
 @media screen and (min-width: 640px) {
-    .project-card, .font-card, .post-card {
+    .card, .card.card-always-long {
         flex-direction: row;
-        img {
-            margin-bottom: 0;
-            max-width: calc(var(--ui-spacing)*64);
-        }
-        .project-card-content, .font-card-content, .post-card-content {
-            padding-inline: calc(var(--ui-spacing)*4);
-        }
+    }
+    .card > img {
+        margin-bottom: 0;
+        max-width: calc(var(--ui-spacing)*64);
+    }
+    .card > .card-content {
+        padding-inline: calc(var(--ui-spacing)*4);
     }
 }
 .hamburger-toggle {
@@ -433,45 +444,48 @@ p {
     transition-timing-function: cubic-bezier(var(--ease-fluid));
     width: 100%;
     max-width: 20rem;
-    .nav-wrapper {
-        list-style-type: none;
-        display: flex;
-        flex-direction: column;
-        margin: 0;
-        padding: 0 calc(var(--ui-spacing)*4);
-        width: 100%;
-        align-items: end;
-        .nav-link, .nav-button {
-            display: flex;
-            width: 100%;
-            margin-left: 0;
-            a, .hamburger-btn-square {
-                display: flex;
-                align-items: center;
-                width: 100%;
-                padding-inline: calc(var(--ui-spacing)*4);
-                height: calc(var(--ui-spacing)*12);
-            }
-            a.router-link-exact-active {
-                color: var(--color-accent);
-            }
-            .hamburger-btn-square {
-                aspect-ratio: 1/1;
-                justify-content: center;
-                width: unset;
-            }
-        }
-        .nav-link:not(:only-child):not(:last-child) {
-            border-bottom: 1px solid var(--color-outline);
-        }
-        .nav-button {
-            display: flex;
-            width: 100%;
-            max-width: 18rem;
-            margin-left: calc(var(--ui-spacing) * 0);
-            justify-content: flex-end;
-        }
-    }
+}
+.hamburger-menu > .nav-wrapper {
+    list-style-type: none;
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0 calc(var(--ui-spacing)*4);
+    width: 100%;
+    align-items: end;
+    overflow-y: scroll;
+}
+.hamburger-menu > .nav-wrapper > .nav-link,
+.hamburger-menu > .nav-wrapper > .nav-button {
+    display: flex;
+    width: 100%;
+    margin-left: 0;
+}
+.hamburger-menu > .nav-wrapper > .nav-link > a,
+.hamburger-menu > .nav-wrapper > .nav-link > .hamburger-btn-square {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding-inline: calc(var(--ui-spacing)*4);
+    height: calc(var(--ui-spacing)*12);
+}
+.hamburger-menu > .nav-wrapper > .nav-link > a.router-link-exact-active {
+    color: var(--color-accent);
+}
+.hamburger-menu > .nav-wrapper > .nav-link > .hamburger-btn-square {
+    aspect-ratio: 1/1;
+    justify-content: center;
+    width: unset;
+}
+.hamburger-menu > .nav-wrapper > .nav-link:not(:only-child):not(:last-child) {
+    border-bottom: 1px solid var(--color-outline);
+}
+.hamburger-menu > .nav-wrapper > .nav-button {
+    display: flex;
+    width: 100%;
+    max-width: 18rem;
+    margin-left: calc(var(--ui-spacing) * 0);
+    justify-content: flex-end;
 }
 .hamburger-menu.hamburger-menu-hidden {
     transform: translateX(-100%);
@@ -509,6 +523,8 @@ ul.nav-wrapper {
     align-content: center;
     height: 100%;
     margin: 0;
+    font-size: 14px;
+    font-weight: 400;
 }
 .nav-links > .nav-wrapper > .nav-link > a {
     display: flex;
@@ -635,7 +651,8 @@ a.btn {
     }
 }
 .post-more-info {
-    margin-top: calc(var(--ui-spacing)*4);
+    margin: 0;
+    margin-top: calc(var(--ui-spacing)*2);
     font-size: 12px;
     font-family: var(--font-mono);
 }
diff --git a/app/components/post-card.vue b/app/components/post-card.vue
index d2e7302..d1857f5 100644
--- a/app/components/post-card.vue
+++ b/app/components/post-card.vue
@@ -1,8 +1,8 @@
 <template>
     <template v-if="post">
-        <NuxtLink class="post-card" :to="post?.path">
-            <img :src="post?.coverImage" :alt="post?.title + '’s cover image'"/>
-            <div class="post-card-content">
+        <NuxtLink class="card" :to="post?.path">
+            <img width="256" :src="post?.coverImage" :alt="post?.title + '’s cover image'"/>
+            <div class="card-content">
                 <h3 :title="post?.title">{{ post?.title }}</h3>
                 <p style="margin-block: 0.25em" :title="post?.description">{{ post?.description }}</p>
                 <p class="post-more-info" :title="useFormatDate(post?.dateUpdated)">📅 {{ useRelativeDate(post?.dateUpdated) }}</p>
diff --git a/app/components/posts-article-list.vue b/app/components/posts-article-list.vue
index 6272c5f..7548843 100644
--- a/app/components/posts-article-list.vue
+++ b/app/components/posts-article-list.vue
@@ -1,5 +1,5 @@
 <template>
-    <section class="post-card-container">
+    <section class="card-container">
         <template v-for="post in posts" :key="post.id">
             <PostCard :post="post" />
         </template>
diff --git a/app/components/project-card.vue b/app/components/project-card.vue
index 1951eac..b8def47 100644
--- a/app/components/project-card.vue
+++ b/app/components/project-card.vue
@@ -1,8 +1,8 @@
 <template>
     <template v-if="project">
-        <NuxtLink class="project-card" :to="project?.path">
+        <NuxtLink class="card" :to="project?.path">
             <img :src="project?.logo" :alt="project?.title + '’s cover image'"/>
-            <div class="project-card-content">
+            <div class="card-content">
                 <h3 :title="project?.title">{{ project?.title }}</h3>
                 <p style="margin-block: 0.25em" :title="project?.description">{{ project?.description }}</p>
                 <p class="post-more-info" :title="useFormatDate(project?.dateUpdated)">📅 {{ useRelativeDate(project?.dateUpdated) }}</p>
diff --git a/app/components/projects-article-list.vue b/app/components/projects-article-list.vue
index e4aabf6..9fc33cd 100644
--- a/app/components/projects-article-list.vue
+++ b/app/components/projects-article-list.vue
@@ -1,5 +1,5 @@
 <template>
-    <section class="post-card-container">
+    <section class="card-container">
         <template v-for="project in projects" :key="project.id">
             <ProjectCard :project="project" />
         </template>
diff --git a/app/components/web-footer.vue b/app/components/web-footer.vue
index d418ebc..e1c9bd7 100644
--- a/app/components/web-footer.vue
+++ b/app/components/web-footer.vue
@@ -10,7 +10,7 @@ import WebThemeToggle from './web-theme-toggle.vue';
                 <p class="web-footer-notice">
                     Copyright &copy; Techit Thawiang 2025 (2568). All rights reserved.<br>
                     PGP/GPG Key: <code style="font-size: 12px;"><a href="https://files.thawia.ng/files/Techit Thawiang_0xE649CED321557334_public.asc">4116 33BE 1B4A 19D4 8D77  9ADE E649 CED3 2155 7334</a></code><br>
-                    Powered by <a class="link" href="https://dailitation.xyz">dailitation.xyz</a>. <a class="link" href="https://github.com/TechitWinner/web">Source Code</a> is available under GPL-3.0 license.
+                    Powered by <a class="link" href="https://dailitation.xyz">dailitation.xyz</a>; Website is available under <a class="link" href="https://github.com/TechitWinner/web">GPL-3.0</a>.
                 </p>
             </section>
         </div>
diff --git a/app/pages/contact.vue b/app/pages/contact.vue
index 871da78..4ba9490 100644
--- a/app/pages/contact.vue
+++ b/app/pages/contact.vue
@@ -8,34 +8,34 @@
             <section class="web-section" aria-labelledby="decentralized" aria-describedby="decentralized-paragraph-1">
                 <h2 class="web-title" id="decentralized">Decentral&shy;ized Ways</h2>
                 <p id="decentralized-paragraph-1">I recommended to contact me via these given ways.</p>
-                <section class="font-card-container">
-                    <a class="font-card" href="mailto:techit@thawia.ng">
-                        <div class="font-card-content">
+                <section class="card-container">
+                    <a class="card" href="mailto:techit@thawia.ng">
+                        <div class="card-content">
                             ✉️ techit@thawia.ng
                         </div>
                     </a>
-                    <a class="font-card" href="mailto:techit@dailitation.xyz">
-                        <div class="font-card-content">
+                    <a class="card" href="mailto:techit@dailitation.xyz">
+                        <div class="card-content">
                             ✉️ techit@dailitation.xyz
                         </div>
                     </a>
-                    <a class="font-card" href="mailto:techit@unix.in.th">
-                        <div class="font-card-content">
+                    <a class="card" href="mailto:techit@unix.in.th">
+                        <div class="card-content">
                             ✉️ techit@unix.in.th
                         </div>
                     </a>
-                    <a class="font-card" href="mailto:techit.th@icloud.com">
-                        <div class="font-card-content">
+                    <a class="card" href="mailto:techit.th@icloud.com">
+                        <div class="card-content">
                             ✉️ techit.th@icloud.com
                         </div>
                     </a>
-                    <a class="font-card" href="https://furnu.org/@techit">
-                        <div class="font-card-content">
+                    <a class="card" href="https://furnu.org/@techit">
+                        <div class="card-content">
                             techit@furnu.org — Mastodon
                         </div>
                     </a>
-                    <div class="font-card">
-                        <div class="font-card-content">
+                    <div class="card">
+                        <div class="card-content">
                             techitwinner@matrix.org — Matrix
                         </div>
                     </div>
@@ -44,29 +44,29 @@
             <section class="web-section" aria-labelledby="centralized" aria-describedby="centralized-paragraph-1">
                 <h2 class="web-title" id="centralized">Social Media</h2>
                 <p id="centralized-paragraph-1">If I do not reply to messages sent via contact above, plesae kindly contact me via these social media accounts.</p>
-                <section class="font-card-container">
-                    <a class="font-card" href="https://x.com/techitwinner">
-                        <div class="font-card-content">
+                <section class="card-container">
+                    <a class="card" href="https://x.com/techitwinner">
+                        <div class="card-content">
                             @techitwinner — X (Twitter)
                         </div>
                     </a>
-                    <a class="font-card" href="https://tiktok.com/@techitwinner">
-                        <div class="font-card-content">
+                    <a class="card" href="https://tiktok.com/@techitwinner">
+                        <div class="card-content">
                             @techitwinner — TikTok
                         </div>
                     </a>
-                    <a class="font-card" href="https://instagram.com/techitwinner">
-                        <div class="font-card-content">
+                    <a class="card" href="https://instagram.com/techitwinner">
+                        <div class="card-content">
                             @techitwinner — Instagram
                         </div>
                     </a>
-                    <a class="font-card" href="https://facebook.com/@techitwinner">
-                        <div class="font-card-content">
+                    <a class="card" href="https://facebook.com/@techitwinner">
+                        <div class="card-content">
                             @techitwinner — Facebook
                         </div>
                     </a>
-                    <a class="font-card" href="https://bsky.app/profile/thawia.ng">
-                        <div class="font-card-content">
+                    <a class="card" href="https://bsky.app/profile/thawia.ng">
+                        <div class="card-content">
                             @thawia.ng — BlueSky
                         </div>
                     </a>
diff --git a/app/pages/fonts.vue b/app/pages/fonts.vue
index d556d61..8360efa 100644
--- a/app/pages/fonts.vue
+++ b/app/pages/fonts.vue
@@ -20,19 +20,19 @@
             <section v-else-if="fonts" v-for="family in fonts" key="family.id" class="web-section" :aria-labelledby="family.id + '-title'" :aria-describedby="family.desc + '-desc'">
                 <h2 :id="family.id + '-title'" class="web-title">{{ family.family }}</h2>
                 <p :id="family.id + '-desc'">{{ family.desc }}</p>
-                <!-- <ul class="font-card-container">
+                <!-- <ul class="card-container">
                     <li v-for="font in family.children" :key="font.id">
-                        <a :class="'font-card', {disabled: font.disabled}" :href="fontUrl + font.css">
-                            <div class="font-card-content text-xl">
+                        <a :class="'card', {disabled: font.disabled}" :href="fontUrl + font.css">
+                            <div class="card-content text-xl">
                                 {{ font.name }}
                                 <p>{{ fontUrl + font.css }}</p>
                             </div>
                         </a>
                     </li>
                 </ul> -->
-                <section class="font-card-container">
-                    <a class="font-card" v-for="font in family.children" :key="font.id" :href="fontUrl + font.css">
-                        <div class="font-card-content">
+                <section class="card-container">
+                    <a :class="'card', {disabled: font.disabled}" v-for="font in family.children" :key="font.id" :href="fontUrl + font.css">
+                        <div class="card-content">
                             {{ font.name }}
                         </div>
                     </a>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 6755064..a5e994e 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -21,26 +21,26 @@
                 <h2 class="web-title" id="projects">My projects</h2>
                 <p id="projects-paragraph-1">As I said above, I usually spend my free time learning more about software engineering. This includes server administration for <a class="link" href="https://dailitation.xyz">dailitation.xyz</a>. Over time, small and large projects have born and died.</p>
                 <p id="projects-paragraph-2">Let's go take a look of my projects collection!</p>
-                <div class="project-card-container">
-                    <!-- <a target="_blank" href="https://github.com/TechitWinner/warehouse" class="project-card">
+                <div class="card-container">
+                    <!-- <a target="_blank" href="https://github.com/TechitWinner/warehouse" class="card">
                         <img src="https://files.thawia.ng/files/assets/warehouse.jpg">
-                        <div class="project-card-content">
+                        <div class="card-content">
                             <h3>Warehouse</h3>
                             <p title="I planned it to be my API for personal website and other stuff; written in Rust and Axum.">I planned it to be my API for personal website and other stuff; written in Rust and Axum.</p>
                         </div>
                     </a> -->
-                    <a target="_blank" href="https://github.com/TechitWinner/web" class="project-card">
+                    <a target="_blank" href="https://github.com/TechitWinner/web" class="card">
                         <img src="https://files.thawia.ng/files/assets/web.png">
-                        <div class="project-card-content">
+                        <div class="card-content">
                             <h3>Web</h3>
-                            <p title="Nothing much, just this website written in Nuxt (Vue) and some cool CSS.">Nothing much, just this website written in Nuxt (Vue) and some cool CSS.</p>
+                            <p style="margin-block:0.25em;" title="Nothing much, just this website written in Nuxt (Vue) and some cool CSS.">Nothing much, just this website written in Nuxt (Vue) and some cool CSS.</p>
                         </div>
                     </a>
-                    <a target="_blank" href="https://github.com/TechitWinner/coinbag-pro" class="project-card">
+                    <a target="_blank" href="https://github.com/TechitWinner/coinbag-pro" class="card">
                         <img src="https://opengraph.githubassets.com/79ca3021ce93e3d277062d399d623842564bc2f9407600e5b6102036f01e8277/TechitWinner/coinbag-pro">
-                        <div class="project-card-content">
+                        <div class="card-content">
                             <h3>Coinbag Pro</h3>
-                            <p title="A handwriting typeface, created by me but it is a dead project now.">A handwriting typeface, created by me but it is a dead project now.</p>
+                            <p style="margin-block:0.25em;" title="A handwriting typeface, created by me but it is a dead project now.">A handwriting typeface, created by me but it is a dead project now.</p>
                         </div>
                     </a>
                 </div>
diff --git a/app/pages/portal.vue b/app/pages/portal.vue
index 748f199..d94f6ea 100644
--- a/app/pages/portal.vue
+++ b/app/pages/portal.vue
@@ -6,18 +6,18 @@
                 <p id="hero-desc" class="font-hero-desc">Take a portal to travel to various dimensions.</p>
             </section>
             <section class="web-section" aria-labelledby="projects" aria-describedby="projects-paragraph-1">
-                <ul class="font-card-container">
+                <ul class="card-container">
                     <li>
-                        <a :class="'font-card'" :href="baseUrl + '/portal/f/'">
-                            <div class="font-card-content">
+                        <a :class="'card'" :href="baseUrl + '/portal/f/'">
+                            <div class="card-content">
                                 <h3>Files</h3>
                                 <p>A portal that collects this website data, whether it's mine or not.</p>
                             </div>
                         </a>
                     </li>
                     <li>
-                        <a :class="'font-card'" :href="baseUrl + '/portal/s/'">
-                            <div class="font-card-content">
+                        <a :class="'card'" :href="baseUrl + '/portal/s/'">
+                            <div class="card-content">
                                 <h3>Share</h3>
                                 <p>A portal that were created by me to share media, It works like Google Drive public share.</p>
                             </div>
diff --git a/package.json b/package.json
index 7866348..e0beb7f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@techitwinner/web",
-  "version": "16.1.0",
+  "version": "16.1.1",
   "private": true,
   "type": "module",
   "scripts": {