SiteWebAstrolabe/src/scss/global.scss
Yves Gatesoupe b8c1d5a79d form select arrow
focused elements styling
2020-06-26 16:32:56 +02:00

80 lines
1.3 KiB
SCSS

@import 'config';
// Pull in the stalfos lib
@import '../../node_modules/stalfos/stalfos';
// Local mixins
@import 'mixins/dark-mode';
@import 'theme';
// Local dependencies
@import 'typography';
/**
* GLOBAL STYLES
*/
html,
body {
height: 100%;
}
body {
scroll-behavior: smooth;
display: flex;
flex-direction: column;
}
main {
flex: 1 0 auto;
&:focus {
outline: none;
}
}
hr {
display: block;
height: 1px;
max-width: 500px;
background: var(--color-stroke);
border: 0;
margin: get-size(900) auto;
}
// For when metric attributes are added to img elements
img {
height: auto;
}
:focus {
outline: 1px solid var(--color-dark);
outline-offset: 0.25rem;
}
/**
* PROJECT IMPORTS
*/
// Utils
@import 'utilities/inner-wrapper';
@import 'utilities/visually-hidden';
@import 'utilities/wrapper';
// Components
@import 'components/button';
@import 'components/form';
@import 'components/heading-permalink';
@import 'components/intro';
@import 'components/nav';
@import 'components/pagination';
@import 'components/post';
@import 'components/post-list';
@import 'components/news-list';
@import 'components/presentation';
@import 'components/site-head';
@import 'components/site-foot';
@import 'components/skip-link';
@import 'components/syntax-highlighting';
@import 'components/video-player';