From e6fb1db6496e7363c8aad54f65132d01534beeae Mon Sep 17 00:00:00 2001 From: Patrick Alvin Alcala Date: Thu, 31 Jul 2025 14:41:35 +0800 Subject: [PATCH] Added viewport only --- src/styles/classes.sass | 69 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100644 src/styles/classes.sass diff --git a/src/styles/classes.sass b/src/styles/classes.sass new file mode 100644 index 0000000..31b6cc9 --- /dev/null +++ b/src/styles/classes.sass @@ -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