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

beauty treatment #2

Browse Source
This commit is contained in:
Techit Thawiang
2025-10-14 13:38:00 +07:00
parent c198d21f55
commit a1dc01dbb6
7 changed files with 90 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/css/additional.css
+15
View File
@@ -0,0 +1,15 @@
.about-me-photo-grid {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: calc(var(--ui-spacing)*1);
}
.about-me-photo-grid > img {
height: 100%;
object-fit: cover;
aspect-ratio: 16/9;
}
@media screen and (min-width: 768px) {
.about-me-photo-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
app/assets/css/main.css
+37 -8
View File
@@ -26,7 +26,7 @@
--font-sans: Roboto, Sarabun, sans-serif;
--font-sans--font-feature-settings: "liga", "calt";
--font-mono: RobotoMono, "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--font-mono: RobotoMono, "Roboto Mono", "SF Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--font-serif: RobotoSerif, NotoSerifThai, Georgia, Garamond, "Times New Roman", Times, serif;
--font-math: CMUSerif, "Cambria Math", "LatinModern Math", "STIXGeneral", math;
@@ -37,7 +37,7 @@
@supports (font-variation-settings: normal) {
:root {
--font-sans: RobotoVariable, Sarabun, sans-serif;
--font-mono: RobotoMonoVariable, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--font-mono: RobotoMonoVariable, "SF Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--font-serif: RobotoSerifVariable, NotoSerifThai, Georgia, Garamond, "Times New Roman", Times, serif;
font-optical-sizing: auto;
}
@@ -45,15 +45,15 @@
@keyframes ring {
0% {
outline: 0px solid var(--ui-ring-color);
outline-offset: var(--ui-ring-offset);
outline-offset: var(--ui-ring-offset);
}
25% {
outline: 12px solid var(--ui-ring-color);
outline-offset: var(--ui-ring-offset);
outline-offset: var(--ui-ring-offset);
}
100% {
outline: var(--ui-ring-size) solid var(--ui-ring-color);
outline-offset: var(--ui-ring-offset);
outline-offset: var(--ui-ring-offset);
}
}
* {
@@ -166,7 +166,7 @@ a {
align-items: center;
}
}
@media screen and (min-width: 640px) {
@media screen and (min-width: 1024px) {
.web-heading {
.web-heading-right-section {
display: flex;
@@ -189,7 +189,7 @@ p {
.web-title {
font-size: 30px;
font-weight: 700;
margin-block: 0.7em;
margin-block: 0.4em;
transition-property: color;
transition-duration: 100ms;
transition-timing-function: cubic-bezier(var(--ease-fluid));
@@ -235,6 +235,32 @@ p {
margin-inline: auto;
padding-inline: calc(var(--ui-spacing)*4);
}
.web-section.web-section-split {
display: flex;
flex-direction: column;
gap: calc(var(--ui-spacing)*4);
}
.web-section.web-section-split .about-me-photo-grid {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: calc(var(--ui-spacing)*1);
}
.web-section.web-section-big-text {
font-size: 20px;
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.web-section.web-section-split {
flex-direction: row;
gap: calc(var(--ui-spacing)*8);
}
.web-section.web-section-split > .web-section-pane:first-child:not(:only-child) {
width: 35%;
}
.web-section.web-section-split > .web-section-pane:last-child:not(:only-child) {
width: 65%;
}
}
.web-section.web-section-narrow {
max-width: var(--ui-container-narrow);
}
@@ -352,7 +378,7 @@ p {
.hamburger-toggle.placeholder {
background: none;
}
@media screen and (min-width: 640px) {
@media screen and (min-width: 1024px) {
.hamburger-toggle.no-autohide {
display: flex!important;
visibility: visible!important;
@@ -507,6 +533,9 @@ a.btn {
.btn {
all: unset;
display: flex;
align-items: center;
width: fit-content;
height: calc(var(--ui-spacing)*10);
background: var(--color-primary);
color: var(--color-on-primary);
app/pages/collections.vue
+3 -3
View File
@@ -2,8 +2,8 @@
<main>
<article class="article">
<section class="web-section" aria-labelledby="hero" aria-describedby="hero-desc">
<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>
<h1 id="hero" class="font-hero">Techit's {{ TITLE }}</h1>
<p id="hero-desc" class="font-hero-desc">{{ DESC }}</p>
</section>
<section class="web-section" aria-labelledby="docs" aria-describedby="docs-desc">
<h3 id="docs" class="web-title">All Bookmarks</h3>
@@ -20,7 +20,7 @@
<script setup>
const config = useRuntimeConfig();
const TITLE = "Collections"
const DESC = "Techit's personal-public collections"
const DESC = "Techit's personal-public collection of various interesting, trending media/materials."
useSeoMeta({
title: TITLE,
app/pages/index.vue
+10 -7
View File
@@ -2,27 +2,30 @@
<main>
<article class="article">
<section class="web-section" aria-labelledby="hero" aria-describedby="what-does-he-do?">
<img width="240" height="240" class="mb-6" src="https://files.thawia.ng/files/assets/profile/techit/1758801557516.jpeg" alt="Techit Thawiang's avatar.">
<img width="240" height="240" style="margin-bottom: calc(var(--ui-spacing)*6);" src="https://files.thawia.ng/files/assets/profile/techit/1758801557516.jpeg" alt="Techit Thawiang's avatar.">
<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> and a <span class="text-blue-500">self-hoster</span> who's exploring computer science.</p>
</section>
<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">Who am I?</h2>
<h2 class="web-title" id="about">
<NuxtLink href="/about" title="Navigate to about me page." class="link link-no-underline">Who am I?<span aria-hidden="true" class="link-inline-icon">→</span></NuxtLink>
</h2> <!-- <h2 class="web-title" id="about-me">Who am I?</h2> -->
<p id="about-me-paragraph-1">My name is Techit Thawiang, aka <u>TechitWinner</u>. I'm a 15 years old 10th grader at Ko Pho Tuay Ngam Wittaya School. In my free time, I usually spend my time playing video games or learning more about software engineering.</p>
<p id="about-me-paragraph-2">In the future, I dream of having my own tech company, being a network engineer or a software engineer.</p>
</section>
<!-- <section class="web-section" aria-labelledby="posts" aria-describedby="posts-paragraph-1">
<section class="web-section" aria-labelledby="posts" aria-describedby="posts-paragraph-1">
<h2 class="web-title" id="posts">
<NuxtLink href="/posts" title="Navigate to posts page." class="link link-no-underline">Posts<span aria-hidden="true" class="link-inline-icon">→</span></NuxtLink>
</h2>
<p id="posts-paragraph-1"></p>
<p id="posts-paragraph-2">Let's go take a look of my posts collection!</p>
<PostsArticleList/>
</section> -->
<PostsArticleList :limit="4"/>
</section>
<section class="web-section" aria-labelledby="projects" aria-describedby="projects-paragraph-1">
<!-- <h2 class="web-title" id="projects"><NuxtLink href="/projects" title="Navigate to projects page." class="link link-no-underline">Projects <span aria-hidden="true" class="inline-icon">→</span></NuxtLink></h2> -->
<h2 class="web-title" id="projects">Projects</h2>
<h2 class="web-title" id="projects">
<NuxtLink href="/projects" title="Navigate to projects page." class="link link-no-underline">Projects<span aria-hidden="true" class="link-inline-icon">→</span></NuxtLink>
</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">
app/pages/posts/[...slug].vue
+21 -1
View File
@@ -1,6 +1,6 @@
<template>
<main>
<article class="article">
<article v-if="post" class="article">
<section class="web-section" aria-labelledby="hero" aria-describedby="hero-desc">
<section class="max-w-6xl mx-auto z-[1]">
<small class="prose-blog-pretext" aria-hidden="true">You are reading blog post:</small>
@@ -19,6 +19,26 @@
</div>
</section>
</article>
<article v-else class="article">
<section class="web-section" aria-labelledby="hero" aria-describedby="hero-desc">
<section class="max-w-6xl mx-auto z-[1]">
<small class="prose-blog-pretext" aria-hidden="true">An error occurred:</small>
<h1 id="hero" class="font-hero">Post not found!</h1>
<div class="post-cover">
<section class="w-full">
<p id="hero-desc" class="font-hero-desc">Check the URL; there might be a misspelling, or the post may not actually exist.</p>
<NuxtLink class="btn" to="/posts">All posts</NuxtLink>
</section>
<img :width="512" class="img-cover" src="https://files.thawia.ng/files/assets/zUJfK8p1i.webp" />
</div>
</section>
</section>
<section class="web-section web-section" aria-labelledby="post-content" aria-describedby="post-content-desc">
<div class="prose">
<ContentRenderer v-if="post" :value="post"/>
</div>
</section>
</article>
</main>
</template>
app/pages/posts/index.vue
+3 -3
View File
@@ -2,8 +2,8 @@
<main>
<article class="article">
<section class="web-section" aria-labelledby="hero" aria-describedby="hero-desc">
<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>
<h1 id="hero" class="font-hero">{{ TITLE }}</h1>
<p id="hero-desc" class="font-hero-desc">{{ DESC }}</p>
</section>
<section class="web-section" aria-labelledby="latest-posts" aria-describedby="latest-posts-paragraph-1">
<h2 class="web-title" id="latest-posts">All Posts</h2>
@@ -16,7 +16,7 @@
<script setup>
const config = useRuntimeConfig();
const TITLE = "Posts"
const DESC = "Techit's posts and writings."
const DESC = "Also known as blog because this is where I post my thoughts, articles, and updates."
useSeoMeta({
title: TITLE,