// Tools @import “oscailte/tools/functions.scss”; @import “oscailte/tools/mixins.scss”;
$typography-config: (
'small': ( 'base': (100%, 1.42), 'h1': (2em, 1.25), 'h2': (1.625em, 1.15384615), 'h3': (1.375em, 1.13636364), 'h4': (1.125em, 1.11), 'h5': (1.075em, 1.11), 'h6': (.925em, 1.11) ), 'medium': ( 'base': (125%, 1.5), ), 'large': ( 'base': (150%, 1.62), ),
);
$social-map: (
'dribbble': #EA4C89, 'facebook': #4172B8, 'flickr': #0063DC, 'github': #181717, 'instagram': #E4405F, 'keybase': #33A0FF, 'linkedin': #0077B5, 'pinterest': #BD081C, 'telegram': #2CA5E0, 'twitter': #1DA1F2, 'rss': #FFA500,
);
@include generate-typography-properties($typography-config);
:root {
--theme-background: #f5f6fa; --theme-color: #282828; /** * Root properties, typically colour declarations, but contains other things too. */ --color-primary: #00a6ed; --color-secondary: #bf1ca9; --color-positive: #5ad42f; --color-negative: #d4372f; --site-container-width: 90%; --site-content-max-width: 81.25em; --site-owl-spacing: 1rem; --site-clip: polygon( calc(100% - var(--clip-notch)) 0, 100% var(--clip-notch), 100% 100%, var(--clip-notch) 100%, 0 calc(100% - var(--clip-notch)), 0 0 ); /** * Base typography settings. * Other typography settings will inherit/extend upon these. */ --typography-body-family: "Merriweather", serif; --typography-heading-family: "Lato", serif; --typography-link-text-shadow-color: var(--theme-background); /** * General shared properties. */ --box-shadow: 0 0 7px rgba(0, 0, 0, 0.05); --box-shadow_hover: 0 0 15px rgba(0, 0, 0, 0.15); /** * Component declarations */ --hero-matrix-url: #{url("/assets/oscailte/img/hero_matrix.png")}; --clip-notch: 10%;
}
// @media (prefers-color-scheme: dark) { // :root { // –theme-background: #282828; // –theme-color: e5e5e5; // –header-background: var(–theme-background); // –header-link-color: var(–theme-color); // –post-preview-background: rgba(255, 255, 255, 0.035); // } // }
@include breakpoint(“medium”) {
.Site:not(.Site--home) .Site__main { --site-container-width: 75%; }
} @include breakpoint(“large”) {
.Site:not(.Site--home) .Site__main { --site-container-width: auto; --site-content-max-width: 60rem }
}
// Generic @import “oscailte/generic/font-face.scss”; @import “oscailte/generic/modern-normalize.scss”; @import “oscailte/generic/lobotomised-owl.scss”;
// Elements @import “oscailte/elements/html.scss”; @import “oscailte/elements/body.scss”; @import “oscailte/elements/blockquote.scss”; @import “oscailte/elements/code.scss”; @import “oscailte/elements/headings.scss”; @import “oscailte/elements/hr.scss”; @import “oscailte/elements/img.scss”; @import “oscailte/elements/links.scss”;
// Objects @import “oscailte/objects/circuited.scss”; @import “oscailte/objects/lists.scss”; @import “oscailte/objects/muted.scss”; @import “oscailte/objects/no-owl.scss”;
// Components @import “oscailte/components/button.scss”; @import “oscailte/components/card.scss”; @import “oscailte/components/footer.scss”; @import “oscailte/components/header.scss”; @import “oscailte/components/hero.scss”; @import “oscailte/components/icon.scss”; @import “oscailte/components/navigation.scss”; @import “oscailte/components/recentposts.scss”; @import “oscailte/components/skipnav.scss”; @import “oscailte/components/social.scss”; @import “oscailte/components/syntax.scss”;
// Layout @import “oscailte/layout/stickyfooter.scss”; @import “oscailte/layout/container.scss”; @import “oscailte/layout/home.scss”; @import “oscailte/layout/post.scss”;