Add referral link

rosslh · Aug 3, 2022 · 15aba74 · 15aba74
1 parent 5161600
commit 15aba74
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 6 deletions.
diff --git a/client/css/styles.css b/client/css/styles.css
@@ -10,6 +10,7 @@ body {
     position: relative;
     height: 100%;
     width: 100%;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
 }
 
 html {
@@ -52,11 +53,29 @@ div#inputsWrapper .inputSeparator {
   opacity: 0.3;
 }
 
+div#ref {
+  bottom: 0;
+  left: 0;
+  font-size: 12px;
+  display: inline-block;
+  border-top-right-radius: 2px;
+}
+
+div#ref a {
+  color: #3bd671;
+  font-weight: bold;
+  text-decoration: none;
+}
+
+div#ref a:hover {
+  text-decoration: underline;
+}
+
 div#attribution {
     bottom: 0;
     right: 0;
     font-size: 12px;
-    display: flex;
+    display: inline-block;
     border-top-left-radius: 2px;
 }
 
@@ -89,3 +108,9 @@ button {
     cursor: pointer;
     opacity: 0.9;
 }
+
+@media (max-width: 700px) {
+    div#ref {
+        display: none;
+    }
+}
diff --git a/client/index.html b/client/index.html
@@ -70,12 +70,20 @@
       Save Image
     </button>
   </div>
+  <div id="ref" class="overlay">
+    <a
+      href="https://uptimerobot.com/website-monitoring/?rid=48af749155d00d"
+      target="_blank"
+      rel="noopener"
+    >
+      UptimeRobot
+    </a>
+    helps keep this site online
+  </div>
   <div id="attribution" class="overlay">
-    <span>
-      By <a href="https://rosshill.ca" target="_blank" rel="noopener noreferrer">Ross Hill</a>
-      and <a href="https://github.com/rosslh/rust-mandelbrot-set/graphs/contributors" target="_blank" rel="noopener noreferrer">contributors</a>.
-      <a href="https://github.com/rosslh/rust-mandelbrot-set" target="_blank" rel="noopener noreferrer">Source code on GitHub</a>.
-    </span>
+    By <a href="https://rosshill.ca" target="_blank" rel="noopener noreferrer">Ross Hill</a>
+    and <a href="https://github.com/rosslh/rust-mandelbrot-set/graphs/contributors" target="_blank" rel="noopener noreferrer">contributors</a>.
+    <a href="https://github.com/rosslh/rust-mandelbrot-set" target="_blank" rel="noopener noreferrer">Source code on GitHub</a>.
   </div>
   <div id="leaflet-map"></div>
 </body>