jepler/circuitpython-org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #364 from jwcooper/tablet-overlay

Browse source 
Add overlay on headline image on tablet sizes
This commit is contained in:
Kattni 2020-01-14 15:37:24 -05:00 committed by GitHub
commit a78fdd1ef0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
assets/sass/base/_mixins.scss
View file

@ -24,3 +24,14 @@
background-color: #fff;
}
}
@mixin img-overlay {
.img-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
}
}

17
assets/sass/pages/_home.scss
View file

@ -152,6 +152,14 @@
}
}
@media only screen and (max-width: $screen-md-max) {
#home-page {
.headline-banner {
@include img-overlay;
}
}
}
@media only screen and (max-width: $screen-xs-max) {
#home-page {
padding: 0;
@ -186,14 +194,7 @@
}
.img-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
}
@include img-overlay;
img.pinball {
object-fit: fill;