mirror of
https://github.com/Radiquum/radiquum.github.io.git
synced 2025-09-05 05:55:37 +05:00
104 lines
2 KiB
CSS
104 lines
2 KiB
CSS
@import "tailwindcss";
|
|
|
|
:root {
|
|
--background: #090909;
|
|
--foreground: #ededed;
|
|
}
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--font-sans: var(--font-geist-sans);
|
|
--font-mono: var(--font-geist-mono);
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "LTSuperior";
|
|
src: url("/fonts/LTSuperior-Mar2025/LTSuperior-Regular.ttf")
|
|
format("truetype");
|
|
font-weight: 400;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "LTSuperior";
|
|
src: url("/fonts/LTSuperior-Mar2025/LTSuperior-Medium.ttf") format("truetype");
|
|
font-weight: 500;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "LTSuperior";
|
|
src: url("/fonts/LTSuperior-Mar2025/LTSuperior-SemiBold.ttf")
|
|
format("truetype");
|
|
font-weight: 700;
|
|
}
|
|
|
|
body {
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
font-family: LTSuperior, Inter, Helvetica, sans-serif;
|
|
}
|
|
|
|
/* embla styles */
|
|
|
|
.embla {
|
|
max-width: 100%;
|
|
margin: auto;
|
|
--slide-height: 144px;
|
|
--slide-spacing: 8px;
|
|
--slide-size: 256px;
|
|
}
|
|
.embla__viewport {
|
|
overflow: hidden;
|
|
}
|
|
.embla__container {
|
|
display: flex;
|
|
touch-action: pan-y pinch-zoom;
|
|
margin-left: calc(var(--slide-spacing) * -1);
|
|
}
|
|
.embla__slide {
|
|
transform: translate3d(0, 0, 0);
|
|
flex: 0 0 var(--slide-size);
|
|
min-width: 0;
|
|
padding-left: var(--slide-spacing);
|
|
}
|
|
.embla__slide__img {
|
|
border-radius: 1.8rem;
|
|
display: block;
|
|
height: var(--slide-height);
|
|
width: 100%;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
.embla__parallax {
|
|
border-radius: 1.8rem;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
.embla__parallax__layer {
|
|
position: relative;
|
|
height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.embla__parallax__img {
|
|
max-width: none;
|
|
flex: 0 0 calc(115% + (var(--slide-spacing) * 2));
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.embla {
|
|
--slide-height: 288px;
|
|
--slide-spacing: 16px;
|
|
--slide-size: 512px;
|
|
}
|
|
}
|
|
|
|
.embla--projects {
|
|
--slide-size: 100%;
|
|
--slide-width: 100%;
|
|
--slide-height: 100%;
|
|
--slide-spacing: 16px;
|
|
}
|