b8c1d5a79d
focused elements styling
80 lines
1.3 KiB
SCSS
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';
|