Add navbar and switch to sass. Fixes #2

1 files changed, 48 insertions, 50 deletions

diff --git a/web/index.css b/web/index.css
index 1ff2fc4..1a5b589 100644
--- a/web/index.css
+++ b/web/index.css
@@ -1,64 +1,62 @@
-/*
-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;
-}
+  font-family: sans-serif; }
 
 html {
-    scrollbar-width: none;
-}
+  scrollbar-width: none; }
+  html::-webkit-scrollbar {
+    display: none; }
 
 body {
-    margin: 0;
-}
+  margin: 0; }
 
-.main:not(.pack-list) {
-    margin: 2rem;
-}
+h1 {
+  font-size: 1rem; }
 
-.main.empty {
-    text-align: center;
-}
+main.spinner, main.error, main.empty {
+  margin: 2rem; }
 
-.stickerpack > .sticker-list {
-    display: flex;
-    flex-wrap: wrap;
-}
+main.empty {
+  text-align: center; }
 
-.stickerpack > h1 {
-    margin: .75rem;
-}
+nav {
+  display: flex;
+  overflow-x: auto;
+  scrollbar-width: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 12vw;
+  background-color: white;
+  z-index: 10; }
+  nav::-webkit-scrollbar {
+    display: none; }
+  nav div.sticker {
+    width: 12vw;
+    height: 12vw; }
 
-.sticker {
+section.stickerpack {
+  padding-top: 12vw;
+  margin-top: -12vw; }
+  section.stickerpack > div.sticker-list {
     display: flex;
-    padding: 4px;
-    cursor: pointer;
-    position: relative;
-    width: 25vw;
-    height: 25vw;
-    box-sizing: border-box;
-}
+    flex-wrap: wrap; }
+  section.stickerpack > h1 {
+    margin: .75rem; }
 
-.sticker:hover {
-    background-color: #eee;
-}
-
-.sticker > img {
+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;
-}
-
-.sticker > img.visible {
-    display: initial;
-}
-
-h1 {
-    font-size: 1rem;
-}
+    object-fit: contain; }
+    div.sticker > img.visible {
+      display: initial; }