Added viewport only
This commit is contained in:
parent
6f97b30687
commit
e6fb1db649
1 changed files with 69 additions and 0 deletions
69
src/styles/classes.sass
Normal file
69
src/styles/classes.sass
Normal file
|
|
@ -0,0 +1,69 @@
|
||||||
|
.fullscreen
|
||||||
|
position: fixed
|
||||||
|
top: 0
|
||||||
|
left: 0
|
||||||
|
width: 100vw
|
||||||
|
height: 100vh
|
||||||
|
object-fit: cover
|
||||||
|
z-index: -1
|
||||||
|
opacity: 0.2
|
||||||
|
|
||||||
|
.on-desktop-only
|
||||||
|
@media only screen and (max-width: view.$desktop)
|
||||||
|
display: block
|
||||||
|
|
||||||
|
@media only screen and (max-width: view.$tablet)
|
||||||
|
display: none
|
||||||
|
|
||||||
|
@media only screen and (max-width: view.$mobile)
|
||||||
|
display: none
|
||||||
|
|
||||||
|
.on-tablet-only
|
||||||
|
@media only screen and (max-width: view.$desktop)
|
||||||
|
display: none
|
||||||
|
|
||||||
|
@media only screen and (max-width: view.$tablet)
|
||||||
|
display: block
|
||||||
|
|
||||||
|
@media only screen and (max-width: view.$mobile)
|
||||||
|
display: none
|
||||||
|
|
||||||
|
.on-mobile-only
|
||||||
|
@media only screen and (max-width: view.$desktop)
|
||||||
|
display: none
|
||||||
|
|
||||||
|
@media only screen and (max-width: view.$tablet)
|
||||||
|
display: none
|
||||||
|
|
||||||
|
@media only screen and (max-width: view.$mobile)
|
||||||
|
display: block
|
||||||
|
|
||||||
|
.on-desktop-tablet-only
|
||||||
|
@media only screen and (max-width: view.$desktop)
|
||||||
|
display: block
|
||||||
|
|
||||||
|
@media only screen and (max-width: view.$tablet)
|
||||||
|
display: block
|
||||||
|
|
||||||
|
@media only screen and (max-width: view.$mobile)
|
||||||
|
display: none
|
||||||
|
|
||||||
|
.on-desktop-mobile-only
|
||||||
|
@media only screen and (max-width: view.$desktop)
|
||||||
|
display: block
|
||||||
|
|
||||||
|
@media only screen and (max-width: view.$tablet)
|
||||||
|
display: none
|
||||||
|
|
||||||
|
@media only screen and (max-width: view.$mobile)
|
||||||
|
display: block
|
||||||
|
|
||||||
|
.on-tablet-mobile-only
|
||||||
|
@media only screen and (max-width: view.$desktop)
|
||||||
|
display: none
|
||||||
|
|
||||||
|
@media only screen and (max-width: view.$tablet)
|
||||||
|
display: block
|
||||||
|
|
||||||
|
@media only screen and (max-width: view.$mobile)
|
||||||
|
display: block
|
||||||
Loading…
Add table
Add a link
Reference in a new issue