From 7ab980d71574b981bec968d3c2bcadd046df0953 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Fri, 17 Mar 2023 12:32:09 +0100
Subject: [PATCH] better styling

---
 src/components/ResponsiveTimeUntil.vue | 18 ++++++++++++++++--
 src/style.css                          |  1 +
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/ResponsiveTimeUntil.vue b/src/components/ResponsiveTimeUntil.vue
index 072619f..4c0902f 100644
--- a/src/components/ResponsiveTimeUntil.vue
+++ b/src/components/ResponsiveTimeUntil.vue
@@ -104,7 +104,7 @@ const copyUrl = () => {
         <span class="moment">seconds</span>
       </div>
     </section>
-    <section v-else>No target</section>
+    <section v-else>No target set.</section>
     <section v-if="targetDate" class="target-date">{{ targetDate }}</section>
     <form @submit.prevent>
       <section>
@@ -129,22 +129,27 @@ div.responsive-time-until {
   display: flex;
   flex: 1;
   flex-direction: column;
-  justify-content: space-between;
+  justify-content: space-around;
+  align-items: center;
   height: 100vh;
   width: 100vw;
 }
+
 .time {
   display: flex;
   justify-content: center;
   gap: 1rem;
 }
+
 .count {
   display: flex;
   flex-direction: column;
 }
+
 .number {
   font-size: 36px;
 }
+
 .target-date {
   margin-bottom: 1rem;
 }
@@ -157,11 +162,20 @@ form {
 form section {
   display: flex;
   justify-content: space-between;
+  gap: 1rem;
   max-width: 500px;
   margin: auto;
   padding: 1rem;
 }
 
+label {
+  margin-right: 0.3rem;
+}
+
+input {
+  padding: 0.5rem;
+}
+
 @media (min-width: 600px) {
   form {
     display: block;
diff --git a/src/style.css b/src/style.css
index 28b92c0..994eba1 100644
--- a/src/style.css
+++ b/src/style.css
@@ -64,6 +64,7 @@ button:focus-visible {
 #app {
   margin: 0 auto;
   text-align: center;
+  display: flex;
 }
 
 @media (prefers-color-scheme: light) {