114 lines
1.8 KiB
CSS
114 lines
1.8 KiB
CSS
@import "tailwindcss/base";
|
|
@import "tailwindcss/components";
|
|
@import "tailwindcss/utilities";
|
|
|
|
html {
|
|
scroll-padding-top: 5rem;
|
|
scroll-behavior: smooth;
|
|
}
|
|
body {
|
|
@apply dark:bg-gradient-dark dark:text-primary-text bg-slate-100 text-gradient-dark w-full mx-auto;
|
|
}
|
|
main {
|
|
max-width: 800px !important;
|
|
margin: auto !important;
|
|
}
|
|
.prose {
|
|
margin: 0;
|
|
min-width: 100%;
|
|
}
|
|
|
|
pre {
|
|
@apply dark:bg-black/30 bg-slate-200 text-slate-800 dark:text-slate-200 !important;
|
|
}
|
|
|
|
pre > code {
|
|
@apply bg-transparent text-gray-700 dark:text-slate-300 !important;
|
|
}
|
|
|
|
.codeStyle {
|
|
@apply bg-transparent !important;
|
|
}
|
|
|
|
pre > div > div > button > svg:hover {
|
|
@apply hover:text-action transition-all ease-in-out duration-100 !important;
|
|
}
|
|
|
|
h1 > a,
|
|
h2 > a,
|
|
h3 > a,
|
|
h4 > a {
|
|
@apply cursor-pointer relative text-gray-800 dark:text-gray-100 decoration-transparent font-bold !important;
|
|
}
|
|
|
|
h1 > a:hover::before,
|
|
h2 > a:hover::before,
|
|
h3 > a:hover::before,
|
|
h4 > a:hover::before {
|
|
@apply content-['#'] absolute -left-8 text-gray-300 dark:text-gray-400;
|
|
}
|
|
|
|
h2 > a:hover::before {
|
|
@apply -left-6;
|
|
}
|
|
|
|
h3 > a:hover::before {
|
|
@apply -left-5;
|
|
}
|
|
|
|
h4 > a:hover::before {
|
|
@apply -left-4;
|
|
}
|
|
|
|
div > code,
|
|
pre > code {
|
|
@apply p-0 m-0 !important;
|
|
}
|
|
|
|
.slider {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.image {
|
|
width: 1000px;
|
|
height: 600px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.right-arrow {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 0%;
|
|
font-size: 2rem;
|
|
rotate: 180deg;
|
|
color: #bdbdbd;
|
|
z-index: 10;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.left-arrow {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: -5%;
|
|
font-size: 2rem;
|
|
color: #bdbdbd;
|
|
z-index: 10;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.slide {
|
|
opacity: 0;
|
|
transition-duration: 0.5s ease;
|
|
}
|
|
|
|
.slide.active {
|
|
opacity: 1;
|
|
transition-duration: 0.5s;
|
|
transform: scale(0.8);
|
|
}
|