techit/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

To v 16.1.1: merge card css classes

Browse Source
This commit is contained in:
Techit Thawiang
2025-10-18 20:36:22 +07:00
parent c4016fe8f8
commit 91ee5eb3e4
11 changed files with 188 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/css/main.css
+135 -118
View File
@@ -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);
}
app/components/post-card.vue
+3 -3
View File
@@ -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>
app/components/posts-article-list.vue
+1 -1
View File
@@ -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>
app/components/project-card.vue
+2 -2
View File
@@ -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>
app/components/projects-article-list.vue
+1 -1
View File
@@ -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>
app/components/web-footer.vue
+1 -1
View File
@@ -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>
app/pages/contact.vue
+24 -24
View File
@@ -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>
app/pages/fonts.vue
+6 -6
View File
@@ -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>
app/pages/index.vue
+9 -9
View File
@@ -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>
app/pages/portal.vue
+5 -5
View File
@@ -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>