75 lines
3.3 KiB
SCSS
75 lines
3.3 KiB
SCSS
|
main {
|
||
|
|
min-height: 70vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
// section style
|
||
|
|
.section {
|
||
|
|
@apply py-24 xl:py-28;
|
||
|
|
&-sm {
|
||
|
|
@apply py-16 xl:py-20;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// container
|
||
|
|
.container {
|
||
|
|
@apply mx-auto px-4 2xl:max-w-[1320px];
|
||
|
|
}
|
||
|
|
|
||
|
|
// form style
|
||
|
|
.form-input {
|
||
|
|
@apply bg-theme-light text-dark placeholder:text-light focus:border-primary dark:border-darkmode-border dark:bg-darkmode-theme-light dark:text-darkmode-light w-full rounded border-transparent px-6 py-4 focus:ring-transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-label {
|
||
|
|
@apply font-secondary text-dark dark:text-darkmode-light mb-4 block text-xl font-normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
// social icons
|
||
|
|
.social-icons {
|
||
|
|
@apply space-x-4;
|
||
|
|
li {
|
||
|
|
@apply inline-block;
|
||
|
|
a {
|
||
|
|
@apply bg-primary dark:bg-darkmode-primary dark:text-dark flex h-9 w-9 items-center justify-center rounded text-center leading-9 text-white;
|
||
|
|
svg {
|
||
|
|
@apply h-5 w-5;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// swiper pagination
|
||
|
|
.swiper-pagination-bullet {
|
||
|
|
@apply bg-theme-light dark:bg-darkmode-theme-light h-2.5 w-2.5 opacity-100 mx-1.5 #{!important};
|
||
|
|
|
||
|
|
&-active {
|
||
|
|
@apply bg-primary dark:bg-darkmode-primary h-4 w-4 #{!important};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// content style
|
||
|
|
.content {
|
||
|
|
@apply prose max-w-none;
|
||
|
|
@apply prose-headings:mb-[.3em] prose-headings:mt-[.6em] prose-headings:text-dark prose-headings:dark:text-darkmode-dark;
|
||
|
|
@apply prose-h1:text-h1-sm md:prose-h1:text-h1;
|
||
|
|
@apply prose-h2:text-h2-sm md:prose-h2:text-h2;
|
||
|
|
@apply prose-h3:text-h3-sm md:prose-h3:text-h3;
|
||
|
|
@apply prose-img:max-w-full prose-img:rounded;
|
||
|
|
@apply prose-hr:border-border prose-hr:dark:border-darkmode-border;
|
||
|
|
@apply prose-p:text-base prose-p:text-text prose-p:dark:text-darkmode-text;
|
||
|
|
@apply prose-blockquote:rounded-lg prose-blockquote:border prose-blockquote:border-l-[10px] prose-blockquote:border-primary prose-blockquote:bg-theme-light prose-blockquote:px-8 prose-blockquote:py-10 prose-blockquote:font-secondary prose-blockquote:text-2xl prose-blockquote:not-italic prose-blockquote:text-dark prose-blockquote:dark:border-darkmode-primary prose-blockquote:dark:bg-darkmode-theme-light prose-blockquote:dark:text-darkmode-light;
|
||
|
|
@apply prose-pre:rounded-lg prose-pre:bg-theme-light prose-pre:dark:bg-darkmode-theme-light;
|
||
|
|
@apply prose-code:px-1 prose-code:dark:text-darkmode-light;
|
||
|
|
@apply prose-strong:text-dark prose-strong:dark:text-darkmode-text;
|
||
|
|
@apply prose-a:text-text prose-a:underline hover:prose-a:text-primary prose-a:dark:text-darkmode-text hover:prose-a:dark:text-darkmode-primary;
|
||
|
|
@apply prose-li:text-text prose-li:dark:text-darkmode-text;
|
||
|
|
@apply prose-table:relative prose-table:overflow-hidden prose-table:rounded-lg prose-table:before:absolute prose-table:before:left-0 prose-table:before:top-0 prose-table:before:h-full prose-table:before:w-full prose-table:before:rounded-[inherit] prose-table:before:border prose-table:before:content-[""] prose-table:before:dark:border-darkmode-border;
|
||
|
|
@apply prose-thead:border-border prose-thead:bg-theme-light prose-thead:dark:border-darkmode-border prose-thead:dark:bg-darkmode-theme-light;
|
||
|
|
@apply prose-th:relative prose-th:z-10 prose-th:px-4 prose-th:py-[18px] prose-th:text-dark prose-th:dark:text-darkmode-text;
|
||
|
|
@apply prose-tr:border-border prose-tr:dark:border-darkmode-border;
|
||
|
|
@apply prose-td:relative prose-td:z-10 prose-td:px-3 prose-td:py-[18px] prose-td:dark:text-darkmode-text;
|
||
|
|
.btn {
|
||
|
|
@apply dark:hover:text-dark no-underline hover:text-white #{!important};
|
||
|
|
}
|
||
|
|
}
|