71 lines
1.9 KiB
SCSS
71 lines
1.9 KiB
SCSS
@use "sass:map";
|
|
|
|
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
|
|
@import "../node_modules/bootstrap/scss/functions";
|
|
|
|
// 2. Include any default variable overrides here
|
|
$list-group-bg: inherit;
|
|
$mostly-white: rgba(255,255,255, 0.7);
|
|
|
|
// 3. Include remainder of required Bootstrap stylesheets
|
|
@import "../node_modules/bootstrap/scss/variables";
|
|
|
|
// 4. Include any default map overrides here
|
|
|
|
// 5. Include remainder of required parts
|
|
@import "../node_modules/bootstrap/scss/maps";
|
|
@import "../node_modules/bootstrap/scss/mixins";
|
|
@import "../node_modules/bootstrap/scss/root";
|
|
|
|
// 6. Optionally include any other parts as needed
|
|
@import "../node_modules/bootstrap/scss/utilities";
|
|
@import "../node_modules/bootstrap/scss/reboot";
|
|
// @import "../node_modules/bootstrap/scss/type";
|
|
// @import "../node_modules/bootstrap/scss/images";
|
|
@import "../node_modules/bootstrap/scss/containers";
|
|
@import "../node_modules/bootstrap/scss/grid";
|
|
@import "../node_modules/bootstrap/scss/list-group";
|
|
@import "../node_modules/bootstrap/scss/helpers";
|
|
|
|
// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
|
|
@import "../node_modules/bootstrap/scss/utilities/api";
|
|
|
|
// 8. Add additional custom code here
|
|
|
|
body {
|
|
background-image: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.3)), url('img/pexels-bert-5985264.jpg');
|
|
height: 100vh;
|
|
background-position: center;
|
|
background-size: cover;
|
|
}
|
|
|
|
header {
|
|
h1 {
|
|
background-color: $mostly-white;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
figure {
|
|
max-width: 10rem;
|
|
text-align: center;
|
|
margin: map.get($spacers, 5) auto $spacer;
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
section ul {
|
|
background-color: $mostly-white;
|
|
max-width: 20rem;
|
|
margin: 1rem auto;
|
|
|
|
li {
|
|
width: 100%;
|
|
overflow: auto;
|
|
|
|
i {
|
|
float: left;
|
|
}
|
|
}
|
|
}
|