120 lines
2.6 KiB
CSS
120 lines
2.6 KiB
CSS
/* @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital@0;1&display=swap'); */
|
|
/* black, bold, regular */
|
|
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap");
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
scroll-behavior: smooth;
|
|
}
|
|
/* .hero * {
|
|
transition: color .2s, background-color .2s;
|
|
} */
|
|
@layer utilities {
|
|
.scroll-snap-none {
|
|
scroll-snap-type: none;
|
|
}
|
|
.scroll-snap-x {
|
|
scroll-snap-type: x mandatory;
|
|
}
|
|
.scroll-snap-y {
|
|
scroll-snap-type: y mandatory;
|
|
}
|
|
.scroll-snap-start {
|
|
scroll-snap-align: start;
|
|
}
|
|
.scroll-padding-6 {
|
|
scroll-padding: theme("spacing.6");
|
|
}
|
|
.cursor-zoom-in {
|
|
cursor: -webkit-zoom-in;
|
|
cursor: zoom-in;
|
|
}
|
|
.cursor-zoom-out {
|
|
cursor: -webkit-zoom-out;
|
|
cursor: zoom-out;
|
|
}
|
|
@supports (backdrop-filter: none) {
|
|
.blurred-or-opaque-bg-1 {
|
|
@apply bg-opacity-50 backdrop-filter backdrop-blur-lg;
|
|
}
|
|
.blurred-or-opaque-bg-2 {
|
|
@apply bg-opacity-60 backdrop-filter backdrop-blur;
|
|
}
|
|
}
|
|
@supports not (backdrop-filter: none) {
|
|
.blurred-or-opaque-bg-1 {
|
|
@apply bg-opacity-60;
|
|
}
|
|
.blurred-or-opaque-bg-2 {
|
|
@apply bg-opacity-70;
|
|
}
|
|
}
|
|
.cool-border-big {
|
|
border: 1px solid rgb(var(--dark-vibrant));
|
|
background: rgb(var(--light-vibrant));
|
|
box-shadow: 10px 10px 0px 0px rgb(var(--dark-vibrant));
|
|
}
|
|
.cool-border-small {
|
|
color: rgb(var(--dark-vibrant));
|
|
border: 1px solid rgb(var(--dark-vibrant));
|
|
background: rgb(var(--light-vibrant));
|
|
box-shadow: 3px 3px 0px 0px rgb(var(--dark-vibrant));
|
|
}
|
|
.cool-border-small:hover {
|
|
box-shadow: 6px 6px 0px 0px rgb(var(--dark-vibrant));
|
|
}
|
|
.cool-border-small-light {
|
|
border: 1px solid rgb(var(--light-vibrant));
|
|
box-shadow: 3px 3px 0px 0px rgb(var(--light-vibrant));
|
|
}
|
|
.text-shadow {
|
|
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
|
|
& kbd {
|
|
text-shadow: none;
|
|
}
|
|
}
|
|
.text-outline {
|
|
text-shadow: -1px 1px 0 #fff, 1px 1px 0 #fff, 1px -1px 0 #fff,
|
|
-1px -1px 0 #fff;
|
|
}
|
|
.gradient {
|
|
background-image: linear-gradient(
|
|
180deg,
|
|
hsla(0deg, 0%, 0%, 0%) 95%,
|
|
hsla(0deg, 0%, 0%, 10%) 100%
|
|
);
|
|
}
|
|
}
|
|
|
|
body {
|
|
@apply bg-gray-100;
|
|
overflow: auto;
|
|
/* @apply bg-black; */
|
|
/* @apply text-white; */
|
|
}
|
|
|
|
h1 {
|
|
@apply text-2xl;
|
|
}
|
|
h2 {
|
|
@apply text-xl;
|
|
}
|
|
h3 {
|
|
@apply text-lg;
|
|
}
|
|
a {
|
|
@apply text-blue-600;
|
|
}
|
|
|
|
kbd {
|
|
@apply bg-gray-300 text-black border border-gray-700 rounded p-1;
|
|
}
|
|
|
|
button {
|
|
@apply cursor-auto;
|
|
}
|