150 lines
4.2 KiB
CSS
Executable File
150 lines
4.2 KiB
CSS
Executable File
@import "tailwindcss";
|
|
@import "@nuxt/ui";
|
|
|
|
@theme {
|
|
--ui-container-lg: var(--container-5xl);
|
|
--ui-container-md: var(--container-3xl);
|
|
--ui-container-sm: var(--container-2xl);
|
|
--ui-container: var(--container-lg);
|
|
--ui-container-padding: calc(var(--spacing)*4);
|
|
--ui-header-title-height: calc(var(--spacing)*16);
|
|
--ui-header-navbar-height: calc(var(--spacing)*10);
|
|
|
|
--ui-bg-container: oklch(0.9557 0.1104 102.71);
|
|
--ui-primary-container: oklch(0.97 0.005 102.71);
|
|
--ui-on-primary-container: oklch(0.364 0.007 82.5);
|
|
--ui-bg-container-bd: oklch(0.85 0.1104 102.71);
|
|
--ui-on-bg-container: oklch(0.4644 0.0554 82.5);
|
|
|
|
--ui-primary: oklch(0.6358 0.1185 82.5);
|
|
|
|
--ui-primary-light: oklch(0.5 0.1185 82.5);
|
|
--ui-on-primary: oklch(1 0 0);
|
|
|
|
--ui-radius: 0.125rem;
|
|
|
|
--font-sans: OpenSans, 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;
|
|
}
|
|
@supports (font-variation-settings: normal) {
|
|
:root {
|
|
--font-sans: OpenSansVariable, Sarabun, sans-serif;
|
|
font-optical-sizing: auto;
|
|
}
|
|
}
|
|
body {
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
-webkit-font-smoothing: unset!important;
|
|
-moz-osx-font-smoothing: unset!important;
|
|
}
|
|
.container {
|
|
margin: 0 auto;
|
|
padding: 0 var(--ui-container-padding);
|
|
@apply max-w-(--ui-container) sm:max-w-(--ui-container-sm) md:max-w-(--ui-container-md) lg:max-w-(--ui-container-lg);
|
|
}
|
|
|
|
.row {
|
|
@apply flex items-center;
|
|
}
|
|
.nav {
|
|
@apply pl-0 list-none;
|
|
}
|
|
.navbar-nav {
|
|
@apply md:float-left md:m-0;
|
|
}
|
|
.navbar-nav-mobile {
|
|
@apply bg-(--ui-primary-light) border-t border-(--ui-primary);
|
|
}
|
|
.navbar-nav > li {
|
|
float: left;
|
|
display: flex;
|
|
}
|
|
.navbar-nav-mobile > li {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.navbar-nav > li > a,
|
|
.navbar-nav-mobile > li > a {
|
|
padding: 10.5px 14px;
|
|
}
|
|
.navbar-nav-mobile > li > a {
|
|
@apply text-(--ui-primary-container);
|
|
}
|
|
.navbar-nav > li > a.router-link-active,
|
|
.navbar-nav > li > a.router-link-active:hover,
|
|
.navbar-nav-mobile > li > a.router-link-active,
|
|
.navbar-nav-mobile > li > a.router-link-active:hover {
|
|
@apply bg-linear-[to_bottom,rgba(0,0,0,0.3)_10%,rgba(0,0,0,0)_100%];
|
|
}
|
|
.navbar-nav > li > a:hover,
|
|
.navbar-nav-mobile > li > a:hover {
|
|
@apply bg-linear-[to_bottom,rgba(255,255,255,0)_0%,rgba(255,255,255,0.3)_10%,rgba(255,255,255,0)_100%];
|
|
}
|
|
.site-title {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
height: var(--ui-header-title-height);
|
|
@apply border-t border-t-(--ui-on-bg-container) bg-linear-[to_bottom,var(--ui-bg-container-bd)_0%,var(--ui-bg-container)_35%] text-(--ui-on-bg-container);
|
|
}
|
|
.site-navbar {
|
|
min-height: var(--ui-header-navbar-height);
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
height: auto;
|
|
@apply bg-linear-[to_bottom,var(--ui-primary)_0%,var(--ui-primary-light)_90%] text-white;
|
|
}
|
|
/* .site-navbar > .container {
|
|
@apply items-end;
|
|
} */
|
|
.hero-section {
|
|
@apply py-16 drop-shadow-md bg-(--ui-primary-container) text-(--ui-on-primary-container) bg-cover bg-center;
|
|
}
|
|
.hero-section > .container > .brace {
|
|
@apply my-4;
|
|
}
|
|
.hero-section > .container > .title {
|
|
@apply text-2xl md:text-3xl lg:text-4xl font-bold my-4;
|
|
line-height: 1.4em;
|
|
}
|
|
.hero-section > .container > .subtitle {
|
|
@apply text-lg md:text-xl my-4;
|
|
line-height: 1.4em;
|
|
}
|
|
.page-section {
|
|
@apply my-16;
|
|
}
|
|
.page-section > .container .title {
|
|
@apply text-2xl font-medium my-[0.75rem];
|
|
}
|
|
.page-section > .container p {
|
|
@apply my-[0.75rem];
|
|
}
|
|
.page-section.page-section-alt {
|
|
@apply my-16 md:my-0;
|
|
}
|
|
.page-section.page-section-alt > .container {
|
|
@apply my-0 flex flex-col md:flex-row items-center;
|
|
}
|
|
.page-section.page-section-alt > .container > .section {
|
|
@apply md:mb-4;
|
|
}
|
|
.page-section.page-section-alt > .container > .section-img {
|
|
@apply w-full md:w-[45%] md:mr-12;
|
|
img {
|
|
@apply md:my-16 object-cover rounded-xl;
|
|
}
|
|
}
|
|
.footer {
|
|
@apply bg-(--ui-bg-muted) py-16;
|
|
}
|
|
.site-footer {
|
|
@apply block;
|
|
}
|
|
.footer-notice {
|
|
@apply block;
|
|
} |