3 files changed, 272 insertions, 0 deletions
diff --git a/web/style/index.css b/web/style/index.css
new file mode 100644
index 0000000..8877da6
--- /dev/null
+++ b/web/style/index.css
@@ -0,0 +1,92 @@
+* {
+  font-family: sans-serif; }
+
+body {
+  margin: 0; }
+
+h1 {
+  font-size: 1rem; }
+
+main.spinner {
+  margin-top: 5rem; }
+
+main.error, main.empty {
+  margin: 2rem; }
+
+main.empty {
+  text-align: center; }
+
+main.has-content {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: grid;
+  grid-template-rows: calc(12vw + 2px) auto; }
+
+nav {
+  display: flex;
+  overflow-x: auto;
+  height: calc(12vw + 2px);
+  background-color: white; }
+  nav > a {
+    border-bottom: 2px solid transparent; }
+    nav > a.visible {
+      border-bottom-color: green; }
+    nav > a > div.sticker {
+      width: 12vw;
+      height: 12vw; }
+    nav > a > div.sticker.icon > img {
+      width: 70%;
+      height: 70%;
+      padding: 15%; }
+
+div.pack-list, nav {
+  scrollbar-width: none; }
+  div.pack-list::-webkit-scrollbar, nav::-webkit-scrollbar {
+    display: none; }
+
+div.pack-list {
+  overflow-y: auto; }
+
+div.pack-list.ios-safari-hack {
+  position: fixed;
+  top: calc(12vw + 2px);
+  bottom: 0;
+  left: 0;
+  right: 0;
+  -webkit-overflow-scrolling: touch; }
+
+section.stickerpack {
+  margin-top: .75rem; }
+  section.stickerpack > div.sticker-list {
+    display: flex;
+    flex-wrap: wrap; }
+  section.stickerpack > h1 {
+    margin: 0 0 0 .75rem; }
+
+div.sticker {
+  display: flex;
+  padding: 4px;
+  cursor: pointer;
+  position: relative;
+  width: 25vw;
+  height: 25vw;
+  box-sizing: border-box; }
+  div.sticker:hover {
+    background-color: #eee; }
+  div.sticker > img {
+    display: none;
+    width: 100%;
+    object-fit: contain; }
+    div.sticker > img.visible {
+      display: initial; }
+
+div.settings-list {
+  display: flex; }
+  div.settings-list button {
+    width: 100%;
+    margin: .5rem;
+    padding: .5rem;
+    border-radius: .25rem; }
diff --git a/web/style/index.sass b/web/style/index.sass
new file mode 100644
index 0000000..d36e3f0
--- /dev/null
+++ b/web/style/index.sass
@@ -0,0 +1,116 @@
+// Copyright (c) 2020 Tulir Asokan
+//
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+*
+  font-family: sans-serif
+
+body
+  margin: 0
+
+h1
+  font-size: 1rem
+
+$sticker-size: 25vw
+$nav-sticker-size: 12vw
+$nav-bottom-highlight: 2px
+$nav-height: calc(#{$nav-sticker-size} + #{$nav-bottom-highlight})
+$nav-height-inverse: calc(-#{$nav-sticker-size} - #{$nav-bottom-highlight})
+
+main
+  &.spinner
+    margin-top: 5rem
+
+  &.error, &.empty
+    margin: 2rem
+
+  &.empty
+    text-align: center
+
+  &.has-content
+    position: fixed
+    top: 0
+    left: 0
+    right: 0
+    bottom: 0
+
+    display: grid
+    grid-template-rows: $nav-height auto
+
+nav
+  display: flex
+  overflow-x: auto
+
+  height: $nav-height
+
+  background-color: white
+
+  > a
+    border-bottom: $nav-bottom-highlight solid transparent
+    &.visible
+      border-bottom-color: green
+    > div.sticker
+      width: $nav-sticker-size
+      height: $nav-sticker-size
+    > div.sticker.icon > img
+      width: 70%
+      height: 70%
+      padding: 15%
+
+div.pack-list, nav
+  scrollbar-width: none
+
+  &::-webkit-scrollbar
+    display: none
+
+div.pack-list
+  overflow-y: auto
+
+div.pack-list.ios-safari-hack
+  position: fixed
+  top: $nav-height
+  bottom: 0
+  left: 0
+  right: 0
+  -webkit-overflow-scrolling: touch
+
+section.stickerpack
+  margin-top: .75rem
+
+  > div.sticker-list
+    display: flex
+    flex-wrap: wrap
+
+  > h1
+    margin: 0 0 0 .75rem
+
+div.sticker
+  display: flex
+  padding: 4px
+  cursor: pointer
+  position: relative
+  width: $sticker-size
+  height: $sticker-size
+  box-sizing: border-box
+
+  &:hover
+    background-color: #eee
+
+  > img
+    display: none
+    width: 100%
+    object-fit: contain
+
+    &.visible
+      display: initial
+
+div.settings-list
+  display: flex
+
+  button
+    width: 100%
+    margin: .5rem
+    padding: .5rem
+    border-radius: .25rem
diff --git a/web/style/spinner.css b/web/style/spinner.css
new file mode 100644
index 0000000..dcf6832
--- /dev/null
+++ b/web/style/spinner.css
@@ -0,0 +1,64 @@
+/* Chase spinner from https://tobiasahlin.com/spinkit/. MIT license */
+.sk-center-wrapper {
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
+}
+
+.sk-chase {
+  position: relative;
+  animation: sk-chase 2.5s infinite linear both;
+}
+
+.sk-chase-dot {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  animation: sk-chase-dot 2.0s infinite ease-in-out both;
+}
+
+.sk-chase-dot:before {
+  content: '';
+  display: block;
+  width: 25%;
+  height: 25%;
+  border-radius: 100%;
+  animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
+  background-color: #FFF;
+}
+
+.sk-chase.green > .sk-chase-dot:before {
+    background-color: #00C853;
+}
+
+.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
+.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
+.sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
+.sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
+.sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
+.sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
+.sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
+.sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
+.sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
+.sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
+.sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
+.sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }
+
+@keyframes sk-chase {
+  100% { transform: rotate(360deg); }
+}
+
+@keyframes sk-chase-dot {
+  80%, 100% { transform: rotate(360deg); }
+}
+
+@keyframes sk-chase-dot-before {
+  50% {
+    transform: scale(0.4);
+  }
+  100%, 0% {
+    transform: scale(1.0);
+  }
+}