diff options
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/bg.svg | 32 | ||||
| -rw-r--r-- | assets/style.scss | 280 |
2 files changed, 0 insertions, 312 deletions
diff --git a/assets/bg.svg b/assets/bg.svg deleted file mode 100644 index 1f7fcb1b..00000000 --- a/assets/bg.svg +++ /dev/null @@ -1,32 +0,0 @@ ---- ---- -<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> - <g fill="none" fill-rule="evenodd" stroke="#206bc4" stroke-width=".025" opacity=".5"> - <rect x="4" y="1" width="16" height="22" rx="3"></rect> - <rect x="2" y="2" width="20" height="20" rx="3"></rect> - <rect x="1" y="4" width="22" height="16" rx="3"></rect> - <circle cx="12" cy="12" r="5"></circle> - <circle cx="12" cy="12" r="11"></circle> - <line x1="0" y1="0" x2="24" y2="24"></line> - <line x1="24" y1="0" x2="0" y2="24"></line> - <line x1="0" y1="8.5" x2="24" y2="8.5"></line> - <line x1="0" y1="15.5" x2="24" y2="15.5"></line> - <line x1="8.5" y1="0" x2="8.5" y2="24"></line> - <line x1="15.5" y1="0" x2="15.5" y2="24"></line> - <line x1="0" y1="12" x2="24" y2="12"></line> - <line x1="12" y1="0" x2="12" y2="24"></line> - </g> - <g 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"> - {% for i in (1..24) %} - <g fill="#ccc" font-size=".3"> - <text x="0" y="{{ i | plus: 0.35 }}" >{{ i }}</text> - <text x="{{ i | plus: 0.1 }}" y=".25" >{{ i }}</text> - </g> - <g stroke="#666" stroke-width=".01"> - <line x1="0" y1="{{ i }}" x2="24" y2="{{ i }}"></line> - <line x1="{{ i }}" y1="0" x2="{{ i }}" y2="24"></line> - </g> - - {% endfor %} - </g> -</svg> diff --git a/assets/style.scss b/assets/style.scss deleted file mode 100644 index 8769913f..00000000 --- a/assets/style.scss +++ /dev/null @@ -1,280 +0,0 @@ ---- ---- - -$breakpoint: 50rem; -$primary: #206bc4; -$border: #eeeeee; -$muted: #aaaaaa; -$btn-form-height: 2rem; -$hover: rgba(0, 0, 0, .04); - -* { - box-sizing: border-box; -} - -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: .9375rem; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -a { - color: $primary; - text-decoration: none; - - &:hover { - text-decoration: underline; - } -} - -.container { - max-width: 60rem; - margin: 0 auto; - padding: 1rem -} - -.row { - display: flex; - flex-direction: column; - - @media (min-width: #{$breakpoint}) { - flex-direction: row; - } -} - -.col { - flex: 1; -} - -.col-aside { - width: 15rem; - margin-top: 2rem; - - @media (min-width: #{$breakpoint}) { - margin-top: 0; - margin-left: 2rem; - flex-direction: row; - } -} - -.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-title { - font-size: 1.25rem; - line-height: 1; - margin: 0 0 3rem; - font-weight: 600; -} - -.icon-preview-wrap { - 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; - - + svg { - stroke-width: .08; - opacity: 1; - stroke: red; - position: absolute; - left: 0; - top: 0; - } - } -} - - -.icons-list { - display: flex; - margin: -.25rem; -} - -.icons-list-icon { - margin: .25rem; - width: 2rem; - height: 2rem; - color: inherit; - border-radius: 3px; - display: inline-flex; - align-items: center; - justify-content: center; - - &:hover { - background-color: $hover; - } - - .icon { - display: block; - width: 1.5rem; - height: 1.5rem; - } -} - -.mb { - margin-bottom: 2rem; -} - - -/* -Components - */ -.btn { - display: inline-flex; - color: #ffffff; - background: $primary; - border: 0; - border-radius: 3px; - font-size: inherit; - line-height: 1; - justify-content: center; - align-items: center; - min-height: $btn-form-height; - min-width: $btn-form-height; - padding: 0 .75rem; - - - .icon { - width: 1rem; - height: 1rem; - stroke-width: 2; - margin: 0 .5rem 0 -.25rem; - } -} - -.btn-icon { - padding: 0; - justify-content: center; - - .icon { - margin: 0; - } -} - -.btn-link { - background: transparent; - color: $primary; -} - -.input { - border: 1px solid $border; - border-radius: 3px; - height: $btn-form-height; - display: block; - font-size: inherit; - font-family: inherit; - padding: 0 .5rem; - width: 100%; - - &:focus { - outline: 0; - box-shadow: 0 0 0 3px rgba($primary, .1); - border-color: rgba($primary, .4); - } -} - -.icon { - width: 1em; - height: 1em; - vertical-align: -.15em; -} - -.input-icon { - position: relative; - - .input { - padding-right: 2rem; - } - - .icon { - color: $muted; - width: 1.25rem; - height: 1.25rem; - stroke-width: 1.5; - position: absolute; - top: ($btn-form-height - 1.25rem) / 2; - right: ($btn-form-height - 1.25rem) / 2; - } - - &.icon-left { - .icon { - left: ($btn-form-height - 1.25rem) / 2; - right: auto; - } - - .input { - padding-left: 2rem; - padding-right: 0; - } - } -} - -.avatar { - background: rgba($muted, .1); - color: $muted; - display: inline-flex; - width: 2.5rem; - height: 2.5rem; - align-items: center; - justify-content: center; - border-radius: 50%; - vertical-align: bottom; - - .icon { - height: 50%; - width: 50%; - } -} - -.avatar-sm { - width: 1.5rem; - height: 1.5rem; -} - -.tabs { - display: flex; - - .tab { - flex: 1; - text-align: center; - border-bottom: 1px solid $border; - padding: .25rem 0; - color: inherit; - text-decoration: none; - cursor: pointer; - - &.active { - color: $primary; - border-bottom-color: $primary; - } - } -} |
