alex.racine/themes/portfoliGor/assets/scss/_main_body.scss

95 lines
1.5 KiB
SCSS
Raw Normal View History

///////////////////
// //
// MAIN //
// //
///////////////////
.home-lists {
@include breakpoint(desktop) {
display: inline-flex;
flex-flow: row;
flex-wrap: wrap;
overflow: visible;
width: 100%; // set the container width
dt {
flex: 0 0 39%;
word-wrap: anywhere;
}
dd {
flex: 0 0 59%;
margin-left: auto;
text-align: left;
}
}
@include breakpoint(laptop) {
display: inline-flex;
flex-flow: row;
flex-wrap: nowrap;
flex-wrap: wrap;
overflow: visible;
margin-left: 3rem;
dt {
flex: 0 0 30%;
word-wrap: anywhere;
}
dd {
flex: 0 0 59%;
margin-left: auto;
text-align: left;
}
}
@include breakpoint(mobile) {
display: flex;
flex-direction: column;
place-items: center;
}
@include breakpoint(tablet) {
display: flex;
flex-direction: column;
place-items: center;
}
dd {
margin-left: .5rem;
}
dt::after {
content: ':';
}
}
.contents {
padding: 0;
}
.apps {
display: flex;
place-items: center;
justify-content: space-evenly;
flex-wrap: wrap;
gap: 2rem 5rem;
margin-top: 2rem;
img {
max-width: 60%;
}
}
.home {
background: url("images/assets/overlay.png"), url("images/assets/intro.jpg");
background-size: 256px 256px, cover;
background-attachment: fixed, fixed;
background-position: top left, bottom center;
background-repeat: repeat, no-repeat;
background-blend-mode: difference;
}