diff --git a/public/pieces/mark/bb.svg b/public/pieces/mark/bb.svg new file mode 100644 index 0000000..f01fcbb --- /dev/null +++ b/public/pieces/mark/bb.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/mark/bw.svg b/public/pieces/mark/bw.svg new file mode 100644 index 0000000..73392da --- /dev/null +++ b/public/pieces/mark/bw.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/mark/kb.svg b/public/pieces/mark/kb.svg new file mode 100644 index 0000000..f8acecf --- /dev/null +++ b/public/pieces/mark/kb.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/pieces/mark/kw.svg b/public/pieces/mark/kw.svg new file mode 100644 index 0000000..1f1d87e --- /dev/null +++ b/public/pieces/mark/kw.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/mark/nb.svg b/public/pieces/mark/nb.svg new file mode 100644 index 0000000..ec45fa4 --- /dev/null +++ b/public/pieces/mark/nb.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/mark/nw.svg b/public/pieces/mark/nw.svg new file mode 100644 index 0000000..8deb171 --- /dev/null +++ b/public/pieces/mark/nw.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/mark/pb.svg b/public/pieces/mark/pb.svg new file mode 100644 index 0000000..1863b64 --- /dev/null +++ b/public/pieces/mark/pb.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/pieces/mark/pw.svg b/public/pieces/mark/pw.svg new file mode 100644 index 0000000..dfe36e1 --- /dev/null +++ b/public/pieces/mark/pw.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/mark/qb.svg b/public/pieces/mark/qb.svg new file mode 100644 index 0000000..068b914 --- /dev/null +++ b/public/pieces/mark/qb.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/pieces/mark/qw.svg b/public/pieces/mark/qw.svg new file mode 100644 index 0000000..e9cfa53 --- /dev/null +++ b/public/pieces/mark/qw.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/mark/rb.svg b/public/pieces/mark/rb.svg new file mode 100644 index 0000000..2b01b3b --- /dev/null +++ b/public/pieces/mark/rb.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/pieces/mark/rw.svg b/public/pieces/mark/rw.svg new file mode 100644 index 0000000..647d2a8 --- /dev/null +++ b/public/pieces/mark/rw.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/motif/bb.svg b/public/pieces/motif/bb.svg new file mode 100644 index 0000000..2f9b4b6 --- /dev/null +++ b/public/pieces/motif/bb.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/pieces/motif/bw.svg b/public/pieces/motif/bw.svg new file mode 100644 index 0000000..bff7069 --- /dev/null +++ b/public/pieces/motif/bw.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/motif/kb.svg b/public/pieces/motif/kb.svg new file mode 100644 index 0000000..1907362 --- /dev/null +++ b/public/pieces/motif/kb.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/motif/kw.svg b/public/pieces/motif/kw.svg new file mode 100644 index 0000000..d77222d --- /dev/null +++ b/public/pieces/motif/kw.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/motif/nb.svg b/public/pieces/motif/nb.svg new file mode 100644 index 0000000..cd221ca --- /dev/null +++ b/public/pieces/motif/nb.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/motif/nw.svg b/public/pieces/motif/nw.svg new file mode 100644 index 0000000..a4a53d7 --- /dev/null +++ b/public/pieces/motif/nw.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/motif/pb.svg b/public/pieces/motif/pb.svg new file mode 100644 index 0000000..ff11c15 --- /dev/null +++ b/public/pieces/motif/pb.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/pieces/motif/pw.svg b/public/pieces/motif/pw.svg new file mode 100644 index 0000000..c550583 --- /dev/null +++ b/public/pieces/motif/pw.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/motif/qb.svg b/public/pieces/motif/qb.svg new file mode 100644 index 0000000..236f9ff --- /dev/null +++ b/public/pieces/motif/qb.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/motif/qw.svg b/public/pieces/motif/qw.svg new file mode 100644 index 0000000..aea1b6b --- /dev/null +++ b/public/pieces/motif/qw.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/motif/rb.svg b/public/pieces/motif/rb.svg new file mode 100644 index 0000000..82f4406 --- /dev/null +++ b/public/pieces/motif/rb.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/motif/rw.svg b/public/pieces/motif/rw.svg new file mode 100644 index 0000000..7c70496 --- /dev/null +++ b/public/pieces/motif/rw.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/pirat/bb.svg b/public/pieces/pirat/bb.svg new file mode 100644 index 0000000..ca5ede6 --- /dev/null +++ b/public/pieces/pirat/bb.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/pieces/pirat/bw.svg b/public/pieces/pirat/bw.svg new file mode 100644 index 0000000..098b414 --- /dev/null +++ b/public/pieces/pirat/bw.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/pirat/kb.svg b/public/pieces/pirat/kb.svg new file mode 100644 index 0000000..bba038a --- /dev/null +++ b/public/pieces/pirat/kb.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/pirat/kw.svg b/public/pieces/pirat/kw.svg new file mode 100644 index 0000000..bb8e81a --- /dev/null +++ b/public/pieces/pirat/kw.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/pirat/nb.svg b/public/pieces/pirat/nb.svg new file mode 100644 index 0000000..63ab34f --- /dev/null +++ b/public/pieces/pirat/nb.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/pirat/nw.svg b/public/pieces/pirat/nw.svg new file mode 100644 index 0000000..928c5c8 --- /dev/null +++ b/public/pieces/pirat/nw.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/pirat/pb.svg b/public/pieces/pirat/pb.svg new file mode 100644 index 0000000..ca023fb --- /dev/null +++ b/public/pieces/pirat/pb.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/pirat/pw.svg b/public/pieces/pirat/pw.svg new file mode 100644 index 0000000..5ef2262 --- /dev/null +++ b/public/pieces/pirat/pw.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/pirat/qb.svg b/public/pieces/pirat/qb.svg new file mode 100644 index 0000000..900e6e1 --- /dev/null +++ b/public/pieces/pirat/qb.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/pirat/qw.svg b/public/pieces/pirat/qw.svg new file mode 100644 index 0000000..7669d44 --- /dev/null +++ b/public/pieces/pirat/qw.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/pirat/rb.svg b/public/pieces/pirat/rb.svg new file mode 100644 index 0000000..ed49326 --- /dev/null +++ b/public/pieces/pirat/rb.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/pieces/pirat/rw.svg b/public/pieces/pirat/rw.svg new file mode 100644 index 0000000..c00013d --- /dev/null +++ b/public/pieces/pirat/rw.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/simple/bb.svg b/public/pieces/regular/bb.svg similarity index 100% rename from public/pieces/simple/bb.svg rename to public/pieces/regular/bb.svg diff --git a/public/pieces/simple/bw.svg b/public/pieces/regular/bw.svg similarity index 100% rename from public/pieces/simple/bw.svg rename to public/pieces/regular/bw.svg diff --git a/public/pieces/simple/kb.svg b/public/pieces/regular/kb.svg similarity index 100% rename from public/pieces/simple/kb.svg rename to public/pieces/regular/kb.svg diff --git a/public/pieces/simple/kw.svg b/public/pieces/regular/kw.svg similarity index 100% rename from public/pieces/simple/kw.svg rename to public/pieces/regular/kw.svg diff --git a/public/pieces/simple/nb.svg b/public/pieces/regular/nb.svg similarity index 100% rename from public/pieces/simple/nb.svg rename to public/pieces/regular/nb.svg diff --git a/public/pieces/simple/nw.svg b/public/pieces/regular/nw.svg similarity index 100% rename from public/pieces/simple/nw.svg rename to public/pieces/regular/nw.svg diff --git a/public/pieces/simple/pb.svg b/public/pieces/regular/pb.svg similarity index 100% rename from public/pieces/simple/pb.svg rename to public/pieces/regular/pb.svg diff --git a/public/pieces/simple/pw.svg b/public/pieces/regular/pw.svg similarity index 100% rename from public/pieces/simple/pw.svg rename to public/pieces/regular/pw.svg diff --git a/public/pieces/simple/qb.svg b/public/pieces/regular/qb.svg similarity index 100% rename from public/pieces/simple/qb.svg rename to public/pieces/regular/qb.svg diff --git a/public/pieces/simple/qw.svg b/public/pieces/regular/qw.svg similarity index 100% rename from public/pieces/simple/qw.svg rename to public/pieces/regular/qw.svg diff --git a/public/pieces/simple/rb.svg b/public/pieces/regular/rb.svg similarity index 100% rename from public/pieces/simple/rb.svg rename to public/pieces/regular/rb.svg diff --git a/public/pieces/simple/rw.svg b/public/pieces/regular/rw.svg similarity index 100% rename from public/pieces/simple/rw.svg rename to public/pieces/regular/rw.svg diff --git a/public/pieces/smart/bb.svg b/public/pieces/smart/bb.svg new file mode 100644 index 0000000..185b643 --- /dev/null +++ b/public/pieces/smart/bb.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/smart/bw.svg b/public/pieces/smart/bw.svg new file mode 100644 index 0000000..504c6b7 --- /dev/null +++ b/public/pieces/smart/bw.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/smart/kb.svg b/public/pieces/smart/kb.svg new file mode 100644 index 0000000..f19cd17 --- /dev/null +++ b/public/pieces/smart/kb.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/smart/kw.svg b/public/pieces/smart/kw.svg new file mode 100644 index 0000000..bcaa12f --- /dev/null +++ b/public/pieces/smart/kw.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/smart/nb.svg b/public/pieces/smart/nb.svg new file mode 100644 index 0000000..e99fab4 --- /dev/null +++ b/public/pieces/smart/nb.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/smart/nw.svg b/public/pieces/smart/nw.svg new file mode 100644 index 0000000..5c2eb03 --- /dev/null +++ b/public/pieces/smart/nw.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/smart/pb.svg b/public/pieces/smart/pb.svg new file mode 100644 index 0000000..f88c3d8 --- /dev/null +++ b/public/pieces/smart/pb.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/pieces/smart/pw.svg b/public/pieces/smart/pw.svg new file mode 100644 index 0000000..054935f --- /dev/null +++ b/public/pieces/smart/pw.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/smart/qb.svg b/public/pieces/smart/qb.svg new file mode 100644 index 0000000..264acf2 --- /dev/null +++ b/public/pieces/smart/qb.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/smart/qw.svg b/public/pieces/smart/qw.svg new file mode 100644 index 0000000..6a3fa96 --- /dev/null +++ b/public/pieces/smart/qw.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/smart/rb.svg b/public/pieces/smart/rb.svg new file mode 100644 index 0000000..b19dd03 --- /dev/null +++ b/public/pieces/smart/rb.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/smart/rw.svg b/public/pieces/smart/rw.svg new file mode 100644 index 0000000..17b8f64 --- /dev/null +++ b/public/pieces/smart/rw.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/board/styles-pieces/index.ts b/src/board/styles-pieces/index.ts index 9a6a599..7331ff2 100755 --- a/src/board/styles-pieces/index.ts +++ b/src/board/styles-pieces/index.ts @@ -9,9 +9,13 @@ import governor from "./governor"; import horsey from "./horsey"; import maestro from "./maestro"; import magnetic from "./magnetic"; +import mark from "./mark"; import maya from "./maya"; import merida from "./merida"; -import simple from "./simple"; +import motif from "./motif"; +import pirat from "./pirat"; +import regular from "./regular"; +import smart from "./smart"; import staunty from "./staunty"; import tatiana from "./tatiana"; @@ -27,9 +31,13 @@ const piecesSets = { horsey, maestro, magnetic, + mark, maya, merida, - simple, + motif, + pirat, + regular, + smart, staunty, tatiana, }; diff --git a/src/board/styles-pieces/mark.ts b/src/board/styles-pieces/mark.ts new file mode 100755 index 0000000..8ba5e12 --- /dev/null +++ b/src/board/styles-pieces/mark.ts @@ -0,0 +1,16 @@ +const mark = { + kw: "/pieces/mark/kw.svg", + qw: "/pieces/mark/qw.svg", + rw: "/pieces/mark/rw.svg", + bw: "/pieces/mark/bw.svg", + nw: "/pieces/mark/nw.svg", + pw: "/pieces/mark/pw.svg", + kb: "/pieces/mark/kb.svg", + qb: "/pieces/mark/qb.svg", + rb: "/pieces/mark/rb.svg", + bb: "/pieces/mark/bb.svg", + nb: "/pieces/mark/nb.svg", + pb: "/pieces/mark/pb.svg", +}; + +export default mark; diff --git a/src/board/styles-pieces/motif.ts b/src/board/styles-pieces/motif.ts new file mode 100755 index 0000000..4707dc2 --- /dev/null +++ b/src/board/styles-pieces/motif.ts @@ -0,0 +1,16 @@ +const motif = { + kw: "/pieces/motif/kw.svg", + qw: "/pieces/motif/qw.svg", + rw: "/pieces/motif/rw.svg", + bw: "/pieces/motif/bw.svg", + nw: "/pieces/motif/nw.svg", + pw: "/pieces/motif/pw.svg", + kb: "/pieces/motif/kb.svg", + qb: "/pieces/motif/qb.svg", + rb: "/pieces/motif/rb.svg", + bb: "/pieces/motif/bb.svg", + nb: "/pieces/motif/nb.svg", + pb: "/pieces/motif/pb.svg", +}; + +export default motif; diff --git a/src/board/styles-pieces/pirat.ts b/src/board/styles-pieces/pirat.ts new file mode 100755 index 0000000..6f4badc --- /dev/null +++ b/src/board/styles-pieces/pirat.ts @@ -0,0 +1,16 @@ +const pirat = { + kw: "/pieces/pirat/kw.svg", + qw: "/pieces/pirat/qw.svg", + rw: "/pieces/pirat/rw.svg", + bw: "/pieces/pirat/bw.svg", + nw: "/pieces/pirat/nw.svg", + pw: "/pieces/pirat/pw.svg", + kb: "/pieces/pirat/kb.svg", + qb: "/pieces/pirat/qb.svg", + rb: "/pieces/pirat/rb.svg", + bb: "/pieces/pirat/bb.svg", + nb: "/pieces/pirat/nb.svg", + pb: "/pieces/pirat/pb.svg", +}; + +export default pirat; diff --git a/src/board/styles-pieces/regular.ts b/src/board/styles-pieces/regular.ts new file mode 100755 index 0000000..ce82bb5 --- /dev/null +++ b/src/board/styles-pieces/regular.ts @@ -0,0 +1,16 @@ +const regular = { + kw: "/pieces/regular/kw.svg", + qw: "/pieces/regular/qw.svg", + rw: "/pieces/regular/rw.svg", + bw: "/pieces/regular/bw.svg", + nw: "/pieces/regular/nw.svg", + pw: "/pieces/regular/pw.svg", + kb: "/pieces/regular/kb.svg", + qb: "/pieces/regular/qb.svg", + rb: "/pieces/regular/rb.svg", + bb: "/pieces/regular/bb.svg", + nb: "/pieces/regular/nb.svg", + pb: "/pieces/regular/pb.svg", +}; + +export default regular; diff --git a/src/board/styles-pieces/simple.ts b/src/board/styles-pieces/simple.ts deleted file mode 100755 index 1ab5d42..0000000 --- a/src/board/styles-pieces/simple.ts +++ /dev/null @@ -1,16 +0,0 @@ -const simple = { - kw: "/pieces/simple/kw.svg", - qw: "/pieces/simple/qw.svg", - rw: "/pieces/simple/rw.svg", - bw: "/pieces/simple/bw.svg", - nw: "/pieces/simple/nw.svg", - pw: "/pieces/simple/pw.svg", - kb: "/pieces/simple/kb.svg", - qb: "/pieces/simple/qb.svg", - rb: "/pieces/simple/rb.svg", - bb: "/pieces/simple/bb.svg", - nb: "/pieces/simple/nb.svg", - pb: "/pieces/simple/pb.svg", -}; - -export default simple; diff --git a/src/board/styles-pieces/smart.ts b/src/board/styles-pieces/smart.ts new file mode 100755 index 0000000..2d76880 --- /dev/null +++ b/src/board/styles-pieces/smart.ts @@ -0,0 +1,16 @@ +const smart = { + kw: "/pieces/smart/kw.svg", + qw: "/pieces/smart/qw.svg", + rw: "/pieces/smart/rw.svg", + bw: "/pieces/smart/bw.svg", + nw: "/pieces/smart/nw.svg", + pw: "/pieces/smart/pw.svg", + kb: "/pieces/smart/kb.svg", + qb: "/pieces/smart/qb.svg", + rb: "/pieces/smart/rb.svg", + bb: "/pieces/smart/bb.svg", + nb: "/pieces/smart/nb.svg", + pb: "/pieces/smart/pb.svg", +}; + +export default smart; diff --git a/src/main.tsx b/src/main.tsx index 15b80c0..69a2d42 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -221,6 +221,17 @@ const main = async () => { el.preventDefault(); }); + window.addEventListener("resize", () => { + setState( + "layout", + window.innerWidth < window.innerHeight + ? "single" + : window.innerWidth < 1366 + ? "double" + : "triple" + ); + }); + if (!state.mobile) { const keyMapping: { [key: string]: () => void } = { ArrowLeft: handlers.prev, diff --git a/src/state.ts b/src/state.ts index 400a113..82cca84 100644 --- a/src/state.ts +++ b/src/state.ts @@ -58,12 +58,19 @@ const initialState: State = { moves: [], ply: 0, mobile, - layout: mobile ? "single" : "triple", + layout: + window.innerWidth < window.innerHeight + ? "single" + : window.innerWidth < 1366 + ? "double" + : "triple", activeTab: "load", playing: false, anonymous: false, }; +console.log(initialState); + const [state, setState] = createStore(initialState); export { state, setState }; diff --git a/src/ui/App.css b/src/ui/App.css index ab05138..585b713 100644 --- a/src/ui/App.css +++ b/src/ui/App.css @@ -51,6 +51,7 @@ body { .light { background-color: #959ea1; background-image: url(/img/pattern-light.png); + background-size: 12rem; color: rgb(29, 31, 32); --logo-url: url(/img/logo-dark.svg); @@ -158,7 +159,7 @@ a:hover { .double { display: grid; grid-template-columns: 1fr 1fr; - column-gap: 10px; + column-gap: 1rem; } .layout { @@ -168,12 +169,37 @@ a:hover { grid-template-areas: "setup board moves" - "setup board controls"; + "setup board moves"; height: 100vh; } -@media screen and (max-width: 1024px) { +@media (orientation: landscape) and (max-width: 1536px) { + html { + font-size: 9px; + } +} + +@media (orientation: landscape) and (max-width: 1366px) { + html { + font-size: 8px; + } +} + +@media (orientation: landscape) and (max-width: 1365px) { + .layout { + grid-template-columns: 2fr 1fr; + grid-template-areas: + "board moves" + "board moves"; + } +} + +@media (orientation: portrait) { + html { + font-size: 10px; + } + .layout { grid-template-columns: 1fr; grid-template-areas: @@ -188,6 +214,7 @@ a:hover { .board-box { height: auto; + max-height: 100vh; padding: var(--header-height) 0 1rem 0; font-size: 0; } diff --git a/src/ui/components/Boards.css b/src/ui/components/Boards.css index 95d4912..492c5dd 100644 --- a/src/ui/components/Boards.css +++ b/src/ui/components/Boards.css @@ -5,10 +5,10 @@ } .boards__ico { - border: solid 5px black; - margin: 5px; + border: solid 0.5rem black; + margin: 0.5rem; cursor: pointer; - width: 72px; + width: 7.2rem; } .boards__ico--active { diff --git a/src/ui/components/Controls.css b/src/ui/components/Controls.css index d00e430..94f2f03 100644 --- a/src/ui/components/Controls.css +++ b/src/ui/components/Controls.css @@ -1,23 +1,23 @@ .controls-box { grid-area: controls; - padding: 0 20px 20px 20px; + padding: 0 2rem 2rem 2rem; } .controls { background: var(--color-bg-block); - padding: 20px; + padding: 2rem; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .controls__button { margin: 0 3px; - padding: 5px; + padding: 0.5rem; font-size: 3rem; text-align: center; border-radius: 5px; - width: 44px; - height: 44px; + width: 4.4rem; + height: 4.4rem; } .controls__button:hover { diff --git a/src/ui/components/GameTabs.css b/src/ui/components/GameTabs.css index a712390..e8a743a 100644 --- a/src/ui/components/GameTabs.css +++ b/src/ui/components/GameTabs.css @@ -1,12 +1,12 @@ .game-box { grid-area: moves; - padding: 20px; + padding: 2rem; padding-top: var(--header-margin); - min-width: 375px; + min-width: 37.5rem; height: 100vh; } -@media screen and (max-width: 1024px) { +@media (orientation: portrait) { .game-box { padding: 0; height: 800px; @@ -16,7 +16,7 @@ .game { height: 100%; display: grid; - grid-template-rows: 38px 195px 1fr 84px; + grid-template-rows: 3.8rem 19.5rem 1fr 8.4rem; } .game-tabs { diff --git a/src/ui/components/Header.css b/src/ui/components/Header.css index 7da4c43..f07edb2 100644 --- a/src/ui/components/Header.css +++ b/src/ui/components/Header.css @@ -10,7 +10,7 @@ } .header__logo { - padding: 10px 20px; + padding: 1rem 2rem; text-align: left; color: var(--color-text-dimmed); } @@ -24,7 +24,7 @@ } .header__options { - padding: 0px 20px; + padding: 0 2rem; text-align: right; } diff --git a/src/ui/components/Info.css b/src/ui/components/Info.css index b8ea50e..c707faf 100644 --- a/src/ui/components/Info.css +++ b/src/ui/components/Info.css @@ -1,11 +1,11 @@ .info-box { grid-area: controls; - padding: 0 20px 20px 20px; + padding: 0 2rem 2rem 2rem; } .info { background: var(--color-bg-block); - padding: 30px 20px; + padding: 3rem 2rem; font-size: 1.4rem; text-align: left; } diff --git a/src/ui/components/Load.css b/src/ui/components/Load.css index 8942276..bee0e0b 100644 --- a/src/ui/components/Load.css +++ b/src/ui/components/Load.css @@ -1,13 +1,13 @@ .load { background: var(--color-bg-block); - padding: 20px; + padding: 2rem; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .load__pgn-input { height: 30vh; - margin-top: 20px; + margin-top: 2rem; } .load__pgn-input::-webkit-scrollbar { @@ -30,7 +30,7 @@ } .load__pgn-file { - margin-top: 20px; + margin-top: 2rem; } .load__pgn-file-info { @@ -38,10 +38,10 @@ } .load__pgn-file-info p { - margin-top: 10px; + margin-top: 1rem; color: var(--color-text-dimmed); } .load__link-input { - margin-top: 20px; + margin-top: 2rem; } diff --git a/src/ui/components/Moves.css b/src/ui/components/Moves.css index 1cfaf93..d896a40 100644 --- a/src/ui/components/Moves.css +++ b/src/ui/components/Moves.css @@ -15,15 +15,15 @@ .move__id { display: inline-block; - width: 40px; + width: 4rem; text-align: right; - margin-right: 20px; + margin-right: 2rem; color: var(--color-text); } .move__ply { display: inline-block; - width: 70px; + width: 7rem; color: var(--color-btn); } @@ -37,7 +37,7 @@ cursor: pointer; } -@media screen and (max-width: 1024px) { +@media (orientation: portrait) { .moves { text-align: left; } diff --git a/src/ui/components/Pieces.css b/src/ui/components/Pieces.css index ba14671..a166999 100644 --- a/src/ui/components/Pieces.css +++ b/src/ui/components/Pieces.css @@ -8,7 +8,7 @@ border: solid 5px black; margin: 5px; cursor: pointer; - width: 82px; + width: 8.2rem; background-color: var(--color-highlight); } diff --git a/src/ui/components/SetupTabs.css b/src/ui/components/SetupTabs.css index dff6adc..304a696 100644 --- a/src/ui/components/SetupTabs.css +++ b/src/ui/components/SetupTabs.css @@ -1,16 +1,16 @@ .setup-box { height: 100vh; grid-area: setup; - padding: 20px; + padding: 2rem; padding-top: var(--header-margin); - min-width: 375px; + min-width: 37.5rem; } .setup { font-size: 1.6rem; height: 100%; display: grid; - grid-template-rows: 38px 1fr; + grid-template-rows: 3.8rem 1fr; } .setup-tabs { diff --git a/src/ui/components/Share.css b/src/ui/components/Share.css index 55ed70b..a0e48e2 100644 --- a/src/ui/components/Share.css +++ b/src/ui/components/Share.css @@ -5,9 +5,9 @@ .share__format, .share__size { - padding: 10px; + padding: 1rem; border-radius: 0; - margin-bottom: 10px; + margin-bottom: 1rem; opacity: 0.5; } @@ -42,22 +42,22 @@ } .share__btn { - margin-bottom: 10px; + margin-bottom: 1rem; } .header--first { margin-top: 0; - margin-bottom: 25px; + margin-bottom: 2.5rem; } .options__button { margin: 3px; - padding: 5px; + padding: 0.5rem; font-size: 3rem; text-align: center; border-radius: 5px; - width: 44px; - height: 44px; + width: 4.4rem; + height: 4.4rem; opacity: 0.5; } diff --git a/src/ui/components/reusable/Scrollable.css b/src/ui/components/reusable/Scrollable.css index ab5b795..7be68d0 100644 --- a/src/ui/components/reusable/Scrollable.css +++ b/src/ui/components/reusable/Scrollable.css @@ -1,7 +1,7 @@ .scrollable { background: var(--color-bg-block); height: auto; - padding: 20px 10px 20px 20px; + padding: 2rem 1rem 2rem 2rem; height: 100%; display: flex; overflow: auto; @@ -11,7 +11,7 @@ overflow-y: auto; overflow-x: hidden; padding: 0; - padding-right: 10px; + padding-right: 1rem; width: 100%; } diff --git a/src/ui/components/reusable/Tab.css b/src/ui/components/reusable/Tab.css index 310aed6..ba2acf6 100644 --- a/src/ui/components/reusable/Tab.css +++ b/src/ui/components/reusable/Tab.css @@ -1,7 +1,7 @@ .tab { border-bottom-left-radius: 0; border-bottom-right-radius: 0; - height: 38px; + height: 3.8rem; background: var(--color-tab); min-width: 4rem; }