word-games-theme 3.2.6 → 3.2.8

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: b0c057449d1e565ca9c350c8bc2077538c5b395f357a3300a5c9b80b1f589f6d
4
- data.tar.gz: a5e088d621c1d7c996632606519be9413e56f4d561d09d0e31fc701c9b61b218
3
+ metadata.gz: 900611bb28204da634f1165025f425f840de6edb5d29797dd82e0319b7104ba3
4
+ data.tar.gz: 0f8ddc00d1856577f7b4002feb303ad90d9d1ce763c0639214c1748b4c98cd85
5
5
  SHA512:
6
- metadata.gz: cf6f9de1093edc067efae1d92a53388aee6365c5ede52cfdcd00cf8e58d4f88f9a203a1a22e235115fddc195d49e18ad1b2638726926c04d90867b7d08392abd
7
- data.tar.gz: 6128ef644509ce0aecde85bb669c3930c0026a3b07b728b3cebebdba639afb62dc62e303c16cf639991f57e677e2538d7fdc7a8667f3fe19cac55c0d0498c591
6
+ metadata.gz: 923014eea445e747a893542af0bd47ebac8add509bb2975fac87f6bf5046d17dfd878f210e24695d1502631192c8e24e3875d3966ae05cd431d642cd828bbd15
7
+ data.tar.gz: 5bfaa100c83aca7ab9ad2cad9f5480d431b703c8c6f4a857d34a66e1c5f293fde577576ecf7f0dd3d423ca91d5d5f5db6cafada0e4c41d9f048f7da62a81dfe6
@@ -182,15 +182,15 @@
182
182
  "secondaryKeywords": [],
183
183
  "infographics": [
184
184
  {
185
- "image": "/assets/images/infographics/en/home-infographics-1.webp",
185
+ "image": "https://wordswithletters.org/uploads/11_13_2024_1731494518320_template.webp",
186
186
  "description": ""
187
187
  },
188
188
  {
189
- "image": "/assets/images/infographics/en/home-infographics-2.webp",
189
+ "image": "https://wordswithletters.org/uploads/11_13_2024_1731494791401_template.webp",
190
190
  "description": ""
191
191
  },
192
192
  {
193
- "image": "/assets/images/infographics/en/home-infographics-3.webp",
193
+ "image": "https://wordswithletters.org/uploads/11_13_2024_1731494978024_template.webp",
194
194
  "description": ""
195
195
  }
196
196
  ],
@@ -360,20 +360,18 @@
360
360
  item.addEventListener('click', handleItemClick);
361
361
  });
362
362
 
363
- // window.onclick = function(event) {
364
- // if (!event.target.matches('.filter_val')) {
365
- // const dropdowns = document.getElementsByClassName("dropdown-content");
366
- // for (let i = 0; i < dropdowns.length; i++) {
367
- // dropdowns[i].style.display = "none";
368
- // }
369
- // const arrowDown = document.getElementsByClassName("arrow-down");
370
- // for (let i = 0; i < arrowDown.length; i++) {
371
- // arrowDown[i].style.display = "none";
372
- // }
373
-
374
-
375
- // }
376
- // }
363
+ window.onclick = function(event) {
364
+ if (!event.target.matches('.filter_val')) {
365
+ const dropdowns = document.getElementsByClassName("dropdown-content");
366
+ for (let i = 0; i < dropdowns.length; i++) {
367
+ dropdowns[i].style.display = "none";
368
+ }
369
+ const arrowDown = document.getElementsByClassName("arrow-down");
370
+ for (let i = 0; i < arrowDown.length; i++) {
371
+ arrowDown[i].style.display = "none";
372
+ }
373
+ }
374
+ }
377
375
 
378
376
 
379
377
 
@@ -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="inforgraphics_section">
5
- <div class="wrapper">
6
- <svg id="left" fill="#000000" viewBox="-12 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
7
- <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
8
- <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
9
- <g id="SVGRepo_iconCarrier">
10
- <title>angle-left</title>
11
- <path
12
- d="M7.28 23.28c-0.2 0-0.44-0.080-0.6-0.24l-6.44-6.44c-0.32-0.32-0.32-0.84 0-1.2l6.44-6.44c0.32-0.32 0.84-0.32 1.2 0 0.32 0.32 0.32 0.84 0 1.2l-5.8 5.84 5.84 5.84c0.32 0.32 0.32 0.84 0 1.2-0.16 0.16-0.44 0.24-0.64 0.24z">
13
- </path>
14
- </g>
15
- </svg>
16
- <div class="carousel">
17
- {%- for item in dataToShow.infographics -%}
18
- <div class="slide">
19
- <img loading="lazy" src="{{ item.image }}" alt="img" draggable="false">
20
- <p class="text-center mt-3 infographic-desc">{{ item.description | capitalize }}</p>
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()">&times;</span>
144
+ <button class="modal-arrow-btn prev">&#10094;</button>
145
+ <button class="modal-arrow-btn next">&#10095;</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
- const carousel = document.querySelector(".carousel"),
41
- firstImg = carousel.querySelectorAll("img")[0],
42
- arrowIcons = document.querySelectorAll(".wrapper svg")
43
-
44
- const numImages = carousel.querySelectorAll("img").length;
45
- const isMobile = window.matchMedia("(max-width: 767px)").matches; // Check if screen width is less than or equal to 767px
46
-
47
- if (numImages > 3) {
48
- arrowIcons[1].style.display = "block"
49
- } else {
50
- arrowIcons[0].style.display = "none";
51
- arrowIcons[1].style.display = "none";
52
- }
53
-
54
- let isDragStart = false, isDragging = false, prevPageX, prevScrollLeft, positionDiff;
55
- const showHideIcons = () => {
56
- let scrollWidth = carousel.scrollWidth - carousel.clientWidth; // getting max scrollable width
57
- arrowIcons[0].style.display = carousel.scrollLeft == 0 ? "none" : "block";
58
- arrowIcons[1].style.display = carousel.scrollLeft == scrollWidth ? "none" : "block";
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
- arrowIcons.forEach(icon => {
62
- icon.addEventListener("click", () => {
63
- let firstImgWidth = firstImg.clientWidth + 40;
64
- const scrollAmount = icon.id === "left" ? -firstImgWidth : firstImgWidth;
65
- carousel.scrollBy({
66
- left: scrollAmount,
67
- behavior: "smooth",
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>
@@ -26,6 +26,7 @@
26
26
  {%- else -%}
27
27
  <style>
28
28
  .main-header {
29
+ padding-bottom: 35vh;
29
30
  margin: 0px !important;
30
31
  background-image: radial-gradient(#e4e4f4 2px, transparent 2px);
31
32
  background-size: 25px 25px;
@@ -321,7 +321,7 @@
321
321
  padding: 10px;
322
322
  text-align: left;
323
323
  color: #1c1107;
324
- font-size: 13px;
324
+ font-size: 1.5rem;
325
325
  font-weight: 600;
326
326
  font-stretch: normal;
327
327
  font-style: normal;
@@ -338,7 +338,7 @@
338
338
  padding: 10px;
339
339
  text-align: left;
340
340
  color: #1c1107;
341
- font-size: 13px;
341
+ font-size: 1.5rem;
342
342
  font-weight: 600;
343
343
  font-stretch: normal;
344
344
  font-style: normal;
@@ -357,7 +357,7 @@
357
357
 
358
358
  .wordCount {
359
359
  /* text-indent: 10px; */
360
- font-size: 18px;
360
+ font-size: 2rem;
361
361
  }
362
362
 
363
363
  .filterSortedIcons {
@@ -408,7 +408,7 @@
408
408
  }
409
409
  .fillterWrapper input{
410
410
  padding: 10px !important;
411
- font-size: 14px;
411
+ font-size: 1.5rem;
412
412
  width: 140px;
413
413
  }
414
414
  .fillterWrapper .filter-tooltip img{
@@ -429,7 +429,7 @@
429
429
 
430
430
  .wordList .anchor__style {
431
431
  color: #000 !important;
432
- font-size: 15px;
432
+ font-size: 2rem;
433
433
  text-decoration: none !important;
434
434
  font-weight: 600;
435
435
  list-style: none;
@@ -104,13 +104,14 @@ input[type="number"] {
104
104
  }
105
105
 
106
106
  .serachSection .serachBox .txtBox {
107
+ text-transform: uppercase;
107
108
  height: 80px;
108
109
  border: solid 3px #313131;
109
110
  border-radius: 74px;
110
111
  background: #fff;
111
112
  padding: 2rem;
112
113
  width: 100%;
113
- font-size: 15px;
114
+ font-size: 16px;
114
115
  font-weight: 700;
115
116
  font-style: normal;
116
117
  letter-spacing: normal;
@@ -185,7 +186,7 @@ input[type="number"] {
185
186
  height: 80px;
186
187
  position: absolute;
187
188
  top: 0px;
188
- font-size: 15px;
189
+ font-size: 16px;
189
190
  width: 142px;
190
191
  overflow: hidden;
191
192
  object-fit: cover;
@@ -600,7 +601,7 @@ details>summary::after {
600
601
  /* infographicss css */
601
602
  .inforgraphics_section {
602
603
  width: 100%;
603
- padding: 50px 0px 50px 0px;
604
+ /* padding: 50px 0px 50px 0px; */
604
605
  /* border-top: 1px solid rgb(224, 224, 224); */
605
606
  display: flex;
606
607
  flex-direction: column;
@@ -662,6 +663,7 @@ details>summary::after {
662
663
  }
663
664
 
664
665
  .slide {
666
+ cursor: pointer;
665
667
  flex: 0 0 calc(100% / 3);
666
668
  scroll-snap-align: start;
667
669
  padding: 20px;
@@ -341,7 +341,7 @@ input:-webkit-autofill:active {
341
341
  padding: 10px;
342
342
  text-align: left;
343
343
  color: #1c1107;
344
- font-size: 13px;
344
+ font-size: 1.5rem;
345
345
  font-weight: 600;
346
346
  font-stretch: normal;
347
347
  font-style: normal;
@@ -19,3 +19,16 @@
19
19
  --tooltip-border-style: 0.5rem;
20
20
  }
21
21
 
22
+
23
+ /*
24
+
25
+ h1 - 48px
26
+ h2 - 20px
27
+ feature heading - 18px
28
+ feature desc - 16px
29
+ how-to-list-item - 16px
30
+ .faq-question - 20px
31
+ .faq-answer - 16px
32
+
33
+
34
+ .feature-highlight-title, .howto, .infographics-title, .related_post_heading - 48px */
@@ -124,12 +124,12 @@
124
124
 
125
125
  .wordList .anchor__style {
126
126
  color: #000!important;
127
- font-size: 15px;
127
+ font-size: 2rem;
128
128
  text-decoration: none!important;
129
129
  font-weight: 600;
130
130
  }
131
131
  #wordleWordCount {
132
- font-size: 18px;
132
+ font-size: 2rem;
133
133
  /* width: 75%; */
134
134
  margin: 10px auto;
135
135
  }
@@ -31,7 +31,11 @@ self.onmessage = async (event) => {
31
31
  sum += ScrabbleLetterScore[item[i]] || 0 // for unknown characters
32
32
  }
33
33
  return `
34
- <a class="anchor__style" title="Lookup ${item} in Dictionary" target="_blank" href="/word-meaning?search=${item.toLowerCase()}">
34
+ <a style='color: #000!important;
35
+ font-size: 2rem;
36
+ text-decoration: none!important;
37
+ font-weight: 600;'
38
+ class="anchor__style" title="Lookup ${item} in Dictionary" target="_blank" href="/word-meaning?search=${item.toLowerCase()}">
35
39
  <li>
36
40
  ${item.toLowerCase()}
37
41
  <span class="points" value="${sum}" style="position:relative; top:4px; font-size:12px"> ${sum}</span>
@@ -214,7 +214,7 @@ const wordleSolver = async (value, value2, value3, greenWithIndex) => {
214
214
 
215
215
  worker.postMessage({
216
216
  type: "api",
217
- endpoint: `/.netlify/functions/wordleSolver/wordleSolver`,
217
+ endpoint: `/.netlify/functions/wordleSolver`,
218
218
  greenLetters: value,
219
219
  yellowLetters: value2,
220
220
  greyLetters: value3,
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.6
4
+ version: 3.2.8
5
5
  platform: ruby
6
6
  authors:
7
7
  - manpreet-appscms
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2024-12-26 00:00:00.000000000 Z
11
+ date: 2025-02-18 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll