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

change layout class

Browse Source
This commit is contained in:
Techit Thawiang
2025-10-01 20:05:16 +07:00
parent 00c6d873e9
commit 4184918a5d
11 changed files with 46 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/post-card.vue
+2 -2
View File
@@ -1,8 +1,8 @@
<template> <template>
<template v-if="post"> <template v-if="post">
<NuxtLink class="project-card" :to="post.path"> <NuxtLink class="post-card" :to="post.path">
<img :src="baseUrl + '/portal/f/assets/' + post.coverImage" :alt="post?.title + '’s cover image'"/> <img :src="baseUrl + '/portal/f/assets/' + post.coverImage" :alt="post?.title + '’s cover image'"/>
<div class="project-card-content"> <div class="post-card-content">
<h3>{{ post.title }}</h3> <h3>{{ post.title }}</h3>
<p :title="post.description">{{ post.description }}</p> <p :title="post.description">{{ post.description }}</p>
<p class="mt-4 text-xs" :title="useFormatDate(post.dateUpdated)">{{ useRelativeDate(post.dateUpdated) }}</p> <p class="mt-4 text-xs" :title="useFormatDate(post.dateUpdated)">{{ useRelativeDate(post.dateUpdated) }}</p>
components/posts-article-list.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template> <template>
<section class="project-cards"> <section class="post-card-container">
<template v-for="post in posts" :key="post.id"> <template v-for="post in posts" :key="post.id">
<PostCard :post="post" /> <PostCard :post="post" />
</template> </template>
components/web-footer.vue
+5
View File
@@ -15,6 +15,11 @@ import WebThemeToggle from './web-theme-toggle.vue';
Powered by <a class="link" href="https://dailitation.xyz">dailitation.xyz</a>, <a class="link" href="https://github.com/TechitWinner/web">Source Code</a>. Powered by <a class="link" href="https://dailitation.xyz">dailitation.xyz</a>, <a class="link" href="https://github.com/TechitWinner/web">Source Code</a>.
</small> </small>
</p> </p>
<p>
<small>
More from me: <a class="link" href="https://unix.in.th">unix.in.th</a>, <NuxtLink class="link" href="/portal">Portal</NuxtLink> and <a class="link" href="https://uptime.dailitation.xyz">Network Status</a>
</small>
</p>
<WebThemeToggle/> <WebThemeToggle/>
</section> </section>
</div> </div>
pages/collections.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template> <template>
<main> <main>
<article class="article"> <article class="article">
<section class="web-hero" aria-labelledby="hero" aria-describedby="hero-desc"> <section class="web-section" aria-labelledby="hero" aria-describedby="hero-desc">
<h1 id="hero" class="font-hero">Techit's Collection</h1> <h1 id="hero" class="font-hero">Techit's Collection</h1>
<p id="hero-desc" class="font-hero-desc">Techit's personal collection of various interesting, trending media/materials.</p> <p id="hero-desc" class="font-hero-desc">Techit's personal collection of various interesting, trending media/materials.</p>
</section> </section>
pages/contact.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template> <template>
<main> <main>
<article class="article"> <article class="article">
<section class="web-hero" aria-labelledby="hero" aria-describedby="hero-desc"> <section class="web-section" aria-labelledby="hero" aria-describedby="hero-desc">
<h1 id="hero" class="font-hero">Contact Techit</h1> <h1 id="hero" class="font-hero">Contact Techit</h1>
<p id="hero-desc" class="font-hero-desc">You can reach me in countless ways — I’m on basically every social media app out there.</p> <p id="hero-desc" class="font-hero-desc">You can reach me in countless ways — I’m on basically every social media app out there.</p>
</section> </section>
pages/fonts.vue
+3 -3
View File
@@ -1,7 +1,7 @@
<template> <template>
<main> <main>
<article class="article"> <article class="article">
<section class="web-hero" aria-labelledby="hero" aria-describedby="hero-desc"> <section class="web-section" aria-labelledby="hero" aria-describedby="hero-desc">
<h1 id="hero" class="font-hero">Fonts</h1> <h1 id="hero" class="font-hero">Fonts</h1>
<p id="hero-desc" class="font-hero-desc">This page were created to list all fonts I have hosted it here, so you can use it too.</p> <p id="hero-desc" class="font-hero-desc">This page were created to list all fonts I have hosted it here, so you can use it too.</p>
</section> </section>
@@ -16,10 +16,10 @@
<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'"> <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> <h2 :id="family.id + '-title'" class="web-title">{{ family.family }}</h2>
<p :id="family.id + '-desc'">{{ family.desc }}</p> <p :id="family.id + '-desc'">{{ family.desc }}</p>
<ul class="font-cards"> <ul class="font-card-container">
<li v-for="font in family.children" :key="font.id"> <li v-for="font in family.children" :key="font.id">
<a :class="'font-card', {disabled: font.disabled}" :href="fontUrl + font.css"> <a :class="'font-card', {disabled: font.disabled}" :href="fontUrl + font.css">
<div class="font-card-content text-2xl"> <div class="font-card-content text-xl">
{{ font.name }} {{ font.name }}
<!-- <p>{{ fontUrl + font.css }}</p> --> <!-- <p>{{ fontUrl + font.css }}</p> -->
</div> </div>
pages/index.vue
+4 -4
View File
@@ -1,10 +1,10 @@
<template> <template>
<main> <main>
<article class="article"> <article class="article">
<section class="web-hero" aria-labelledby="hero" aria-describedby="what-does-he-do?"> <section class="web-section" aria-labelledby="hero" aria-describedby="what-does-he-do?">
<img width="240" height="240" class="mb-6" src="https://thawia.ng/portal/f/assets/profile/techit/sumo-clipart.png" alt="Techit Thawiang's avatar."> <img width="240" height="240" class="mb-6" src="https://thawia.ng/portal/f/assets/profile/techit/1758801557516.jpeg" alt="Techit Thawiang's avatar.">
<h1 id="hero" class="font-hero">Techit Thawiang</h1> <h1 id="hero" class="font-hero">Techit Thawiang</h1>
<p id="what-does-he-do?" class="font-hero-desc">A 10th grader <span class="text-pink-500">hobbyist developer</span>, <span class="text-green-600">a math lover</span>, <span class="text-blue-500">self-hoster</span> and a KDE user who's exploring computer science.</p> <p id="what-does-he-do?" class="font-hero-desc">A 10th grader <span class="text-pink-500">hobbyist developer</span>, <span class="text-green-600">a math lover</span> and a <span class="text-blue-500">self-hoster</span> who's exploring computer science.</p>
</section> </section>
<section class="web-section" aria-labelledby="about-me" aria-describedby="about-me-paragraph-1"> <section class="web-section" aria-labelledby="about-me" aria-describedby="about-me-paragraph-1">
<!-- <h2 class="web-title" id="about-me"><NuxtLink href="/about" title="Navigate to about me page." class="link link-no-underline">About Me <span aria-hidden="true" class="inline-icon">→</span></NuxtLink></h2> --> <!-- <h2 class="web-title" id="about-me"><NuxtLink href="/about" title="Navigate to about me page." class="link link-no-underline">About Me <span aria-hidden="true" class="inline-icon">→</span></NuxtLink></h2> -->
@@ -17,7 +17,7 @@
<h2 class="web-title" id="projects">Projects</h2> <h2 class="web-title" id="projects">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-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> <p id="projects-paragraph-2">Let's go take a look of my projects collection!</p>
<div class="project-cards"> <div class="project-card-container">
<a target="_blank" href="https://github.com/TechitWinner/warehouse" class="project-card"> <a target="_blank" href="https://github.com/TechitWinner/warehouse" class="project-card">
<img :src="baseUrl + '/portal/f/assets/warehouse.jpg'"> <img :src="baseUrl + '/portal/f/assets/warehouse.jpg'">
<div class="project-card-content"> <div class="project-card-content">
pages/portal.vue
+19 -10
View File
@@ -1,20 +1,29 @@
<template> <template>
<main> <main>
<article class="article"> <article class="article">
<section class="web-hero" aria-labelledby="hero" aria-describedby="hero-desc"> <section class="web-section" aria-labelledby="hero" aria-describedby="hero-desc">
<h1 id="hero" class="font-hero">Portal</h1> <h1 id="hero" class="font-hero">Portal</h1>
<p id="hero-desc" class="font-hero-desc">Take a portal to travel to various dimensions.</p> <p id="hero-desc" class="font-hero-desc">Take a portal to travel to various dimensions.</p>
</section> </section>
<section class="web-section" aria-labelledby="projects" aria-describedby="projects-paragraph-1"> <section class="web-section" aria-labelledby="projects" aria-describedby="projects-paragraph-1">
<div class="grid grid-cols-1 md:grid-cols-3 gap-2"> <ul class="font-card-container">
<a :href="baseUrl + '/portal/f/'" class="project-card"> <li>
<div class="flex flex-row gap-2 items-center"> <a :class="'font-card'" :href="baseUrl + '/portal/f/'">
<Icon name="oundr:folder"/> <div class="font-card-content">
<h3>Files</h3> <h3>Files</h3>
</div> <p>A portal that collects this website data, whether it's mine or not.</p>
<p title="A portal that collects this website data, whether it's mine or not.">A portal that collects this website data, whether it's mine or not.</p> </div>
</a> </a>
</div> </li>
<li>
<a :class="'font-card'" :href="baseUrl + '/portal/s/'">
<div class="font-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>
</a>
</li>
</ul>
</section> </section>
</article> </article>
</main> </main>
pages/posts/[...slug].vue
+8 -4
View File
@@ -1,14 +1,18 @@
<template> <template>
<main> <main>
<article class="article"> <article class="article">
<section class="web-hero-post web-hero-bg relative bg-cover bg-center" :style="`background-image: url('${baseUrl + '/portal/f/assets/' + post?.coverImage}');`" aria-labelledby="hero" aria-describedby="hero-desc"> <section class="web-section" aria-labelledby="hero" aria-describedby="hero-desc">
<div class="absolute inset-0 bg-(--color-deep-semidark)/80"></div>
<section class="max-w-6xl mx-auto z-[1]"> <section class="max-w-6xl mx-auto z-[1]">
<h1 id="hero" class="font-hero">{{ post?.title }}</h1> <h1 id="hero" class="font-hero">{{ post?.title }}</h1>
<p id="hero-desc" class="font-hero-desc">{{ post?.description }}</p> <div class="post-cover">
<section class="w-full">
<p id="hero-desc" class="font-hero-desc">{{ post?.description }}</p>
</section>
<img :width="512" class="max-w-[55%] aspect-[4/3] w-full object-cover" :src="baseUrl + '/portal/f/assets/' + post?.coverImage" />
</div>
</section> </section>
</section> </section>
<section class="web-section web-section-narrow" aria-labelledby="post-content" aria-describedby="post-content-desc"> <section class="web-section web-section" aria-labelledby="post-content" aria-describedby="post-content-desc">
<div class="prose"> <div class="prose">
<ContentRenderer v-if="post" :value="post"/> <ContentRenderer v-if="post" :value="post"/>
</div> </div>
pages/posts/index.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template> <template>
<main> <main>
<article class="article"> <article class="article">
<section class="web-hero" aria-labelledby="hero" aria-describedby="hero-desc"> <section class="web-section" aria-labelledby="hero" aria-describedby="hero-desc">
<h1 id="hero" class="font-hero">Posts</h1> <h1 id="hero" class="font-hero">Posts</h1>
<p id="hero-desc" class="font-hero-desc">This is where I post my thoughts, articles, and updates.</p> <p id="hero-desc" class="font-hero-desc">This is where I post my thoughts, articles, and updates.</p>
</section> </section>
pages/terminal.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template> <template>
<main> <main>
<article class="article"> <article class="article">
<section class="web-hero" aria-labelledby="hero" aria-describedby="what-does-he-do?"> <section class="web-section" aria-labelledby="hero" aria-describedby="what-does-he-do?">
<h1 id="hero" class="font-hero">Terminal</h1> <h1 id="hero" class="font-hero">Terminal</h1>
<p id="what-does-he-do?" class="font-hero-desc">This will be a emulator for website visitor (simulator)</p> <p id="what-does-he-do?" class="font-hero-desc">This will be a emulator for website visitor (simulator)</p>
</section> </section>