diff options
| author | amzrk2 | 2020-05-27 22:53:13 +0800 |
|---|---|---|
| committer | amzrk2 | 2020-05-27 22:53:13 +0800 |
| commit | dfb6e1f80754c1c8f2d4d332c5292319f008a67b (patch) | |
| tree | fd8c0cf13e03613b6a39c662b6a0ced87fb69157 /assets/_primer/support/mixins/layout.scss | |
| parent | aa5290aeef9df1c583fdf30290351968df9215dc (diff) | |
| download | hugo-theme-fuji-dfb6e1f80754c1c8f2d4d332c5292319f008a67b.tar.gz hugo-theme-fuji-dfb6e1f80754c1c8f2d4d332c5292319f008a67b.tar.bz2 hugo-theme-fuji-dfb6e1f80754c1c8f2d4d332c5292319f008a67b.zip | |
v2 original port
Diffstat (limited to 'assets/_primer/support/mixins/layout.scss')
| -rw-r--r-- | assets/_primer/support/mixins/layout.scss | 58 |
1 files changed, 58 insertions, 0 deletions
diff --git a/assets/_primer/support/mixins/layout.scss b/assets/_primer/support/mixins/layout.scss new file mode 100644 index 0000000..a6d30cf --- /dev/null +++ b/assets/_primer/support/mixins/layout.scss @@ -0,0 +1,58 @@ +// Responsive media queries + +@mixin breakpoint($breakpoint) { + @if $breakpoint == "" { + @content; + } + + @else { + // Retrieves the value from the key + $value: map-get($breakpoints, $breakpoint); + + // If the key exists in the map + @if $value != null { + // Prints a media query based on the value + @media (min-width: $value) { + @content; + } + } + + // If the key doesn't exist in the map + @else { + @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. " + + "Please make sure it is defined in `$breakpoints` map."; + } + } +} + +// Retina media query + +@mixin retina-media-query { + @media + only screen and (-webkit-min-device-pixel-ratio: 2), + only screen and (min--moz-device-pixel-ratio: 2), + only screen and (-moz-min-device-pixel-ratio: 2), + only screen and (-o-min-device-pixel-ratio: 2/1), + only screen and (min-device-pixel-ratio: 2), + only screen and (min-resolution: 192dpi), + only screen and (min-resolution: 2dppx) { + @content; + } +} + +// Clearfix +// +// Clears floats via mixin. + +@mixin clearfix { + &::before { + display: table; + content: ""; + } + + &::after { + display: table; + clear: both; + content: ""; + } +} |