Justin Edmund
3d58dd5b46
* Disabled games for now * Added failsafe for when last.fm can't find an album * Updated to use rems * Extracted RecentAlbums into a component * Fixes for mobile
89 lines
2.3 KiB
SCSS
89 lines
2.3 KiB
SCSS
// use with @include
|
|
@mixin breakpoint($breakpoint) {
|
|
$small-phone-width: 395px;
|
|
$small-phone-height: 1280px;
|
|
|
|
$phone-width: 450px;
|
|
$phone-height: 1280px;
|
|
|
|
$small-tablet-width: 750px;
|
|
$small-tablet-height: 1024px;
|
|
|
|
$tablet-width: 1024px;
|
|
$tablet-height: 1024px;
|
|
|
|
@if $breakpoint == desktop {
|
|
// prettier-ignore
|
|
@media only screen
|
|
and (min-width: $tablet-width) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@if $breakpoint == tablet {
|
|
// prettier-ignore
|
|
@media only screen
|
|
and (max-width: $tablet-width)
|
|
and (max-height: $tablet-height)
|
|
and (-webkit-min-device-pixel-ratio: 2) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@if $breakpoint == small-tablet {
|
|
// prettier-ignore
|
|
@media only screen
|
|
and (max-width: $small-tablet-width)
|
|
and (max-height: $small-tablet-height)
|
|
and (-webkit-min-device-pixel-ratio: 2) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@if $breakpoint == phone {
|
|
// prettier-ignore
|
|
@media only screen
|
|
and (max-width: $phone-width)
|
|
and (max-height: $phone-height)
|
|
and (-webkit-min-device-pixel-ratio: 2) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@if $breakpoint == small-phone {
|
|
// prettier-ignore
|
|
@media only screen
|
|
and (max-width: $small-phone-width)
|
|
and (max-height: $small-phone-height)
|
|
and (-webkit-min-device-pixel-ratio: 2) {
|
|
@content;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin hidpiImage($image, $extension, $width, $height, $position: center, $repeat: no-repeat) {
|
|
background: url($image + '.' + $extension) $repeat $position;
|
|
background-size: $width $height;
|
|
|
|
@media screen and (-webkit-min-device-pixel-ratio: 2),
|
|
screen and (min--moz-device-pixel-ratio: 2),
|
|
screen and (-moz-min-device-pixel-ratio: 2),
|
|
screen and (-o-min-device-pixel-ratio: 2/1),
|
|
screen and (min-device-pixel-ratio: 2),
|
|
screen and (min-resolution: 192dpi),
|
|
screen and (min-resolution: 2dppx) {
|
|
background: url($image + '@2x' + '.' + $extension) $repeat $position;
|
|
background-size: $width $height;
|
|
}
|
|
|
|
@media screen and (-webkit-min-device-pixel-ratio: 3),
|
|
screen and (min--moz-device-pixel-ratio: 3),
|
|
screen and (-moz-min-device-pixel-ratio: 3),
|
|
screen and (-o-min-device-pixel-ratio: 3/1),
|
|
screen and (min-device-pixel-ratio: 3),
|
|
screen and (min-resolution: 216dpi),
|
|
screen and (min-resolution: 3dppx) {
|
|
background: url($image + '@3x' + '.' + $extension) $repeat $position;
|
|
background-size: $width $height;
|
|
}
|
|
}
|