theme, plugins und config für die Webseite der Baptisten Hohenacker
https://baptisten-hohenacker.de
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
44 lines
2.2 KiB
44 lines
2.2 KiB
// Media Device Breakpoints |
|
$large-desktop-container: 75.000rem !default; |
|
$desktop-container: 60.000rem !default; |
|
$tablet-container: 48.000rem !default; |
|
$large-mobile-container: 30.000rem !default; |
|
$mobile-container: 100% !default; |
|
|
|
// Breakpoint Variables For Particles |
|
$media: "all" !default; |
|
$mobile-only: "#{$media} and (max-width:#{$tablet-container - 0.062})" !default; |
|
$no-mobile: "#{$media} and (min-width:#{$tablet-container})" !default; |
|
$small-mobile-range: "#{$media} and (max-width:#{$large-mobile-container})" !default; |
|
$large-mobile-range: "#{$media} and (min-width:#{$large-mobile-container + 0.063}) and (max-width:#{$tablet-container - 0.062})" !default; |
|
$tablet-range: "#{$media} and (min-width:#{$tablet-container}) and (max-width:#{$desktop-container - 0.062})" !default; |
|
$desktop-range: "#{$media} and (min-width:#{$desktop-container}) and (max-width:#{$large-desktop-container - 0.062})" !default; |
|
$large-desktop-range: "#{$media} and (min-width:#{$large-desktop-container})" !default; |
|
|
|
// Breakpoints |
|
@mixin breakpoint($breakpoint, $media: all) { |
|
@if $breakpoint == large-desktop-range { |
|
@media only #{$media} and (min-width: $large-desktop-container) { @content; } |
|
} |
|
@else if $breakpoint == desktop-range { |
|
@media only #{$media} and (min-width: $desktop-container) and (max-width: $large-desktop-container - 0.062) { @content; } |
|
} |
|
@else if $breakpoint == tablet-range { |
|
@media only #{$media} and (min-width: $tablet-container) and (max-width: $desktop-container - 0.062) { @content; } |
|
} |
|
@else if $breakpoint == large-mobile-range { |
|
@media only #{$media} and (min-width: $large-mobile-container + 0.063) and (max-width: $tablet-container - 0.062) { @content; } |
|
} |
|
@else if $breakpoint == small-mobile-range { |
|
@media only #{$media} and (max-width: $large-mobile-container) { @content; } |
|
} |
|
@else if $breakpoint == no-mobile { |
|
@media only #{$media} and (min-width: $tablet-container) { @content; } |
|
} |
|
@else if $breakpoint == mobile-only { |
|
@media only #{$media} and (max-width: $tablet-container - 0.062) { @content; } |
|
} |
|
@else if $breakpoint == desktop-only { |
|
@media only #{$media} and (max-width: $desktop-container - 0.062) { @content; } |
|
} |
|
}
|
|
|