aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--Gemfile1
-rw-r--r--Gemfile.lock5
-rw-r--r--_config.yml3
-rw-r--r--_icons/activity.svg5
-rw-r--r--_icons/alert-circle.svg7
-rw-r--r--_icons/alert-octagon.svg7
-rw-r--r--_icons/align-left.svg8
-rw-r--r--_icons/align-right.svg8
-rw-r--r--_icons/arrow-narrow-down.svg7
-rw-r--r--_icons/arrow-narrow-left.svg7
-rw-r--r--_icons/arrow-narrow-right.svg7
-rw-r--r--_icons/arrow-narrow-up.svg7
-rw-r--r--_icons/circle.svg5
-rw-r--r--_icons/minus.svg5
-rw-r--r--_icons/plus.svg6
-rw-r--r--_icons/square.svg5
-rw-r--r--_icons/x.svg6
-rw-r--r--assets/bg.svg8
-rw-r--r--assets/style.scss7
-rw-r--r--index.html59
20 files changed, 153 insertions, 20 deletions
diff --git a/Gemfile b/Gemfile
index 0b26491..6537c06 100644
--- a/Gemfile
+++ b/Gemfile
@@ -3,3 +3,4 @@ source "https://rubygems.org"
git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }
gem "jekyll", "~> 4.0"
+gem "jekyll-last-modified-at"
diff --git a/Gemfile.lock b/Gemfile.lock
index 1bc9059..d4f671b 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -29,6 +29,9 @@ GEM
rouge (~> 3.0)
safe_yaml (~> 1.0)
terminal-table (~> 1.8)
+ jekyll-last-modified-at (1.2.1)
+ jekyll (>= 3.7, < 5.0)
+ posix-spawn (~> 0.3.9)
jekyll-sass-converter (2.1.0)
sassc (> 2.0.1, < 3.0)
jekyll-watch (2.2.1)
@@ -43,6 +46,7 @@ GEM
mercenary (0.3.6)
pathutil (0.16.2)
forwardable-extended (~> 2.6)
+ posix-spawn (0.3.13)
public_suffix (4.0.3)
rb-fsevent (0.10.3)
rb-inotify (0.10.1)
@@ -60,6 +64,7 @@ PLATFORMS
DEPENDENCIES
jekyll (~> 4.0)
+ jekyll-last-modified-at
BUNDLED WITH
1.17.3
diff --git a/_config.yml b/_config.yml
index f5b429c..8cfedc1 100644
--- a/_config.yml
+++ b/_config.yml
@@ -1,3 +1,6 @@
+plugins:
+ - jekyll-last-modified-at
+
exclude:
- .idea/*
diff --git a/_icons/activity.svg b/_icons/activity.svg
new file mode 100644
index 0000000..6505455
--- /dev/null
+++ b/_icons/activity.svg
@@ -0,0 +1,5 @@
+---
+---
+<svg>
+ <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
+</svg>
diff --git a/_icons/alert-circle.svg b/_icons/alert-circle.svg
new file mode 100644
index 0000000..508651a
--- /dev/null
+++ b/_icons/alert-circle.svg
@@ -0,0 +1,7 @@
+---
+---
+<svg>
+ <circle cx="12" cy="12" r="10"></circle>
+ <line x1="12" y1="8" x2="12" y2="12" />
+ <line x1="12" y1="16" x2="12.01" y2="16" />
+</svg>
diff --git a/_icons/alert-octagon.svg b/_icons/alert-octagon.svg
new file mode 100644
index 0000000..f6dc287
--- /dev/null
+++ b/_icons/alert-octagon.svg
@@ -0,0 +1,7 @@
+---
+---
+<svg>
+ <polygon points="8 2 16 2 22 8 22 16 16 22 8 22 2 16 2 8 8 2" />
+ <line x1="12" y1="8" x2="12" y2="12" />
+ <line x1="12" y1="16" x2="12.01" y2="16" />
+</svg>
diff --git a/_icons/align-left.svg b/_icons/align-left.svg
new file mode 100644
index 0000000..7527417
--- /dev/null
+++ b/_icons/align-left.svg
@@ -0,0 +1,8 @@
+---
+---
+<svg>
+ <line x1="3" y1="6" x2="21" y2="6" />
+ <line x1="3" y1="10" x2="15" y2="10" />
+ <line x1="3" y1="14" x2="21" y2="14" />
+ <line x1="3" y1="18" x2="17" y2="18" />
+</svg>
diff --git a/_icons/align-right.svg b/_icons/align-right.svg
new file mode 100644
index 0000000..0b6b22c
--- /dev/null
+++ b/_icons/align-right.svg
@@ -0,0 +1,8 @@
+---
+---
+<svg>
+ <line x1="3" y1="6" x2="21" y2="6" />
+ <line x1="9" y1="10" x2="21" y2="10" />
+ <line x1="3" y1="14" x2="21" y2="14" />
+ <line x1="7" y1="18" x2="21" y2="18" />
+</svg>
diff --git a/_icons/arrow-narrow-down.svg b/_icons/arrow-narrow-down.svg
new file mode 100644
index 0000000..69551bc
--- /dev/null
+++ b/_icons/arrow-narrow-down.svg
@@ -0,0 +1,7 @@
+---
+---
+<svg>
+ <line x1="12" y1="5" x2="12" y2="19" />
+ <line x1="16" y1="15" x2="12" y2="19" />
+ <line x1="8" y1="15" x2="12" y2="19" />
+</svg>
diff --git a/_icons/arrow-narrow-left.svg b/_icons/arrow-narrow-left.svg
new file mode 100644
index 0000000..94bc7a8
--- /dev/null
+++ b/_icons/arrow-narrow-left.svg
@@ -0,0 +1,7 @@
+---
+---
+<svg>
+ <line x1="5" y1="12" x2="19" y2="12" />
+ <line x1="5" y1="12" x2="9" y2="16" />
+ <line x1="5" y1="12" x2="9" y2="8" />
+</svg>
diff --git a/_icons/arrow-narrow-right.svg b/_icons/arrow-narrow-right.svg
new file mode 100644
index 0000000..447dd85
--- /dev/null
+++ b/_icons/arrow-narrow-right.svg
@@ -0,0 +1,7 @@
+---
+---
+<svg>
+ <line x1="5" y1="12" x2="19" y2="12" />
+ <line x1="15" y1="16" x2="19" y2="12" />
+ <line x1="15" y1="8" x2="19" y2="12" />
+</svg>
diff --git a/_icons/arrow-narrow-up.svg b/_icons/arrow-narrow-up.svg
new file mode 100644
index 0000000..41c4997
--- /dev/null
+++ b/_icons/arrow-narrow-up.svg
@@ -0,0 +1,7 @@
+---
+---
+<svg>
+<line x1="12" y1="5" x2="12" y2="19" />
+<line x1="16" y1="9" x2="12" y2="5" />
+<line x1="8" y1="9" x2="12" y2="5" />
+</svg>
diff --git a/_icons/circle.svg b/_icons/circle.svg
new file mode 100644
index 0000000..6132e85
--- /dev/null
+++ b/_icons/circle.svg
@@ -0,0 +1,5 @@
+---
+---
+<svg>
+ <circle cx="12" cy="12" r="7"></circle>
+</svg>
diff --git a/_icons/minus.svg b/_icons/minus.svg
new file mode 100644
index 0000000..8ab02a1
--- /dev/null
+++ b/_icons/minus.svg
@@ -0,0 +1,5 @@
+---
+---
+<svg>
+ <line x1="5" y1="12" x2="19" y2="12" />
+</svg>
diff --git a/_icons/plus.svg b/_icons/plus.svg
new file mode 100644
index 0000000..f114d0f
--- /dev/null
+++ b/_icons/plus.svg
@@ -0,0 +1,6 @@
+---
+---
+<svg>
+ <line x1="12" y1="5" x2="12" y2="19" />
+ <line x1="5" y1="12" x2="19" y2="12" />
+</svg>
diff --git a/_icons/square.svg b/_icons/square.svg
new file mode 100644
index 0000000..159a0b1
--- /dev/null
+++ b/_icons/square.svg
@@ -0,0 +1,5 @@
+---
+---
+<svg>
+ <rect x="5" y="5" width="14" height="14" rx="2" ry="2" />
+</svg>
diff --git a/_icons/x.svg b/_icons/x.svg
new file mode 100644
index 0000000..84f8f6f
--- /dev/null
+++ b/_icons/x.svg
@@ -0,0 +1,6 @@
+---
+---
+<svg>
+ <line x1="18" y1="6" x2="6" y2="18" />
+ <line x1="6" y1="6" x2="18" y2="18" />
+</svg>
diff --git a/assets/bg.svg b/assets/bg.svg
index 389aca8..df8ec8b 100644
--- a/assets/bg.svg
+++ b/assets/bg.svg
@@ -2,9 +2,9 @@
---
<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>
+ <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>
@@ -13,6 +13,8 @@
<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) %}
diff --git a/assets/style.scss b/assets/style.scss
index a2dfe16..425b287 100644
--- a/assets/style.scss
+++ b/assets/style.scss
@@ -69,6 +69,13 @@ a {
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;
diff --git a/index.html b/index.html
index 2442165..4e298ad 100644
--- a/index.html
+++ b/index.html
@@ -10,14 +10,21 @@
<link rel="stylesheet" href="{{ site.baseurl }}/assets/style.css">
<title>Tabler Icons</title>
+
+ <style>
+ body {
+ display: none;
+ }
+ </style>
</head>
<body>
<div class="container">
<div class="box">
- {% assign last-icon = site.icons | sort: date | reverse | first %}
- {% capture last-icon %}
- {% include icon.html name=last-icon.slug %}
+ {% assign first-icon = site.icons | reverse | first %}
+ {% assign slug = first-icon.slug %}
+ {% capture first-icon %}
+ {% include icon.html name=slug %}
{% endcapture %}
<div class="row mb js-icon-manager">
@@ -25,47 +32,49 @@
<div class="icon-preview-wrap">
<div class="icon-preview">
- {{ last-icon }}
+ {{ first-icon }}
</div>
</div>
</div>
<div class="col-aside">
+ <h1 class="icon-title js-icon-name">{{ slug }}</h1>
+
<div class="mb">
<button class="btn">
- {{ last-icon }} Button
+ {{ first-icon }} Button
</button>
<button class="btn btn-icon">
- {{ last-icon }}
+ {{ first-icon }}
</button>
<button class="btn btn-link">
- {{ last-icon }} Button
+ {{ first-icon }} Button
</button>
</div>
<div class="input-icon mb">
<input type="text" class="input" value="Input value">
- {{ last-icon }}
+ {{ first-icon }}
</div>
<div class="input-icon icon-left mb">
- {{ last-icon }}
+ {{ first-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 class="avatar">{{ first-icon }}</div>
+ <div class="avatar avatar-sm">{{ first-icon }}</div>
</div>
<div class="tabs mb">
- <a class="tab active">{{ last-icon }} Tab 1</a>
+ <a class="tab active">{{ first-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>
+ <a href="#">{{ first-icon }} Link</a>
</div>
</div>
</div>
@@ -74,8 +83,8 @@
<div>
<div class="icons-list">
{% for icon in site.icons %}
- <a href="#" class="icons-list-icon js-icon" title="{{ icon.slug }}">
- {% assign name = icon.slug %}
+ {% assign name = icon.slug %}
+ <a href="#" class="icons-list-icon js-icon" title="{{ icon.slug }}" data-icon="{{ name }}">
{% include icon.html name=name %}
</a>
{% endfor %}
@@ -86,10 +95,26 @@
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script>
- $(document).ready(function(){
- $('body').on('click', '.js-icon', function(){
+
+ $(document).ready(function () {
+ $('body').on('click', '.js-icon', function (e) {
+ var icon = $(this).attr('data-icon');
+
+ $('.js-icon-name').html(icon);
+ localStorage.setItem('icon', icon);
+
$('.js-icon-manager svg').replaceWith($(this).find('>svg:eq(0)').clone());
+
+ e.preventDefault();
+ return false;
});
+
+ var icon = localStorage.getItem('icon');
+ if (icon) {
+ $('.js-icon[data-icon="' + icon + '"]').click();
+ }
+
+ document.body.style.display = "block"
});
</script>
</body>
generated by cgit v1.2.1 (git 2.18.0) at 2024-06-26 06:47:23 +0000