From 74cd8d82fe7721ca5dfb6eea7fbe457b857b19fd Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Thu, 10 Sep 2020 17:00:17 +0300
Subject: Make number of stickers per row configurable

---
 web/style/index.sass | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

(limited to 'web/style/index.sass')

diff --git a/web/style/index.sass b/web/style/index.sass
index d36e3f0..d7884d6 100644
--- a/web/style/index.sass
+++ b/web/style/index.sass
@@ -13,7 +13,10 @@ body
 h1
   font-size: 1rem
 
-$sticker-size: 25vw
+\:root
+  --stickers-per-row: 4
+  --sticker-size: calc(100vw / var(--stickers-per-row))
+
 $nav-sticker-size: 12vw
 $nav-bottom-highlight: 2px
 $nav-height: calc(#{$nav-sticker-size} + #{$nav-bottom-highlight})
@@ -91,8 +94,8 @@ div.sticker
   padding: 4px
   cursor: pointer
   position: relative
-  width: $sticker-size
-  height: $sticker-size
+  width: var(--sticker-size)
+  height: var(--sticker-size)
   box-sizing: border-box
 
   &:hover
@@ -108,9 +111,14 @@ div.sticker
 
 div.settings-list
   display: flex
+  flex-direction: column
 
-  button
-    width: 100%
+  > *
     margin: .5rem
+
+  button
     padding: .5rem
     border-radius: .25rem
+
+  input
+    width: 100%
-- 
cgit v1.2.3