diff --git a/static/img/missing-dark.png b/_src/imgs/missing-dark.png similarity index 100% rename from static/img/missing-dark.png rename to _src/imgs/missing-dark.png diff --git a/static/img/missing-dark@2x.png b/_src/imgs/missing-dark@2x.png similarity index 100% rename from static/img/missing-dark@2x.png rename to _src/imgs/missing-dark@2x.png diff --git a/static/img/missing-dark@3x.png b/_src/imgs/missing-dark@3x.png similarity index 100% rename from static/img/missing-dark@3x.png rename to _src/imgs/missing-dark@3x.png diff --git a/static/img/missing-dark@4x.png b/_src/imgs/missing-dark@4x.png similarity index 100% rename from static/img/missing-dark@4x.png rename to _src/imgs/missing-dark@4x.png diff --git a/static/img/missing.png b/_src/imgs/missing.png similarity index 100% rename from static/img/missing.png rename to _src/imgs/missing.png diff --git a/static/img/missing@2x.png b/_src/imgs/missing@2x.png similarity index 100% rename from static/img/missing@2x.png rename to _src/imgs/missing@2x.png diff --git a/static/img/missing@3x.png b/_src/imgs/missing@3x.png similarity index 100% rename from static/img/missing@3x.png rename to _src/imgs/missing@3x.png diff --git a/static/img/missing@4x.png b/_src/imgs/missing@4x.png similarity index 100% rename from static/img/missing@4x.png rename to _src/imgs/missing@4x.png diff --git a/_src/styles/_utils.scss b/_src/styles/_utils.scss new file mode 100644 index 0000000..13b24b4 --- /dev/null +++ b/_src/styles/_utils.scss @@ -0,0 +1,47 @@ +@use "sass:map"; +@use "sass:list"; +@mixin dark { + @if map.get(jekyll-config(), "issue") { + @content; + } @else { + @media (prefers-color-scheme: dark) { + @content; + } + } +} + +@mixin noissue { + @if map.get(jekyll-config(), "issue") { + } @else { + @content; + } +} + +@mixin imgurl($img, $style: "light", $scales: 4, $ext: "png") { + background-image: url("#{getimgName($img, $style, 1, $ext)}"); + $imgset: (); + @for $scale from 1 through $scales { + $imgset: list.append( + $imgset, + url("#{getimgName($img, $style, $scale, $ext)}") #{$scale}x, + comma + ); + } + @each $pfx in ("-webkit-", "") { + background-image: #{$pfx}image-set($imgset); + } +} + +@function getimgName($img, $style, $scale, $ext) { + @if $scale == 1 { + $scale: ""; + } @else { + $scale: "@#{$scale}x"; + } + @if $style == "light" { + $style: ""; + } @else { + $style: "-#{$style}"; + } + @return "#{$img}#{$style}#{$scale}.#{$ext}"; +} diff --git a/_src/styles/notfound.scss b/_src/styles/notfound.scss index 19f64fa..a668a09 100644 --- a/_src/styles/notfound.scss +++ b/_src/styles/notfound.scss @@ -26,37 +26,13 @@ @include utils.noissue { opacity: 0.5; filter: grayscale(0.2); - background-image: url(/static/img/missing.png); - background-image: -webkit-image-set( - url("/static/img/missing.png") 1x, - url("/static/img/missing@2x.png") 2x, - url("/static/img/missing@3x.png") 3x, - url("/static/img/missing@4x.png") 4x - ); - background-image: image-set( - url("/static/img/missing.png") 1x, - url("/static/img/missing@2x.png") 2x, - url("/static/img/missing@3x.png") 3x, - url("/static/img/missing@4x.png") 4x - ); + @include utils.imgurl("../imgs/missing", "light"); } @include utils.dark { opacity: 1; filter: none; - background-image: url(/static/img/missing-dark.png); - background-image: -webkit-image-set( - url("/static/img/missing-dark.png") 1x, - url("/static/img/missing-dark@2x.png") 2x, - url("/static/img/missing-dark@3x.png") 3x, - url("/static/img/missing-dark@4x.png") 4x - ); - background-image: image-set( - url("/static/img/missing-dark.png") 1x, - url("/static/img/missing-dark@2x.png") 2x, - url("/static/img/missing-dark@3x.png") 3x, - url("/static/img/missing-dark@4x.png") 4x - ); + @include utils.imgurl("../imgs/missing", "dark"); } } diff --git a/_src/styles/utils.scss b/_src/styles/utils.scss deleted file mode 100644 index ecf749d..0000000 --- a/_src/styles/utils.scss +++ /dev/null @@ -1,17 +0,0 @@ -@use "sass:map"; -@mixin dark { - @if map.get(jekyll-config(), "issue") { - @content; - } @else { - @media (prefers-color-scheme: dark) { - @content; - } - } -} - -@mixin noissue { - @if map.get(jekyll-config(), "issue") { - } @else { - @content; - } -} diff --git a/package.json b/package.json index 65fe458..8d3e7b3 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "private": true, "homepage": "https://github.com/tuna/mirror-web", "scripts": { - "format": "prettier --write \"_src/**\"" + "format": "prettier --write \"_src/**/*.vue\" \"_src/**/*.html\" \"_src/**/*.js\" \"_src/**/*.scss\"" }, "dependencies": { "@vitejs/plugin-legacy": "^5.3.2",