1 files changed, 185 insertions, 0 deletions
diff --git a/docker/nginx/sites/www/src/style.css b/docker/nginx/sites/www/src/style.css
new file mode 100644
index 0000000..1f9c9ed
--- /dev/null
+++ b/docker/nginx/sites/www/src/style.css
@@ -0,0 +1,185 @@
+html {
+  width: 100%;
+  line-height: 1.5;
+  font-family: ui-sans-serif;
+}
+
+body {
+  width: 100%;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+a.mono {
+  font-family: ui-monospace;
+}
+
+.h-note {
+  font-size: 0.6em;
+  color: gray;
+}
+
+@keyframes article-enter {
+  from {
+    opacity: 0;
+    transform: translateY(100px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+:root {
+  --main-article-horizontal-padding: 1em;
+  --main-article-horizontal-margin-shrink: -1em;
+
+  --im-me: deepskyblue;
+  --im-happy: dodgerblue;
+  --im-angry: orangered;
+  --im-good: hsl(120, 85%, 85%);
+  --im-active: hsl(20, 85%, 85%);
+}
+
+@media (min-width: 576px) {
+  :root {
+    --main-article-horizontal-padding: 2em;
+    --main-article-horizontal-margin-shrink: -2em;
+  }
+}
+
+#main-article {
+  padding: 0 var(--main-article-horizontal-padding);
+  animation: article-enter 1s;
+}
+
+#title {
+  font-size: 2em;
+}
+
+@keyframes title-name-enter {
+  from {
+    background-color: white;
+  }
+
+  to {
+    background-color: var(--im-me);
+  }
+}
+
+#title-name {
+  font-family: ui-monospace;
+  border-radius: 8px;
+  background-color: white;
+  animation: title-name-enter 3s 2s forwards;
+}
+
+@keyframes avatar-enter {
+  from {
+    opacity: 0;
+    transform: translateX(calc(100% + var(--main-article-horizontal-padding)));
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+#avatar {
+  float: right;
+  transform: translateX(calc(100% + var(--main-article-horizontal-padding)));
+  animation: avatar-enter 0.5s 1s forwards;
+}
+
+.slogan-container {
+  width: 100%;
+  position: fixed;
+  z-index: 1;
+  top: 0;
+}
+
+.slogan {
+  width: 100%;
+  padding: 0.5em 1em;
+  text-align: center;
+  box-sizing: border-box;
+  position: absolute;
+  transform: translateY(-100%);
+  transition: transform 1s;
+}
+
+.slogan.happy {
+  background-color: var(--im-happy);
+}
+
+.slogan.angry {
+  background-color: var(--im-angry);
+}
+
+.slogan-container[data-slogan-emotion="happy"] .slogan.happy {
+  transform: translateY(0);
+}
+
+.slogan-container[data-slogan-emotion="angry"] .slogan.angry {
+  transform: translateY(0);
+}
+
+.slogan-text {
+  display: inline-block;
+  text-align: initial;
+  color: white;
+  font-size: 1.2em;
+}
+
+#todo-container {
+  list-style: none;
+  margin-block: 0;
+  padding-inline: 0;
+}
+
+@keyframes todo-enter {
+  from {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+#todo-container li {
+  margin: 0 var(--main-article-horizontal-margin-shrink);
+  padding: 0.25em 3em;
+  transform: translateX(-100%);
+  animation: todo-enter 1s forwards;
+}
+
+#todo-container li[data-status="closed"] {
+  background-color: var(--im-good);
+}
+
+#todo-container li[data-status="open"] {
+  background-color: var(--im-active);
+}
+
+.friend-link {
+  display: inline-block;
+}
+
+.friend-img {
+  display: block;
+  width: 80px;
+  height: 80px;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+.friend-name {
+  display: block;
+  text-align: center;
+  font-size: 1.2em;
+}