füge eine einfache kuchenstand Webseite hinzu

Die kuchenstand Webseite betrachtet nur die konfigurierten
Streak-Ereignisse und stellt diese als prozentualen Kuchen dar.

TODO: Mache das Streak-Symbolbild konfigurierbar.

1 files changed, 40 insertions, 0 deletions

diff --git a/kuchenstand.css b/kuchenstand.css
new file mode 100644
index 0000000..02b7539
--- /dev/null
+++ b/kuchenstand.css
@@ -0,0 +1,40 @@
+#kuchen-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: auto;
+  max-width: 50%;
+}
+
+img.kuchen-hintergrund {
+  position: relative;
+  max-width: 100%;
+  opacity: 0.4;
+}
+
+img.kuchen-vordergrund {
+  position: relative;
+}
+
+#streak {
+  position: relative;
+}
+
+.klassen-navigation {
+  list-style-type: none;
+  margin: auto;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+ul.klassen-navigation li {
+  display: block;
+  padding: 14px 16px;
+  text-decoration: none;
+}
+
+ul li:hover {
+  background-color: #111111;
+}