From 5655b61a2cf72614a385b990a530a162f7a95247 Mon Sep 17 00:00:00 2001
From: Valexr <valexr@gmail.com>
Date: Wed, 24 Apr 2024 21:36:54 +0200
Subject: [PATCH] fix: styles

---
 src/App.svelte                  | 45 ++++++++++++++++++++++++++++++---
 src/css/base.css                |  6 +++++
 src/lib/components/Quote.svelte |  7 +++--
 3 files changed, 53 insertions(+), 5 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 432f00a..5869bc5 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -82,9 +82,48 @@
     {/await}
 
     <footer>
-        <button on:click={images.back}>{t("Image", "Картинка")}</button>
+        <button class="box" on:click={images.back}>
+            <!-- {t("Image", "Картинка")} -->
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                height="18"
+                width="18"
+                fill="currentColor"
+            >
+                <path
+                    class="fill"
+                    d="M16 2.5a.534.534 0 0 0-.563-.5H.563A.534.534 0 0 0 0 2.5v11a.534.534 0 0 0 .563.5H1V3h15Z"
+                />
+                <path
+                    class="fill"
+                    d="M17.5 4h-15a.5.5 0 0 0-.5.5v11a.5.5 0 0 0 .5.5h15a.5.5 0 0 0 .5-.5v-11a.5.5 0 0 0-.5-.5Zm-.5 9.687-2.636-2.637a1 1 0 0 0-1.414 0l-1.536 1.536-3.778-3.779a1 1 0 0 0-1.414 0L3 12.03V5h14Z"
+                />
+                <circle class="fill" cx="14.5" cy="7.5" r="1.25" />
+            </svg>
+        </button>
         <h2>{$time}</h2>
-        <button on:click={quote.random}>{t("Quote", "Цитата")}</button>
+        <button class="box" on:click={quote.random}>
+            <!-- {t("Quote", "Цитата")} -->
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                height="18"
+                width="18"
+                fill="currentColor"
+            >
+                <path
+                    class="fill"
+                    d="M17.5 9h-9a.5.5 0 0 0-.5.5v2a.5.5 0 0 0
+                .5.5h1a.5.5 0 0 0 .5-.5V11h2v5h-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0
+                .5.5h3a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5H14v-5h2v.5a.5.5 0 0
+                0 .5.5h1a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5Z"
+                />
+                <path
+                    class="fill"
+                    d="M15.5 1h-14a.5.5 0 0 0-.5.5v11a.5.5 0 0 0 .5.5H7V9a1 1 0 0 1 1-1h1.344L6.636 5.293a1 1 0 0 0-1.414 0L2 8.514V2h13v6h1V1.5a.5.5 0 0 0-.5-.5Z"
+                />
+                <circle class="fill" cx="12.35" cy="4.65" r="1.35" />
+            </svg>
+        </button>
     </footer>
 {/await}
 
@@ -105,7 +144,7 @@
         padding: 0 1em;
         flex: 1 0 100%;
         scroll-snap-align: center;
-        align-content: start;
+        align-content: center;
     }
     section#add {
         align-content: center;
diff --git a/src/css/base.css b/src/css/base.css
index 2599828..a6fe59e 100644
--- a/src/css/base.css
+++ b/src/css/base.css
@@ -67,6 +67,12 @@ button:hover:active {
     background-color: var(--active);
 }
 
+button.box {
+    aspect-ratio: 1/1;
+    align-items: center;
+    display: flex;
+}
+
 a {
     color: inherit;
 }
diff --git a/src/lib/components/Quote.svelte b/src/lib/components/Quote.svelte
index 3d9b5a9..33669ff 100644
--- a/src/lib/components/Quote.svelte
+++ b/src/lib/components/Quote.svelte
@@ -11,17 +11,20 @@
     {@const [text, author] = quote}
     <blockquote in:fade>
         <p>{text}</p>
-        <a {href} target="_blank">~ {author}</a>
+        <p>
+            <a {href} target="_blank">~ {author}</a>
+        </p>
     </blockquote>
 {/if}
 
 <style>
     blockquote {
         font-size: large;
-        margin: 0 1em;
+        margin: 0;
     }
     blockquote p {
         font-style: italic;
+        margin: 1em;
     }
     blockquote a {
         font-style: normal;