word-games-theme 3.3.5 → 3.3.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.
Files changed (53) hide show
  1. checksums.yaml +4 -4
  2. data/_data/footer/en/data.json +95 -0
  3. data/_data/header/en/data.json +559 -36
  4. data/_data/home_sections.json +453 -0
  5. data/_data/wordgames/en/root.json +16 -13
  6. data/_includes/home/ad-preview.html +3 -0
  7. data/_includes/home/ad-slot.html +3 -0
  8. data/_includes/home/chips.html +6 -0
  9. data/_includes/home/crosswords.html +18 -0
  10. data/_includes/home/daily-hints.html +15 -0
  11. data/_includes/home/footer.html +212 -0
  12. data/_includes/home/game-art.html +18 -0
  13. data/_includes/home/game-cards.html +22 -0
  14. data/_includes/home/header.html +82 -0
  15. data/_includes/home/icon.html +19 -0
  16. data/_includes/home/letter-lists.html +17 -0
  17. data/_includes/home/logo.html +84 -0
  18. data/_includes/home/solvers.html +9 -0
  19. data/_includes/wordgames/advanced-filter/advanced-filter.html +15 -14
  20. data/_includes/wordgames/faqs/faqs.html +2 -4
  21. data/_includes/wordgames/headings/headings.html +1 -1
  22. data/_includes/wordgames/infographics/infographics.html +2 -136
  23. data/_includes/wordgames/search-box/search-box.html +1 -1
  24. data/_includes/wordgames-v2/advanced-filter/advanced-filter.html +421 -0
  25. data/_includes/wordgames-v2/faqs/faqs.html +35 -0
  26. data/_includes/wordgames-v2/featurehighlights/featurehighlights.html +70 -0
  27. data/_includes/wordgames-v2/head/head.html +170 -0
  28. data/_includes/wordgames-v2/headings/headings.html +14 -0
  29. data/_includes/wordgames-v2/howto/howto.html +94 -0
  30. data/_includes/wordgames-v2/infographics/infographics.html +358 -0
  31. data/_includes/wordgames-v2/search-box/dict-picker.html +26 -0
  32. data/_includes/wordgames-v2/search-box/search-box.html +87 -0
  33. data/_layouts/wordgames-home-v2.html +141 -0
  34. data/assets/css/ad-preview.css +85 -0
  35. data/assets/css/home-hub.css +1879 -0
  36. data/assets/css/wordfinder-result.css +5 -5
  37. data/assets/css/wordgames-home-v2.css +2955 -0
  38. data/assets/css/wordgames-home.css +3 -4
  39. data/assets/css/wordgames-result.css +1 -1
  40. data/assets/css/wordle-solver.css +2 -2
  41. data/assets/images/close-menu.svg +1 -14
  42. data/assets/images/hamburger-menu.svg +1 -5
  43. data/assets/images/logo-hub.svg +24 -0
  44. data/assets/images/logo.svg +13 -106
  45. data/assets/images/questionmark.svg +1 -1
  46. data/assets/images/wordswithletters-logo.svg +96 -0
  47. data/assets/js/ad-preview.js +141 -0
  48. data/assets/js/home-hub.js +275 -0
  49. data/assets/js/home-ui.js +286 -0
  50. data/assets/js/scrabbleDictonary.js +8 -202
  51. data/assets/js/wordleSolver-worker.js +2 -7
  52. data/assets/js/wordleSolver.js +2 -2
  53. metadata +34 -2
data/assets/css/ad-preview.css ADDED
@@ -0,0 +1,85 @@
1
+ /* Ad placement preview: purely visual placeholders. */
2
+ .wg-adprev {
3
+ --c: #94a3b8; --bg: rgba(148, 163, 184, .08);
4
+ position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; box-sizing: border-box;
5
+ width: min(100% - 32px, var(--w)); height: var(--h); max-width: 100%; margin: 24px auto; padding: 10px 14px; overflow: hidden; text-align: center;
6
+ border: 2px dashed var(--c); border-radius: 14px; color: #1e1b2e;
7
+ background: repeating-linear-gradient(135deg, var(--bg) 0 12px, transparent 12px 24px), #fff;
8
+ }
9
+ .wg-adprev--a { --c: #16a34a; --bg: rgba(22, 163, 74, .09); }
10
+ .wg-adprev--b { --c: #f59e0b; --bg: rgba(245, 158, 11, .10); }
11
+ .wg-adprev--c { --c: #94a3b8; --bg: rgba(148, 163, 184, .10); }
12
+
13
+ .wg-adprev--lb { --w: 970px; --h: 90px; }
14
+ .wg-adprev--bb { --w: 970px; --h: 250px; }
15
+ .wg-adprev--mr { --w: 300px; --h: 250px; }
16
+ .wg-adprev--lb2 { --w: 728px; --h: 90px; }
17
+ .wg-adprev--rail { --w: 160px; --h: 600px; }
18
+ .wg-adprev--anchor { --w: 728px; --h: 90px; }
19
+
20
+ .wg-adprev__tag { position: absolute; top: 8px; left: 10px; padding: 2px 7px; border-radius: 6px; background: var(--c); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
21
+ .wg-adprev__tier { position: absolute; top: 8px; right: 10px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--c); color: var(--c); background: #fff; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
22
+ .wg-adprev__size { font-size: 26px; font-weight: 900; letter-spacing: -.01em; line-height: 1; }
23
+ .wg-adprev__name { font-size: 13px; font-weight: 800; }
24
+ .wg-adprev__why { max-width: 90%; font-size: 11.5px; line-height: 1.35; color: #64748b; }
25
+ .wg-adprev--lb2 .wg-adprev__size, .wg-adprev--lb .wg-adprev__size, .wg-adprev--anchor .wg-adprev__size { font-size: 20px; }
26
+ .wg-adprev--lb2 .wg-adprev__why, .wg-adprev--lb .wg-adprev__why, .wg-adprev--anchor .wg-adprev__why { display: none; }
27
+
28
+ .wg-adprev-pair { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin: 24px auto; padding: 0 16px; }
29
+ .wg-adprev-pair .wg-adprev { margin: 0; }
30
+ .wg-adprev--span { grid-column: 1 / -1; margin: 8px auto; }
31
+
32
+ /* rails: fixed on both sides, only when there is room beside the 1200px content column */
33
+ .wg-adprev--left, .wg-adprev--right { position: fixed; top: 96px; margin: 0; z-index: 40; display: none; }
34
+ .wg-adprev--left { left: 12px; }
35
+ .wg-adprev--right { right: 12px; }
36
+ @media (min-width: 1560px) { .wg-adprev--left, .wg-adprev--right { display: flex; } }
37
+
38
+ /* sticky anchor */
39
+ .wg-adprev--anchor { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 60; margin: 0; border-radius: 14px 14px 0 0; background-color: #fff; box-shadow: 0 -10px 30px -12px rgba(44, 10, 90, .35); }
40
+ .wg-adprev--anchor[hidden] { display: none; }
41
+ .wg-adprev__x { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: #1e1b2e; color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
42
+ .wg-adprev--anchor .wg-adprev__tier { right: 40px; }
43
+
44
+ /* panel */
45
+ .wg-adprev-panel { position: fixed; bottom: 16px; left: 16px; z-index: 70; width: 232px; border-radius: 16px; background: #fff; box-shadow: 0 20px 44px -14px rgba(44, 10, 90, .5); border: 1px solid #e9d5ff; font-size: 13px; color: #1e1b2e; }
46
+ .wg-adprev-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid #f1eafc; }
47
+ .wg-adprev-panel__min { width: 26px; height: 26px; border: 0; border-radius: 50%; background: #f5f0ff; color: #7e22ce; font-size: 18px; line-height: 1; cursor: pointer; }
48
+ .wg-adprev-panel__body { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; }
49
+ .wg-adprev-panel__body p { margin: 0 0 4px; color: #64748b; font-size: 12px; line-height: 1.4; }
50
+ .wg-adprev-panel.is-min .wg-adprev-panel__body { display: none; }
51
+ .wg-adprev-key { display: flex; align-items: center; gap: 8px; font-weight: 700; cursor: pointer; }
52
+ .wg-adprev-key input { position: absolute; opacity: 0; }
53
+ .wg-adprev-key i { width: 16px; height: 16px; border-radius: 5px; border: 2px solid var(--k); background: var(--k); }
54
+ .wg-adprev-key input:not(:checked) + i { background: transparent; }
55
+ .wg-adprev-key span { margin-left: auto; color: #64748b; font-weight: 600; }
56
+ .wg-adprev-key--a { --k: #16a34a; } .wg-adprev-key--b { --k: #f59e0b; } .wg-adprev-key--c { --k: #94a3b8; }
57
+ .wg-adpreview.wg-adprev-hide-a .wg-adprev[data-tier="a"], .wg-adpreview.wg-adprev-hide-b .wg-adprev[data-tier="b"], .wg-adpreview.wg-adprev-hide-c .wg-adprev[data-tier="c"] { display: none !important; }
58
+ .wg-adpreview.wg-adprev-hide-b .wg-adprev-pair:has(.wg-adprev:not([data-tier])) { display: none; }
59
+ .wg-adpreview.wg-adprev-hide-b .wg-adprev-pair { display: none; }
60
+ .wg-adpreview body { padding-bottom: 100px; }
61
+
62
+ /* phones: standard mobile sizes */
63
+ @media (max-width: 767.98px) {
64
+ .wg-adprev--lb { --w: 320px; --h: 100px; }
65
+ .wg-adprev--bb { --w: 300px; --h: 250px; }
66
+ .wg-adprev--lb2 { --w: 320px; --h: 100px; }
67
+ .wg-adprev--anchor { --w: 320px; --h: 50px; width: 320px; }
68
+ .wg-adprev--anchor .wg-adprev__name, .wg-adprev--anchor .wg-adprev__tier, .wg-adprev--anchor .wg-adprev__tag { display: none; }
69
+ .wg-adprev--anchor .wg-adprev__size { font-size: 15px; }
70
+ .wg-adprev-panel { bottom: 70px; left: 8px; width: 200px; }
71
+ .wg-adprev__size { font-size: 20px; }
72
+ }
73
+
74
+ /* footer switch */
75
+ .wg-adprev-off .wg-adprev, .wg-adprev-off .wg-adprev-pair, .wg-adprev-off .wg-adprev-panel { display: none !important; }
76
+ .wg-adpreview.wg-adprev-off body { padding-bottom: 0; }
77
+ .wg-adsw { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px 0 10px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; background: rgba(255, 255, 255, .05); color: #e7e2f7; font: 600 14px/1 inherit; font-family: inherit; cursor: pointer; transition: background .15s, border-color .15s; }
78
+ .wg-adsw:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .32); }
79
+ .wg-adsw:focus-visible { outline: 3px solid rgba(182, 65, 218, .55); outline-offset: 2px; }
80
+ .wg-adsw__track { position: relative; width: 36px; height: 20px; border-radius: 999px; background: rgba(255, 255, 255, .25); transition: background .2s; flex: none; }
81
+ .wg-adsw__track i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
82
+ .wg-adsw[aria-checked="true"] .wg-adsw__track { background: #16a34a; }
83
+ .wg-adsw[aria-checked="true"] .wg-adsw__track i { transform: translateX(16px); }
84
+ @media (prefers-reduced-motion: reduce) { .wg-adsw__track, .wg-adsw__track i { transition: none; } }
85
+ @media (max-width: 767.98px) { .wg-adprev-panel { bottom: 70px; } }