Merge pull request #440 from titanism/master

feat: fixed clickable article in status page (closes #615)

src/components/LiveStatus.svelte

@@ -98,26 +98,23 @@
     <Loading />
   {:else if sites.length}
     {#each sites as site}
-      <article class={`${site.status} link`}>
-        <h4>
+      <article
+        class={`${site.status} link graph`}
+        style="--background: url('{`${graphsBaseUrl}/${site.slug}/response-time${
+          selected === "day"
+            ? "-day"
+            : selected === "week"
+            ? "-week"
+            : selected === "month"
+            ? "-month"
+            : selected === "year"
+            ? "-year"
+            : ""
+        }.png`}')"
+        ><h4>
           <img class="icon" alt="" src={site.icon} />
           <a href={`${config.path}/history/${site.slug}`}>{site.name}</a>
         </h4>
-        <img
-          alt=""
-          class="graph"
-          src={`${graphsBaseUrl}/${site.slug}/response-time${
-            selected === "day"
-              ? "-day"
-              : selected === "week"
-              ? "-week"
-              : selected === "month"
-              ? "-month"
-              : selected === "year"
-              ? "-year"
-              : ""
-          }.png`}
-        />
         <div>
           {@html config.i18n.overallUptime.split("$UPTIME")[0]}
           <span class="data"
@@ -156,21 +153,11 @@
 </section>
 
 <style>
-  article {
-    position: relative;
-  }
-  article > * {
-    position: relative;
-    z-index: 2;
-  }
-  article .graph {
-    z-index: 1;
-    height: 1rem;
-    position: absolute;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    height: 100%;
+  article.graph {
+    background-image: var(--background);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center right;
   }
   .icon {
     height: 1rem;