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

im lazy writing commit messagesm please take a look by yourself thx

Browse Source
This commit is contained in:
Techit Thawiang
2025-10-05 14:08:03 +07:00
parent a454f82cc5
commit c0ba4e534f
10 changed files with 138 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/main.css
+35 -21
View File
@@ -70,7 +70,7 @@
--font-sans: Inter, Sarabun, sans-serif;
--font-sans--font-feature-settings: "liga", "calt", "ss01", "cv05", "cv06", "cv11";
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--font-serif: "Noto Serif", "Noto Serif Thai", Georgia, Garamond, "Times New Roman", Times, serif;
--font-serif: "NotoSerif", "NotoSerifThai", Georgia, Garamond, "Times New Roman", Times, serif;
--font-math: CMUSerif, "Cambria Math", "LatinModern Math", "STIXGeneral", math;
--ease-fluid: 0.2, 0, 0, 1;
@@ -132,6 +132,9 @@ body,main {
background-color: var(--ui-bg);
line-height: 1.35;
}
img {
@apply rounded-lg;
}
.web-header {
display: flex;
flex-direction: row;
@@ -139,7 +142,7 @@ body,main {
top: 0;
height: calc(var(--spacing)*14);
z-index: 1000;
@apply bg-(--ui-bg) shadow-xs shadow-[rgb(0,0,0,0.1)] transition-shadow;
@apply duration-200 transition-all;
}
.web-header.web-header-bg {
.web-nav-title {
@@ -150,6 +153,9 @@ body,main {
.web-header-emit-shadow-when-top.shadow-active {
@apply shadow-lg;
}
.web-header-autohide.web-header-hidden {
@apply scale-95 blur opacity-0 invisible;
}
.web-nav, .web-footer-content, .article {
width: 100%;
}
@@ -240,29 +246,29 @@ p {
.project-card-container, .font-card-container, .post-card-container {
@apply flex flex-col gap-1 ml-0 list-none;
}
/* .project-card-container > li:not(:last-child):not(:first-child):not(:only-child) > .project-card,
.project-card-container > a.project-card:not(:last-child):not(:first-child):not(:only-child),
.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 {
@apply rounded-md;
}
.project-card-container > li:last-child:not(:only-child) > .project-card,
.project-card-container > a.project-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 {
@apply rounded-t-md;
}
.project-card-container > li:first-child:not(:only-child) > .project-card,
.project-card-container > a.project-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 {
@apply rounded-b-md;
} */
.project-card-container > li, .font-card-container > li { @apply ml-0; }
}
.project-card-container > li, .post-card-container > li, .font-card-container > li { @apply ml-0; }
.project-card, .font-card, .post-card {
height: 100%;
padding: 0.5rem 1rem 0.5rem 0.5rem;
@apply flex flex-col items-center sm:flex-row sm:gap-4 bg-(--ui-bg-muted) hover:bg-(--ui-bg-elevated) transition-colors duration-100 ease-fluid ml-0;
h3 { @apply text-2xl font-bold; }
@apply flex flex-col 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;
h3 { @apply text-2xl font-bold line-clamp-1; }
h3,p { z-index: 1; }
img { @apply mb-2 sm:mb-0 aspect-video object-cover w-full sm:max-w-56; }
img { @apply mb-2 sm:mb-0 aspect-video object-cover w-full sm:max-w-56 rounded-lg; }
p {
@apply line-clamp-2;
margin: 0;
@@ -290,27 +296,30 @@ p {
@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;
}
.hamburger-menu {
@apply flex flex-col fixed left-0 top-14 w-full bg-(--color-deep-semidark) text-(--color-cloud-medium) h-full z-[1000];
@apply flex flex-col sticky h-fit left-0 top-14 w-full max-w-(--ui-container) mx-auto z-[1000];
.nav-wrapper {
list-style-type: none;
display: flex;
flex-direction: column;
margin: 0;
padding: 0 calc(var(--spacing)*4);
padding-top: 1rem;
width: 100%;
gap: 6px;
align-items: end;
.nav-link {
height: calc(var(--spacing)*14);
font-size: 15px;
width: 100%;
max-width: 24rem;
@apply ml-0;
a {
display: flex;
align-items: center;
height: calc(var(--spacing)*14);
width: 100%;
@apply pl-3 cursor-pointer hover:bg-(--ui-text)/5 active:bg-(--ui-text)/10 transition-colors duration-100 ease-fluid;
@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-colors transition-transform duration-100 ease-fluid;
}
a.router-link-exact-active {
@apply border-l-2 border-primary box-border pl-2.5 text-primary;
@apply text-primary;
}
}
}
@@ -323,14 +332,16 @@ p {
display: flex;
flex-direction: row;
height: 100%;
gap: 6px;
.nav-link {
font-size: 15px;
align-content: center;
height: 100%;
@apply ml-0;
@apply m-0;
a {
display: flex;
align-items: center;
height: 100%;
@apply px-3 cursor-pointer hover:text-primary active:opacity-80 transition-colors duration-100 ease-fluid;
@apply px-3 h-10 rounded-[20px] bg-(--ui-bg)/75 backdrop-blur border border-(--ui-text)/5 cursor-pointer hover:text-primary active:opacity-80 transition-colors duration-100 ease-fluid;
}
a.router-link-exact-active {
@apply text-primary;
@@ -365,7 +376,7 @@ button.btn, a.btn {
@apply cursor-pointer;
}
.btn {
@apply h-10 bg-primary text-primary-content px-4;
@apply h-10 bg-primary text-primary-content px-4 rounded-[20px];
}
.btn.btn-sm {
@apply h-9;
@@ -407,5 +418,8 @@ button.btn, a.btn {
.post-cover {
gap: 1.5rem;
display: flex;
flex-direction: row-reverse;
@apply flex-col md:flex-row-reverse
}
.post-cover > .img-cover {
@apply w-full aspect-[4/3] max-w-full md:max-w-[55%] object-cover;
}