diff --git a/src/App.css b/src/App.css index 1b6e583..6e98647 100644 --- a/src/App.css +++ b/src/App.css @@ -44,20 +44,21 @@ button:active { white-space: nowrap; } -.list { +.mobile .list { background-color: #484848; border-radius: 16px; padding: 16px 0px; + margin-top: 4rem; } -.list .item { +.mobile .list .item { display: flex; justify-content: space-between; padding: 0 16px; position: relative; } -.list .item + .item::before { +.mobile .list .item + .item::before { content: ""; position: absolute; top: -16px; @@ -67,6 +68,33 @@ button:active { background-color: rgb(128, 128, 128); } -.list .item + .item { +.mobile .list .item + .item { margin-top: 32px; } + +.desktop .list { + font-size: 16px; + border-radius: 16px; + margin-top: 4rem; +} + +.desktop .list .item { + display: flex; + justify-content: space-between; + padding: 0 16px; + position: relative; +} + +.desktop .list .item + .item::before { + content: ""; + position: absolute; + top: -8px; + left: 8px; + right: 8px; + height: 1px; + background-color: rgb(128, 128, 128); +} + +.desktop .list .item + .item { + margin-top: 16px; +} diff --git a/src/App.tsx b/src/App.tsx index dd68926..c401966 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,6 @@ import { useEffect, useRef, useState } from "react" import "./App.css" -import '@fontsource/lexend' +import "@fontsource/lexend" import { platform } from "@tauri-apps/plugin-os" function App() { @@ -10,7 +10,12 @@ function App() { useEffect(() => { if (initialized.current) return; - if (platform() == 'macos') document.body.classList.add('macos-body') + if (platform() == "macos") document.body.classList.add("macos-body"); + if (platform() == "ios" || platform() == "android") { + document.body.classList.add("mobile"); + } else { + document.body.classList.add("desktop"); + } refresh(); initialized.current = true; }, []) @@ -44,7 +49,7 @@ function App() { {players.map(([user, score], i) => (