From c1833902d77cb2c49e5e65e1e2c9a29ce648123c Mon Sep 17 00:00:00 2001
From: Mitan Omar <mitan@gmx.ch>
Date: Tue, 27 Feb 2024 21:11:27 +0100
Subject: [PATCH] center the clock in mobile

---
 components/liveLogo.vue | 27 +++++++++++++++++----------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/components/liveLogo.vue b/components/liveLogo.vue
index 536e0cd..cda706f 100644
--- a/components/liveLogo.vue
+++ b/components/liveLogo.vue
@@ -1,14 +1,16 @@
 <template>
-    <div class="clock-container" style="display: none;">
-        <svg class="timed-clock" viewBox="0 0 512 512" width="100%" height="100%">
-            <circle class="circle" r="240" cx="256" cy="256" stroke-width="20" />
-            <line class="hour" x1="256" y1="144" x2="256" y2="288" stroke-width="30" stroke-linecap="round"
-                :transform="`rotate(${data.hours} 256 256)`" />
-            <line class="minute" x1="256" y1="80" x2="256" y2="288" stroke-width="20" stroke-linecap="round"
-                :transform="`rotate(${data.minutes} 256 256)`" />
-            <line class="second" x1="256" y1="64" x2="256" y2="288" stroke-width="20" stroke-linecap="round"
-                :transform="`rotate(${data.seconds} 256 256)`" />
-        </svg>
+    <div class="component-renderer">
+        <div class="clock-container" style="display: none;">
+            <svg class="timed-clock" viewBox="0 0 512 512" width="100%" height="100%">
+                <circle class="circle" r="240" cx="256" cy="256" stroke-width="20" />
+                <line class="hour" x1="256" y1="144" x2="256" y2="288" stroke-width="30" stroke-linecap="round"
+                    :transform="`rotate(${data.hours} 256 256)`" />
+                <line class="minute" x1="256" y1="80" x2="256" y2="288" stroke-width="20" stroke-linecap="round"
+                    :transform="`rotate(${data.minutes} 256 256)`" />
+                <line class="second" x1="256" y1="64" x2="256" y2="288" stroke-width="20" stroke-linecap="round"
+                    :transform="`rotate(${data.seconds} 256 256)`" />
+            </svg>
+        </div>
     </div>
 </template>
 <script lang="ts" setup>
@@ -67,4 +69,9 @@ function updateClock() {
 .second {
     stroke: var(--clock-color-secondary);
 }
+
+.image-container {
+    text-align: -webkit-center;
+    margin-top: 15px;
+}
 </style>
\ No newline at end of file