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

beauty treatment

Browse Source
This commit is contained in:
Techit Thawiang
2025-10-13 21:25:04 +07:00
parent 1b550cecb9
commit 8358c4acb4
7 changed files with 464 additions and 290 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/css/main.css
+362 -232
View File
@@ -1,76 +1,33 @@
@import "tailwindcss";
@custom-variant dark (&:where(.dark-theme, .dark-theme *)); :root {
@theme { --ui-spacing: 0.25rem;
--ui-primary: var(--color-deep-dark); --ui-primary: var(--color-deep-dark);
--ui-container: var(--container-4xl); --ui-container: 64rem;
--ui-container-narrow: var(--container-3xl); --ui-container-narrow: 48rem;
--ui-radius: var(--radius-sm);
--ui-bg: white;
--ui-bg-muted: var(--color-cloud-semilight);
--ui-bg-elevated: var(--color-cloud-medium);
--ui-bg-inverted: var(--color-deep-dark);
--ui-bg-muted-inverted: var(--color-deep-semidark);
--ui-bg-elevated-inverted: var(--color-deep-medium);
--ui-border: var(--color-cloud-medium);
--ui-border-accented: var(--color-cloud-semidark);
--ui-border-intense: var(--color-cloud-dark);
--ui-text: var(--color-deep-dark);
--ui-text-muted: var(--color-smoke-medium);
--ui-text-blind: var(--color-smoke-dark);
--ui-text-inverted: var(--color-cloud-light);
--ui-text-muted-inverted: var(--color-cloud-medium);
--ui-text-blind-inverted: var(--color-cloud-dark);
--ui-header-logo-inverted: 1; --ui-header-logo-inverted: 1;
--color-primary-dark: rgb(0, 101, 254); --ui-header-height: calc(var(--ui-spacing)*14);
--color-primary: rgb(0, 101, 254);
--color-primary-ghost: rgba(0, 101, 254, 0);
--color-primary-light: rgb(53, 154, 255);
--color-primary-lighter: rgb(109, 182, 255);
--color-primary-content: rgb(237, 248, 255);
--color-text: rgb(50,50,50); --color-surface-background: #f9f9f9;
--color-on-surface-background: #111111;
--color-primary: #2e2e2e;
--color-primary-strong: #3e3e3e;
--color-on-primary: white;
--color-secondary: #efefef;
--color-secondary-strong: #dfdfdf;
--color-on-secondary: #2e2e2e;
--color-container: #f8f8f8;
--color-on-container: #0e0e0e;
--color-outline-intense: #c0c0c0;
--color-outline: #d9d9d9;
--color-accent: #0066ff;
--color-accent-strong: #0055d5;
--color-inverse: #ff6600;
--color-inverse-strong: #d55500;
--color-deep-dark: rgb(19, 19, 19); --font-sans: Roboto, Sarabun, sans-serif;
--color-deep-semidark: rgb(28, 28, 28); --font-sans--font-feature-settings: "liga", "calt";
--color-deep-medium: rgb(32, 32, 32); --font-mono: RobotoMono, "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--color-deep-semilight: rgb(37, 37, 37); --font-serif: RobotoSerif, NotoSerifThai, Georgia, Garamond, "Times New Roman", Times, serif;
--color-deep-light: rgb(42, 42, 42);
--color-smoke-dark: rgb(73, 73, 73);
--color-smoke-semidark: rgb(78, 78, 78);
--color-smoke-medium: rgb(84, 84, 84);
--color-smoke-semilight: rgb(89, 89, 89);
--color-smoke-light: rgb(95, 95, 95);
--color-cloud-dark: rgb(223, 223, 223);
--color-cloud-semidark: rgb(230, 230, 230);
--color-cloud-medium: rgb(237, 237, 237);
--color-cloud-semilight: rgb(243, 243, 243);
--color-cloud-light: rgb(250, 250, 250);
--color-mc-outline: 30, 30, 31;
--color-mc-inline: 255, 255, 255, 0.2;
--color-mc-primary: 79, 160, 51;
--color-mc-primary-hover: 60, 133, 39;
--color-mc-primary-up: 29, 77, 19;
--color-mc-primary-down: 40, 100, 28;
--color-mc-surface: 244, 246, 249;
--color-mc-surface-container: 230, 232, 235;
--color-mc-surface-hover: 208, 209, 212;
--color-mc-surface-up: 88, 88, 90;
--color-mc-surface-down: 177, 178, 181;
--color-mc-input: 49, 50, 51;
--color-mc-input-shadow: 36, 36, 37;
--color-mc-container: 72, 73, 74;
--color-mc-container-up: 49, 50, 51;
--color-mc-container-hover: 88, 88, 90;
--color-mc-container-down: 49, 50, 51;
--color-mc-container-top: 90, 91, 92;
--color-mc-container-bottom: 50, 51, 52;
--font-sans: Geist, Sarabun, sans-serif;
--font-sans--font-feature-settings: "liga", "calt", "ss01", "cv05", "cv06", "cv11";
--font-mono: GeistMono, "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--font-serif: NotoSerif, NotoSerifThai, Georgia, Garamond, "Times New Roman", Times, serif;
--font-math: CMUSerif, "Cambria Math", "LatinModern Math", "STIXGeneral", math; --font-math: CMUSerif, "Cambria Math", "LatinModern Math", "STIXGeneral", math;
--ease-fluid: 0.2, 0, 0, 1; --ease-fluid: 0.2, 0, 0, 1;
@@ -79,32 +36,12 @@
} }
@supports (font-variation-settings: normal) { @supports (font-variation-settings: normal) {
:root { :root {
--font-sans: GeistVariable, Sarabun, sans-serif; --font-sans: RobotoVariable, Sarabun, sans-serif;
--font-mono: GeistMonoVariable, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --font-mono: RobotoMonoVariable, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--font-serif: NotoSerifVariable, NotoSerifThaiVariable, Georgia, Garamond, "Times New Roman", Times, serif; --font-serif: RobotoSerifVariable, NotoSerifThai, Georgia, Garamond, "Times New Roman", Times, serif;
font-optical-sizing: auto; font-optical-sizing: auto;
} }
} }
.dark-mode {
--ui-primary: var(--color-cloud-light);
--ui-bg: var(--color-deep-dark);
--ui-bg-muted: var(--color-deep-semidark);
--ui-bg-elevated: var(--color-deep-medium);
--ui-bg-inverted: var(--color-cloud-light);
--ui-bg-muted-inverted: var(--color-cloud-semilight);
--ui-bg-elevated-inverted: var(--color-cloud-medium);
--ui-border: var(--color-deep-medium);
--ui-border-accented: var(--color-deep-light);
--ui-text: var(--color-cloud-dark);
--ui-text-muted: var(--color-cloud-medium);
--ui-text-blind: var(--color-cloud-dark);
--ui-text-inverted: var(--color-deep-light);
--ui-text-muted-inverted: var(--color-deep-medium);
--ui-text-blind-inverted: var(--color-deep-dark);
--ui-header-logo-inverted: 0;
--color-text: rgb(180,180,180);
}
@keyframes ring { @keyframes ring {
0% { 0% {
outline: 0px solid var(--ui-ring-color); outline: 0px solid var(--ui-ring-color);
@@ -119,10 +56,13 @@
outline-offset: var(--ui-ring-offset); outline-offset: var(--ui-ring-offset);
} }
} }
* {
box-sizing: border-box;
}
*:focus-visible { *:focus-visible {
--ui-ring-size: 2px; --ui-ring-size: 2px;
--ui-ring-color: var(--color-primary); --ui-ring-color: var(--color-accent);
--ui-ring-offset: 0; --ui-ring-offset: 2px;
animation: ring 0.5s cubic-bezier(var(--ease-fluid)); animation: ring 0.5s cubic-bezier(var(--ease-fluid));
outline: var(--ui-ring-size) solid var(--ui-ring-color); outline: var(--ui-ring-size) solid var(--ui-ring-color);
outline-offset: var(--ui-ring-offset); outline-offset: var(--ui-ring-offset);
@@ -131,37 +71,77 @@ body,main {
font-family: var(--font-sans); font-family: var(--font-sans);
padding: 0; padding: 0;
margin: 0; margin: 0;
color: var(--ui-text); color: var(--color-on-surface-background);
background-color: var(--ui-bg); background: var(--color-surface-background);
line-height: 1.35; line-height: 1.35;
} }
img { img {
@apply rounded-lg; border-radius: calc(var(--ui-spacing)*1);
max-width: 100%;
height: auto;
display: block;
} }
.web-header { a {
color: unset;
text-decoration: none;
}
.material-symbols-outlined {
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 24
}
.web-header-container {
position: sticky;
top: 0;
width: 100%;
overflow: visible;
}
.web-header, .hamburger-menu-header {
box-sizing: border-box;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
position: sticky; position: sticky;
top: 0; top: 0;
height: calc(var(--spacing)*14); height: var(--ui-header-height);
z-index: 1000; z-index: 998;
@apply duration-200 transition-all;
} }
.web-header.web-header-bg { .web-header.web-header-bg,
@apply bg-(--ui-bg)/75 backdrop-blur border-b border-(--ui-text)/5; .hamburger-menu-header.hamburger-menu-header-bg {
background: #ffffff;
color: black;
border-bottom: 1px solid var(--color-outline);
} }
.web-header-emit-shadow-when-top.shadow-active { .web-header-logo-banner {
@apply shadow-lg; height: 100%;
background: var(--color-accent);
align-content: center;
} }
.web-header-autohide.web-header-hidden { .web-header-logo-banner > .web-header-logo {
@apply scale-95 blur opacity-0 invisible; border-radius: 0;
}
.web-header-title {
font-size: 18px;
font-weight: 700;
margin: 0;
margin-inline: calc(var(--ui-spacing)*2);
} }
.web-nav, .web-footer-content, .article { .web-nav, .web-footer-content, .article {
width: 100%; width: 100%;
} }
.web-footer-title {
font-size: 32px;
margin-block: .4em;
}
.web-footer-notice {
font-size: 12px;
font-family: var(--font-mono);
}
.web-heading { .web-heading {
margin: 0 auto; margin: 0 auto;
padding: 0 calc(var(--spacing)*4); padding: 0 calc(var(--ui-spacing)*4);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@@ -178,7 +158,7 @@ img {
align-items: center; align-items: center;
} }
.web-heading-right-section { .web-heading-right-section {
display: flex; display: none;
width: fit-content; width: fit-content;
flex-direction: row; flex-direction: row;
justify-content: end; justify-content: end;
@@ -186,23 +166,41 @@ img {
align-items: center; align-items: center;
} }
} }
@media screen and (min-width: 640px) {
.web-heading {
.web-heading-right-section {
display: flex;
}
}
}
p { p {
@apply my-[1em]; margin-block: 1em;
} }
.font-hero { .font-hero {
@apply text-5xl font-bold my-[.2em]; font-size: 48px;
font-weight: 700;
margin-block: 0.2em;
line-height: 1.3; line-height: 1.3;
} }
.font-hero-desc { .font-hero-desc {
@apply text-xl font-medium; font-size: 20px;
font-weight: 500;
} }
.web-title { .web-title {
@apply text-3xl font-bold my-[.7em] transition-[color] ease-fluid duration-100; font-size: 30px;
font-weight: 700;
margin-block: 0.7em;
transition-property: color;
transition-duration: 100ms;
transition-timing-function: cubic-bezier(var(--ease-fluid));
a { a {
cursor: pointer; cursor: pointer;
} }
.link-inline-icon { .link-inline-icon {
@apply transition-[opacity_margin] ease-fluid duration-100 select-none; transition-property: opacity margin;
transition-duration: 100ms;
transition-timing-function: cubic-bezier(var(--ease-fluid));
user-select: none;
margin-left: 0.5rem; margin-left: 0.5rem;
opacity: 0.5; opacity: 0.5;
} }
@@ -211,10 +209,10 @@ p {
margin-left: 1rem; margin-left: 1rem;
} }
&:active a { &:active a {
@apply text-primary; color: var(--color-primary);
} }
&:focus-visible a { &:focus-visible a {
@apply underline; text-decoration: underline;
} }
&.link { &.link {
color: var(--ui-text); color: var(--ui-text);
@@ -222,226 +220,358 @@ p {
} }
.web-nav-title { .web-nav-title {
--web-nav-title-shadow: 0px 0px 16px var(--ui-bg); --web-nav-title-shadow: 0px 0px 16px var(--ui-bg);
@apply text-lg font-bold; font-size: 18px;
text-shadow: var(--web-nav-title-shadow), font-weight: 700;
var(--web-nav-title-shadow),
var(--web-nav-title-shadow),
var(--web-nav-title-shadow),
var(--web-nav-title-shadow);
}
.web-hero.web-hero-bg, .web-hero-post.web-hero-bg {
@apply bg-(--color-deep-semidark) text-(--color-cloud-medium);
h1,h2,h3,h4,h5,h6 {
@apply text-(--color-cloud-light)
}
} }
.web-hero-post { .web-hero-post {
/* padding: clamp(calc(var(--spacing) * 32), 9vw, calc(var(--spacing) * 48)) calc(var(--spacing)*4); */ display: flex;
@apply flex flex-col items-center text-center; flex-direction: column;
align-items: center;
text-align: center;
} }
.web-section { .web-section {
@apply my-16 px-4;
max-width: var(--ui-container); max-width: var(--ui-container);
margin: calc(var(--spacing)*16) auto; margin-block: calc(var(--ui-spacing)*16);
margin-inline: auto;
padding-inline: calc(var(--ui-spacing)*4);
} }
.web-section.web-section-narrow { .web-section.web-section-narrow {
@apply my-16 px-4;
max-width: var(--ui-container-narrow); max-width: var(--ui-container-narrow);
margin: calc(var(--spacing)*16) auto;
} }
.project-card-container, .font-card-container, .post-card-container { .project-card-container, .font-card-container, .post-card-container {
@apply flex flex-col gap-1 ml-0 list-none; background: var(--color-container);
color: var(--color-on-container);
display: flex;
flex-direction: column;
margin-left: 0;
list-style: none;
border: 1px solid var(--color-outline-intense);
border-radius: calc(var(--ui-spacing)*1);
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, /* .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), .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 { .font-card-container > li:not(:last-child):not(:first-child):not(:only-child) > .font-card {
@apply rounded-md; border-radius: calc(var(--ui-spacing)*1);
} }
.project-card-container > li:last-child:not(:only-child) > .project-card, .project-card-container > li:last-child:not(:only-child) > .project-card,
.post-card-container > a.post-card:last-child:not(:only-child), .post-card-container > a.post-card:last-child:not(:only-child),
.font-card-container > li:last-child:not(:only-child) > .font-card { .font-card-container > li:last-child:not(:only-child) > .font-card {
@apply rounded-t-md; 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, .project-card-container > li:first-child:not(:only-child) > .project-card,
.post-card-container > a.post-card:first-child:not(:only-child), .post-card-container > a.post-card:first-child:not(:only-child),
.font-card-container > li:first-child:not(:only-child) > .font-card { .font-card-container > li:first-child:not(:only-child) > .font-card {
@apply rounded-b-md; 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 { @apply ml-0; } } */
.project-card-container > li, .post-card-container > li, .font-card-container > li { margin-left: 0; }
.project-card, .font-card, .post-card { .project-card, .font-card, .post-card {
height: 100%; height: 100%;
@apply flex flex-col p-2 items-center rounded-2xl sm:flex-row sm:gap-4 bg-(--ui-bg-muted) hover:bg-(--ui-bg-elevated) transition-colors duration-100 ease-fluid ml-0; display: flex;
h3 { @apply text-2xl font-bold line-clamp-1; } flex-direction: column;
h3,p { z-index: 1; } align-items: center;
img { @apply mb-2 sm:mb-0 aspect-video object-cover w-full sm:max-w-56 rounded-lg; } background: var(--ui-bg-muted);
margin-left: 0;
h3 {
font-size: 24px;
font-weight: 700;
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%;
}
p { p {
@apply line-clamp-2;
margin: 0; margin: 0;
width: 100%; width: 100%;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
} }
.iconify { .iconify {
background-color: var(--ui-text); background-color: var(--ui-text);
width: calc(var(--spacing)*16); width: calc(var(--ui-spacing)*16);
height: calc(var(--spacing)*16); height: calc(var(--ui-spacing)*16);
} }
.project-card-content, .font-card-content, .post-card-content { .project-card-content, .font-card-content, .post-card-content {
@apply block w-full px-2 sm:px-0; display: block;
width: 100%;
padding: calc(var(--ui-spacing)*3);
h3 {
margin: 0;
}
} }
&.disabled { &.disabled {
@apply opacity-50 pointer-events-none cursor-not-allowed; opacity: 0.5;
pointer-events: none;
cursor: not-allowed;
} }
} }
.font-card { .project-card:hover, .font-card:hover, .post-card:hover {
padding: 0.5rem 1rem; background: var(--color-secondary);
} }
.font-card { .project-card:not(:only-child):not(:last-child),
@apply flex-row; .font-card:not(:only-child):not(:last-child),
.post-card:not(:only-child):not(:last-child) {
border-bottom: 1px solid var(--color-outline);
}
@media screen and (min-width: 640px) {
.project-card, .font-card, .post-card {
flex-direction: row;
img {
margin-bottom: 0;
max-width: calc(var(--ui-spacing)*56);
}
.project-card-content, .font-card-content, .post-card-content {
padding-inline: calc(var(--ui-spacing)*4);
}
}
} }
.hamburger-toggle { .hamburger-toggle {
@apply flex md:hidden h-14 w-9 cursor-pointer items-center justify-center hover:bg-(--ui-text)/5 active:bg-(--ui-text)/10 transition-colors duration-100 ease-fluid; all: unset;
display: flex;
visibility: visible;
width: calc(var(--ui-spacing)*9);
height: 100%;
cursor: pointer;
align-items: center;
justify-content: center;
}
.hamburger-toggle:hover {
background: var(--color-secondary);
}
.hamburger-toggle.placeholder {
background: none;
}
@media screen and (min-width: 640px) {
.hamburger-toggle.no-autohide {
display: flex!important;
visibility: visible!important;
}
.hamburger-toggle {
display: none;
visibility: hidden;
}
} }
.hamburger-menu { .hamburger-menu {
background: white;
transform-origin: top right; transform-origin: top right;
@apply flex flex-col sticky h-fit left-0 top-14 w-full max-w-(--ui-container) mx-auto z-[1000] transition-all duration-200 ease-out-back; display: flex;
flex-direction: column;
position: fixed;
/* top: calc(var(--ui-spacing)*14); */
top: 0;
left: 0;
height: 100vh;
z-index: 1000;
transition-property: all;
transition-duration: 300ms;
transition-timing-function: cubic-bezier(var(--ease-fluid));
width: 100%;
max-width: 20rem;
.nav-wrapper { .nav-wrapper {
list-style-type: none; list-style-type: none;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 0; margin: 0;
padding: 0 calc(var(--spacing)*4); padding: 0 calc(var(--ui-spacing)*4);
width: 100%; width: 100%;
gap: 6px;
align-items: end; align-items: end;
.nav-link, .nav-button { .nav-link, .nav-button {
display: flex; display: flex;
font-size: 15px;
width: 100%; width: 100%;
max-width: 18rem; margin-left: 0;
@apply ml-0 justify-end;
a, .hamburger-btn-square { a, .hamburger-btn-square {
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; width: 100%;
@apply px-4 h-14 shadow-lg rounded-[28px] bg-(--ui-bg)/75 backdrop-blur border border-(--ui-text)/5 cursor-pointer hover:text-primary active:scale-[.975] transition-all duration-100 ease-fluid; padding-inline: calc(var(--ui-spacing)*4);
height: calc(var(--ui-spacing)*12);
} }
a.router-link-exact-active { a.router-link-exact-active {
@apply text-primary dark:text-white font-bold shadow-[0px_2px_16px] shadow-primary/35 bg-primary/25 border border-primary/10 z-10 text-shadow-[0px_0px_16px_var(--color-primary)]; color: var(--color-accent);
} }
.hamburger-btn-square { .hamburger-btn-square {
@apply aspect-square justify-center; aspect-ratio: 1/1;
justify-content: center;
width: unset; width: unset;
} }
} }
.nav-link:not(:only-child):not(:last-child) {
border-bottom: 1px solid var(--color-outline);
}
.nav-button { .nav-button {
font-size: 15px; display: flex;
width: 100%; width: 100%;
max-width: 18rem; max-width: 18rem;
@apply ml-0 justify-end flex; margin-left: calc(var(--ui-spacing) * 0);
} justify-content: flex-end;
.nav-button.nav-button-only-desktop {
@apply hidden md:flex;
} }
} }
} }
.hamburger-menu.hamburger-menu-hidden { .hamburger-menu.hamburger-menu-hidden {
@apply scale-90 blur opacity-0 invisible ; transform: translateX(-100%);
visibility: hidden;
}
.hamburger-backdrop-overlay {
background: #000000;
opacity: 0.5;
z-index: 999;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
} }
.nav-links { .nav-links {
@apply hidden md:flex; display: flex;
height: 100%; height: 100%;
.nav-wrapper { }
list-style-type: none; @media screen and (min-width: 768px) {
display: flex; .nav-links {
flex-direction: row; display: hidden;
height: 100%;
gap: 6px;
.nav-link {
font-size: 15px;
align-content: center;
height: 100%;
@apply m-0;
a {
display: flex;
align-items: center;
@apply px-3 h-10 shadow-xs active:shadow-none active:opacity-90 rounded-[20px] bg-(--ui-bg)/60 backdrop-blur border border-(--ui-text)/5 cursor-pointer hover:text-primary transition-all duration-100 ease-fluid;
}
a.router-link-exact-active {
@apply text-white shadow-[0px_2px_10px] shadow-primary/50 bg-primary border border-primary/10;
}
}
} }
} }
ul.nav-wrapper {
margin: 0;
}
.nav-links > .nav-wrapper {
list-style-type: none;
display: flex;
flex-direction: row;
height: 100%;
}
.nav-links > .nav-wrapper > .nav-link {
align-content: center;
height: 100%;
margin: 0;
}
.nav-links > .nav-wrapper > .nav-link > a {
display: flex;
align-items: center;
padding-inline: calc(var(--ui-spacing)*3);
height: 100%;
cursor: pointer;
}
.nav-links > .nav-wrapper > .nav-link > a:hover,
.nav-links > .nav-wrapper > .nav-link > a.router-link-exact-active {
border-top: 2px solid var(--color-accent);
padding-bottom: 2px;
color: var(--color-accent);
}
.nav-links > .nav-wrapper > .nav-link > a:active {
opacity: 0.9;
}
code, pre, tt, kbd, samp { code, pre, tt, kbd, samp {
font-size: 1em; font-size: 1em;
} }
.link, .prose a { .link,
& { .prose a {
@apply underline text-(--ui-text); text-decoration: underline;
} color: var(--ui-text);
&:hover {
@apply no-underline bg-(--ui-text) text-(--ui-bg);
}
&:active {
@apply opacity-80;
}
&.link-no-underline {
@apply no-underline;
}
} }
.prose h2 > a {
@apply no-underline
}
ul,li { @apply ml-[1em] }
ul { @apply list-disc; }
button.btn, a.btn { .link:hover,
@apply cursor-pointer; .prose a:hover {
text-decoration: none;
background-color: var(--color-on-surface-background);
color: var(--color-surface-background);
} }
.link:active,
.prose a:active {
opacity: 0.8;
}
.link.link-no-underline {
text-decoration: none;
}
.prose h2 > a {
text-decoration: none;
}
button.btn,
a.btn {
cursor: pointer;
}
.btn { .btn {
@apply h-10 bg-primary text-primary-content px-4 rounded-[20px]; all: unset;
height: calc(var(--ui-spacing)*10);
background: var(--color-primary);
color: var(--color-on-primary);
padding-inline: calc(var(--ui-spacing)*4);
border-radius: calc(var(--ui-spacing)*5);
} }
.btn.btn-sm { .btn.btn-sm {
@apply h-9; height: calc(var(--ui-spacing)*9);
} }
.btn.btn-neutral { .prose-blog-pretext {
@apply bg-(--ui-bg-muted) text-(--ui-text); font-family: var(--font-mono);
&:hover { font-size: 12px;
@apply bg-(--ui-bg-elevated); text-transform: uppercase;
}
&:active {
@apply bg-(--ui-border-accented);
}
} }
.prose { .prose {
@apply font-serif text-lg; font-family: var(--font-serif);
ol { @apply list-decimal ml-[1em]; } font-weight: 400;
font-size: 18px;
p, li { line-height: 1.5; } p, li { line-height: 1.5; }
h2 a, h3 a, h4 a, h5 a, h6 a { @apply text-(--ui-text); } hr { margin-block: 1em; border: 1px solid var(--color-outline-intense); }
hr { margin-block: 1em; @apply border-(--ui-border-intense); }
li { margin-block: 1em; } li { margin-block: 1em; }
img { display: block; }
h1,h2,h3,h4,h5,h6 { h1,h2,h3,h4,h5,h6 {
@apply font-serif font-bold; font-family: var(--font-serif);
font-weight: 700;
scroll-margin-top: 80px; scroll-margin-top: 80px;
} }
h2 { h2 {
@apply text-2xl my-6; font-size: 24px;
margin-block: calc(var(--ui-spacing)*6);
} }
h3 { h3 {
@apply text-xl my-6; font-size: 20px;
margin-block: calc(var(--ui-spacing)*6);
} }
h4 { h4 {
@apply text-lg my-6; font-size: 18px;
margin-block: calc(var(--ui-spacing)*6);
} }
img { img {
@apply my-3; margin-block: calc(var(--ui-spacing)*3);
} }
} }
.post-cover { .post-cover {
gap: 1.5rem; gap: 1.5rem;
display: flex; display: flex;
@apply flex-col md:flex-row-reverse flex-direction: column;
} }
.post-cover > .img-cover { .post-cover > .img-cover {
@apply w-full aspect-[4/3] max-w-full md:max-w-[55%] object-cover; width: 100%;
aspect-ratio: 4/3;
max-width: 100%;
object-fit: cover;
}
@media screen and (min-width: 640px) {
.post-cover {
flex-direction: row-reverse;
justify-content: flex-end;
}
.post-cover > .img-cover {
max-width: 55%;
}
}
.post-more-info {
margin-top: calc(var(--ui-spacing)*4);
font-size: 12px;
font-family: var(--font-mono);
} }
app/components/post-card.vue
+5 -5
View File
@@ -1,11 +1,11 @@
<template> <template>
<template v-if="post"> <template v-if="post">
<NuxtLink class="post-card" :to="post.path"> <NuxtLink class="post-card" :to="post?.path">
<img :src="post.coverImage" :alt="post?.title + '’s cover image'"/> <img :src="post?.coverImage" :alt="post?.title + '’s cover image'"/>
<div class="post-card-content"> <div class="post-card-content">
<h3>{{ post.title }}</h3> <h3 :title="post?.title">{{ post?.title }}</h3>
<p :title="post.description">{{ post.description }}</p> <p style="margin-block: 0.25em" :title="post?.description">{{ post?.description }}</p>
<p class="mt-4 text-xs" :title="useFormatDate(post.dateUpdated)">{{ useRelativeDate(post.dateUpdated) }}</p> <p class="post-more-info" :title="useFormatDate(post?.dateUpdated)">📅 {{ useRelativeDate(post?.dateUpdated) }}</p>
</div> </div>
</NuxtLink> </NuxtLink>
</template> </template>
app/components/web-footer.vue
+9 -12
View File
@@ -7,20 +7,17 @@ import WebThemeToggle from './web-theme-toggle.vue';
<footer> <footer>
<div class="article"> <div class="article">
<section class="web-section"> <section class="web-section">
<h3 class="text-2xl md:text-3xl mb-4 font-light">Techit's Home /// thawia.ng</h3> <img src="/favicon.ico" alt="" width="48" height="48">
<p> <h3 class="web-footer-title">Techit Thawiang's Website /// techit.win</h3>
<small> <p class="web-footer-notice">
Copyright &copy; Techit Thawiang 2025 (2568). All rights reserved.<br> 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> 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>. 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>
</p> </p>
<p> <p class="web-footer-notice">
<small> More from me: <a class="link" href="https://unix.in.th">unix.in.th</a> and <a class="link" href="https://uptime.dailitation.xyz">Network Status</a>
More from me: <a class="link" href="https://unix.in.th">unix.in.th</a> and <a class="link" href="https://uptime.dailitation.xyz">Network Status</a>
</small>
</p> </p>
<WebThemeToggle/> <!-- <WebThemeToggle/> -->
</section> </section>
</div> </div>
</footer> </footer>
app/components/web-header.vue
+18 -10
View File
@@ -1,10 +1,15 @@
<template> <template>
<div class="sticky top-0 w-full h-14 overflow-visible"> <div class="web-header-container">
<header :class="{'web-header': true, 'web-header-autohide': !mobileHamburger }"> <header class="web-header web-header-bg">
<section class="web-heading z-10"> <section class="web-heading z-10">
<button class="hamburger-toggle" @click="toggleMobileHamburger">
<span class="material-symbols-outlined">menu</span>
</button>
<NuxtLink href="/" @click="closeMobileHamburger" class="web-heading-left-section text-(--ui-text) hover:text-primary"> <NuxtLink href="/" @click="closeMobileHamburger" class="web-heading-left-section text-(--ui-text) hover:text-primary">
<img width="36" height="36"src="/favicon.ico"> <div class="web-header-logo-banner">
<p title="thawia.ng, Go home" class="web-nav-title mx-2" aria-hidden="true">TechitWinner</p> <img class="web-header-logo" width="36" height="36"src="/favicon.ico">
</div>
<p class="web-header-title" title="thawia.ng, Go home" aria-hidden="true">TechitWinner</p>
</NuxtLink> </NuxtLink>
<div class="web-heading-right-section"> <div class="web-heading-right-section">
<nav v-if="!mobileHamburger" class="nav-links"> <nav v-if="!mobileHamburger" class="nav-links">
@@ -29,13 +34,19 @@
</li> </li>
</ul> </ul>
</nav> </nav>
<button class="hamburger-toggle" @click="toggleMobileHamburger">
<Icon name="oundr:menu"/>
</button>
</div> </div>
<div class="hamburger-toggle placeholder"></div>
</section> </section>
</header> </header>
<div v-if="mobileHamburger" class="hamburger-backdrop-overlay"></div>
<nav :class="{'hamburger-menu': true, 'hamburger-menu-hidden': !mobileHamburger }"> <nav :class="{'hamburger-menu': true, 'hamburger-menu-hidden': !mobileHamburger }">
<div class="hamburger-menu-header hamburger-menu-header-bg">
<section class="web-heading">
<button class="hamburger-toggle no-autohide" @click="closeMobileHamburger">
<span class="material-symbols-outlined">close</span>
</button>
</section>
</div>
<ul class="nav-wrapper"> <ul class="nav-wrapper">
<li class="nav-link"> <li class="nav-link">
<NuxtLink title="Go home" aria-label="Go home" @click="closeMobileHamburger" href="/">Home</NuxtLink> <NuxtLink title="Go home" aria-label="Go home" @click="closeMobileHamburger" href="/">Home</NuxtLink>
@@ -52,9 +63,6 @@
<li class="nav-link"> <li class="nav-link">
<NuxtLink title="Go to collections" aria-label="Go to collections" @click="closeMobileHamburger" href="/collections">Collections</NuxtLink> <NuxtLink title="Go to collections" aria-label="Go to collections" @click="closeMobileHamburger" href="/collections">Collections</NuxtLink>
</li> </li>
<li class="nav-button nav-button-only-desktop">
<button role="button" class="hamburger-btn-square" @click="closeMobileHamburger" title="Close this menu" aria-label="Close this menu"><Icon name="oundr:x"/></button>
</li>
</ul> </ul>
</nav> </nav>
</div> </div>
app/pages/contact.vue
+59 -28
View File
@@ -8,38 +8,69 @@
<section class="web-section" aria-labelledby="decentralized" aria-describedby="decentralized-paragraph-1"> <section class="web-section" aria-labelledby="decentralized" aria-describedby="decentralized-paragraph-1">
<h2 class="web-title" id="decentralized">Decentral&shy;ized Ways</h2> <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> <p id="decentralized-paragraph-1">I recommended to contact me via these given ways.</p>
<ul class="list-disc"> <section class="font-card-container">
<li> <a class="font-card" href="mailto:techit@thawia.ng">
<p>techit@thawia.ng — E-mail Address</p> <div class="font-card-content">
</li> ✉️ techit@thawia.ng
<li> </div>
<p>@techit@furnu.org — Mastodon</p> </a>
</li> <a class="font-card" href="mailto:techit@dailitation.xyz">
<li> <div class="font-card-content">
<p>@techitwinner:matrix.org — Matrix</p> ✉️ techit@dailitation.xyz
</li> </div>
</ul> </a>
<a class="font-card" href="mailto:techit@unix.in.th">
<div class="font-card-content">
✉️ techit@unix.in.th
</div>
</a>
<a class="font-card" href="mailto:techit.th@icloud.com">
<div class="font-card-content">
✉️ techit.th@icloud.com
</div>
</a>
<a class="font-card" href="https://furnu.org/@techit">
<div class="font-card-content">
techit@furnu.org — Mastodon
</div>
</a>
<div class="font-card">
<div class="font-card-content">
techitwinner@matrix.org — Matrix
</div>
</div>
</section>
</section> </section>
<section class="web-section" aria-labelledby="centralized" aria-describedby="centralized-paragraph-1"> <section class="web-section" aria-labelledby="centralized" aria-describedby="centralized-paragraph-1">
<h2 class="web-title" id="centralized">Social Media</h2> <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> <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>
<ul class="list-disc"> <section class="font-card-container">
<li> <a class="font-card" href="https://x.com/techitwinner">
<p>@techitwinner — X (Twitter)</p> <div class="font-card-content">
</li> @techitwinner — X (Twitter)
<li> </div>
<p>@techitwinner — TikTok</p> </a>
</li> <a class="font-card" href="https://tiktok.com/@techitwinner">
<li> <div class="font-card-content">
<p>@techitwinner — Instagram</p> @techitwinner — TikTok
</li> </div>
<li> </a>
<p>@techitwinner — Facebook</p> <a class="font-card" href="https://instagram.com/techitwinner">
</li> <div class="font-card-content">
<li> @techitwinner — Instagram
<p>@thawia.ng — BlueSky</p> </div>
</li> </a>
</ul> <a class="font-card" href="https://facebook.com/@techitwinner">
<div class="font-card-content">
@techitwinner — Facebook
</div>
</a>
<a class="font-card" href="https://bsky.app/profile/thawia.ng">
<div class="font-card-content">
@thawia.ng — BlueSky
</div>
</a>
</section>
</section> </section>
</article> </article>
</main> </main>
app/pages/fonts.vue
+10 -3
View File
@@ -20,16 +20,23 @@
<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-card-container"> <!-- <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-xl"> <div class="font-card-content text-xl">
{{ font.name }} {{ font.name }}
<!-- <p>{{ fontUrl + font.css }}</p> --> <p>{{ fontUrl + font.css }}</p>
</div> </div>
</a> </a>
</li> </li>
</ul> </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">
{{ font.name }}
</div>
</a>
</section>
</section> </section>
<section v-else class="web-section"> <section v-else class="web-section">
<h2 id="noto" class="web-title">An unknown error occured</h2> <h2 id="noto" class="web-title">An unknown error occured</h2>
app/pages/posts/[...slug].vue
+1
View File
@@ -3,6 +3,7 @@
<article class="article"> <article class="article">
<section class="web-section" aria-labelledby="hero" aria-describedby="hero-desc"> <section class="web-section" aria-labelledby="hero" aria-describedby="hero-desc">
<section class="max-w-6xl mx-auto z-[1]"> <section class="max-w-6xl mx-auto z-[1]">
<small class="prose-blog-pretext" aria-hidden="true">You are reading blog post:</small>
<h1 id="hero" class="font-hero">{{ post?.title }}</h1> <h1 id="hero" class="font-hero">{{ post?.title }}</h1>
<div class="post-cover"> <div class="post-cover">
<section class="w-full"> <section class="w-full">