3 files changed, 94 insertions, 0 deletions
diff --git a/src/components/Card.css b/src/components/Card.css
new file mode 100644
index 0000000..cca784b
--- /dev/null
+++ b/src/components/Card.css
@@ -0,0 +1,43 @@
+.cardLink {
+    text-decoration: none;
+    color: black;
+}
+
+.Card {
+    text-decoration: none;
+    color: #000;
+    border: 2px solid #fbd38d;
+    border-radius: 12px;
+    padding: 0px 40px;
+    margin: 24px;
+}
+
+@media screen and (max-width: 600px) {
+    .Card {
+        padding: 0px 20px;
+        margin: 18px;
+    }    
+}
+
+.Latest {
+    font-size: 1.8em;
+}
+
+.Diff {
+    color: #666;
+}
+
+.Card:hover {
+    background-color: #ffc869;
+    color: #fff;
+}
+.Card:hover .Diff {
+    color: #fff;
+}
+
+.animate {
+    -moz-transition: color,background-color 0.3s;
+    -webkit-transition: color,background-color 0.3s;
+    -ms-transition: color,background-color 0.3s;
+    transition: color,background-color 0.3s;
+}
diff --git a/src/components/Card.jsx b/src/components/Card.jsx
new file mode 100644
index 0000000..95bd583
--- /dev/null
+++ b/src/components/Card.jsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import "./Card.css";
+
+const Card = (props) => {
+    let diff = props.diff.toString();
+    if (diff.charAt(0) != "-") {
+        diff = "+" + diff;
+    }
+
+    return (
+        <Link className="cardLink" to={props.link}>
+            <div className="Card animate">
+                <p>
+                    <span className="Latest">{props.latest}</span> <span className="Diff animate">({diff})</span>
+                </p>
+                <h3>
+                    {props.name}
+                </h3>
+            </div>
+        </Link>
+    );
+};
+
+export default Card;
diff --git a/src/components/GoatCounter.jsx b/src/components/GoatCounter.jsx
new file mode 100644
index 0000000..07a768a
--- /dev/null
+++ b/src/components/GoatCounter.jsx
@@ -0,0 +1,26 @@
+import React from "react";
+
+class GoatCounter extends React.Component {
+    componentDidMount() {
+        window.counter = "https://rcd.goatcounter.com/count";
+        const script = window.document.createElement("script");
+        script.async = 1;
+        script.src = "https://gc.zgo.at/count.js";
+        script.id = "goatcounter";
+        script.setAttribute("data-goatcounter", "https://rcd.goatcounter.com/count");
+        (window.document.head || window.document.body).appendChild(script);
+    }
+
+    componentWillUnmount() {
+        const script = window.document.getElementById("goatcounter");
+        if (script) {
+            script.parentNode.removeChild(script);
+        }
+    }
+
+    render() {
+        return null;
+    }
+}
+
+export default GoatCounter;