word-games-theme 3.2.6 → 3.2.7
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/_data/wordgames/en/root.json +3 -3
- data/_includes/wordgames/infographics/infographics.html +211 -111
- data/assets/css/wordgames-home.css +2 -1
- 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: 5540b3ab326d472126974f10230178b739ae1d59ada3e83a571e863fe8eb48e7
|
|
4
|
+
data.tar.gz: f0b2894cf7fdb159db7de3bb1f0d6cb10526c5a149ed0c4edf69161c32d93a25
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 390564f06becd3da7ababa0ca897b1408cd26f4b91db9b811e0eb8c825fae7c9693416c19895059fcc8e6266a1e57f3ba2ba2c445688678bd85449547d4f232c
|
|
7
|
+
data.tar.gz: a58ba654a01cd73e9d3e3cbbf965eb0a7aff8ed1d8d81a182e6f977b299daf5141f5a11d4ce273381bed47cc9baccc08f21542cab18b4e86a7520a32a5b94e3c
|
|
@@ -182,15 +182,15 @@
|
|
|
182
182
|
"secondaryKeywords": [],
|
|
183
183
|
"infographics": [
|
|
184
184
|
{
|
|
185
|
-
"image": "/
|
|
185
|
+
"image": "https://wordswithletters.org/uploads/11_13_2024_1731494518320_template.webp",
|
|
186
186
|
"description": ""
|
|
187
187
|
},
|
|
188
188
|
{
|
|
189
|
-
"image": "/
|
|
189
|
+
"image": "https://wordswithletters.org/uploads/11_13_2024_1731494791401_template.webp",
|
|
190
190
|
"description": ""
|
|
191
191
|
},
|
|
192
192
|
{
|
|
193
|
-
"image": "/
|
|
193
|
+
"image": "https://wordswithletters.org/uploads/11_13_2024_1731494978024_template.webp",
|
|
194
194
|
"description": ""
|
|
195
195
|
}
|
|
196
196
|
],
|
|
@@ -1,124 +1,224 @@
|
|
|
1
|
+
<style>
|
|
2
|
+
.slide img:hover {
|
|
3
|
+
transform: scale(1.02);
|
|
4
|
+
box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.12);
|
|
5
|
+
cursor: pointer;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.modal-arrow-btn {
|
|
9
|
+
position: absolute;
|
|
10
|
+
top: 50%;
|
|
11
|
+
width: 50px;
|
|
12
|
+
height: 50px;
|
|
13
|
+
background: rgba(0, 0, 0, 0.5);
|
|
14
|
+
color: #fff;
|
|
15
|
+
border: none;
|
|
16
|
+
cursor: pointer;
|
|
17
|
+
font-size: 24px;
|
|
18
|
+
text-align: center;
|
|
19
|
+
line-height: 50px;
|
|
20
|
+
border-radius: 50%;
|
|
21
|
+
transform: translateY(-50%);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.modal-arrow-btn.prev {
|
|
25
|
+
left: 10px;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.modal-arrow-btn.next {
|
|
29
|
+
right: 10px;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
@media (max-width: 768px) {
|
|
33
|
+
.modal-arrow-btn {
|
|
34
|
+
top: 30%;
|
|
35
|
+
width: 40px;
|
|
36
|
+
height: 40px;
|
|
37
|
+
font-size: 20px;
|
|
38
|
+
line-height: 40px;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.modal-arrow-btn.prev {
|
|
42
|
+
left: 5px;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.modal-arrow-btn.next {
|
|
46
|
+
right: 5px;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
@media (max-width: 480px) {
|
|
51
|
+
.modal-arrow-btn {
|
|
52
|
+
width: 30px;
|
|
53
|
+
height: 30px;
|
|
54
|
+
font-size: 16px;
|
|
55
|
+
line-height: 30px;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.modal-arrow-btn.prev {
|
|
59
|
+
left: 3px;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.modal-arrow-btn.next {
|
|
63
|
+
right: 3px;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.modal1 {
|
|
68
|
+
position: fixed;
|
|
69
|
+
z-index: 1000;
|
|
70
|
+
left: 0;
|
|
71
|
+
top: 0;
|
|
72
|
+
width: 100%;
|
|
73
|
+
height: 100%;
|
|
74
|
+
overflow: auto;
|
|
75
|
+
background-color: rgba(59, 58, 58, 0.9);
|
|
76
|
+
opacity: 0;
|
|
77
|
+
visibility: hidden;
|
|
78
|
+
transform: scale(0.8);
|
|
79
|
+
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.modal1.show {
|
|
83
|
+
opacity: 1;
|
|
84
|
+
visibility: visible;
|
|
85
|
+
transform: scale(1);
|
|
86
|
+
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.modal1-content1 {
|
|
90
|
+
margin: auto;
|
|
91
|
+
display: block;
|
|
92
|
+
width: 80%;
|
|
93
|
+
max-width: 800px;
|
|
94
|
+
margin-top: 20px;
|
|
95
|
+
opacity: 0;
|
|
96
|
+
transform: translateY(-20px);
|
|
97
|
+
transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.modal1.show .modal1-content1 {
|
|
101
|
+
opacity: 1;
|
|
102
|
+
transform: translateY(0);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.modal1-body img {
|
|
106
|
+
width: 100%;
|
|
107
|
+
height: auto;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.close1 {
|
|
111
|
+
position: absolute;
|
|
112
|
+
top: 10px;
|
|
113
|
+
right: 10px;
|
|
114
|
+
font-size: 24px;
|
|
115
|
+
color: #fff;
|
|
116
|
+
cursor: pointer;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.close1:hover {
|
|
120
|
+
color: #ccc;
|
|
121
|
+
}
|
|
122
|
+
</style>
|
|
1
123
|
<div class="container" id="infographicsContainer">
|
|
2
|
-
<h3 class="mb-5 infographics-title"><b>Other useful information</b></h3>
|
|
3
|
-
|
|
4
|
-
<div class="
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
124
|
+
<h3 class="mb-5 infographics-title" style="width:445px"><b>Other useful information</b></h3>
|
|
125
|
+
<div class="inforgraphics_section">
|
|
126
|
+
<div class="wrapper">
|
|
127
|
+
<i id="left" class="fas fa-angle-left"></i>
|
|
128
|
+
<div class="carousel">
|
|
129
|
+
<div class="carousel-inner">
|
|
130
|
+
{%- if dataToShow.infographics -%} {% for item in dataToShow.infographics %}
|
|
131
|
+
<div class="slide">
|
|
132
|
+
<img loading="lazy" src="{{ item.image }}" alt="{{item.alt}}" draggable="false"
|
|
133
|
+
class="infographic-img" onclick="openModal1('{{ item.image }}')" />
|
|
134
|
+
<p class="infographic-desc">{{ item.description | capitalize }}</p>
|
|
135
|
+
</div>
|
|
136
|
+
{% endfor %} {%- endif -%}
|
|
137
|
+
</div>
|
|
138
|
+
</div>
|
|
139
|
+
<i id="right" class="fas fa-angle-right"></i>
|
|
140
|
+
</div>
|
|
141
|
+
</div>
|
|
142
|
+
<div id="imageModal1" class="modal1" onclick="closeModal1()">
|
|
143
|
+
<span class="close1" onclick="closeModal1()">×</span>
|
|
144
|
+
<button class="modal-arrow-btn prev">❮</button>
|
|
145
|
+
<button class="modal-arrow-btn next">❯</button>
|
|
146
|
+
<div class="modal1-content1">
|
|
147
|
+
<div class="modal1-body">
|
|
148
|
+
<img id="modal1Image" src="" alt="Image" />
|
|
21
149
|
</div>
|
|
22
|
-
{% endfor %}
|
|
23
150
|
</div>
|
|
24
|
-
<svg id="right" fill="#000000" viewBox="-12 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
|
25
|
-
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
|
26
|
-
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
|
|
27
|
-
<g id="SVGRepo_iconCarrier">
|
|
28
|
-
<title>angle-right</title>
|
|
29
|
-
<path
|
|
30
|
-
d="M0.88 23.28c-0.2 0-0.44-0.080-0.6-0.24-0.32-0.32-0.32-0.84 0-1.2l5.76-5.84-5.8-5.84c-0.32-0.32-0.32-0.84 0-1.2 0.32-0.32 0.84-0.32 1.2 0l6.44 6.44c0.16 0.16 0.24 0.36 0.24 0.6s-0.080 0.44-0.24 0.6l-6.4 6.44c-0.2 0.16-0.4 0.24-0.6 0.24z">
|
|
31
|
-
</path>
|
|
32
|
-
</g>
|
|
33
|
-
</svg>
|
|
34
151
|
</div>
|
|
35
|
-
</div>
|
|
36
|
-
|
|
37
152
|
</div>
|
|
38
153
|
|
|
39
154
|
<script>
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
155
|
+
document.addEventListener("DOMContentLoaded", () => {
|
|
156
|
+
let modal_array_of_images = [];
|
|
157
|
+
let current_modal_img = 0;
|
|
158
|
+
|
|
159
|
+
// Function to update the modal image
|
|
160
|
+
function updateModalImage() {
|
|
161
|
+
const modal1Img = document.getElementById("modal1Image");
|
|
162
|
+
if (modal_array_of_images.length > 0) {
|
|
163
|
+
modal1Img.src = modal_array_of_images[current_modal_img].src;
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
// Function to prepare the array of images for the modal
|
|
168
|
+
function readyallimages() {
|
|
169
|
+
modal_array_of_images = Array.from(document.querySelectorAll('.infographic-img'));
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
// Function to open the modal and set the current image
|
|
173
|
+
function openModal1(imageSrc) {
|
|
174
|
+
const modal1 = document.getElementById("imageModal1");
|
|
175
|
+
modal1.classList.add("show");
|
|
176
|
+
modal_array_of_images = Array.from(document.querySelectorAll('.infographic-img'));
|
|
177
|
+
current_modal_img = modal_array_of_images.findIndex(img => img.src === imageSrc);
|
|
178
|
+
updateModalImage();
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
// Function to close the modal
|
|
182
|
+
function closeModal1() {
|
|
183
|
+
const modal1 = document.getElementById("imageModal1");
|
|
184
|
+
modal1.classList.remove("show");
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
// Add click event listeners to each infographic image
|
|
188
|
+
document.querySelectorAll('.infographic-img').forEach(img => {
|
|
189
|
+
img.addEventListener('click', (event) => {
|
|
190
|
+
openModal1(event.target.src);
|
|
191
|
+
});
|
|
192
|
+
});
|
|
60
193
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
194
|
+
// Event listeners for the modal arrow buttons
|
|
195
|
+
const modal_btns = document.querySelectorAll('.modal-arrow-btn');
|
|
196
|
+
modal_btns.forEach(modal_btn => {
|
|
197
|
+
modal_btn.addEventListener('click', (e) => {
|
|
198
|
+
e.stopPropagation();
|
|
199
|
+
if (modal_btn.classList.contains('prev')) {
|
|
200
|
+
current_modal_img = (current_modal_img > 0) ? current_modal_img - 1 : modal_array_of_images.length - 1;
|
|
201
|
+
} else {
|
|
202
|
+
current_modal_img = (current_modal_img < modal_array_of_images.length - 1) ? current_modal_img + 1 : 0;
|
|
203
|
+
}
|
|
204
|
+
updateModalImage();
|
|
68
205
|
});
|
|
69
|
-
setTimeout(() => showHideIcons(), 60); // calling showHideIcons after 60ms
|
|
70
206
|
});
|
|
207
|
+
|
|
208
|
+
// Event listener for the close button
|
|
209
|
+
document.querySelectorAll(".close1").forEach(element => {
|
|
210
|
+
element.addEventListener("click", closeModal1);
|
|
211
|
+
});
|
|
212
|
+
|
|
213
|
+
// Event listener for closing the modal when clicking outside the image
|
|
214
|
+
document.getElementById("imageModal1").addEventListener("click", (event) => {
|
|
215
|
+
if (event.target === document.getElementById("imageModal1")) {
|
|
216
|
+
closeModal1();
|
|
217
|
+
}
|
|
218
|
+
});
|
|
219
|
+
|
|
220
|
+
// Initialize modal images on page load
|
|
221
|
+
readyallimages();
|
|
71
222
|
});
|
|
72
223
|
|
|
73
|
-
// const autoSlide = () => {
|
|
74
|
-
// // if there is no image left to scroll then return from here
|
|
75
|
-
// if (carousel.scrollLeft - (carousel.scrollWidth - carousel.clientWidth) > -1 || carousel.scrollLeft <= 0) return;
|
|
76
|
-
|
|
77
|
-
// positionDiff = Math.abs(positionDiff); // making positionDiff value to positive
|
|
78
|
-
// let firstImgWidth = firstImg.clientWidth + 14;
|
|
79
|
-
// // getting difference value that needs to add or reduce from carousel left to take middle img center
|
|
80
|
-
// let valDifference = firstImgWidth - positionDiff;
|
|
81
|
-
|
|
82
|
-
// if (carousel.scrollLeft > prevScrollLeft) { // if user is scrolling to the right
|
|
83
|
-
// return carousel.scrollLeft += positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
|
|
84
|
-
// }
|
|
85
|
-
// // if user is scrolling to the left
|
|
86
|
-
// carousel.scrollLeft -= positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
|
|
87
|
-
// }
|
|
88
|
-
|
|
89
|
-
// const dragStart = (e) => {
|
|
90
|
-
// // updatating global variables value on mouse down event
|
|
91
|
-
// isDragStart = true;
|
|
92
|
-
// prevPageX = e.pageX || e.touches[0].pageX;
|
|
93
|
-
// prevScrollLeft = carousel.scrollLeft;
|
|
94
|
-
// }
|
|
95
|
-
|
|
96
|
-
// const dragging = (e) => {
|
|
97
|
-
// // scrolling images/carousel to left according to mouse pointer
|
|
98
|
-
// if (!isDragStart) return;
|
|
99
|
-
// e.preventDefault();
|
|
100
|
-
// isDragging = true;
|
|
101
|
-
// carousel.classList.add("dragging");
|
|
102
|
-
// positionDiff = (e.pageX || e.touches[0].pageX) - prevPageX;
|
|
103
|
-
// carousel.scrollLeft = prevScrollLeft - positionDiff;
|
|
104
|
-
// showHideIcons();
|
|
105
|
-
// }
|
|
106
|
-
|
|
107
|
-
// const dragStop = () => {
|
|
108
|
-
// isDragStart = false;
|
|
109
|
-
// carousel.classList.remove("dragging");
|
|
110
|
-
|
|
111
|
-
// if (!isDragging) return;
|
|
112
|
-
// isDragging = false;
|
|
113
|
-
// autoSlide();
|
|
114
|
-
// }
|
|
115
|
-
|
|
116
|
-
// carousel.addEventListener("mousedown", dragStart);
|
|
117
|
-
// carousel.addEventListener("touchstart", dragStart);
|
|
118
|
-
|
|
119
|
-
// document.addEventListener("mousemove", dragging);
|
|
120
|
-
// carousel.addEventListener("touchmove", dragging);
|
|
121
|
-
|
|
122
|
-
// document.addEventListener("mouseup", dragStop);
|
|
123
|
-
// carousel.addEventListener("touchend", dragStop);
|
|
124
224
|
</script>
|
|
@@ -600,7 +600,7 @@ details>summary::after {
|
|
|
600
600
|
/* infographicss css */
|
|
601
601
|
.inforgraphics_section {
|
|
602
602
|
width: 100%;
|
|
603
|
-
padding: 50px 0px 50px 0px;
|
|
603
|
+
/* padding: 50px 0px 50px 0px; */
|
|
604
604
|
/* border-top: 1px solid rgb(224, 224, 224); */
|
|
605
605
|
display: flex;
|
|
606
606
|
flex-direction: column;
|
|
@@ -662,6 +662,7 @@ details>summary::after {
|
|
|
662
662
|
}
|
|
663
663
|
|
|
664
664
|
.slide {
|
|
665
|
+
cursor: pointer;
|
|
665
666
|
flex: 0 0 calc(100% / 3);
|
|
666
667
|
scroll-snap-align: start;
|
|
667
668
|
padding: 20px;
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: word-games-theme
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 3.2.
|
|
4
|
+
version: 3.2.7
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- manpreet-appscms
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date:
|
|
11
|
+
date: 2025-01-08 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: jekyll
|