testing

2,157 bytes View directory
1 <svelte:head>
2 <title>How to play Sverdle</title>
3 <meta name="description" content="How to play Sverdle" />
4 </svelte:head>
5
6 <div class="text-column">
7 <h1>How to play Sverdle</h1>
8
9 <p>
10 Sverdle is a clone of <a href="https://www.nytimes.com/games/wordle/index.html">Wordle</a>, the
11 word guessing game. To play, enter a five-letter English word. For example:
12 </p>
13
14 <div class="example">
15 <span class="close">r</span>
16 <span class="missing">i</span>
17 <span class="close">t</span>
18 <span class="missing">z</span>
19 <span class="exact">y</span>
20 </div>
21
22 <p>
23 The <span class="exact">y</span> is in the right place. <span class="close">r</span> and
24 <span class="close">t</span>
25 are the right letters, but in the wrong place. The other letters are wrong, and can be discarded.
26 Let's make another guess:
27 </p>
28
29 <div class="example">
30 <span class="exact">p</span>
31 <span class="exact">a</span>
32 <span class="exact">r</span>
33 <span class="exact">t</span>
34 <span class="exact">y</span>
35 </div>
36
37 <p>This time we guessed right! You have <strong>six</strong> guesses to get the word.</p>
38
39 <p>
40 Unlike the original Wordle, Sverdle runs on the server instead of in the browser, making it
41 impossible to cheat. It uses <code>&lt;form&gt;</code> and cookies to submit data, meaning you can
42 even play with JavaScript disabled!
43 </p>
44 </div>
45
46 <style>
47 span {
48 display: inline-flex;
49 justify-content: center;
50 align-items: center;
51 font-size: 0.8em;
52 width: 2.4em;
53 height: 2.4em;
54 background-color: white;
55 box-sizing: border-box;
56 border-radius: 2px;
57 border-width: 2px;
58 color: rgba(0, 0, 0, 0.7);
59 }
60
61 .missing {
62 background: rgba(255, 255, 255, 0.5);
63 color: rgba(0, 0, 0, 0.5);
64 }
65
66 .close {
67 border-style: solid;
68 border-color: var(--color-theme-2);
69 }
70
71 .exact {
72 background: var(--color-theme-2);
73 color: white;
74 }
75
76 .example {
77 display: flex;
78 justify-content: flex-start;
79 margin: 1rem 0;
80 gap: 0.2rem;
81 }
82
83 .example span {
84 font-size: 1.4rem;
85 }
86
87 p span {
88 position: relative;
89 border-width: 1px;
90 border-radius: 1px;
91 font-size: 0.4em;
92 transform: scale(2) translate(0, -10%);
93 margin: 0 1em;
94 }
95 </style>
96