From ed2b9f7e641bfd59d8a0130086587465bb3d4195 Mon Sep 17 00:00:00 2001 From: Tulir Asokan Date: Thu, 10 Sep 2020 16:35:46 +0300 Subject: [PATCH] Compress compiled CSS --- web/package.json | 2 +- web/style/index.css | 93 +----------------------------------------- web/style/spinner.css | 65 +---------------------------- web/style/spinner.sass | 68 ++++++++++++++++++++++++++++++ 4 files changed, 71 insertions(+), 157 deletions(-) create mode 100644 web/style/spinner.sass diff --git a/web/package.json b/web/package.json index 7f7f592..66d3722 100644 --- a/web/package.json +++ b/web/package.json @@ -8,7 +8,7 @@ "private": true, "scripts": { "snowpack": "snowpack", - "sass": "node-sass -o style style/*.sass" + "sass": "node-sass -o style style/*.sass --output-style compressed" }, "snowpack": { "install": [ diff --git a/web/style/index.css b/web/style/index.css index 8877da6..607770b 100644 --- a/web/style/index.css +++ b/web/style/index.css @@ -1,92 +1 @@ -* { - 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; } +*{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/spinner.css b/web/style/spinner.css index dcf6832..2685235 100644 --- a/web/style/spinner.css +++ b/web/style/spinner.css @@ -1,64 +1 @@ -/* 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); - } -} +.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.green>.sk-chase-dot:before{background-color:#00C853}.sk-chase>.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>.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>.sk-chase-dot:nth-child(1){animation-delay:-1.1s}.sk-chase>.sk-chase-dot:nth-child(2){animation-delay:-1.0s}.sk-chase>.sk-chase-dot:nth-child(3){animation-delay:-0.9s}.sk-chase>.sk-chase-dot:nth-child(4){animation-delay:-0.8s}.sk-chase>.sk-chase-dot:nth-child(5){animation-delay:-0.7s}.sk-chase>.sk-chase-dot:nth-child(6){animation-delay:-0.6s}.sk-chase>.sk-chase-dot:nth-child(1):before{animation-delay:-1.1s}.sk-chase>.sk-chase-dot:nth-child(2):before{animation-delay:-1.0s}.sk-chase>.sk-chase-dot:nth-child(3):before{animation-delay:-0.9s}.sk-chase>.sk-chase-dot:nth-child(4):before{animation-delay:-0.8s}.sk-chase>.sk-chase-dot:nth-child(5):before{animation-delay:-0.7s}.sk-chase>.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)}} diff --git a/web/style/spinner.sass b/web/style/spinner.sass new file mode 100644 index 0000000..cbc9042 --- /dev/null +++ b/web/style/spinner.sass @@ -0,0 +1,68 @@ +// 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 + + &.green > .sk-chase-dot:before + background-color: #00C853 + + > .sk-chase-dot + width: 100% + height: 100% + position: absolute + left: 0 + top: 0 + animation: sk-chase-dot 2.0s infinite ease-in-out both + + &: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 + + &:nth-child(1) + animation-delay: -1.1s + &:nth-child(2) + animation-delay: -1.0s + &:nth-child(3) + animation-delay: -0.9s + &:nth-child(4) + animation-delay: -0.8s + &:nth-child(5) + animation-delay: -0.7s + &:nth-child(6) + animation-delay: -0.6s + &:nth-child(1):before + animation-delay: -1.1s + &:nth-child(2):before + animation-delay: -1.0s + &:nth-child(3):before + animation-delay: -0.9s + &:nth-child(4):before + animation-delay: -0.8s + &:nth-child(5):before + animation-delay: -0.7s + &: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)