diff options
| -rw-r--r-- | _icons/arrow-down.svg | 7 | ||||
| -rw-r--r-- | _icons/arrow-left.svg | 5 | ||||
| -rw-r--r-- | _icons/arrow-right.svg | 5 | ||||
| -rw-r--r-- | _icons/arrow-up.svg | 7 | ||||
| -rw-r--r-- | _includes/icon.html | 2 | ||||
| -rw-r--r-- | assets/bg.svg | 34 | ||||
| -rw-r--r-- | assets/style.scss | 188 | ||||
| -rw-r--r-- | index.html | 60 |
8 files changed, 285 insertions, 23 deletions
diff --git a/_icons/arrow-down.svg b/_icons/arrow-down.svg new file mode 100644 index 00000000..a202dfff --- /dev/null +++ b/_icons/arrow-down.svg @@ -0,0 +1,7 @@ +--- +--- +<svg> + <line x1="12" y1="5" x2="12" y2="19" /> + <line x1="19" y1="12" x2="12" y2="19" /> + <line x1="5" y1="12" x2="12" y2="19" /> +</svg> diff --git a/_icons/arrow-left.svg b/_icons/arrow-left.svg index 59e7ba17..3d833119 100644 --- a/_icons/arrow-left.svg +++ b/_icons/arrow-left.svg @@ -1,6 +1,7 @@ --- --- <svg> - <line x1="19" y1="12" x2="5" y2="12" /> - <polyline points="12 19 5 12 12 5" /> + <line x1="5" y1="12" x2="19" y2="12" /> + <line x1="5" y1="12" x2="12" y2="19" /> + <line x1="5" y1="12" x2="12" y2="5" /> </svg> diff --git a/_icons/arrow-right.svg b/_icons/arrow-right.svg index 59e7ba17..5869438e 100644 --- a/_icons/arrow-right.svg +++ b/_icons/arrow-right.svg @@ -1,6 +1,7 @@ --- --- <svg> - <line x1="19" y1="12" x2="5" y2="12" /> - <polyline points="12 19 5 12 12 5" /> + <line x1="5" y1="12" x2="19" y2="12" /> + <line x1="12" y1="19" x2="19" y2="12" /> + <line x1="12" y1="5" x2="19" y2="12" /> </svg> diff --git a/_icons/arrow-up.svg b/_icons/arrow-up.svg new file mode 100644 index 00000000..980a5064 --- /dev/null +++ b/_icons/arrow-up.svg @@ -0,0 +1,7 @@ +--- +--- +<svg> +<line x1="12" y1="5" x2="12" y2="19" /> +<line x1="19" y1="12" x2="12" y2="5" /> +<line x1="5" y1="12" x2="12" y2="5" /> +</svg> diff --git a/_includes/icon.html b/_includes/icon.html index fe6b02e4..d61658ed 100644 --- a/_includes/icon.html +++ b/_includes/icon.html @@ -1,6 +1,6 @@ {% assign name = include.name %} {% assign icon = site.icons | where: "slug", name | first %} -{% assign content = icon.content | replace: '<svg', '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"' %} +{% assign content = icon.content | replace: '<svg', '<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"' %} {{ content }} diff --git a/assets/bg.svg b/assets/bg.svg index 9e39c47c..389aca8a 100644 --- a/assets/bg.svg +++ b/assets/bg.svg @@ -1,18 +1,30 @@ --- --- -<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> +<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="1"> + <rect x="4" y="1" width="16" height="22" rx="1.5"></rect> + <rect x="2" y="2" width="20" height="20" rx="1.5"></rect> + <rect x="1" y="4" width="22" height="16" rx="1.5"></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> </g> - <g stroke="#666" stroke-width=".01" opacity="1"> + <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) %} - <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> + <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 index 61fed5fe..5c331aa1 100644 --- a/assets/style.scss +++ b/assets/style.scss @@ -1,5 +1,16 @@ --- --- + +$breakpoint: (min-width: 50rem); +$primary: #206bc4; +$border: #eeeeee; +$muted: #aaaaaa; +$btn-form-height: 2rem; + +* { + 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; @@ -7,21 +18,54 @@ html { body { background: #fafbfc; - font-size: 1rem; + 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: 50rem; + max-width: 60rem; margin: 0 auto; padding: 1rem } +.row { + display: flex; + flex-direction: column; + + @media #{$breakpoint} { + flex-direction: row; + } +} + +.col { + flex: 1; +} + +.col-aside { + width: 15rem; + margin-top: 2rem; + + @media #{$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); + box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 1px rgba(0, 0, 0, .1); } .icon-preview-wrap { @@ -73,3 +117,141 @@ body { } } +.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; + } + } +} @@ -14,14 +14,66 @@ <body> <div class="container"> <div class="box"> - <div class="icon-preview-wrap"> - <div class="icon-preview"> - {% include icon.html name="arrow-left" %} + + {% assign last-icon = site.icons | sort: date | reverse | first %} + {% capture last-icon %} + {% include icon.html name=last-icon.slug %} + {% endcapture %} + + <div class="row"> + <div class="col"> + + <div class="icon-preview-wrap"> + <div class="icon-preview"> + {{ last-icon }} + </div> + </div> + </div> + <div class="col-aside"> + + <div class="mb"> + <button class="btn"> + {{ last-icon }} Button + </button> + <button class="btn btn-icon"> + {{ last-icon }} + </button> + <button class="btn btn-link"> + {{ last-icon }} Button + </button> + </div> + + <div class="input-icon mb"> + <input type="text" class="input" value="Input value"> + {{ last-icon }} + </div> + + <div class="input-icon icon-left mb"> + {{ last-icon }} + <input type="text" class="input" placeholder="Input placeholder"> + </div> + + <div class="mb"> + <div class="avatar">{{ last-icon }}</div> + <div class="avatar avatar-sm">{{ last-icon }}</div> + </div> + + <div class="tabs mb"> + <a class="tab active">{{ last-icon }} Tab 1</a> + <a class="tab">Tab 2</a> + <a class="tab">Tab 3</a> + </div> + + <div class="mb"> + <a href="#">{{ last-icon }} Link</a> + </div> </div> </div> + + <div class="icons-list"> {% for icon in site.icons %} - <div class="icon"> + <div class="icon" title="{{ icon.slug }}"> {% assign name = icon.slug %} {% include icon.html name=name %} </div> |
