1 files changed, 116 insertions, 0 deletions
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