PatAlcala9/dasig-solid
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Updated

Browse source
This commit is contained in:
Patrick Alvin Alcala 2025-11-24 15:42:06 +08:00
parent bbfa0b38ee
commit fe90f5988a
31 changed files with 613 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

32
frontend/src/styles/breakpoint.sass
View file

@ -1,51 +1,49 @@
$mobile: 575.98px
$tablet: 768px
$desktop: 1440px
@use '../../configs/design.site' as design
.on-desktop-only
@media only screen and (min-width: 0px) and (max-width: $desktop)
@media only screen and (min-width: 0px) and (max-width: design.$desktop)
display: none
@media only screen and (min-width: $desktop)
@media only screen and (min-width: design.$desktop)
display: block
.on-tablet-only
@media only screen and (min-width: 0px) and (max-width: $tablet)
@media only screen and (min-width: 0px) and (max-width: design.$tablet)
display: none
@media only screen and (min-width: $tablet) and (max-width: $desktop)
@media only screen and (min-width: design.$tablet) and (max-width: design.$desktop)
display: block
@media only screen and (min-width: $desktop)
@media only screen and (min-width: design.$desktop)
display: none
.on-mobile-only
@media only screen and (max-width: $mobile)
@media only screen and (max-width: design.$mobile)
display: block
@media only screen and (min-width: $tablet)
@media only screen and (min-width: design.$tablet)
display: none
.on-desktop-tablet-only
@media only screen and (min-width: 0px) and (max-width: $tablet)
@media only screen and (min-width: 0px) and (max-width: design.$tablet)
display: none
@media only screen and (min-width: $tablet)
@media only screen and (min-width: design.$tablet)
display: block
.on-desktop-mobile-only
@media only screen and (min-width: 0px) and (max-width: $mobile)
@media only screen and (min-width: 0px) and (max-width: design.$mobile)
display: block
@media only screen and (min-width: $mobile) and (max-width: $desktop)
@media only screen and (min-width: design.$mobile) and (max-width: design.$desktop)
display: none
@media only screen and (min-width: $desktop)
@media only screen and (min-width: design.$desktop)
display: block
.on-tablet-mobile-only
@media only screen and (min-width: 0px) and (max-width: $desktop)
@media only screen and (min-width: 0px) and (max-width: design.$desktop)
display: block
@media only screen and (min-width: $desktop)
@media only screen and (min-width: design.$desktop)
display: none