diff options
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/bg.svg | 18 | ||||
| -rw-r--r-- | assets/style.scss | 75 |
2 files changed, 93 insertions, 0 deletions
diff --git a/assets/bg.svg b/assets/bg.svg new file mode 100644 index 00000000..9e39c47c --- /dev/null +++ b/assets/bg.svg @@ -0,0 +1,18 @@ +--- +--- +<svg width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> + <g fill="none" fill-rule="evenodd" stroke="#206bc4" stroke-width=".05" opacity="1"> + <rect x="8" y="2" width="32" height="44" rx="3"></rect> + <rect x="5" y="5" width="38" height="38" rx="3"></rect> + <rect x="2" y="8" width="44" height="32" rx="3"></rect> + <circle cx="24" cy="24" r="10"></circle> + <circle cx="24" cy="24" r="22"></circle> + <path d="M0 48L48 0M0 0l48 48M24 48V0M17 0v48M31 0v48M48 24H0M0 31h48M0 17h48"></path> + </g> + <g stroke="#666" stroke-width=".01" opacity="1"> + {% for i in (1..24) %} + <line x1="0" y1="{{ i | times: 2 }}" x2="48" y2="{{ i | times: 2 }}"></line> + <line x1="{{ i | times: 2 }}" y1="0" x2="{{ i | times: 2 }}" y2="48"></line> + {% endfor %} + </g> +</svg> diff --git a/assets/style.scss b/assets/style.scss new file mode 100644 index 00000000..61fed5fe --- /dev/null +++ b/assets/style.scss @@ -0,0 +1,75 @@ +--- +--- +html { + font-size: 16px; + font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; +} + +body { + background: #fafbfc; + font-size: 1rem; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.container { + max-width: 50rem; + margin: 0 auto; + padding: 1rem +} + +.box { + padding: 2rem; + background: #ffff; + box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 1px 1px rgba(0,0,0,.1); +} + +.icon-preview-wrap { + margin-bottom: 3rem; + position: relative; + + &:before { + content: ''; + padding-top: 100%; + display: block; + } +} + +.icon-preview { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: url(bg.svg) no-repeat center/100%; + + svg { + width: 100%; + height: 100%; + stroke-width: 2; + opacity: .8; + } +} + + +.icons-list { + display: flex; + margin: -1rem; + + .icon { + display: block; + margin: .5rem; + width: 1.5rem; + height: 1.5rem; + } + + svg { + display: block; + width: 100%; + height: 100%; + stroke-width: 2; + } +} + |
