jekyll-theme-arktos 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/LICENSE.txt +21 -0
- data/README.md +77 -0
- data/_includes/assets.html +6 -0
- data/_includes/footer.html +6 -0
- data/_includes/head.html +14 -0
- data/_includes/header.html +8 -0
- data/_includes/icons.html +20 -0
- data/_includes/icons/github.html +3 -0
- data/_includes/icons/mail.html +4 -0
- data/_includes/icons/rss.html +5 -0
- data/_includes/icons/twitter.html +3 -0
- data/_includes/pagination.html +29 -0
- data/_includes/title.html +0 -0
- data/_layouts/default.html +18 -0
- data/_layouts/home.html +33 -0
- data/_layouts/page.html +26 -0
- data/_layouts/post.html +29 -0
- data/_sass/arktos.scss +16 -0
- data/_sass/arktos/_blog.scss +194 -0
- data/_sass/arktos/_common.scss +53 -0
- data/_sass/arktos/_content.scss +247 -0
- data/_sass/arktos/_error.scss +16 -0
- data/_sass/arktos/_footer.scss +66 -0
- data/_sass/arktos/_header.scss +10 -0
- data/_sass/arktos/_minxins.scss +61 -0
- data/_sass/arktos/_post.scss +77 -0
- data/_sass/arktos/_variables.scss +15 -0
- data/assets/Slide.js +86 -0
- data/assets/css/tomorrow.css +72 -0
- data/assets/fonts/OpenSans-Regular.ttf +0 -0
- data/assets/js/highlight.js +2 -0
- data/assets/js/main.js +21 -0
- data/assets/main.scss +4 -0
- metadata +119 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: f3bf5b66d953494169330edfda3563b41dd54bf4
|
4
|
+
data.tar.gz: 2282b575a75863dac46d66f3ae732e08c8ef9f60
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 3187eac382bad4ff5175f026fa7e09ab067e97671c95ae27a6123a70fe6bce99bc5511463518db51c32a757cb8e3bc121334f608c5c1c8363aa2c0cd42a0f30e
|
7
|
+
data.tar.gz: 615f2b1fc6f25c6059d22b7388c04b8d152447d882355ae39c3cf6dac174e32f043ed0e4602250800ca3a72d4d074dedd6f434b9ed02ea65d8dc4fe05fc537b9
|
data/LICENSE.txt
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
The MIT License (MIT)
|
2
|
+
|
3
|
+
Copyright (c) 2019 zhangshiyu
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
7
|
+
in the Software without restriction, including without limitation the rights
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
10
|
+
furnished to do so, subject to the following conditions:
|
11
|
+
|
12
|
+
The above copyright notice and this permission notice shall be included in
|
13
|
+
all copies or substantial portions of the Software.
|
14
|
+
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
21
|
+
THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,77 @@
|
|
1
|
+
# Arktos
|
2
|
+
|
3
|
+
A minimalist Jekyll theme arktos.
|
4
|
+
|
5
|
+
![jekyll-theme-arktos](screenshot.png)
|
6
|
+
|
7
|
+
Your can find a demo [here](https://erlzhang.github.io/arktos-demo/)!
|
8
|
+
|
9
|
+
|
10
|
+
## Installation
|
11
|
+
|
12
|
+
Add this line to your Jekyll site's `Gemfile`:
|
13
|
+
|
14
|
+
```ruby
|
15
|
+
gem "jekyll-theme-arktos"
|
16
|
+
```
|
17
|
+
|
18
|
+
And add this line to your Jekyll site's `_config.yml`:
|
19
|
+
|
20
|
+
```yaml
|
21
|
+
theme: jekyll-theme-arktos
|
22
|
+
```
|
23
|
+
|
24
|
+
And then execute:
|
25
|
+
|
26
|
+
$ bundle
|
27
|
+
|
28
|
+
Or install it yourself as:
|
29
|
+
|
30
|
+
$ gem install jekyll-theme-arktos
|
31
|
+
|
32
|
+
### If you are using Github Pages?
|
33
|
+
|
34
|
+
Add the following to your site’s `_config.yml` file.
|
35
|
+
|
36
|
+
```yml
|
37
|
+
remote_theme: erlzhang/jekyll-theme-arktos
|
38
|
+
```
|
39
|
+
|
40
|
+
## Usage
|
41
|
+
|
42
|
+
### Compatible with jekyll-paginate-v2
|
43
|
+
|
44
|
+
But you should enable it in your `_config.yml`.
|
45
|
+
|
46
|
+
```yml
|
47
|
+
pagination:
|
48
|
+
enabled: true
|
49
|
+
```
|
50
|
+
|
51
|
+
### Enabling Excerpts on the Home Page
|
52
|
+
|
53
|
+
To display post-excerpts on the Home Page, simply add the following to your `_config.yml`:
|
54
|
+
|
55
|
+
```yml
|
56
|
+
show_excerpts: true
|
57
|
+
```
|
58
|
+
|
59
|
+
### How to use mermaid?
|
60
|
+
|
61
|
+
<pre class="language-md">
|
62
|
+
```mermaid
|
63
|
+
graph TD;
|
64
|
+
A-->B;
|
65
|
+
A-->C;
|
66
|
+
B-->D;
|
67
|
+
C-->D;
|
68
|
+
```
|
69
|
+
</pre>
|
70
|
+
|
71
|
+
## Contributing
|
72
|
+
|
73
|
+
Bug reports and pull requests are welcome on GitHub at https://github.com/erlzhang/jekyll-theme-arktos. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
|
74
|
+
|
75
|
+
## License
|
76
|
+
|
77
|
+
The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
|
@@ -0,0 +1,6 @@
|
|
1
|
+
<link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}" />
|
2
|
+
<script src="{{ "/assets/js/main.js" | relative_url }}" defer></script>
|
3
|
+
<link rel="stylesheet" href="{{ "/assets/css/tomorrow.css" | relative_url }}" />
|
4
|
+
<script src="{{ "/assets/js/highlight.js" | relative_url }}"></script>
|
5
|
+
<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML' async></script>
|
6
|
+
<script src="https://unpkg.com/mermaid@7.1.0/dist/mermaid.min.js" defer></script>
|
@@ -0,0 +1,6 @@
|
|
1
|
+
<aside class="footer">
|
2
|
+
<h3>{{ site.title }}</h3>
|
3
|
+
<p>{{ site.description }}</p>
|
4
|
+
{% include icons.html %}
|
5
|
+
<p class="footer_bottom">Powered by <a href="https://jekyllrb.com" target="_blank">Jekyll</a>. Theme <a href="https://github.com/erlzhang/jekyll-theme-arktos" target="_blank">Arktos</a></p>
|
6
|
+
</aside>
|
data/_includes/head.html
ADDED
@@ -0,0 +1,14 @@
|
|
1
|
+
<head>
|
2
|
+
<meta charset="utf-8">
|
3
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
4
|
+
<meta name="author" content="{{ site.title }}">
|
5
|
+
<meta name="google-site-verification" content="1mZm9i5EpTz20fLOPSbIRjIS1_pQOl7yfJcZqxbwXhA" />
|
6
|
+
{% if page.layout == "home" %}
|
7
|
+
<title>{{ site.title }}</title>
|
8
|
+
{% else %}
|
9
|
+
<title>{{ page.title }} | {{ site.title }}</title>
|
10
|
+
{% endif %}
|
11
|
+
<meta name="keywords" content="{{ page.keywords }}">
|
12
|
+
<meta name="description" content="{{ page.description }}">
|
13
|
+
{% include assets.html %}
|
14
|
+
</head>
|
@@ -0,0 +1,20 @@
|
|
1
|
+
<div class="icon__list">
|
2
|
+
{% if site.email %}
|
3
|
+
<a href="mailto:{{ site.email }}" class="icon__link" target="_blank">
|
4
|
+
{% include icons/mail.html %}
|
5
|
+
</a>
|
6
|
+
{% endif %}
|
7
|
+
{% if site.github_username %}
|
8
|
+
<a href="https://github.com/{{ site.github_username }}" class="icon__link" target="_blank">
|
9
|
+
{% include icons/github.html %}
|
10
|
+
</a>
|
11
|
+
{% endif %}
|
12
|
+
{% if site.twitter_username %}
|
13
|
+
<a href="https://twitter.com/{{ site.twitter_usename }}" class="icon__link" target="_blank">
|
14
|
+
{% include icons/twitter.html %}
|
15
|
+
</a>
|
16
|
+
{% endif %}
|
17
|
+
<a href="/feed.xml" class="icon__link">
|
18
|
+
{% include icons/rss.html %}
|
19
|
+
</a>
|
20
|
+
</div>
|
@@ -0,0 +1,3 @@
|
|
1
|
+
<svg viewBox="0 0 64 64" class="icon__fill">
|
2
|
+
<path stroke-width="0" d="M32 0 C14 0 0 14 0 32 0 53 19 62 22 62 24 62 24 61 24 60 L24 55 C17 57 14 53 13 50 13 50 13 49 11 47 10 46 6 44 10 44 13 44 15 48 15 48 18 52 22 51 24 50 24 48 26 46 26 46 18 45 12 42 12 31 12 27 13 24 15 22 15 22 13 18 15 13 15 13 20 13 24 17 27 15 37 15 40 17 44 13 49 13 49 13 51 20 49 22 49 22 51 24 52 27 52 31 52 42 45 45 38 46 39 47 40 49 40 52 L40 60 C40 61 40 62 42 62 45 62 64 53 64 32 64 14 50 0 32 0 Z" />
|
3
|
+
</svg>
|
@@ -0,0 +1,4 @@
|
|
1
|
+
<svg class="icon__stroke" 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" aria-hidden="true">
|
2
|
+
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
|
3
|
+
<polyline points="22,6 12,13 2,6"></polyline>
|
4
|
+
</svg>
|
@@ -0,0 +1,5 @@
|
|
1
|
+
<svg class="icon__stroke" 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" aria-hidden="true">
|
2
|
+
<path d="M4 11a9 9 0 0 1 9 9"></path>
|
3
|
+
<path d="M4 4a16 16 0 0 1 16 16"></path>
|
4
|
+
<circle cx="5" cy="19" r="1"></circle>
|
5
|
+
</svg>
|
@@ -0,0 +1,3 @@
|
|
1
|
+
<svg class="icon__fill" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
|
2
|
+
<path stroke-width="0" d="M60 16 L54 17 L58 12 L51 14 C42 4 28 15 32 24 C16 24 8 12 8 12 C8 12 2 21 12 28 L6 26 C6 32 10 36 17 38 L10 38 C14 46 21 46 21 46 C21 46 15 51 4 51 C37 67 57 37 54 21 Z" />
|
3
|
+
</svg>
|
@@ -0,0 +1,29 @@
|
|
1
|
+
<div class="paginiation">
|
2
|
+
{% if paginator.previous_page %}
|
3
|
+
<li>
|
4
|
+
<a href="{{ paginator.previous_page_path | prepend: site.baseurl }}" class="pagi__icon prev" id="btnPrev">
|
5
|
+
<svg width="40" height="40">
|
6
|
+
<circle class="circle-progress" r="18" cy="20" cx="20" stroke-linejoin="round" stroke-linecap="round" />
|
7
|
+
</svg>
|
8
|
+
<span class="pagi__icon_arrow"></span>
|
9
|
+
</a>
|
10
|
+
</li>
|
11
|
+
{% endif %}
|
12
|
+
{% if paginator.page_trail %}
|
13
|
+
{% for trail in paginator.page_trail %}
|
14
|
+
<li>
|
15
|
+
<a href="{{ trail.path | prepend: site.baseurl }}" title="{{trail.title}}" class="pagi__link{% if page.url == trail.path %} active{% endif %}">{{ trail.num }}</a>
|
16
|
+
</li>
|
17
|
+
{% endfor %}
|
18
|
+
{% endif %}
|
19
|
+
{% if paginator.next_page %}
|
20
|
+
<li>
|
21
|
+
<a href="{{ paginator.next_page_path | prepend: site.baseurl }}" class="pagi__icon next" id="btnNext">
|
22
|
+
<svg width="40" height="40">
|
23
|
+
<circle class="circle-progress" r="18" cy="20" cx="20" stroke-linejoin="round" stroke-linecap="round" />
|
24
|
+
</svg>
|
25
|
+
<span class="pagi__icon_arrow"></span>
|
26
|
+
</a>
|
27
|
+
</li>
|
28
|
+
{% endif %}
|
29
|
+
</div>
|
File without changes
|
data/_layouts/home.html
ADDED
@@ -0,0 +1,33 @@
|
|
1
|
+
---
|
2
|
+
layout: default
|
3
|
+
---
|
4
|
+
|
5
|
+
<header class="site-header">
|
6
|
+
<h1 class="site-title">{{ site.title }}</h1>
|
7
|
+
</header>
|
8
|
+
{% if site.pagination and site.pagination.enabled and page.pagination.enabled %}
|
9
|
+
{{ page.pagination.enabled }}
|
10
|
+
{% assign posts = paginator.posts %}
|
11
|
+
{% else %}
|
12
|
+
{% assign posts = site.posts %}
|
13
|
+
{% endif %}
|
14
|
+
{% for post in posts %}
|
15
|
+
<article class="post__entry">
|
16
|
+
<a href="{{ post.url | prepend: site.baseurl | replace: '//', '/' }}" class="post__entry__link">
|
17
|
+
<h2>{{ post.title }}</h2>
|
18
|
+
<div class="post__meta">
|
19
|
+
<time>{{ post.date | date: "%Y-%m-%d" }}</time>
|
20
|
+
</div>
|
21
|
+
{% if site.arktos.excerpt %}
|
22
|
+
<div class="post__excerpt">
|
23
|
+
{{ post.excerpt }}
|
24
|
+
</div>
|
25
|
+
{% endif %}
|
26
|
+
<div class="post__more_arrow"></div>
|
27
|
+
</a>
|
28
|
+
</article>
|
29
|
+
{% endfor %}
|
30
|
+
|
31
|
+
{% if site.pagination and site.pagination.enabled %}
|
32
|
+
{% include pagination.html %}
|
33
|
+
{% endif %}
|
data/_layouts/page.html
ADDED
@@ -0,0 +1,26 @@
|
|
1
|
+
---
|
2
|
+
layout: default
|
3
|
+
---
|
4
|
+
|
5
|
+
<div class="post__top_navs clearfix">
|
6
|
+
<nav class="post__archive_path">
|
7
|
+
<a href="/" id="archiveBtn">
|
8
|
+
<div class="post__archive_icon">
|
9
|
+
<svg width="40" height="40">
|
10
|
+
<circle class="circle-progress" r="18" cy="20" cx="20" stroke-linejoin="round" stroke-linecap="round" />
|
11
|
+
</svg>
|
12
|
+
<span class="post__archive_icon"></span>
|
13
|
+
</div>
|
14
|
+
{{ site.title }}
|
15
|
+
</a>
|
16
|
+
</nav>
|
17
|
+
</div>
|
18
|
+
<article class="post">
|
19
|
+
<header class="post__header">
|
20
|
+
<h1 class="post__title">{{ page.title | escape }}</h1>
|
21
|
+
</header>
|
22
|
+
<div class="post__content content">
|
23
|
+
{{ content }}
|
24
|
+
</div>
|
25
|
+
</article>
|
26
|
+
<script>hljs.initHighlightingOnLoad();</script>
|
data/_layouts/post.html
ADDED
@@ -0,0 +1,29 @@
|
|
1
|
+
---
|
2
|
+
layout: default
|
3
|
+
---
|
4
|
+
|
5
|
+
<div class="post__top_navs clearfix">
|
6
|
+
<nav class="post__archive_path">
|
7
|
+
<a href="/" id="archiveBtn">
|
8
|
+
<div class="post__archive_icon">
|
9
|
+
<svg width="40" height="40">
|
10
|
+
<circle class="circle-progress" r="18" cy="20" cx="20" stroke-linejoin="round" stroke-linecap="round" />
|
11
|
+
</svg>
|
12
|
+
<span class="post__archive_icon"></span>
|
13
|
+
</div>
|
14
|
+
{{ site.title }}
|
15
|
+
</a>
|
16
|
+
</nav>
|
17
|
+
</div>
|
18
|
+
<article class="post">
|
19
|
+
<header class="post__header">
|
20
|
+
<h1 class="post__title">{{ page.title | escape }}</h1>
|
21
|
+
<div class="post__meta">
|
22
|
+
<time>{{ page.date | date: "%Y-%m-%d %H:%M" }}</time>
|
23
|
+
</div>
|
24
|
+
</header>
|
25
|
+
<div class="post__content content">
|
26
|
+
{{ content }}
|
27
|
+
</div>
|
28
|
+
</article>
|
29
|
+
<script>hljs.initHighlightingOnLoad();</script>
|
data/_sass/arktos.scss
ADDED
@@ -0,0 +1,16 @@
|
|
1
|
+
@charset "utf-8";
|
2
|
+
|
3
|
+
// common
|
4
|
+
@import "arktos/variables";
|
5
|
+
@import "arktos/minxins";
|
6
|
+
@import "arktos/common";
|
7
|
+
@import "arktos/content";
|
8
|
+
@import "arktos/footer";
|
9
|
+
@import "arktos/header";
|
10
|
+
|
11
|
+
// 404
|
12
|
+
@import "arktos/error";
|
13
|
+
|
14
|
+
//blog
|
15
|
+
@import "arktos/post";
|
16
|
+
@import "arktos/blog";
|
@@ -0,0 +1,194 @@
|
|
1
|
+
.site-header {
|
2
|
+
margin: 0 auto 3rem auto;
|
3
|
+
}
|
4
|
+
.post__archive__header {
|
5
|
+
margin: 5rem 0 5rem 0;
|
6
|
+
@include flex();
|
7
|
+
flex-direction: column;
|
8
|
+
align-items: center;
|
9
|
+
h1 {
|
10
|
+
font-weight: 300;
|
11
|
+
display: inline-block;
|
12
|
+
margin: 0 auto;
|
13
|
+
position: relative;
|
14
|
+
text-transform: capitalize;
|
15
|
+
&:before, &:after {
|
16
|
+
@include pseudo();
|
17
|
+
width: 30px;
|
18
|
+
height: 1px;
|
19
|
+
top: 50%;
|
20
|
+
background-color: var(--gray);
|
21
|
+
}
|
22
|
+
&:before {
|
23
|
+
left: -40px;
|
24
|
+
}
|
25
|
+
&:after {
|
26
|
+
right: -40px;
|
27
|
+
}
|
28
|
+
}
|
29
|
+
p {
|
30
|
+
color: var(--gray);
|
31
|
+
}
|
32
|
+
}
|
33
|
+
.post__entry {
|
34
|
+
margin: 0 0 3rem 0;
|
35
|
+
.post__link {
|
36
|
+
display: block;
|
37
|
+
}
|
38
|
+
h2 {
|
39
|
+
margin-bottom: 0.75rem;
|
40
|
+
}
|
41
|
+
.post__meta {
|
42
|
+
font-size: 0.875rem;
|
43
|
+
color: var(--gray);
|
44
|
+
margin: 0.5rem 0 1rem 0;
|
45
|
+
}
|
46
|
+
.post__excerpt {
|
47
|
+
color: var(--gray);
|
48
|
+
margin: 0.5rem 0 0 0;
|
49
|
+
p {
|
50
|
+
line-height: 1.5rem;
|
51
|
+
}
|
52
|
+
}
|
53
|
+
.post__more_arrow {
|
54
|
+
margin-top: 2rem;
|
55
|
+
width: 30%;
|
56
|
+
height: 1px;
|
57
|
+
background-color: var(--light);
|
58
|
+
position: relative;
|
59
|
+
transition: all 0.35s ease-out;
|
60
|
+
display: inline-block;
|
61
|
+
&:after, &:before {
|
62
|
+
content: "";
|
63
|
+
position: absolute;
|
64
|
+
width: 15px;
|
65
|
+
height: 1px;
|
66
|
+
background-color: var(--light);
|
67
|
+
right: -2.5px;
|
68
|
+
opacity: 0;
|
69
|
+
transition: all 0.35s ease-out;
|
70
|
+
}
|
71
|
+
&:after {
|
72
|
+
transform: rotate(45deg);
|
73
|
+
top: -5px;
|
74
|
+
}
|
75
|
+
&:before {
|
76
|
+
transform: rotate(-45deg);
|
77
|
+
top: 5px;
|
78
|
+
}
|
79
|
+
}
|
80
|
+
.post__entry__link {
|
81
|
+
display: block;
|
82
|
+
}
|
83
|
+
.post__entry__link:hover {
|
84
|
+
.post__more_arrow {
|
85
|
+
width: 30px;
|
86
|
+
background-color: var(--gray);
|
87
|
+
&:before, &:after {
|
88
|
+
opacity: 1;
|
89
|
+
background-color: var(--gray);
|
90
|
+
}
|
91
|
+
}
|
92
|
+
}
|
93
|
+
.post-link.emit {
|
94
|
+
.more-arrow {
|
95
|
+
margin-left: 30%;
|
96
|
+
opacity: 0;
|
97
|
+
}
|
98
|
+
}
|
99
|
+
}
|
100
|
+
.paginiation {
|
101
|
+
text-align: center;
|
102
|
+
margin-bottom: 4.5rem;
|
103
|
+
li {
|
104
|
+
list-style: none;
|
105
|
+
display: inline-block;
|
106
|
+
margin: 0 5px;
|
107
|
+
.pagi__link, .pagi__icon {
|
108
|
+
width: 40px;
|
109
|
+
height: 40px;
|
110
|
+
line-height: 40px;
|
111
|
+
text-align: center;
|
112
|
+
vertical-align: bottom;
|
113
|
+
display: inline-block;
|
114
|
+
position: relative;
|
115
|
+
}
|
116
|
+
.pagi__link {
|
117
|
+
&:after {
|
118
|
+
@include pseudo();
|
119
|
+
left: 0;
|
120
|
+
bottom: -1px;
|
121
|
+
width: 0;
|
122
|
+
height: 1px;
|
123
|
+
transition: all 0.35s ease-out;
|
124
|
+
background-color: var(--gray);
|
125
|
+
}
|
126
|
+
&.active {
|
127
|
+
color: var(--gray);
|
128
|
+
border-color: var(--gray);
|
129
|
+
}
|
130
|
+
&:hover {
|
131
|
+
border-color: var(--gray-light);
|
132
|
+
&:after {
|
133
|
+
width: 100%;
|
134
|
+
}
|
135
|
+
}
|
136
|
+
}
|
137
|
+
.pagi__icon {
|
138
|
+
border-radius: 50%;
|
139
|
+
.circle-progress {
|
140
|
+
stroke: var(--gray);
|
141
|
+
stroke-width: 1;
|
142
|
+
stroke-dasharray: 0 120;
|
143
|
+
fill: none;
|
144
|
+
transition: all 0.45s ease-in;
|
145
|
+
}
|
146
|
+
&:hover .circle-progress {
|
147
|
+
stroke-dasharray: 120 120;
|
148
|
+
}
|
149
|
+
.pagi__icon_arrow {
|
150
|
+
position: absolute;
|
151
|
+
width: 60%;
|
152
|
+
height: 1px;
|
153
|
+
top: calc(50% - 1px);
|
154
|
+
left: 20%;
|
155
|
+
background-color: var(--gray);
|
156
|
+
transition: all 0.25s ease-in;
|
157
|
+
&:before, &:after {
|
158
|
+
@include pseudo();
|
159
|
+
width: 50%;
|
160
|
+
height: 1px;
|
161
|
+
background-color: var(--gray);
|
162
|
+
}
|
163
|
+
}
|
164
|
+
&.next .pagi__icon_arrow {
|
165
|
+
&:before, &:after {
|
166
|
+
right: 0;
|
167
|
+
top: 0;
|
168
|
+
}
|
169
|
+
&:before {
|
170
|
+
transform-origin: bottom right;
|
171
|
+
transform: rotate(45deg);
|
172
|
+
}
|
173
|
+
&:after {
|
174
|
+
transform-origin: top right;
|
175
|
+
transform: rotate(-45deg);
|
176
|
+
}
|
177
|
+
}
|
178
|
+
&.prev .pagi__icon_arrow {
|
179
|
+
&:before, &:after {
|
180
|
+
left: 0;
|
181
|
+
top: 0;
|
182
|
+
}
|
183
|
+
&:before {
|
184
|
+
transform-origin: bottom left;
|
185
|
+
transform: rotate(45deg);
|
186
|
+
}
|
187
|
+
&:after {
|
188
|
+
transform-origin: top left;
|
189
|
+
transform: rotate(-45deg);
|
190
|
+
}
|
191
|
+
}
|
192
|
+
}
|
193
|
+
}
|
194
|
+
}
|