262 lines
5.5 KiB
CSS
262 lines
5.5 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@font-face {
|
|
font-family: 'TT Mono';
|
|
src: url('/fonts/TT_Commons_Pro_Mono_Regular.woff2') format('woff2');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'TT Commons Expanded';
|
|
src: url('/fonts/TT_Commons_Pro_Expanded_DemiBold.woff2') format('woff2');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'TT Commons';
|
|
font-weight: normal;
|
|
src: url('/fonts/TT_Commons_Pro_Regular.woff2') format('woff2');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'TT Commons';
|
|
font-weight: medium;
|
|
src: url('/fonts/TT_Commons_Pro_Medium.woff2') format('woff2');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'TT Commons';
|
|
font-weight: bold;
|
|
src: url('/fonts/TT_Commons_Pro_DemiBold.woff2') format('woff2');
|
|
}
|
|
|
|
/* Reset */
|
|
|
|
html,
|
|
body,
|
|
p,
|
|
ol,
|
|
ul,
|
|
li,
|
|
dl,
|
|
dt,
|
|
dd,
|
|
blockquote,
|
|
figure,
|
|
fieldset,
|
|
legend,
|
|
textarea,
|
|
pre,
|
|
iframe,
|
|
hr,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-size: 100%;
|
|
font-weight: normal;
|
|
}
|
|
ul {
|
|
list-style: none;
|
|
}
|
|
button,
|
|
input,
|
|
select {
|
|
margin: 0;
|
|
}
|
|
html {
|
|
box-sizing: border-box;
|
|
}
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: inherit;
|
|
}
|
|
img,
|
|
video {
|
|
height: auto;
|
|
max-width: 100%;
|
|
}
|
|
iframe {
|
|
border: 0;
|
|
}
|
|
table {
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
}
|
|
td,
|
|
th {
|
|
padding: 0;
|
|
}
|
|
|
|
/* Theme */
|
|
|
|
:root {
|
|
--active: theme('colors.light-theme.active.DEFAULT');
|
|
--active-dark: theme('colors.light-theme.active.dark');
|
|
--down: theme('colors.light-theme.down.DEFAULT');
|
|
--down-dark: theme('colors.light-theme.down.dark');
|
|
--down-muted: theme('colors.light-theme.down.muted');
|
|
--up: theme('colors.light-theme.up.DEFAULT');
|
|
--up-dark: theme('colors.light-theme.up.dark');
|
|
--up-muted: theme('colors.light-theme.up.muted');
|
|
--link: theme('colors.light-theme.link.DEFAULT');
|
|
--link-hover: theme('colors.light-theme.link.hover');
|
|
--bkg-1: theme('colors.light-theme.bkg-1');
|
|
--bkg-2: theme('colors.light-theme.bkg-2');
|
|
--bkg-3: theme('colors.light-theme.bkg-3');
|
|
--bkg-4: theme('colors.light-theme.bkg-4');
|
|
--fgd-1: theme('colors.light-theme.fgd-1');
|
|
--fgd-2: theme('colors.light-theme.fgd-2');
|
|
--fgd-3: theme('colors.light-theme.fgd-3');
|
|
--fgd-4: theme('colors.light-theme.fgd-4');
|
|
--button: theme('colors.light-theme.button.DEFAULT');
|
|
--input-bkg: theme('colors.light-theme.input.bkg');
|
|
--input-border: theme('colors.light-theme.input.border');
|
|
--input-border-hover: theme('colors.light-theme.input.borderDark');
|
|
--button-hover: theme('colors.light-theme.button.hover');
|
|
--error: theme('colors.light-theme.error');
|
|
--success: theme('colors.light-theme.success');
|
|
--warning: theme('colors.light-theme.warning');
|
|
}
|
|
|
|
[data-theme='Mango'] {
|
|
--active: theme('colors.mango-classic-theme.active.DEFAULT');
|
|
--active-dark: theme('colors.mango-classic-theme.active.dark');
|
|
--down: theme('colors.mango-classic-theme.down.DEFAULT');
|
|
--down-dark: theme('colors.mango-classic-theme.down.dark');
|
|
--down-muted: theme('colors.mango-classic-theme.down.muted');
|
|
--up: theme('colors.mango-classic-theme.up.DEFAULT');
|
|
--up-dark: theme('colors.mango-classic-theme.up.dark');
|
|
--up-muted: theme('colors.mango-classic-theme.up.muted');
|
|
--link: theme('colors.mango-classic-theme.link.DEFAULT');
|
|
--link-hover: theme('colors.mango-classic-theme.link.hover');
|
|
--bkg-1: theme('colors.mango-classic-theme.bkg-1');
|
|
--bkg-2: theme('colors.mango-classic-theme.bkg-2');
|
|
--bkg-3: theme('colors.mango-classic-theme.bkg-3');
|
|
--bkg-4: theme('colors.mango-classic-theme.bkg-4');
|
|
--fgd-1: theme('colors.mango-classic-theme.fgd-1');
|
|
--fgd-2: theme('colors.mango-classic-theme.fgd-2');
|
|
--fgd-3: theme('colors.mango-classic-theme.fgd-3');
|
|
--fgd-4: theme('colors.mango-classic-theme.fgd-4');
|
|
--button: theme('colors.mango-classic-theme.button.DEFAULT');
|
|
--button-hover: theme('colors.mango-classic-theme.button.hover');
|
|
--input-bkg: theme('colors.mango-classic-theme.input.bkg');
|
|
--input-border: theme('colors.mango-classic-theme.input.border');
|
|
--input-border-hover: theme('colors.mango-classic-theme.input.borderDark');
|
|
--error: theme('colors.mango-classic-theme.error');
|
|
--success: theme('colors.mango-classic-theme.success');
|
|
--warning: theme('colors.mango-classic-theme.warning');
|
|
}
|
|
|
|
/* Base */
|
|
|
|
body {
|
|
@apply font-body text-sm tracking-wider;
|
|
}
|
|
|
|
button {
|
|
@apply tracking-wider focus:outline-none;
|
|
}
|
|
|
|
svg {
|
|
@apply transition duration-500 ease-out;
|
|
}
|
|
|
|
.default-transition {
|
|
@apply transition duration-300 ease-out;
|
|
}
|
|
|
|
.page-x-padding {
|
|
@apply px-6 md:px-12 lg:px-20;
|
|
}
|
|
|
|
/* Type */
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4 {
|
|
@apply font-display text-th-fgd-1;
|
|
}
|
|
|
|
h1 {
|
|
@apply text-6xl lg:text-7xl;
|
|
}
|
|
|
|
h2 {
|
|
@apply text-4xl lg:text-5xl;
|
|
}
|
|
|
|
h3 {
|
|
@apply text-xl lg:text-2xl;
|
|
}
|
|
|
|
h4 {
|
|
@apply text-base;
|
|
}
|
|
|
|
p {
|
|
@apply text-th-fgd-3 text-base lg:text-lg;
|
|
}
|
|
|
|
a {
|
|
@apply text-base lg:text-lg;
|
|
}
|
|
|
|
.font-mono {
|
|
-webkit-font-feature-settings: 'zero' 1;
|
|
font-feature-settings: 'zero' 1;
|
|
}
|
|
|
|
li {
|
|
@apply text-sm text-th-fgd-3;
|
|
}
|
|
|
|
.intro-p {
|
|
@apply text-lg md:text-xl text-th-fgd-2;
|
|
}
|
|
|
|
@layer utilities {
|
|
.animation-delay-2000 {
|
|
animation-delay: 2s;
|
|
}
|
|
.animation-delay-4000 {
|
|
animation-delay: 4s;
|
|
}
|
|
}
|
|
|
|
.radial-gradient-bg {
|
|
background-image: radial-gradient(at 300% 100%, #5b48ad 0, transparent 75%);
|
|
@apply bg-th-bkg-1;
|
|
}
|
|
|
|
/* Animations */
|
|
|
|
@keyframes sideways-bounce {
|
|
0%,
|
|
100% {
|
|
transform: translateX(-25%);
|
|
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
|
}
|
|
50% {
|
|
transform: translateX(0);
|
|
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
}
|
|
}
|
|
|
|
.sideways-bounce {
|
|
animation: sideways-bounce 1s infinite;
|
|
}
|