From 6d7bed58508af5760da0c22d4201192dbc150ebb Mon Sep 17 00:00:00 2001 From: Julien Calixte Date: Sat, 24 Jan 2026 22:24:25 +0100 Subject: [PATCH] feat: adapt design for phone --- index.html | 6 +++++- src/App.vue | 7 +++++-- src/styles/app.scss | 9 +++++++++ src/views/Home.vue | 6 ++++-- vite.config.ts | 2 +- 5 files changed, 24 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 0726395..899df21 100644 --- a/index.html +++ b/index.html @@ -5,9 +5,13 @@ + + + + Binôme diff --git a/src/App.vue b/src/App.vue index f3604b9..8524f77 100644 --- a/src/App.vue +++ b/src/App.vue @@ -18,10 +18,13 @@ import SWNewVersion from '@/components/SWNewVersion.vue' flex-direction: column; justify-content: space-between; align-items: center; - min-height: 100vh; + height: 100vh; + height: 100dvh; + overflow: hidden; } img.logo { - margin-top: 1rem; + margin-top: 0.5rem; + flex-shrink: 0; } diff --git a/src/styles/app.scss b/src/styles/app.scss index a5f7199..c061e18 100644 --- a/src/styles/app.scss +++ b/src/styles/app.scss @@ -4,6 +4,15 @@ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond&family=Major+Mono+Display&display=swap'); +html, +body { + height: 100vh; + height: 100dvh; + overflow: hidden; + padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); + box-sizing: border-box; +} + body { text-align: center; font-family: vars.$font-family; diff --git a/src/views/Home.vue b/src/views/Home.vue index 70ae6c0..55855a0 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -105,7 +105,9 @@ onMounted(() => { display: flex; flex: 1; flex-direction: column; - justify-content: space-around; + justify-content: space-evenly; + overflow: hidden; + min-height: 0; } .developers { @@ -130,7 +132,7 @@ onMounted(() => { } .global-time { - font-size: calc(3em + 10vw); + font-size: clamp(2.5rem, 8vw + 1rem, 6rem); } .music { diff --git a/vite.config.ts b/vite.config.ts index 5dc6c34..c141682 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -27,7 +27,7 @@ export default defineConfig({ background_color: mainColor, start_url: '/', scope: '/', - display: 'standalone', + display: 'fullscreen', shortcuts: [ { name: 'Start a session',