Use SVG logo

public/style.css

@@ -0,0 +1,178 @@
+ @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+
+:root {
+    --color: slategray;
+    --color-rgb: 112, 128, 144;
+}
+
+* {
+    box-sizing: border-box;
+    font-family: 'Roboto', sans-serif;
+}
+
+body {
+    font-family: sans-serif;
+    background: ghostwhite;
+    font-size: 1.5em;
+
+    display: flex;
+    height: 100vh;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+}
+
+.content {
+    display: flex;
+    width: 96ch;
+    max-width: 100%;
+    padding: 1em;
+    gap: 1em;
+}
+
+@media screen and (max-width: 1024px) {
+    .content {
+        flex-direction: column;
+    }
+}
+
+.cards {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1em;
+    width: 100%;
+}
+
+@media screen and (max-width: 640px) {
+    body {
+        display: block;
+    }
+
+    .cards {
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+.card {
+    padding: 1em;
+}
+
+.cards > *, .card {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    border: 1px solid lightgrey;
+    border-radius: 0.25em;
+    width: 100%;
+    background: white;
+    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.125));
+}
+
+.cards > * > :not(:last-child) {
+    flex: 1;
+}
+
+.cards > * > :last-child {
+    display: flex;
+    width: 100%;
+}
+
+.cards > * > :last-child > * {
+    width: 100%;
+    font-size: 0.875em;
+    padding: 0.5em;
+    text-align: center;
+    background: rgba(var(--color-rgb), 0.05);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.cards > * > :last-child > :not(:last-child) {
+    border-right: 1px solid lightgrey;
+}
+
+.cards > * > :not(:last-child) {
+    border-bottom: 1px solid lightgrey;
+    padding: 1em;
+}
+
+.cards > * > * > :first-child {
+    margin-top: 0;
+}
+
+.cards > * > * > :last-child {
+    display:
+    margin-bottom: 0;
+}
+
+.badge {
+    background: var(--color, slategrey);
+    color: white;
+    border-radius: 0.25em;
+    padding: 0.25em;
+    user-select: none;
+    font-size: 0.75em;
+    vertical-align: middle;
+    white-space: nowrap;
+}
+
+.red {
+    --color: #d94455;
+    --color-rgb: 217, 68, 85;
+}
+
+.blue {
+    --color: #4467d9;
+    --color-rgb: 68, 108, 217;
+}
+
+.yellow {
+    --color: #d9d244;
+    --color-rgb: 217, 210, 68;
+}
+
+header {
+    border-left: 0.25em solid #d94455;
+    padding-left: 0.5em;
+}
+
+header > * {
+    margin: 0;
+}
+
+header p {
+    color: smokegrey;
+}
+
+.btn {
+    background: slategrey;
+    color: white;
+    text-decoration: none;
+    padding: 0.5em;
+    border-radius: 0.25em;
+    font-weight: bold;
+}
+
+.btn:hover {
+    filter: brightness(1.1);
+}
+
+.btn:active {
+    filter: brightness(0.9);
+}
+
+a {
+    color: var(--color, slategray);
+    text-decoration: none;
+    border-bottom: 2px solid transparent;
+}
+
+a:hover {
+    border-bottom: 2px solid;
+}
+
+hr {
+    border: 1px solid var(--color);
+}