nybble
/
paco_sako
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

use view boxes instead of CSS :target to allow theme preview

This commit is contained in:
Jesse D. McDonald 2020-05-04 00:18:10 -05:00
parent 695aabd48c
commit 3f37803c34
4 changed files with 130 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
scripts/gen-theme-views.hs Normal file
View File

@ -0,0 +1,29 @@
import Text.Printf
edge = 28.223 :: Double
spacing = 32 :: Double
gap = spacing - edge
across = [("light", "left"), ("dark", "right"), ("dark", "left"), ("light", "right")]
down = ["king", "queen", "bishop", "knight", "rook", "pawn"]
useElement :: Double -> Double -> String -> String -> String -> String
useElement x y side kind place = printf format name x y edge edge x y name
where
format =
"<view id=\"%s\" width=\"80pt\" height=\"80pt\" viewBox=\"%.3f %.3f %.3f %.3f\"/>\n" ++
"<use transform=\"translate(%.3f %.3f)\" xlink:href=\"#sym_%s\"/>"
name = side ++ "_" ++ kind ++ "_" ++ place
main = do
putStr $ unlines $ concat $
flip map (zip [5*spacing,4*spacing..] down) $ \(y, kind) ->
flip map (zip [0,spacing..] across) $ \(x, (side, place)) ->
useElement x y side kind place
putStr "<path stroke-width=\"0.25\" stroke=\"#000\" d=\""
putStr $ flip concatMap [0..6] $ \row ->
printf "M%0.3f %0.3fH%0.3f" (0 - gap/2) (row*spacing-(gap/2)) (4*spacing - gap/2)
putStr $ flip concatMap [0..4] $ \col ->
printf "M%0.3f %0.3fV%0.3f" (col*spacing-(gap/2)) (0 - gap/2) (6*spacing - gap/2)
putStrLn "\"/>"
printf "viewBox=\"%.3f %0.3f %.3f %.3f\"\n"
(0-spacing) (0-gap) (6*spacing + 2*gap) (6*spacing + 2*gap)

79
svg/pacosako-theme.svg
View File

@ -1,9 +1,5 @@
<?xml version="1.0"?> <?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 28.222 28.222"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="6in" height="6in" viewBox="-32.000 -3.777 199.554 199.554">
<style>
.piece { display: none !important }
.piece:target { display: inline !important }
</style>
<defs> <defs>
<symbol id="sym_light_rook_left"> <symbol id="sym_light_rook_left">
<g transform="translate(-.851 -271.208)"> <g transform="translate(-.851 -271.208)">
@ -190,28 +186,53 @@
</g> </g>
</symbol> </symbol>
</defs> </defs>
<use id="dark_king_left" class="piece" xlink:href="#sym_dark_king_left"/> <view id="light_king_left" viewBox="0.000 160.000 28.223 28.223"/>
<use id="dark_queen_left" class="piece" xlink:href="#sym_dark_queen_left"/> <view id="dark_king_right" viewBox="32.000 160.000 28.223 28.223"/>
<use id="dark_bishop_left" class="piece" xlink:href="#sym_dark_bishop_left"/> <view id="dark_king_left" viewBox="64.000 160.000 28.223 28.223"/>
<use id="dark_knight_left" class="piece" xlink:href="#sym_dark_knight_left"/> <view id="light_king_right" viewBox="96.000 160.000 28.223 28.223"/>
<use id="dark_rook_left" class="piece" xlink:href="#sym_dark_rook_left"/> <view id="light_queen_left" viewBox="0.000 128.000 28.223 28.223"/>
<use id="dark_pawn_left" class="piece" xlink:href="#sym_dark_pawn_left"/> <view id="dark_queen_right" viewBox="32.000 128.000 28.223 28.223"/>
<use id="light_king_right" class="piece" xlink:href="#sym_light_king_right"/> <view id="dark_queen_left" viewBox="64.000 128.000 28.223 28.223"/>
<use id="light_queen_right" class="piece" xlink:href="#sym_light_queen_right"/> <view id="light_queen_right" viewBox="96.000 128.000 28.223 28.223"/>
<use id="light_bishop_right" class="piece" xlink:href="#sym_light_bishop_right"/> <view id="light_bishop_left" viewBox="0.000 96.000 28.223 28.223"/>
<use id="light_knight_right" class="piece" xlink:href="#sym_light_knight_right"/> <view id="dark_bishop_right" viewBox="32.000 96.000 28.223 28.223"/>
<use id="light_rook_right" class="piece" xlink:href="#sym_light_rook_right"/> <view id="dark_bishop_left" viewBox="64.000 96.000 28.223 28.223"/>
<use id="light_pawn_right" class="piece" xlink:href="#sym_light_pawn_right"/> <view id="light_bishop_right" viewBox="96.000 96.000 28.223 28.223"/>
<use id="dark_king_right" class="piece" xlink:href="#sym_dark_king_right"/> <view id="light_knight_left" viewBox="0.000 64.000 28.223 28.223"/>
<use id="dark_queen_right" class="piece" xlink:href="#sym_dark_queen_right"/> <view id="dark_knight_right" viewBox="32.000 64.000 28.223 28.223"/>
<use id="dark_bishop_right" class="piece" xlink:href="#sym_dark_bishop_right"/> <view id="dark_knight_left" viewBox="64.000 64.000 28.223 28.223"/>
<use id="dark_knight_right" class="piece" xlink:href="#sym_dark_knight_right"/> <view id="light_knight_right" viewBox="96.000 64.000 28.223 28.223"/>
<use id="dark_rook_right" class="piece" xlink:href="#sym_dark_rook_right"/> <view id="light_rook_left" viewBox="0.000 32.000 28.223 28.223"/>
<use id="dark_pawn_right" class="piece" xlink:href="#sym_dark_pawn_right"/> <view id="dark_rook_right" viewBox="32.000 32.000 28.223 28.223"/>
<use id="light_king_left" class="piece" xlink:href="#sym_light_king_left"/> <view id="dark_rook_left" viewBox="64.000 32.000 28.223 28.223"/>
<use id="light_queen_left" class="piece" xlink:href="#sym_light_queen_left"/> <view id="light_rook_right" viewBox="96.000 32.000 28.223 28.223"/>
<use id="light_bishop_left" class="piece" xlink:href="#sym_light_bishop_left"/> <view id="light_pawn_left" viewBox="0.000 0.000 28.223 28.223"/>
<use id="light_knight_left" class="piece" xlink:href="#sym_light_knight_left"/> <view id="dark_pawn_right" viewBox="32.000 0.000 28.223 28.223"/>
<use id="light_rook_left" class="piece" xlink:href="#sym_light_rook_left"/> <view id="dark_pawn_left" viewBox="64.000 0.000 28.223 28.223"/>
<use id="light_pawn_left" class="piece" xlink:href="#sym_light_pawn_left"/> <view id="light_pawn_right" viewBox="96.000 0.000 28.223 28.223"/>
<path stroke-width="0.25" stroke="#000" d="M-1.889 -1.889H126.112M-1.889 30.112H126.112M-1.889 62.112H126.112M-1.889 94.112H126.112M-1.889 126.112H126.112M-1.889 158.112H126.112M-1.889 190.112H126.112M-1.889 -1.889V190.112M30.112 -1.889V190.112M62.112 -1.889V190.112M94.112 -1.889V190.112M126.112 -1.889V190.112"/>
<use transform="translate(0.000 160.000)" xlink:href="#sym_light_king_left"/>
<use transform="translate(32.000 160.000)" xlink:href="#sym_dark_king_right"/>
<use transform="translate(64.000 160.000)" xlink:href="#sym_dark_king_left"/>
<use transform="translate(96.000 160.000)" xlink:href="#sym_light_king_right"/>
<use transform="translate(0.000 128.000)" xlink:href="#sym_light_queen_left"/>
<use transform="translate(32.000 128.000)" xlink:href="#sym_dark_queen_right"/>
<use transform="translate(64.000 128.000)" xlink:href="#sym_dark_queen_left"/>
<use transform="translate(96.000 128.000)" xlink:href="#sym_light_queen_right"/>
<use transform="translate(0.000 96.000)" xlink:href="#sym_light_bishop_left"/>
<use transform="translate(32.000 96.000)" xlink:href="#sym_dark_bishop_right"/>
<use transform="translate(64.000 96.000)" xlink:href="#sym_dark_bishop_left"/>
<use transform="translate(96.000 96.000)" xlink:href="#sym_light_bishop_right"/>
<use transform="translate(0.000 64.000)" xlink:href="#sym_light_knight_left"/>
<use transform="translate(32.000 64.000)" xlink:href="#sym_dark_knight_right"/>
<use transform="translate(64.000 64.000)" xlink:href="#sym_dark_knight_left"/>
<use transform="translate(96.000 64.000)" xlink:href="#sym_light_knight_right"/>
<use transform="translate(0.000 32.000)" xlink:href="#sym_light_rook_left"/>
<use transform="translate(32.000 32.000)" xlink:href="#sym_dark_rook_right"/>
<use transform="translate(64.000 32.000)" xlink:href="#sym_dark_rook_left"/>
<use transform="translate(96.000 32.000)" xlink:href="#sym_light_rook_right"/>
<use transform="translate(0.000 0.000)" xlink:href="#sym_light_pawn_left"/>
<use transform="translate(32.000 0.000)" xlink:href="#sym_dark_pawn_right"/>
<use transform="translate(64.000 0.000)" xlink:href="#sym_dark_pawn_left"/>
<use transform="translate(96.000 0.000)" xlink:href="#sym_light_pawn_right"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 26 KiB

79
svg/traditional-theme.svg
View File

@ -1,9 +1,5 @@
<?xml version="1.0"?> <?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 28.223 28.223"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="6in" height="6in" viewBox="-32.000 -3.777 199.554 199.554">
<style>
.piece { display: none !important }
.piece:target { display: inline !important }
</style>
<defs> <defs>
<symbol id="sym_dark_pawn_right" stroke-width="1.01"> <symbol id="sym_dark_pawn_right" stroke-width="1.01">
<path transform="matrix(1.37 0 0 1.3436 30.822 -39.214)" d="M-7.219 36.174a1.058 1.058 0 00-.852 1.688 1.708 1.708 0 00-.23 2.818c-.794.28-1.96 1.468-1.96 3.564h6.085c0-2.096-1.167-3.284-1.96-3.564a1.708 1.708 0 00-.23-2.818 1.058 1.058 0 00-.852-1.688z" stroke="#000" stroke-linecap="round" stroke-width=".401"/> <path transform="matrix(1.37 0 0 1.3436 30.822 -39.214)" d="M-7.219 36.174a1.058 1.058 0 00-.852 1.688 1.708 1.708 0 00-.23 2.818c-.794.28-1.96 1.468-1.96 3.564h6.085c0-2.096-1.167-3.284-1.96-3.564a1.708 1.708 0 00-.23-2.818 1.058 1.058 0 00-.852-1.688z" stroke="#000" stroke-linecap="round" stroke-width=".401"/>
@ -186,28 +182,53 @@
</g> </g>
</symbol> </symbol>
</defs> </defs>
<use id="dark_pawn_left" class="piece" xlink:href="#sym_dark_pawn_left"/> <view id="light_king_left" viewBox="0.000 160.000 28.223 28.223"/>
<use id="dark_rook_left" class="piece" xlink:href="#sym_dark_rook_left"/> <view id="dark_king_right" viewBox="32.000 160.000 28.223 28.223"/>
<use id="dark_knight_left" class="piece" xlink:href="#sym_dark_knight_left"/> <view id="dark_king_left" viewBox="64.000 160.000 28.223 28.223"/>
<use id="dark_bishop_left" class="piece" xlink:href="#sym_dark_bishop_left"/> <view id="light_king_right" viewBox="96.000 160.000 28.223 28.223"/>
<use id="dark_queen_left" class="piece" xlink:href="#sym_dark_queen_left"/> <view id="light_queen_left" viewBox="0.000 128.000 28.223 28.223"/>
<use id="dark_king_left" class="piece" xlink:href="#sym_dark_king_left"/> <view id="dark_queen_right" viewBox="32.000 128.000 28.223 28.223"/>
<use id="light_pawn_left" class="piece" xlink:href="#sym_light_pawn_left"/> <view id="dark_queen_left" viewBox="64.000 128.000 28.223 28.223"/>
<use id="light_rook_left" class="piece" xlink:href="#sym_light_rook_left"/> <view id="light_queen_right" viewBox="96.000 128.000 28.223 28.223"/>
<use id="light_knight_left" class="piece" xlink:href="#sym_light_knight_left"/> <view id="light_bishop_left" viewBox="0.000 96.000 28.223 28.223"/>
<use id="light_bishop_left" class="piece" xlink:href="#sym_light_bishop_left"/> <view id="dark_bishop_right" viewBox="32.000 96.000 28.223 28.223"/>
<use id="light_queen_left" class="piece" xlink:href="#sym_light_queen_left"/> <view id="dark_bishop_left" viewBox="64.000 96.000 28.223 28.223"/>
<use id="light_king_left" class="piece" xlink:href="#sym_light_king_left"/> <view id="light_bishop_right" viewBox="96.000 96.000 28.223 28.223"/>
<use id="dark_pawn_right" class="piece" xlink:href="#sym_dark_pawn_right"/> <view id="light_knight_left" viewBox="0.000 64.000 28.223 28.223"/>
<use id="dark_rook_right" class="piece" xlink:href="#sym_dark_rook_right"/> <view id="dark_knight_right" viewBox="32.000 64.000 28.223 28.223"/>
<use id="dark_knight_right" class="piece" xlink:href="#sym_dark_knight_right"/> <view id="dark_knight_left" viewBox="64.000 64.000 28.223 28.223"/>
<use id="dark_bishop_right" class="piece" xlink:href="#sym_dark_bishop_right"/> <view id="light_knight_right" viewBox="96.000 64.000 28.223 28.223"/>
<use id="dark_queen_right" class="piece" xlink:href="#sym_dark_queen_right"/> <view id="light_rook_left" viewBox="0.000 32.000 28.223 28.223"/>
<use id="dark_king_right" class="piece" xlink:href="#sym_dark_king_right"/> <view id="dark_rook_right" viewBox="32.000 32.000 28.223 28.223"/>
<use id="light_pawn_right" class="piece" xlink:href="#sym_light_pawn_right"/> <view id="dark_rook_left" viewBox="64.000 32.000 28.223 28.223"/>
<use id="light_rook_right" class="piece" xlink:href="#sym_light_rook_right"/> <view id="light_rook_right" viewBox="96.000 32.000 28.223 28.223"/>
<use id="light_knight_right" class="piece" xlink:href="#sym_light_knight_right"/> <view id="light_pawn_left" viewBox="0.000 0.000 28.223 28.223"/>
<use id="light_bishop_right" class="piece" xlink:href="#sym_light_bishop_right"/> <view id="dark_pawn_right" viewBox="32.000 0.000 28.223 28.223"/>
<use id="light_queen_right" class="piece" xlink:href="#sym_light_queen_right"/> <view id="dark_pawn_left" viewBox="64.000 0.000 28.223 28.223"/>
<use id="light_king_right" class="piece" xlink:href="#sym_light_king_right"/> <view id="light_pawn_right" viewBox="96.000 0.000 28.223 28.223"/>
<path stroke-width="0.25" stroke="#000" d="M-1.889 -1.889H126.112M-1.889 30.112H126.112M-1.889 62.112H126.112M-1.889 94.112H126.112M-1.889 126.112H126.112M-1.889 158.112H126.112M-1.889 190.112H126.112M-1.889 -1.889V190.112M30.112 -1.889V190.112M62.112 -1.889V190.112M94.112 -1.889V190.112M126.112 -1.889V190.112"/>
<use transform="translate(0.000 160.000)" xlink:href="#sym_light_king_left"/>
<use transform="translate(32.000 160.000)" xlink:href="#sym_dark_king_right"/>
<use transform="translate(64.000 160.000)" xlink:href="#sym_dark_king_left"/>
<use transform="translate(96.000 160.000)" xlink:href="#sym_light_king_right"/>
<use transform="translate(0.000 128.000)" xlink:href="#sym_light_queen_left"/>
<use transform="translate(32.000 128.000)" xlink:href="#sym_dark_queen_right"/>
<use transform="translate(64.000 128.000)" xlink:href="#sym_dark_queen_left"/>
<use transform="translate(96.000 128.000)" xlink:href="#sym_light_queen_right"/>
<use transform="translate(0.000 96.000)" xlink:href="#sym_light_bishop_left"/>
<use transform="translate(32.000 96.000)" xlink:href="#sym_dark_bishop_right"/>
<use transform="translate(64.000 96.000)" xlink:href="#sym_dark_bishop_left"/>
<use transform="translate(96.000 96.000)" xlink:href="#sym_light_bishop_right"/>
<use transform="translate(0.000 64.000)" xlink:href="#sym_light_knight_left"/>
<use transform="translate(32.000 64.000)" xlink:href="#sym_dark_knight_right"/>
<use transform="translate(64.000 64.000)" xlink:href="#sym_dark_knight_left"/>
<use transform="translate(96.000 64.000)" xlink:href="#sym_light_knight_right"/>
<use transform="translate(0.000 32.000)" xlink:href="#sym_light_rook_left"/>
<use transform="translate(32.000 32.000)" xlink:href="#sym_dark_rook_right"/>
<use transform="translate(64.000 32.000)" xlink:href="#sym_dark_rook_left"/>
<use transform="translate(96.000 32.000)" xlink:href="#sym_light_rook_right"/>
<use transform="translate(0.000 0.000)" xlink:href="#sym_light_pawn_left"/>
<use transform="translate(32.000 0.000)" xlink:href="#sym_dark_pawn_right"/>
<use transform="translate(64.000 0.000)" xlink:href="#sym_dark_pawn_left"/>
<use transform="translate(96.000 0.000)" xlink:href="#sym_light_pawn_right"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 25 KiB

9
webpack.config.js
View File

@ -52,14 +52,7 @@ module.exports = {
loader: "svgo-loader", loader: "svgo-loader",
options: { options: {
plugins: [ plugins: [
{ { cleanupIDs: false }
cleanupIDs: {
preserve_prefix: [
"light_",
"dark_"
]
}
}
] ]
} }
} }