From dedfd8a8098db999f81a55a845e0e4d041f9d7a8 Mon Sep 17 00:00:00 2001 From: Darin Dimitroff Date: Tue, 22 Nov 2016 13:07:51 +0200 Subject: Adds Tachyons --- src/css/imports/_media-queries.css | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100755 src/css/imports/_media-queries.css (limited to 'src/css/imports/_media-queries.css') diff --git a/src/css/imports/_media-queries.css b/src/css/imports/_media-queries.css new file mode 100755 index 0000000..d8a4c93 --- /dev/null +++ b/src/css/imports/_media-queries.css @@ -0,0 +1,36 @@ +/* + + CUSTOM MEDIA QUERIES + + 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); -- cgit v1.3