diff options
| -rw-r--r-- | _config.yml | 3 | ||||
| -rw-r--r-- | _icons/a.md | 1 | ||||
| -rw-r--r-- | _icons/activity.txt | 1 | ||||
| -rw-r--r-- | _icons/alert-circle.svg | 1 | ||||
| -rw-r--r-- | _icons/arrow-left-circle.svg | 1 | ||||
| -rw-r--r-- | _icons/arrow-left.svg | 6 | ||||
| -rw-r--r-- | _icons/arrow-right.svg | 6 | ||||
| -rw-r--r-- | _includes/icon.html | 6 | ||||
| -rw-r--r-- | assets/bg.svg | 18 | ||||
| -rw-r--r-- | assets/style.scss | 75 | ||||
| -rw-r--r-- | index.html | 22 | ||||
| -rw-r--r-- | style.scss | 6 |
12 files changed, 130 insertions, 16 deletions
diff --git a/_config.yml b/_config.yml index c6735ab4..f5b429cf 100644 --- a/_config.yml +++ b/_config.yml @@ -1,3 +1,6 @@ +exclude: + - .idea/* + collections: icons: output: true diff --git a/_icons/a.md b/_icons/a.md deleted file mode 100644 index 5ccaff4c..00000000 --- a/_icons/a.md +++ /dev/null @@ -1 +0,0 @@ -sdfsd diff --git a/_icons/activity.txt b/_icons/activity.txt deleted file mode 100644 index 669a57a7..00000000 --- a/_icons/activity.txt +++ /dev/null @@ -1 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-activity"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>
\ No newline at end of file diff --git a/_icons/alert-circle.svg b/_icons/alert-circle.svg deleted file mode 100644 index 8d02b7d1..00000000 --- a/_icons/alert-circle.svg +++ /dev/null @@ -1 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
\ No newline at end of file diff --git a/_icons/arrow-left-circle.svg b/_icons/arrow-left-circle.svg deleted file mode 100644 index 3b19ff8a..00000000 --- a/_icons/arrow-left-circle.svg +++ /dev/null @@ -1 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left-circle"><circle cx="12" cy="12" r="10"></circle><polyline points="12 8 8 12 12 16"></polyline><line x1="16" y1="12" x2="8" y2="12"></line></svg>
\ No newline at end of file diff --git a/_icons/arrow-left.svg b/_icons/arrow-left.svg new file mode 100644 index 00000000..59e7ba17 --- /dev/null +++ b/_icons/arrow-left.svg @@ -0,0 +1,6 @@ +--- +--- +<svg> + <line x1="19" y1="12" x2="5" y2="12" /> + <polyline points="12 19 5 12 12 5" /> +</svg> diff --git a/_icons/arrow-right.svg b/_icons/arrow-right.svg new file mode 100644 index 00000000..59e7ba17 --- /dev/null +++ b/_icons/arrow-right.svg @@ -0,0 +1,6 @@ +--- +--- +<svg> + <line x1="19" y1="12" x2="5" y2="12" /> + <polyline points="12 19 5 12 12 5" /> +</svg> diff --git a/_includes/icon.html b/_includes/icon.html new file mode 100644 index 00000000..fe6b02e4 --- /dev/null +++ b/_includes/icon.html @@ -0,0 +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"' %} + +{{ content }} 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; + } +} + @@ -8,16 +8,26 @@ content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> - <link rel="stylesheet" href="{{ site.baseurl }}/style.css"> + <link rel="stylesheet" href="{{ site.baseurl }}/assets/style.css"> <title>Tabler Icons</title> </head> <body> <div class="container"> - <ul> - {% for icon in site.icons %} - <li>{{ icon }}</li> - {% endfor %} - </ul> + <div class="box"> + <div class="icon-preview-wrap"> + <div class="icon-preview"> + {% include icon.html name="arrow-left" %} + </div> + </div> + <div class="icons-list"> + {% for icon in site.icons %} + <div class="icon"> + {% assign name = icon.slug %} + {% include icon.html name=name %} + </div> + {% endfor %} + </div> + </div> </div> </body> </html> diff --git a/style.scss b/style.scss deleted file mode 100644 index d58d49d1..00000000 --- a/style.scss +++ /dev/null @@ -1,6 +0,0 @@ ---- ---- - -body { - color: red; -} |
