feat: adapt design for phone

2026-01-24 22:24:25 +01:00
parent d4a1af72f5
commit 6d7bed5850
5 changed files with 24 additions and 6 deletions
--- a/index.html
+++ b/index.html
@@ -5,9 +5,13 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
-      content="width=device-width,initial-scale=1.0,user-scalable=no"
+      content="width=device-width,initial-scale=1.0,user-scalable=no,viewport-fit=cover"
    />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="mobile-web-app-capable" content="yes" />
    <link rel="icon" href="/favicon.ico" />
+    <link rel="apple-touch-icon" href="/img/icons/apple-touch-icon.png" />
    <title>Binôme</title>
  </head>
  <body>
--- 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;
 }
 </style>
--- 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;
--- 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 {
--- 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',