tear-jekyll-theme 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +37 -10
- data/_config.yml +2 -0
- data/_includes/footer.html +154 -6
- data/_includes/navigation.html +35 -14
- data/_layouts/about.html +5 -5
- data/_layouts/home.html +34 -31
- data/assets/css/output.css +422 -127
- data/assets/js/controllers/thumbnail_controller.js +2 -2
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: e6fd517fc065af667b14fc0ad37ae33a984871ba0744aded40a6dfb3e3b49529
|
|
4
|
+
data.tar.gz: 971849e777ef32e3d2ca4645f4208d18e66d8b757d524e31a0cc1bbf31bbce94
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 11d716c6f8c6d4911f3da2c988f9ac2349cdc49fc42cdb12bfb0b65dc942ca9ff687467e49b24d960a071a79f7d248e0d6f78c3e9190491c77a8d15d2c2cf511
|
|
7
|
+
data.tar.gz: b4aa54fd05a419a71a99678996d27fd6047939f5f03262b73dd52eb6fd2233ad165be2fd860c7f51ae0df864ad6c922641d2582ae7765f30ab2ac36be2e06bba
|
data/README.md
CHANGED
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
[](https://rubygems.org/gems/tear-jekyll-theme)
|
|
4
4
|
|
|
5
5
|
# About
|
|
6
|
-
Theme blog for jekyll using
|
|
6
|
+
Theme blog for jekyll using Tailwindcss and Stimulus.js.
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
## Preview
|
|
9
9
|
my blog use this theme
|
|
10
10
|
https://rokhimin.github.io
|
|
11
11
|
|
|
@@ -57,16 +57,27 @@ Run jekyll:
|
|
|
57
57
|
|
|
58
58
|
```yaml
|
|
59
59
|
title: Tear
|
|
60
|
-
email:
|
|
61
|
-
description:
|
|
60
|
+
email: whdzera@gmail.com
|
|
61
|
+
description: >-
|
|
62
|
+
Write an awesome description for your new site here. You can edit this
|
|
63
|
+
line in _config.yml. It will appear in your document head meta (for
|
|
64
|
+
Google search results) and in your feed.xml site description.
|
|
62
65
|
baseurl: ""
|
|
63
|
-
url: ""
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
66
|
+
url: ""
|
|
67
|
+
logo: Tear
|
|
68
|
+
footer: "Created with ❤ by whdzera"
|
|
69
|
+
twitter_username: tear
|
|
70
|
+
github_username: tear
|
|
71
|
+
linkedin_username: tear
|
|
72
|
+
youtube_username: tear
|
|
69
73
|
disqus: ""
|
|
74
|
+
|
|
75
|
+
plugins:
|
|
76
|
+
- jekyll-feed
|
|
77
|
+
|
|
78
|
+
markdown: kramdown
|
|
79
|
+
kramdown:
|
|
80
|
+
input: GFM"
|
|
70
81
|
```
|
|
71
82
|
|
|
72
83
|
##### Create file 'projects.markdown' in '/' to use page Projects feature
|
|
@@ -91,6 +102,22 @@ permalink: /projects/
|
|
|
91
102
|
YOUR ABOUT
|
|
92
103
|
```
|
|
93
104
|
|
|
105
|
+
## Developer
|
|
106
|
+
Run Jekyll
|
|
107
|
+
```
|
|
108
|
+
rake run
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
Run Tailwindcss mode --watch
|
|
112
|
+
```
|
|
113
|
+
rake css
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
Run Unit test
|
|
117
|
+
```
|
|
118
|
+
rake test
|
|
119
|
+
```
|
|
120
|
+
|
|
94
121
|
## Contributing
|
|
95
122
|
|
|
96
123
|
Bug reports and pull requests are welcome on GitHub at https://github.com/rokhimin/jekyll-tear. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](https://www.contributor-covenant.org/) code of conduct.
|
data/_config.yml
CHANGED
data/_includes/footer.html
CHANGED
|
@@ -1,9 +1,157 @@
|
|
|
1
1
|
<footer class="bg-white dark:bg-gray-800 shadow-inner mt-12">
|
|
2
|
-
<div class="max-w-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
2
|
+
<div class="max-w-7xl mx-auto grid md:grid-cols-3 gap-8">
|
|
3
|
+
<!-- General -->
|
|
4
|
+
<div class="mt-4 ml-4"></div>
|
|
5
|
+
|
|
6
|
+
<!-- Navigation -->
|
|
7
|
+
<div class="mt-4 ml-4 text-center">
|
|
8
|
+
<p>
|
|
9
|
+
<a
|
|
10
|
+
href="{{ '/feed' | prepend: site.baseurl }}"
|
|
11
|
+
class="hover:text-blue-400 transition"
|
|
12
|
+
>RSS Feed</a
|
|
13
|
+
>
|
|
14
|
+
|
|
|
15
|
+
<a
|
|
16
|
+
href="{{ '/gb' | prepend: site.baseurl }}"
|
|
17
|
+
class="hover:text-blue-400 transition"
|
|
18
|
+
>Guest Book</a
|
|
19
|
+
>
|
|
20
|
+
</p>
|
|
21
|
+
|
|
22
|
+
<div class="flex space-x-3 mb-1 mt-2 text-xl items-center justify-center">
|
|
23
|
+
<a
|
|
24
|
+
href="mailto:{{ site.email }}"
|
|
25
|
+
class="hover:text-blue-400 transition"
|
|
26
|
+
aria-label="Email"
|
|
27
|
+
>
|
|
28
|
+
<svg
|
|
29
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
30
|
+
fill="none"
|
|
31
|
+
viewBox="0 0 24 24"
|
|
32
|
+
stroke-width="1.5"
|
|
33
|
+
stroke="currentColor"
|
|
34
|
+
class="w-6 h-6"
|
|
35
|
+
>
|
|
36
|
+
<path
|
|
37
|
+
stroke-linecap="round"
|
|
38
|
+
stroke-linejoin="round"
|
|
39
|
+
d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75"
|
|
40
|
+
/>
|
|
41
|
+
</svg>
|
|
42
|
+
</a>
|
|
43
|
+
<a
|
|
44
|
+
href="https://github.com/{{ site.github_username }}"
|
|
45
|
+
class="hover:text-blue-400 transition"
|
|
46
|
+
aria-label="GitHub"
|
|
47
|
+
>
|
|
48
|
+
<svg
|
|
49
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
50
|
+
fill="none"
|
|
51
|
+
viewBox="0 0 24 24"
|
|
52
|
+
stroke-width="1.5"
|
|
53
|
+
stroke="currentColor"
|
|
54
|
+
class="w-6 h-6"
|
|
55
|
+
>
|
|
56
|
+
<path
|
|
57
|
+
stroke-linecap="round"
|
|
58
|
+
stroke-linejoin="round"
|
|
59
|
+
d="M12 2.25A9.75 9.75 0 0 0 2.25 12c0 4.29 2.77 7.93 6.6 9.22.48.09.65-.21.65-.47v-1.69c-2.68.58-3.25-1.3-3.25-1.3-.44-1.12-1.07-1.42-1.07-1.42-.88-.6.07-.59.07-.59.98.07 1.5.95 1.5.95.87 1.49 2.28 1.06 2.84.81.09-.64.34-1.06.62-1.3-2.16-.24-4.43-1.08-4.43-4.82 0-1.06.38-1.93 1-2.61-.1-.24-.44-1.14.1-2.38 0 0 .75-.24 2.46.92a8.44 8.44 0 0 1 4.5 0c1.71-1.16 2.46-.92 2.46-.92.54 1.24.2 2.14.1 2.38.62.68 1 1.55 1 2.61 0 3.75-2.28 4.58-4.45 4.82.35.3.66.89.66 1.8v2.67c0 .26.17.56.66.47A9.75 9.75 0 0 0 21.75 12 9.75 9.75 0 0 0 12 2.25Z"
|
|
60
|
+
/>
|
|
61
|
+
</svg>
|
|
62
|
+
</a>
|
|
63
|
+
<a
|
|
64
|
+
href="https://x.com/{{ site.twitter_username }}"
|
|
65
|
+
class="hover:text-blue-400 transition"
|
|
66
|
+
aria-label="X"
|
|
67
|
+
>
|
|
68
|
+
<svg
|
|
69
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
70
|
+
fill="currentColor"
|
|
71
|
+
viewBox="0 0 24 24"
|
|
72
|
+
class="w-5 h-5"
|
|
73
|
+
>
|
|
74
|
+
<path
|
|
75
|
+
d="M14.24 10.32 22.03 0h-2.01l-6.73 8.39L7.81 0H0l8.19 11.64L0 24h2.01l7.07-8.81L16.19 24H24l-9.76-13.68Zm-2.51 3.13-.82-1.18L3.27 1.53h3.33l6.2 8.94.82 1.18 7.99 11.54h-3.33l-6.2-8.94Z"
|
|
76
|
+
/>
|
|
77
|
+
</svg>
|
|
78
|
+
</a>
|
|
79
|
+
<a
|
|
80
|
+
href="https://linkedin.com/{{ site.linkedin_username }}"
|
|
81
|
+
class="hover:text-blue-400 transition"
|
|
82
|
+
aria-label="LinkedIn"
|
|
83
|
+
>
|
|
84
|
+
<svg
|
|
85
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
86
|
+
fill="currentColor"
|
|
87
|
+
class="w-5 h-5"
|
|
88
|
+
viewBox="0 0 24 24"
|
|
89
|
+
>
|
|
90
|
+
<path
|
|
91
|
+
d="M4.98 3.5C4.98 4.88 3.88 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1 4.98 2.12 4.98 3.5zM.48 8h4V24h-4V8zm7.5 0h3.83v2.16h.05c.53-1 1.82-2.16 3.75-2.16 4 0 4.74 2.62 4.74 6.03V24h-4v-8.38c0-2-.03-4.59-2.8-4.59-2.8 0-3.23 2.19-3.23 4.44V24h-4V8z"
|
|
92
|
+
/>
|
|
93
|
+
</svg>
|
|
94
|
+
</a>
|
|
95
|
+
<a
|
|
96
|
+
href="https://youtube.com/{{ site.youtube_username }}"
|
|
97
|
+
class="hover:text-blue-400 transition"
|
|
98
|
+
aria-label="YouTube"
|
|
99
|
+
>
|
|
100
|
+
<svg
|
|
101
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
102
|
+
fill="currentColor"
|
|
103
|
+
class="w-5 h-5"
|
|
104
|
+
viewBox="0 0 24 24"
|
|
105
|
+
>
|
|
106
|
+
<path
|
|
107
|
+
d="M23.5 6.5s-.2-1.6-.8-2.3c-.7-.9-1.5-1-1.9-1.1C17.7 3 12 3 12 3s-5.7 0-8.8.1c-.4 0-1.2.2-1.9 1.1C.7 4.9.5 6.5.5 6.5S0 8.4 0 10.3v1.4c0 1.9.5 3.8.5 3.8s.2 1.6.8 2.3c.7.9 1.7.9 2.2 1 1.6.2 6.5.2 6.5.2s5.7 0 8.8-.1c.4 0 1.2-.2 1.9-1.1.6-.7.8-2.3.8-2.3s.5-1.9.5-3.8v-1.4c0-1.9-.5-3.8-.5-3.8zM9.5 15.5v-7l6 3.5-6 3.5z"
|
|
108
|
+
/>
|
|
109
|
+
</svg>
|
|
110
|
+
</a>
|
|
7
111
|
</div>
|
|
112
|
+
</div>
|
|
113
|
+
|
|
114
|
+
<div class="flex flex-col justify-between items-start md:items-end">
|
|
115
|
+
<!-- Back to top -->
|
|
116
|
+
<a
|
|
117
|
+
href="#top"
|
|
118
|
+
class="mt-3 mr-4 ml-4 inline-flex items-center justify-center w-10 h-10 border border-gray-900 rounded-full hover:bg-gray-400 hover:text-gray-900 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
|
|
119
|
+
aria-label="Up"
|
|
120
|
+
>
|
|
121
|
+
<svg
|
|
122
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
123
|
+
fill="none"
|
|
124
|
+
viewBox="0 0 24 24"
|
|
125
|
+
stroke-width="1.5"
|
|
126
|
+
stroke="currentColor"
|
|
127
|
+
class="w-6 h-6"
|
|
128
|
+
>
|
|
129
|
+
<path
|
|
130
|
+
stroke-linecap="round"
|
|
131
|
+
stroke-linejoin="round"
|
|
132
|
+
d="M8.25 6.75 12 3m0 0 3.75 3.75M12 3v18"
|
|
133
|
+
/>
|
|
134
|
+
</svg>
|
|
135
|
+
</a>
|
|
136
|
+
</div>
|
|
137
|
+
</div>
|
|
138
|
+
|
|
139
|
+
<!-- Optional bottom border -->
|
|
140
|
+
<div class="mt-3 border-t border-gray-700"></div>
|
|
141
|
+
|
|
142
|
+
<div class="max-w-6xl mx-auto px-4 py-8">
|
|
143
|
+
<div class="text-center text-gray-500 dark:text-gray-400">
|
|
144
|
+
<p>{{ site.footer }}</p>
|
|
145
|
+
<p>
|
|
146
|
+
Powered by
|
|
147
|
+
<a href="https://jekyllrb.com/" class="text-blue-400">Jekyll</a>
|
|
148
|
+
</p>
|
|
149
|
+
<p>
|
|
150
|
+
©{{ site.time | date: '%Y' }}
|
|
151
|
+
<a href="https://github.com/rokhimin/jekyll-tear" class="text-blue-400"
|
|
152
|
+
>Tear Theme</a
|
|
153
|
+
>.
|
|
154
|
+
</p>
|
|
155
|
+
</div>
|
|
8
156
|
</div>
|
|
9
|
-
</footer>
|
|
157
|
+
</footer>
|
data/_includes/navigation.html
CHANGED
|
@@ -12,20 +12,41 @@
|
|
|
12
12
|
<!-- Desktop Navigation -->
|
|
13
13
|
<div class="hidden md:flex items-center space-x-1">
|
|
14
14
|
<a
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
15
|
+
href="{{ '/' | relative_url }}"
|
|
16
|
+
class="block rounded px-4 py-2 transition-colors duration-300
|
|
17
|
+
{% if page.url == '/' %}
|
|
18
|
+
text-gray-900 dark:text-blue-400 font-semibold bg-gray-300 dark:bg-gray-700
|
|
19
|
+
{% else %}
|
|
20
|
+
text-gray-700 dark:text-gray-200 hover:text-primary dark:hover:text-primary hover:bg-gray-100 dark:hover:bg-gray-700
|
|
21
|
+
{% endif %}"
|
|
22
|
+
>
|
|
23
|
+
Home
|
|
24
|
+
</a>
|
|
25
|
+
|
|
26
|
+
<a
|
|
27
|
+
href="{{ '/projects/' | relative_url }}"
|
|
28
|
+
class="block rounded px-4 py-2 transition-colors duration-300
|
|
29
|
+
{% if page.url == '/projects/' %}
|
|
30
|
+
text-gray-900 dark:text-blue-400 font-semibold bg-gray-300 dark:bg-gray-700
|
|
31
|
+
{% else %}
|
|
32
|
+
text-gray-700 dark:text-gray-200 hover:text-primary dark:hover:text-primary hover:bg-gray-100 dark:hover:bg-gray-700
|
|
33
|
+
{% endif %}"
|
|
34
|
+
>
|
|
35
|
+
Projects
|
|
36
|
+
</a>
|
|
37
|
+
|
|
38
|
+
<a
|
|
39
|
+
href="{{ '/about/' | relative_url }}"
|
|
40
|
+
class="block rounded px-4 py-2 transition-colors duration-300
|
|
41
|
+
{% if page.url == '/about/' %}
|
|
42
|
+
text-gray-900 dark:text-blue-400 font-semibold bg-gray-300 dark:bg-gray-700
|
|
43
|
+
{% else %}
|
|
44
|
+
text-gray-700 dark:text-gray-200 hover:text-primary dark:hover:text-primary hover:bg-gray-100 dark:hover:bg-gray-700
|
|
45
|
+
{% endif %}"
|
|
46
|
+
>
|
|
47
|
+
About
|
|
48
|
+
</a>
|
|
49
|
+
|
|
29
50
|
|
|
30
51
|
<!-- Dark Mode Toggle Desktop -->
|
|
31
52
|
<button
|
data/_layouts/about.html
CHANGED
|
@@ -2,15 +2,15 @@
|
|
|
2
2
|
layout: default
|
|
3
3
|
---
|
|
4
4
|
|
|
5
|
+
<div class="text-center mb-12">
|
|
6
|
+
<h1 class="text-4xl font-bold text-gray-800 dark:text-white mb-4">
|
|
7
|
+
About me
|
|
8
|
+
</h1>
|
|
9
|
+
</div>
|
|
5
10
|
<div
|
|
6
11
|
class="relative md:mr-25 md:ml-25 bg-white dark:bg-gray-800 rounded-l-lg rounded-r-lg shadow-lg overflow-hidden mb-6"
|
|
7
12
|
>
|
|
8
|
-
<h1 class="text-3xl ml-5 mt-2 md:text-4xl font-bold text-primary dark:text-blue-400 animate-fade-in">
|
|
9
|
-
About
|
|
10
|
-
</h1>
|
|
11
13
|
<article class="max-w-4xl mx-auto px-4 sm:px-6 py-4">
|
|
12
|
-
<div class="h-px w-full bg-gradient-to-r from-black to-transparent dark:from-blue-400 mb-8"></div>
|
|
13
|
-
|
|
14
14
|
|
|
15
15
|
<div class="prose dark:prose-invert prose-lg max-w-none text-gray-700 dark:text-gray-200">
|
|
16
16
|
{{ content }}
|
data/_layouts/home.html
CHANGED
|
@@ -12,40 +12,43 @@ layout: default
|
|
|
12
12
|
</p>
|
|
13
13
|
</div>
|
|
14
14
|
|
|
15
|
+
<!-- Post Grid -->
|
|
16
|
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:mx-24 mb-6">
|
|
15
17
|
{% assign posts_by_year = site.posts | group_by_exp:"post", "post.date | date:
|
|
16
18
|
'%Y'" %} {% for year in posts_by_year %} {% for post in year.items %}
|
|
17
|
-
<!-- Post Card -->
|
|
18
|
-
<div
|
|
19
|
-
class="relative md:mr-25 md:ml-25 bg-white dark:bg-gray-800 rounded-l-lg rounded-r-lg shadow-lg overflow-hidden mb-6"
|
|
20
|
-
>
|
|
21
|
-
<!-- Thumbnail -->
|
|
22
|
-
{% if post.thumbnail %}
|
|
23
|
-
<a href="{{ post.url | relative_url }}" data-controller="thumbnail">
|
|
24
|
-
<img
|
|
25
|
-
src="{{ post.thumbnail }}"
|
|
26
|
-
alt="Thumbnail {{ post.title }}"
|
|
27
|
-
data-thumbnail-target="image"
|
|
28
|
-
class="w-full h-48 object-cover transition duration-300 ease-in-out rounded-lg"
|
|
29
|
-
/>
|
|
30
|
-
</a>
|
|
31
|
-
|
|
32
|
-
{% endif %}
|
|
33
|
-
|
|
34
|
-
<!-- Post Content -->
|
|
35
|
-
<div class="p-3">
|
|
36
|
-
<div
|
|
37
|
-
class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-1"
|
|
38
|
-
>
|
|
39
|
-
<i class="far fa-calendar"></i>
|
|
40
|
-
<span>{{ post.date | date: "%b %-d, %Y" }}</span>
|
|
41
|
-
</div>
|
|
42
19
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
20
|
+
<!-- Post Card -->
|
|
21
|
+
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
|
|
22
|
+
|
|
23
|
+
<!-- Thumbnail -->
|
|
24
|
+
{% if post.thumbnail %}
|
|
25
|
+
<a href="{{ post.url | relative_url }}" data-controller="thumbnail">
|
|
26
|
+
<div class="w-full h-48 overflow-hidden rounded-t-lg">
|
|
27
|
+
<img
|
|
28
|
+
src="{{ post.thumbnail }}"
|
|
29
|
+
alt="Thumbnail {{ post.title }}"
|
|
30
|
+
data-thumbnail-target="image"
|
|
31
|
+
class="w-full h-full object-cover transform transition-transform duration-300 ease-in-out"
|
|
32
|
+
/>
|
|
33
|
+
</div>
|
|
34
|
+
</a>
|
|
35
|
+
|
|
36
|
+
{% endif %}
|
|
37
|
+
|
|
38
|
+
<!-- Post Content -->
|
|
39
|
+
<div class="p-4">
|
|
40
|
+
<div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-2 space-x-2">
|
|
41
|
+
<i class="far fa-calendar"></i>
|
|
42
|
+
<span>{{ post.date | date: "%b %-d, %Y" }} - {{ post.author }}</span>
|
|
43
|
+
</div>
|
|
44
|
+
|
|
45
|
+
<h3 class="text-xl font-bold text-gray-800 dark:text-white hover:text-primary transition-colors">
|
|
46
|
+
<a href="{{ post.url | relative_url }}">{{ post.title }}</a>
|
|
47
|
+
</h3>
|
|
48
|
+
</div>
|
|
48
49
|
</div>
|
|
49
|
-
|
|
50
|
+
|
|
50
51
|
|
|
51
52
|
{% endfor %} {% endfor %}
|
|
53
|
+
|
|
54
|
+
</div>
|
data/assets/css/output.css
CHANGED
|
@@ -3,8 +3,9 @@
|
|
|
3
3
|
@layer theme {
|
|
4
4
|
:root, :host {
|
|
5
5
|
--color-yellow-400: oklch(85.2% 0.199 91.936);
|
|
6
|
+
--color-blue-100: oklch(93.2% 0.032 255.585);
|
|
7
|
+
--color-blue-300: oklch(80.9% 0.105 251.813);
|
|
6
8
|
--color-blue-400: oklch(70.7% 0.165 254.624);
|
|
7
|
-
--color-blue-500: oklch(62.3% 0.214 259.815);
|
|
8
9
|
--color-gray-100: oklch(96.7% 0.003 264.542);
|
|
9
10
|
--color-gray-200: oklch(92.8% 0.006 264.531);
|
|
10
11
|
--color-gray-300: oklch(87.2% 0.01 258.338);
|
|
@@ -14,27 +15,27 @@
|
|
|
14
15
|
--color-gray-700: oklch(37.3% 0.034 259.733);
|
|
15
16
|
--color-gray-800: oklch(27.8% 0.033 256.848);
|
|
16
17
|
--color-gray-900: oklch(21% 0.034 264.665);
|
|
18
|
+
--color-gray-950: oklch(13% 0.028 261.692);
|
|
17
19
|
--color-neutral-400: oklch(70.8% 0 0);
|
|
18
|
-
--color-neutral-500: oklch(55.6% 0 0);
|
|
19
|
-
--color-neutral-600: oklch(43.9% 0 0);
|
|
20
20
|
--color-neutral-700: oklch(37.1% 0 0);
|
|
21
|
-
--color-neutral-800: oklch(26.9% 0 0);
|
|
22
|
-
--color-neutral-900: oklch(20.5% 0 0);
|
|
23
|
-
--color-neutral-950: oklch(14.5% 0 0);
|
|
24
21
|
--color-black: #000;
|
|
25
22
|
--color-white: #fff;
|
|
26
23
|
--spacing: 0.25rem;
|
|
27
24
|
--container-2xl: 42rem;
|
|
28
25
|
--container-4xl: 56rem;
|
|
29
26
|
--container-6xl: 72rem;
|
|
27
|
+
--container-7xl: 80rem;
|
|
30
28
|
--text-sm: 0.875rem;
|
|
31
29
|
--text-sm--line-height: calc(1.25 / 0.875);
|
|
30
|
+
--text-xl: 1.25rem;
|
|
31
|
+
--text-xl--line-height: calc(1.75 / 1.25);
|
|
32
32
|
--text-2xl: 1.5rem;
|
|
33
33
|
--text-2xl--line-height: calc(2 / 1.5);
|
|
34
34
|
--text-3xl: 1.875rem;
|
|
35
35
|
--text-3xl--line-height: calc(2.25 / 1.875);
|
|
36
36
|
--text-4xl: 2.25rem;
|
|
37
37
|
--text-4xl--line-height: calc(2.5 / 2.25);
|
|
38
|
+
--font-weight-semibold: 600;
|
|
38
39
|
--font-weight-bold: 700;
|
|
39
40
|
--radius-lg: 0.5rem;
|
|
40
41
|
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
|
@@ -828,9 +829,21 @@
|
|
|
828
829
|
margin-bottom: 0;
|
|
829
830
|
}
|
|
830
831
|
}
|
|
832
|
+
.mt-1 {
|
|
833
|
+
margin-top: calc(var(--spacing) * 1);
|
|
834
|
+
}
|
|
831
835
|
.mt-2 {
|
|
832
836
|
margin-top: calc(var(--spacing) * 2);
|
|
833
837
|
}
|
|
838
|
+
.mt-3 {
|
|
839
|
+
margin-top: calc(var(--spacing) * 3);
|
|
840
|
+
}
|
|
841
|
+
.mt-4 {
|
|
842
|
+
margin-top: calc(var(--spacing) * 4);
|
|
843
|
+
}
|
|
844
|
+
.mt-6 {
|
|
845
|
+
margin-top: calc(var(--spacing) * 6);
|
|
846
|
+
}
|
|
834
847
|
.mt-8 {
|
|
835
848
|
margin-top: calc(var(--spacing) * 8);
|
|
836
849
|
}
|
|
@@ -840,15 +853,15 @@
|
|
|
840
853
|
.mr-2 {
|
|
841
854
|
margin-right: calc(var(--spacing) * 2);
|
|
842
855
|
}
|
|
843
|
-
.mr-
|
|
844
|
-
margin-right: calc(var(--spacing) *
|
|
845
|
-
}
|
|
846
|
-
.mr-5 {
|
|
847
|
-
margin-right: calc(var(--spacing) * 5);
|
|
856
|
+
.mr-4 {
|
|
857
|
+
margin-right: calc(var(--spacing) * 4);
|
|
848
858
|
}
|
|
849
859
|
.mb-1 {
|
|
850
860
|
margin-bottom: calc(var(--spacing) * 1);
|
|
851
861
|
}
|
|
862
|
+
.mb-2 {
|
|
863
|
+
margin-bottom: calc(var(--spacing) * 2);
|
|
864
|
+
}
|
|
852
865
|
.mb-4 {
|
|
853
866
|
margin-bottom: calc(var(--spacing) * 4);
|
|
854
867
|
}
|
|
@@ -861,6 +874,9 @@
|
|
|
861
874
|
.mb-12 {
|
|
862
875
|
margin-bottom: calc(var(--spacing) * 12);
|
|
863
876
|
}
|
|
877
|
+
.ml-4 {
|
|
878
|
+
margin-left: calc(var(--spacing) * 4);
|
|
879
|
+
}
|
|
864
880
|
.ml-5 {
|
|
865
881
|
margin-left: calc(var(--spacing) * 5);
|
|
866
882
|
}
|
|
@@ -870,12 +886,22 @@
|
|
|
870
886
|
.flex {
|
|
871
887
|
display: flex;
|
|
872
888
|
}
|
|
889
|
+
.grid {
|
|
890
|
+
display: grid;
|
|
891
|
+
}
|
|
873
892
|
.hidden {
|
|
874
893
|
display: none;
|
|
875
894
|
}
|
|
895
|
+
.inline-flex {
|
|
896
|
+
display: inline-flex;
|
|
897
|
+
}
|
|
876
898
|
.table {
|
|
877
899
|
display: table;
|
|
878
900
|
}
|
|
901
|
+
.size-6 {
|
|
902
|
+
width: calc(var(--spacing) * 6);
|
|
903
|
+
height: calc(var(--spacing) * 6);
|
|
904
|
+
}
|
|
879
905
|
.h-5 {
|
|
880
906
|
height: calc(var(--spacing) * 5);
|
|
881
907
|
}
|
|
@@ -885,9 +911,24 @@
|
|
|
885
911
|
.h-7 {
|
|
886
912
|
height: calc(var(--spacing) * 7);
|
|
887
913
|
}
|
|
914
|
+
.h-9 {
|
|
915
|
+
height: calc(var(--spacing) * 9);
|
|
916
|
+
}
|
|
917
|
+
.h-10 {
|
|
918
|
+
height: calc(var(--spacing) * 10);
|
|
919
|
+
}
|
|
920
|
+
.h-38 {
|
|
921
|
+
height: calc(var(--spacing) * 38);
|
|
922
|
+
}
|
|
888
923
|
.h-48 {
|
|
889
924
|
height: calc(var(--spacing) * 48);
|
|
890
925
|
}
|
|
926
|
+
.h-50 {
|
|
927
|
+
height: calc(var(--spacing) * 50);
|
|
928
|
+
}
|
|
929
|
+
.h-full {
|
|
930
|
+
height: 100%;
|
|
931
|
+
}
|
|
891
932
|
.h-px {
|
|
892
933
|
height: 1px;
|
|
893
934
|
}
|
|
@@ -903,6 +944,12 @@
|
|
|
903
944
|
.w-7 {
|
|
904
945
|
width: calc(var(--spacing) * 7);
|
|
905
946
|
}
|
|
947
|
+
.w-9 {
|
|
948
|
+
width: calc(var(--spacing) * 9);
|
|
949
|
+
}
|
|
950
|
+
.w-10 {
|
|
951
|
+
width: calc(var(--spacing) * 10);
|
|
952
|
+
}
|
|
906
953
|
.w-full {
|
|
907
954
|
width: 100%;
|
|
908
955
|
}
|
|
@@ -915,27 +962,82 @@
|
|
|
915
962
|
.max-w-6xl {
|
|
916
963
|
max-width: var(--container-6xl);
|
|
917
964
|
}
|
|
965
|
+
.max-w-7xl {
|
|
966
|
+
max-width: var(--container-7xl);
|
|
967
|
+
}
|
|
918
968
|
.max-w-none {
|
|
919
969
|
max-width: none;
|
|
920
970
|
}
|
|
921
971
|
.border-collapse {
|
|
922
972
|
border-collapse: collapse;
|
|
923
973
|
}
|
|
974
|
+
.scale-10 {
|
|
975
|
+
--tw-scale-x: 10%;
|
|
976
|
+
--tw-scale-y: 10%;
|
|
977
|
+
--tw-scale-z: 10%;
|
|
978
|
+
scale: var(--tw-scale-x) var(--tw-scale-y);
|
|
979
|
+
}
|
|
980
|
+
.scale-100 {
|
|
981
|
+
--tw-scale-x: 100%;
|
|
982
|
+
--tw-scale-y: 100%;
|
|
983
|
+
--tw-scale-z: 100%;
|
|
984
|
+
scale: var(--tw-scale-x) var(--tw-scale-y);
|
|
985
|
+
}
|
|
924
986
|
.scale-135 {
|
|
925
987
|
--tw-scale-x: 135%;
|
|
926
988
|
--tw-scale-y: 135%;
|
|
927
989
|
--tw-scale-z: 135%;
|
|
928
990
|
scale: var(--tw-scale-x) var(--tw-scale-y);
|
|
929
991
|
}
|
|
992
|
+
.scale-165 {
|
|
993
|
+
--tw-scale-x: 165%;
|
|
994
|
+
--tw-scale-y: 165%;
|
|
995
|
+
--tw-scale-z: 165%;
|
|
996
|
+
scale: var(--tw-scale-x) var(--tw-scale-y);
|
|
997
|
+
}
|
|
998
|
+
.scale-190 {
|
|
999
|
+
--tw-scale-x: 190%;
|
|
1000
|
+
--tw-scale-y: 190%;
|
|
1001
|
+
--tw-scale-z: 190%;
|
|
1002
|
+
scale: var(--tw-scale-x) var(--tw-scale-y);
|
|
1003
|
+
}
|
|
1004
|
+
.transform {
|
|
1005
|
+
transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
|
|
1006
|
+
}
|
|
930
1007
|
.resize {
|
|
931
1008
|
resize: both;
|
|
932
1009
|
}
|
|
1010
|
+
.grid-cols-1 {
|
|
1011
|
+
grid-template-columns: repeat(1, minmax(0, 1fr));
|
|
1012
|
+
}
|
|
1013
|
+
.flex-col {
|
|
1014
|
+
flex-direction: column;
|
|
1015
|
+
}
|
|
933
1016
|
.items-center {
|
|
934
1017
|
align-items: center;
|
|
935
1018
|
}
|
|
1019
|
+
.items-start {
|
|
1020
|
+
align-items: flex-start;
|
|
1021
|
+
}
|
|
936
1022
|
.justify-between {
|
|
937
1023
|
justify-content: space-between;
|
|
938
1024
|
}
|
|
1025
|
+
.justify-center {
|
|
1026
|
+
justify-content: center;
|
|
1027
|
+
}
|
|
1028
|
+
.gap-6 {
|
|
1029
|
+
gap: calc(var(--spacing) * 6);
|
|
1030
|
+
}
|
|
1031
|
+
.gap-8 {
|
|
1032
|
+
gap: calc(var(--spacing) * 8);
|
|
1033
|
+
}
|
|
1034
|
+
.space-y-1 {
|
|
1035
|
+
:where(& > :not(:last-child)) {
|
|
1036
|
+
--tw-space-y-reverse: 0;
|
|
1037
|
+
margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
|
|
1038
|
+
margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
|
|
1039
|
+
}
|
|
1040
|
+
}
|
|
939
1041
|
.space-x-1 {
|
|
940
1042
|
:where(& > :not(:last-child)) {
|
|
941
1043
|
--tw-space-x-reverse: 0;
|
|
@@ -943,6 +1045,20 @@
|
|
|
943
1045
|
margin-inline-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse)));
|
|
944
1046
|
}
|
|
945
1047
|
}
|
|
1048
|
+
.space-x-2 {
|
|
1049
|
+
:where(& > :not(:last-child)) {
|
|
1050
|
+
--tw-space-x-reverse: 0;
|
|
1051
|
+
margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
|
|
1052
|
+
margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
|
|
1053
|
+
}
|
|
1054
|
+
}
|
|
1055
|
+
.space-x-3 {
|
|
1056
|
+
:where(& > :not(:last-child)) {
|
|
1057
|
+
--tw-space-x-reverse: 0;
|
|
1058
|
+
margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));
|
|
1059
|
+
margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
|
|
1060
|
+
}
|
|
1061
|
+
}
|
|
946
1062
|
.space-x-4 {
|
|
947
1063
|
:where(& > :not(:last-child)) {
|
|
948
1064
|
--tw-space-x-reverse: 0;
|
|
@@ -961,12 +1077,19 @@
|
|
|
961
1077
|
.overflow-y-auto {
|
|
962
1078
|
overflow-y: auto;
|
|
963
1079
|
}
|
|
1080
|
+
.rounded {
|
|
1081
|
+
border-radius: 0.25rem;
|
|
1082
|
+
}
|
|
964
1083
|
.rounded-full {
|
|
965
1084
|
border-radius: calc(infinity * 1px);
|
|
966
1085
|
}
|
|
967
1086
|
.rounded-lg {
|
|
968
1087
|
border-radius: var(--radius-lg);
|
|
969
1088
|
}
|
|
1089
|
+
.rounded-t-lg {
|
|
1090
|
+
border-top-left-radius: var(--radius-lg);
|
|
1091
|
+
border-top-right-radius: var(--radius-lg);
|
|
1092
|
+
}
|
|
970
1093
|
.rounded-l-lg {
|
|
971
1094
|
border-top-left-radius: var(--radius-lg);
|
|
972
1095
|
border-bottom-left-radius: var(--radius-lg);
|
|
@@ -979,9 +1102,34 @@
|
|
|
979
1102
|
border-style: var(--tw-border-style);
|
|
980
1103
|
border-width: 1px;
|
|
981
1104
|
}
|
|
1105
|
+
.border-t {
|
|
1106
|
+
border-top-style: var(--tw-border-style);
|
|
1107
|
+
border-top-width: 1px;
|
|
1108
|
+
}
|
|
1109
|
+
.border-gray-400 {
|
|
1110
|
+
border-color: var(--color-gray-400);
|
|
1111
|
+
}
|
|
1112
|
+
.border-gray-700 {
|
|
1113
|
+
border-color: var(--color-gray-700);
|
|
1114
|
+
}
|
|
1115
|
+
.border-gray-900 {
|
|
1116
|
+
border-color: var(--color-gray-900);
|
|
1117
|
+
}
|
|
1118
|
+
.border-yellow-400 {
|
|
1119
|
+
border-color: var(--color-yellow-400);
|
|
1120
|
+
}
|
|
1121
|
+
.border-t-blue-400 {
|
|
1122
|
+
border-top-color: var(--color-blue-400);
|
|
1123
|
+
}
|
|
1124
|
+
.border-b-blue-400 {
|
|
1125
|
+
border-bottom-color: var(--color-blue-400);
|
|
1126
|
+
}
|
|
982
1127
|
.bg-gray-100 {
|
|
983
1128
|
background-color: var(--color-gray-100);
|
|
984
1129
|
}
|
|
1130
|
+
.bg-gray-300 {
|
|
1131
|
+
background-color: var(--color-gray-300);
|
|
1132
|
+
}
|
|
985
1133
|
.bg-white {
|
|
986
1134
|
background-color: var(--color-white);
|
|
987
1135
|
}
|
|
@@ -1000,14 +1148,17 @@
|
|
|
1000
1148
|
.object-cover {
|
|
1001
1149
|
object-fit: cover;
|
|
1002
1150
|
}
|
|
1151
|
+
.object-center {
|
|
1152
|
+
object-position: center;
|
|
1153
|
+
}
|
|
1003
1154
|
.p-2 {
|
|
1004
1155
|
padding: calc(var(--spacing) * 2);
|
|
1005
1156
|
}
|
|
1006
1157
|
.p-3 {
|
|
1007
1158
|
padding: calc(var(--spacing) * 3);
|
|
1008
1159
|
}
|
|
1009
|
-
.
|
|
1010
|
-
padding
|
|
1160
|
+
.p-4 {
|
|
1161
|
+
padding: calc(var(--spacing) * 4);
|
|
1011
1162
|
}
|
|
1012
1163
|
.px-3 {
|
|
1013
1164
|
padding-inline: calc(var(--spacing) * 3);
|
|
@@ -1027,12 +1178,12 @@
|
|
|
1027
1178
|
.py-8 {
|
|
1028
1179
|
padding-block: calc(var(--spacing) * 8);
|
|
1029
1180
|
}
|
|
1030
|
-
.pt-6 {
|
|
1031
|
-
padding-top: calc(var(--spacing) * 6);
|
|
1032
|
-
}
|
|
1033
1181
|
.text-center {
|
|
1034
1182
|
text-align: center;
|
|
1035
1183
|
}
|
|
1184
|
+
.text-right {
|
|
1185
|
+
text-align: right;
|
|
1186
|
+
}
|
|
1036
1187
|
.text-2xl {
|
|
1037
1188
|
font-size: var(--text-2xl);
|
|
1038
1189
|
line-height: var(--tw-leading, var(--text-2xl--line-height));
|
|
@@ -1049,13 +1200,24 @@
|
|
|
1049
1200
|
font-size: var(--text-sm);
|
|
1050
1201
|
line-height: var(--tw-leading, var(--text-sm--line-height));
|
|
1051
1202
|
}
|
|
1203
|
+
.text-xl {
|
|
1204
|
+
font-size: var(--text-xl);
|
|
1205
|
+
line-height: var(--tw-leading, var(--text-xl--line-height));
|
|
1206
|
+
}
|
|
1052
1207
|
.font-bold {
|
|
1053
1208
|
--tw-font-weight: var(--font-weight-bold);
|
|
1054
1209
|
font-weight: var(--font-weight-bold);
|
|
1055
1210
|
}
|
|
1211
|
+
.font-semibold {
|
|
1212
|
+
--tw-font-weight: var(--font-weight-semibold);
|
|
1213
|
+
font-weight: var(--font-weight-semibold);
|
|
1214
|
+
}
|
|
1056
1215
|
.text-blue-400 {
|
|
1057
1216
|
color: var(--color-blue-400);
|
|
1058
1217
|
}
|
|
1218
|
+
.text-gray-400 {
|
|
1219
|
+
color: var(--color-gray-400);
|
|
1220
|
+
}
|
|
1059
1221
|
.text-gray-500 {
|
|
1060
1222
|
color: var(--color-gray-500);
|
|
1061
1223
|
}
|
|
@@ -1068,6 +1230,12 @@
|
|
|
1068
1230
|
.text-gray-800 {
|
|
1069
1231
|
color: var(--color-gray-800);
|
|
1070
1232
|
}
|
|
1233
|
+
.text-gray-900 {
|
|
1234
|
+
color: var(--color-gray-900);
|
|
1235
|
+
}
|
|
1236
|
+
.text-white {
|
|
1237
|
+
color: var(--color-white);
|
|
1238
|
+
}
|
|
1071
1239
|
.text-yellow-400 {
|
|
1072
1240
|
color: var(--color-yellow-400);
|
|
1073
1241
|
}
|
|
@@ -1116,6 +1284,10 @@
|
|
|
1116
1284
|
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
1117
1285
|
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
1118
1286
|
}
|
|
1287
|
+
.duration-200 {
|
|
1288
|
+
--tw-duration: 200ms;
|
|
1289
|
+
transition-duration: 200ms;
|
|
1290
|
+
}
|
|
1119
1291
|
.duration-300 {
|
|
1120
1292
|
--tw-duration: 300ms;
|
|
1121
1293
|
transition-duration: 300ms;
|
|
@@ -1124,6 +1296,89 @@
|
|
|
1124
1296
|
--tw-ease: var(--ease-in-out);
|
|
1125
1297
|
transition-timing-function: var(--ease-in-out);
|
|
1126
1298
|
}
|
|
1299
|
+
.after\:absolute {
|
|
1300
|
+
&::after {
|
|
1301
|
+
content: var(--tw-content);
|
|
1302
|
+
position: absolute;
|
|
1303
|
+
}
|
|
1304
|
+
}
|
|
1305
|
+
.after\:bottom-1 {
|
|
1306
|
+
&::after {
|
|
1307
|
+
content: var(--tw-content);
|
|
1308
|
+
bottom: calc(var(--spacing) * 1);
|
|
1309
|
+
}
|
|
1310
|
+
}
|
|
1311
|
+
.after\:left-3 {
|
|
1312
|
+
&::after {
|
|
1313
|
+
content: var(--tw-content);
|
|
1314
|
+
left: calc(var(--spacing) * 3);
|
|
1315
|
+
}
|
|
1316
|
+
}
|
|
1317
|
+
.after\:h-0\.5 {
|
|
1318
|
+
&::after {
|
|
1319
|
+
content: var(--tw-content);
|
|
1320
|
+
height: calc(var(--spacing) * 0.5);
|
|
1321
|
+
}
|
|
1322
|
+
}
|
|
1323
|
+
.after\:w-2\/3 {
|
|
1324
|
+
&::after {
|
|
1325
|
+
content: var(--tw-content);
|
|
1326
|
+
width: calc(2/3 * 100%);
|
|
1327
|
+
}
|
|
1328
|
+
}
|
|
1329
|
+
.after\:origin-left {
|
|
1330
|
+
&::after {
|
|
1331
|
+
content: var(--tw-content);
|
|
1332
|
+
transform-origin: left;
|
|
1333
|
+
}
|
|
1334
|
+
}
|
|
1335
|
+
.after\:scale-x-0 {
|
|
1336
|
+
&::after {
|
|
1337
|
+
content: var(--tw-content);
|
|
1338
|
+
--tw-scale-x: 0%;
|
|
1339
|
+
scale: var(--tw-scale-x) var(--tw-scale-y);
|
|
1340
|
+
}
|
|
1341
|
+
}
|
|
1342
|
+
.after\:scale-x-100 {
|
|
1343
|
+
&::after {
|
|
1344
|
+
content: var(--tw-content);
|
|
1345
|
+
--tw-scale-x: 100%;
|
|
1346
|
+
scale: var(--tw-scale-x) var(--tw-scale-y);
|
|
1347
|
+
}
|
|
1348
|
+
}
|
|
1349
|
+
.after\:transition-transform {
|
|
1350
|
+
&::after {
|
|
1351
|
+
content: var(--tw-content);
|
|
1352
|
+
transition-property: transform, translate, scale, rotate;
|
|
1353
|
+
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
1354
|
+
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
1355
|
+
}
|
|
1356
|
+
}
|
|
1357
|
+
.after\:duration-300 {
|
|
1358
|
+
&::after {
|
|
1359
|
+
content: var(--tw-content);
|
|
1360
|
+
--tw-duration: 300ms;
|
|
1361
|
+
transition-duration: 300ms;
|
|
1362
|
+
}
|
|
1363
|
+
}
|
|
1364
|
+
.after\:content-\[\'\'\] {
|
|
1365
|
+
&::after {
|
|
1366
|
+
content: var(--tw-content);
|
|
1367
|
+
--tw-content: '';
|
|
1368
|
+
content: var(--tw-content);
|
|
1369
|
+
}
|
|
1370
|
+
}
|
|
1371
|
+
.group-hover\:after\:scale-x-100 {
|
|
1372
|
+
&:is(:where(.group):hover *) {
|
|
1373
|
+
@media (hover: hover) {
|
|
1374
|
+
&::after {
|
|
1375
|
+
content: var(--tw-content);
|
|
1376
|
+
--tw-scale-x: 100%;
|
|
1377
|
+
scale: var(--tw-scale-x) var(--tw-scale-y);
|
|
1378
|
+
}
|
|
1379
|
+
}
|
|
1380
|
+
}
|
|
1381
|
+
}
|
|
1127
1382
|
.hover\:scale-105 {
|
|
1128
1383
|
&:hover {
|
|
1129
1384
|
@media (hover: hover) {
|
|
@@ -1134,6 +1389,13 @@
|
|
|
1134
1389
|
}
|
|
1135
1390
|
}
|
|
1136
1391
|
}
|
|
1392
|
+
.hover\:bg-gray-100 {
|
|
1393
|
+
&:hover {
|
|
1394
|
+
@media (hover: hover) {
|
|
1395
|
+
background-color: var(--color-gray-100);
|
|
1396
|
+
}
|
|
1397
|
+
}
|
|
1398
|
+
}
|
|
1137
1399
|
.hover\:bg-gray-200 {
|
|
1138
1400
|
&:hover {
|
|
1139
1401
|
@media (hover: hover) {
|
|
@@ -1141,6 +1403,65 @@
|
|
|
1141
1403
|
}
|
|
1142
1404
|
}
|
|
1143
1405
|
}
|
|
1406
|
+
.hover\:bg-gray-400 {
|
|
1407
|
+
&:hover {
|
|
1408
|
+
@media (hover: hover) {
|
|
1409
|
+
background-color: var(--color-gray-400);
|
|
1410
|
+
}
|
|
1411
|
+
}
|
|
1412
|
+
}
|
|
1413
|
+
.hover\:bg-yellow-400 {
|
|
1414
|
+
&:hover {
|
|
1415
|
+
@media (hover: hover) {
|
|
1416
|
+
background-color: var(--color-yellow-400);
|
|
1417
|
+
}
|
|
1418
|
+
}
|
|
1419
|
+
}
|
|
1420
|
+
.hover\:text-\[\#0f172a\] {
|
|
1421
|
+
&:hover {
|
|
1422
|
+
@media (hover: hover) {
|
|
1423
|
+
color: #0f172a;
|
|
1424
|
+
}
|
|
1425
|
+
}
|
|
1426
|
+
}
|
|
1427
|
+
.hover\:text-blue-400 {
|
|
1428
|
+
&:hover {
|
|
1429
|
+
@media (hover: hover) {
|
|
1430
|
+
color: var(--color-blue-400);
|
|
1431
|
+
}
|
|
1432
|
+
}
|
|
1433
|
+
}
|
|
1434
|
+
.hover\:text-gray-900 {
|
|
1435
|
+
&:hover {
|
|
1436
|
+
@media (hover: hover) {
|
|
1437
|
+
color: var(--color-gray-900);
|
|
1438
|
+
}
|
|
1439
|
+
}
|
|
1440
|
+
}
|
|
1441
|
+
.hover\:text-white {
|
|
1442
|
+
&:hover {
|
|
1443
|
+
@media (hover: hover) {
|
|
1444
|
+
color: var(--color-white);
|
|
1445
|
+
}
|
|
1446
|
+
}
|
|
1447
|
+
}
|
|
1448
|
+
.focus\:ring-2 {
|
|
1449
|
+
&:focus {
|
|
1450
|
+
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
|
|
1451
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
1452
|
+
}
|
|
1453
|
+
}
|
|
1454
|
+
.focus\:ring-gray-500 {
|
|
1455
|
+
&:focus {
|
|
1456
|
+
--tw-ring-color: var(--color-gray-500);
|
|
1457
|
+
}
|
|
1458
|
+
}
|
|
1459
|
+
.focus\:ring-offset-2 {
|
|
1460
|
+
&:focus {
|
|
1461
|
+
--tw-ring-offset-width: 2px;
|
|
1462
|
+
--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
1463
|
+
}
|
|
1464
|
+
}
|
|
1144
1465
|
.focus\:outline-none {
|
|
1145
1466
|
&:focus {
|
|
1146
1467
|
--tw-outline-style: none;
|
|
@@ -1152,6 +1473,11 @@
|
|
|
1152
1473
|
padding-inline: calc(var(--spacing) * 6);
|
|
1153
1474
|
}
|
|
1154
1475
|
}
|
|
1476
|
+
.md\:mx-24 {
|
|
1477
|
+
@media (width >= 48rem) {
|
|
1478
|
+
margin-inline: calc(var(--spacing) * 24);
|
|
1479
|
+
}
|
|
1480
|
+
}
|
|
1155
1481
|
.md\:mr-25 {
|
|
1156
1482
|
@media (width >= 48rem) {
|
|
1157
1483
|
margin-right: calc(var(--spacing) * 25);
|
|
@@ -1172,6 +1498,31 @@
|
|
|
1172
1498
|
display: none;
|
|
1173
1499
|
}
|
|
1174
1500
|
}
|
|
1501
|
+
.md\:grid-cols-2 {
|
|
1502
|
+
@media (width >= 48rem) {
|
|
1503
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
1504
|
+
}
|
|
1505
|
+
}
|
|
1506
|
+
.md\:grid-cols-3 {
|
|
1507
|
+
@media (width >= 48rem) {
|
|
1508
|
+
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
1509
|
+
}
|
|
1510
|
+
}
|
|
1511
|
+
.md\:grid-cols-4 {
|
|
1512
|
+
@media (width >= 48rem) {
|
|
1513
|
+
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
1514
|
+
}
|
|
1515
|
+
}
|
|
1516
|
+
.md\:items-end {
|
|
1517
|
+
@media (width >= 48rem) {
|
|
1518
|
+
align-items: flex-end;
|
|
1519
|
+
}
|
|
1520
|
+
}
|
|
1521
|
+
.md\:text-left {
|
|
1522
|
+
@media (width >= 48rem) {
|
|
1523
|
+
text-align: left;
|
|
1524
|
+
}
|
|
1525
|
+
}
|
|
1175
1526
|
.md\:text-4xl {
|
|
1176
1527
|
@media (width >= 48rem) {
|
|
1177
1528
|
font-size: var(--text-4xl);
|
|
@@ -1183,6 +1534,21 @@
|
|
|
1183
1534
|
padding-inline: calc(var(--spacing) * 8);
|
|
1184
1535
|
}
|
|
1185
1536
|
}
|
|
1537
|
+
.dark\:bg-blue-100 {
|
|
1538
|
+
&:where(.dark, .dark *) {
|
|
1539
|
+
background-color: var(--color-blue-100);
|
|
1540
|
+
}
|
|
1541
|
+
}
|
|
1542
|
+
.dark\:bg-blue-300 {
|
|
1543
|
+
&:where(.dark, .dark *) {
|
|
1544
|
+
background-color: var(--color-blue-300);
|
|
1545
|
+
}
|
|
1546
|
+
}
|
|
1547
|
+
.dark\:bg-gray-700 {
|
|
1548
|
+
&:where(.dark, .dark *) {
|
|
1549
|
+
background-color: var(--color-gray-700);
|
|
1550
|
+
}
|
|
1551
|
+
}
|
|
1186
1552
|
.dark\:bg-gray-800 {
|
|
1187
1553
|
&:where(.dark, .dark *) {
|
|
1188
1554
|
background-color: var(--color-gray-800);
|
|
@@ -1204,11 +1570,6 @@
|
|
|
1204
1570
|
color: var(--color-blue-400);
|
|
1205
1571
|
}
|
|
1206
1572
|
}
|
|
1207
|
-
.dark\:text-blue-500 {
|
|
1208
|
-
&:where(.dark, .dark *) {
|
|
1209
|
-
color: var(--color-blue-500);
|
|
1210
|
-
}
|
|
1211
|
-
}
|
|
1212
1573
|
.dark\:text-gray-200 {
|
|
1213
1574
|
&:where(.dark, .dark *) {
|
|
1214
1575
|
color: var(--color-gray-200);
|
|
@@ -1224,6 +1585,11 @@
|
|
|
1224
1585
|
color: var(--color-gray-400);
|
|
1225
1586
|
}
|
|
1226
1587
|
}
|
|
1588
|
+
.dark\:text-gray-950 {
|
|
1589
|
+
&:where(.dark, .dark *) {
|
|
1590
|
+
color: var(--color-gray-950);
|
|
1591
|
+
}
|
|
1592
|
+
}
|
|
1227
1593
|
.dark\:text-white {
|
|
1228
1594
|
&:where(.dark, .dark *) {
|
|
1229
1595
|
color: var(--color-white);
|
|
@@ -1260,82 +1626,21 @@
|
|
|
1260
1626
|
}
|
|
1261
1627
|
}
|
|
1262
1628
|
}
|
|
1263
|
-
.\[\&\:\:-webkit-scrollbar\]\:w-2 {
|
|
1264
|
-
&::-webkit-scrollbar {
|
|
1265
|
-
width: calc(var(--spacing) * 2);
|
|
1266
|
-
}
|
|
1267
|
-
}
|
|
1268
|
-
.\[\&\:\:-webkit-scrollbar\]\:w-3 {
|
|
1269
|
-
&::-webkit-scrollbar {
|
|
1270
|
-
width: calc(var(--spacing) * 3);
|
|
1271
|
-
}
|
|
1272
|
-
}
|
|
1273
|
-
.\[\&\:\:-webkit-scrollbar\]\:w-3\.5 {
|
|
1274
|
-
&::-webkit-scrollbar {
|
|
1275
|
-
width: calc(var(--spacing) * 3.5);
|
|
1276
|
-
}
|
|
1277
|
-
}
|
|
1278
|
-
.\[\&\:\:-webkit-scrollbar\]\:w-4 {
|
|
1279
|
-
&::-webkit-scrollbar {
|
|
1280
|
-
width: calc(var(--spacing) * 4);
|
|
1281
|
-
}
|
|
1282
|
-
}
|
|
1283
1629
|
.\[\&\:\:-webkit-scrollbar\]\:w-4\.5 {
|
|
1284
1630
|
&::-webkit-scrollbar {
|
|
1285
1631
|
width: calc(var(--spacing) * 4.5);
|
|
1286
1632
|
}
|
|
1287
1633
|
}
|
|
1288
|
-
.\[\&\:\:-webkit-scrollbar\]\:w-6 {
|
|
1289
|
-
&::-webkit-scrollbar {
|
|
1290
|
-
width: calc(var(--spacing) * 6);
|
|
1291
|
-
}
|
|
1292
|
-
}
|
|
1293
|
-
.\[\&\:\:-webkit-scrollbar\]\:w-21 {
|
|
1294
|
-
&::-webkit-scrollbar {
|
|
1295
|
-
width: calc(var(--spacing) * 21);
|
|
1296
|
-
}
|
|
1297
|
-
}
|
|
1298
1634
|
.\[\&\:\:-webkit-scrollbar-thumb\]\:absolute {
|
|
1299
1635
|
&::-webkit-scrollbar-thumb {
|
|
1300
1636
|
position: absolute;
|
|
1301
1637
|
}
|
|
1302
1638
|
}
|
|
1303
|
-
.\[\&\:\:-webkit-scrollbar-thumb\]\:rounded-full {
|
|
1304
|
-
&::-webkit-scrollbar-thumb {
|
|
1305
|
-
border-radius: calc(infinity * 1px);
|
|
1306
|
-
}
|
|
1307
|
-
}
|
|
1308
|
-
.\[\&\:\:-webkit-scrollbar-thumb\]\:bg-gray-300 {
|
|
1309
|
-
&::-webkit-scrollbar-thumb {
|
|
1310
|
-
background-color: var(--color-gray-300);
|
|
1311
|
-
}
|
|
1312
|
-
}
|
|
1313
1639
|
.\[\&\:\:-webkit-scrollbar-thumb\]\:bg-gray-400 {
|
|
1314
1640
|
&::-webkit-scrollbar-thumb {
|
|
1315
1641
|
background-color: var(--color-gray-400);
|
|
1316
1642
|
}
|
|
1317
1643
|
}
|
|
1318
|
-
.dark\:\[\&\:\:-webkit-scrollbar-thumb\]\:bg-gray-900 {
|
|
1319
|
-
&:where(.dark, .dark *) {
|
|
1320
|
-
&::-webkit-scrollbar-thumb {
|
|
1321
|
-
background-color: var(--color-gray-900);
|
|
1322
|
-
}
|
|
1323
|
-
}
|
|
1324
|
-
}
|
|
1325
|
-
.dark\:\[\&\:\:-webkit-scrollbar-thumb\]\:bg-neutral-500 {
|
|
1326
|
-
&:where(.dark, .dark *) {
|
|
1327
|
-
&::-webkit-scrollbar-thumb {
|
|
1328
|
-
background-color: var(--color-neutral-500);
|
|
1329
|
-
}
|
|
1330
|
-
}
|
|
1331
|
-
}
|
|
1332
|
-
.dark\:\[\&\:\:-webkit-scrollbar-thumb\]\:bg-neutral-600 {
|
|
1333
|
-
&:where(.dark, .dark *) {
|
|
1334
|
-
&::-webkit-scrollbar-thumb {
|
|
1335
|
-
background-color: var(--color-neutral-600);
|
|
1336
|
-
}
|
|
1337
|
-
}
|
|
1338
|
-
}
|
|
1339
1644
|
.dark\:\[\&\:\:-webkit-scrollbar-thumb\]\:bg-neutral-700 {
|
|
1340
1645
|
&:where(.dark, .dark *) {
|
|
1341
1646
|
&::-webkit-scrollbar-thumb {
|
|
@@ -1343,20 +1648,6 @@
|
|
|
1343
1648
|
}
|
|
1344
1649
|
}
|
|
1345
1650
|
}
|
|
1346
|
-
.dark\:\[\&\:\:-webkit-scrollbar-thumb\]\:bg-neutral-800 {
|
|
1347
|
-
&:where(.dark, .dark *) {
|
|
1348
|
-
&::-webkit-scrollbar-thumb {
|
|
1349
|
-
background-color: var(--color-neutral-800);
|
|
1350
|
-
}
|
|
1351
|
-
}
|
|
1352
|
-
}
|
|
1353
|
-
.dark\:\[\&\:\:-webkit-scrollbar-thumb\]\:bg-neutral-950 {
|
|
1354
|
-
&:where(.dark, .dark *) {
|
|
1355
|
-
&::-webkit-scrollbar-thumb {
|
|
1356
|
-
background-color: var(--color-neutral-950);
|
|
1357
|
-
}
|
|
1358
|
-
}
|
|
1359
|
-
}
|
|
1360
1651
|
.\[\&\:\:-webkit-scrollbar-thumb\:hover\]\:bg-gray-500 {
|
|
1361
1652
|
&::-webkit-scrollbar-thumb:hover {
|
|
1362
1653
|
background-color: var(--color-gray-500);
|
|
@@ -1379,16 +1670,6 @@
|
|
|
1379
1670
|
background-color: var(--color-gray-100);
|
|
1380
1671
|
}
|
|
1381
1672
|
}
|
|
1382
|
-
.\[\&\:\:-webkit-scrollbar-track\]\:bg-gray-200 {
|
|
1383
|
-
&::-webkit-scrollbar-track {
|
|
1384
|
-
background-color: var(--color-gray-200);
|
|
1385
|
-
}
|
|
1386
|
-
}
|
|
1387
|
-
.\[\&\:\:-webkit-scrollbar-track\]\:bg-gray-500 {
|
|
1388
|
-
&::-webkit-scrollbar-track {
|
|
1389
|
-
background-color: var(--color-gray-500);
|
|
1390
|
-
}
|
|
1391
|
-
}
|
|
1392
1673
|
.dark\:\[\&\:\:-webkit-scrollbar-track\]\:bg-gray-900 {
|
|
1393
1674
|
&:where(.dark, .dark *) {
|
|
1394
1675
|
&::-webkit-scrollbar-track {
|
|
@@ -1396,27 +1677,6 @@
|
|
|
1396
1677
|
}
|
|
1397
1678
|
}
|
|
1398
1679
|
}
|
|
1399
|
-
.dark\:\[\&\:\:-webkit-scrollbar-track\]\:bg-neutral-700 {
|
|
1400
|
-
&:where(.dark, .dark *) {
|
|
1401
|
-
&::-webkit-scrollbar-track {
|
|
1402
|
-
background-color: var(--color-neutral-700);
|
|
1403
|
-
}
|
|
1404
|
-
}
|
|
1405
|
-
}
|
|
1406
|
-
.dark\:\[\&\:\:-webkit-scrollbar-track\]\:bg-neutral-800 {
|
|
1407
|
-
&:where(.dark, .dark *) {
|
|
1408
|
-
&::-webkit-scrollbar-track {
|
|
1409
|
-
background-color: var(--color-neutral-800);
|
|
1410
|
-
}
|
|
1411
|
-
}
|
|
1412
|
-
}
|
|
1413
|
-
.dark\:\[\&\:\:-webkit-scrollbar-track\]\:bg-neutral-900 {
|
|
1414
|
-
&:where(.dark, .dark *) {
|
|
1415
|
-
&::-webkit-scrollbar-track {
|
|
1416
|
-
background-color: var(--color-neutral-900);
|
|
1417
|
-
}
|
|
1418
|
-
}
|
|
1419
|
-
}
|
|
1420
1680
|
}
|
|
1421
1681
|
@property --tw-scale-x {
|
|
1422
1682
|
syntax: "*";
|
|
@@ -1433,6 +1693,36 @@
|
|
|
1433
1693
|
inherits: false;
|
|
1434
1694
|
initial-value: 1;
|
|
1435
1695
|
}
|
|
1696
|
+
@property --tw-rotate-x {
|
|
1697
|
+
syntax: "*";
|
|
1698
|
+
inherits: false;
|
|
1699
|
+
initial-value: rotateX(0);
|
|
1700
|
+
}
|
|
1701
|
+
@property --tw-rotate-y {
|
|
1702
|
+
syntax: "*";
|
|
1703
|
+
inherits: false;
|
|
1704
|
+
initial-value: rotateY(0);
|
|
1705
|
+
}
|
|
1706
|
+
@property --tw-rotate-z {
|
|
1707
|
+
syntax: "*";
|
|
1708
|
+
inherits: false;
|
|
1709
|
+
initial-value: rotateZ(0);
|
|
1710
|
+
}
|
|
1711
|
+
@property --tw-skew-x {
|
|
1712
|
+
syntax: "*";
|
|
1713
|
+
inherits: false;
|
|
1714
|
+
initial-value: skewX(0);
|
|
1715
|
+
}
|
|
1716
|
+
@property --tw-skew-y {
|
|
1717
|
+
syntax: "*";
|
|
1718
|
+
inherits: false;
|
|
1719
|
+
initial-value: skewY(0);
|
|
1720
|
+
}
|
|
1721
|
+
@property --tw-space-y-reverse {
|
|
1722
|
+
syntax: "*";
|
|
1723
|
+
inherits: false;
|
|
1724
|
+
initial-value: 0;
|
|
1725
|
+
}
|
|
1436
1726
|
@property --tw-space-x-reverse {
|
|
1437
1727
|
syntax: "*";
|
|
1438
1728
|
inherits: false;
|
|
@@ -1597,3 +1887,8 @@
|
|
|
1597
1887
|
syntax: "*";
|
|
1598
1888
|
inherits: false;
|
|
1599
1889
|
}
|
|
1890
|
+
@property --tw-content {
|
|
1891
|
+
syntax: "*";
|
|
1892
|
+
initial-value: "";
|
|
1893
|
+
inherits: false;
|
|
1894
|
+
}
|
|
@@ -5,10 +5,10 @@ export default class extends Controller {
|
|
|
5
5
|
|
|
6
6
|
connect() {
|
|
7
7
|
this.imageTarget.addEventListener("mouseenter", () => {
|
|
8
|
-
this.imageTarget.classList.add("scale-
|
|
8
|
+
this.imageTarget.classList.add("scale-165", "brightness-30")
|
|
9
9
|
})
|
|
10
10
|
this.imageTarget.addEventListener("mouseleave", () => {
|
|
11
|
-
this.imageTarget.classList.remove("scale-
|
|
11
|
+
this.imageTarget.classList.remove("scale-165", "brightness-30")
|
|
12
12
|
})
|
|
13
13
|
}
|
|
14
14
|
}
|
metadata
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: tear-jekyll-theme
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 1.0.
|
|
4
|
+
version: 1.0.2
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Rokhimin
|
|
8
8
|
bindir: bin
|
|
9
9
|
cert_chain: []
|
|
10
|
-
date: 2025-05-
|
|
10
|
+
date: 2025-05-21 00:00:00.000000000 Z
|
|
11
11
|
dependencies:
|
|
12
12
|
- !ruby/object:Gem::Dependency
|
|
13
13
|
name: jekyll
|