From f1ce49e5aece7c93392c5afadba0eed1bb59f5e4 Mon Sep 17 00:00:00 2001 From: Aki Date: Sat, 6 May 2023 15:18:31 +0200 Subject: Created raw activity chart in only HTML and CSS --- activity.html | 14 ++++++++++++++ style.css | 58 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 72 insertions(+) create mode 100644 activity.html create mode 100644 style.css diff --git a/activity.html b/activity.html new file mode 100644 index 0000000..618a3bb --- /dev/null +++ b/activity.html @@ -0,0 +1,14 @@ + + + + +Activity + +
+
Mon +
+
Wed +
+
Fri +
+
diff --git a/style.css b/style.css new file mode 100644 index 0000000..e5ca66c --- /dev/null +++ b/style.css @@ -0,0 +1,58 @@ +table.activity-chart { + border-spacing: 4px; +} + + +table.activity-chart tr { + height: 11px; +} + + +td.activity-chart-label { + position: relative; + font-size: 12px; + min-width: 2em; +} + + +td.activity-chart-label span { + position: absolute; + top: -3px; +} + + +td[data-activity-level] { + box-sizing: border-box; + outline-width: 1px; + outline-style: solid; + outline-offset: -1px; + outline-color: rgba(27, 31, 35, 0.06); + border-radius: 2px; + height: 11px; + min-width: 11px; +} + + +td[data-activity-level="0"] { + background-color: #ccc; +} + + +td[data-activity-level="1"] { + background-color: #9be9a8; +} + + +td[data-activity-level="2"] { + background-color: #40c463; +} + + +td[data-activity-level="3"] { + background-color: #30a14e; +} + + +td[data-activity-level="4"] { + background-color: #216e39; +} -- cgit v1.1