aboutsummaryrefslogtreecommitdiffstats
path: root/src/css/imports/_media-queries.css
diff options
context:
space:
mode:
Diffstat (limited to 'src/css/imports/_media-queries.css')
-rwxr-xr-xsrc/css/imports/_media-queries.css35
1 files changed, 2 insertions, 33 deletions
diff --git a/src/css/imports/_media-queries.css b/src/css/imports/_media-queries.css
index d8a4c93..d3be559 100755
--- a/src/css/imports/_media-queries.css
+++ b/src/css/imports/_media-queries.css
@@ -1,36 +1,5 @@
-/*
+@custom-media --breakpoint-not-small screen and (min-width: 40em);
- CUSTOM MEDIA QUERIES
+@custom-media --breakpoint-medium screen and (min-width: 40em) and (max-width: 60em);
- Media query values can be changed to fit your own content.
- There are no magic bullets when it comes to media query width values.
- They should be declared in em units - and they should be set to meet
- the needs of your content. You can also add additional media queries,
- or remove some of the existing ones.
-
- These media queries can be referenced like so:
-
- @media (--breakpoint-not-small) {
- .medium-and-larger-specific-style {
- background-color: red;
- }
- }
-
- @media (--breakpoint-medium) {
- .medium-screen-specific-style {
- background-color: red;
- }
- }
-
- @media (--breakpoint-large) {
- .large-and-larger-screen-specific-style {
- background-color: red;
- }
- }
-
-*/
-
-/* Media Queries */
-@custom-media --breakpoint-not-small screen and (min-width: 30em);
-@custom-media --breakpoint-medium screen and (min-width: 30em) and (max-width: 60em);
@custom-media --breakpoint-large screen and (min-width: 60em);