src/scss/custom.scss

/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */
@tailwind base;
@tailwind components;
@tailwind utilities;
@import './variables';
@import './components/sidebar';
@import './components/breadcrumbs';
@import './components/markdown';
@import './components/pagination-nav';
@import './components/navbar';
@import './components/blog';
@import './components/search';
@import './common';


@layer utilities {
    .transition-slide {
        @apply inline-block transform transition-transform duration-300 hover:translate-x-1 group-hover:translate-x-1;
    }
}


.button-primary {
    display: flex;
    height: 52px;
    padding: 15px 40px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 4px;
    background: var(--b-1, #444FD9);
    color: white;
}

:root {
    --font-family-base: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.markdown :where(p, h1, h2, h3, h4, h5, h6, li, blockquote) {
    font-family: var(--font-family-base);
    color: #2a2f34
}
// body, .markdown {
//     font-family: var(--font-family-base);
//     font-weight: 400 !important;
//     color: #2a2f34
// }
.navbar__link {
    font-family: var(--font-family-base);
    font-weight: 400 !important;
}