Use plain HTML and CSS

1 files changed, 129 insertions, 0 deletions

diff --git a/public/main.css b/public/main.css
new file mode 100644
index 0000000..20d4683
--- /dev/null
+++ b/public/main.css
@@ -0,0 +1,129 @@
+:root {
+  --color-brown: #71441E;
+  --color-blue: #0D0D51;
+  --color-gray: #AAAAAA;
+  --color-green: #58B058;
+
+  --size-bee: 0.2rem;
+  --size-mouse: 0.5rem;
+  --size-cat: 0.75rem;
+  --size-dog: 1rem;
+  --size-lion: 1.25rem;
+  --size-bear: 1.5rem;
+  --size-horse: 2rem;
+  --size-camel: 2.625rem;
+  --size-rhino: 3.375rem;
+  --size-elephant: 4.25rem;
+  --size-mammoth: 5.25rem;
+}
+
+@media screen and (max-width: 500px) {
+  html { font-size: 14px; }
+}
+
+@media screen and (min-width: 500px) and (max-width: 900px) {
+  html { font-size: 16px; }
+}
+
+@media screen and (min-width: 900px) {
+  html { font-size: 18px; }
+}
+
+body {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: var(--size-dog);
+}
+
+header {
+  font-size: var(--size-horse);
+  font-weight: bold;
+  color: var(--color-brown);
+  margin: 0 auto var(--size-horse);
+  padding: var(--size-dog) 0;
+  max-width: 800px;
+  border-bottom: var(--size-bee) solid #884433;
+  text-align: center;
+}
+
+h1, h2, h3 {
+  color: var(--color-brown);
+  margin-bottom: var(--size-bear);
+}
+
+h1 {
+  font-size: var(--size-bear);
+}
+
+h2 {
+  font-size: var(--size-dog);
+}
+
+a {
+  color: var(--color-blue);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+ul, ol {
+  padding-left: var(--size-dog);
+  list-style-type: none;
+  margin-bottom: var(--size-horse);
+}
+
+ol {
+  counter-reset: ol;
+  position: relative;
+}
+
+ol > li, ul > li {
+  margin-bottom: var(--size-dog);
+}
+
+ol > li {
+  padding-left: var(--size-camel);
+  position: relative;
+  text-align: justify;
+}
+
+ol > li::before {
+  display: inline;
+  position: absolute;
+  top: 0;
+  left: 0;
+  counter-increment: ol;
+  content: counter(ol);
+  margin-right: var(--size-cat);
+  background-color: var(--color-brown);
+  color: white;
+  border-radius: 50%;
+  font-weight: bold;
+  width: var(--size-bear);
+  text-align: center;
+}
+
+ol > li:hover {
+  cursor: pointer;
+}
+
+ol > li.completed {
+  text-decoration: line-through;
+}
+
+ol > li.completed::before {
+  background-color: var(--color-green);
+}
+
+input {
+  background-color: transparent;
+  font-size: inherit;
+  border: 1px solid var(--color-gray);
+  border-radius: var(--size-bee);
+  padding: var(--size-bee);
+  text-align: center;
+  width: var(--size-rhino);
+  margin-right: var(--size-bee);
+}