Skip to content

Commit 3381f0c

Browse files
zesamerizesameri
committed
translate grid page incl. palette color names; lock grid ratio to 4.5 cells / 3.5 lines and drop slider; align theme toggle with language nav; saturated nav colors in light mode
1 parent 00b89ab commit 3381f0c

9 files changed

Lines changed: 848 additions & 95 deletions

File tree

‎css/grid.css‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -614,9 +614,12 @@ button.tool[aria-pressed="true"] {
614614

615615
.lang-switcher {
616616
position: fixed;
617-
top: 3.5em;
618-
right: max(16px, env(safe-area-inset-right));
619-
z-index: 5;
617+
top: max(16px, env(safe-area-inset-top));
618+
right: calc(max(16px, env(safe-area-inset-right)) + 52px);
619+
z-index: 20;
620+
display: flex;
621+
align-items: center;
622+
height: 40px; /* vertically centered with the 40px theme toggle */
620623
font-family: "Trebuchet MS", Helvetica, "Noto Sans SC", sans-serif;
621624
font-size: 0.95em;
622625
letter-spacing: 2px;
@@ -635,9 +638,28 @@ button.tool[aria-pressed="true"] {
635638
.lang-uk, .lang-uk:focus, .lang-uk:hover { color: #dfe8f5; }
636639
.lang-zh, .lang-zh:focus, .lang-zh:hover { color: #f6e0e6; }
637640

641+
/* Light/day mode: saturated variants so the pastels don't vanish on white */
642+
:root:not([data-theme="dark"]) .lang-en,
643+
:root:not([data-theme="dark"]) .lang-en:focus,
644+
:root:not([data-theme="dark"]) .lang-en:hover { color: #2f9e44; }
645+
646+
:root:not([data-theme="dark"]) .lang-es,
647+
:root:not([data-theme="dark"]) .lang-es:focus,
648+
:root:not([data-theme="dark"]) .lang-es:hover { color: #c99700; }
649+
650+
:root:not([data-theme="dark"]) .lang-uk,
651+
:root:not([data-theme="dark"]) .lang-uk:focus,
652+
:root:not([data-theme="dark"]) .lang-uk:hover { color: #2f6fd0; }
653+
654+
:root:not([data-theme="dark"]) .lang-zh,
655+
:root:not([data-theme="dark"]) .lang-zh:focus,
656+
:root:not([data-theme="dark"]) .lang-zh:hover { color: #d6336c; }
657+
638658
@media (max-width: 850px) {
639659
.lang-switcher {
640660
position: static;
661+
display: block;
662+
height: auto;
641663
margin-top: 8px;
642664
}
643665
}

‎es/grid.html‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -125,13 +125,7 @@ <h1>Cuadrícula de color</h1>
125125
<button type="button" class="tone-ramp-label" id="toneRampLabel" aria-pressed="false">A negro</button>
126126
<div class="tone-ramp" id="toneRamp" role="listbox" aria-label="Cinco pasos del color al negro"></div>
127127
</div>
128-
<div class="grid-sizing" aria-label="Tamaño de cuadrícula plateada">
129-
<label class="grid-sizing-label">
130-
<span>Bandas plateadas</span>
131-
<input type="range" id="silverSize" min="0.25" max="2" step="0.05" value="1" aria-valuemin="0.25" aria-valuemax="2" aria-valuenow="1">
132-
<output id="silverSizeVal" for="silverSize">1×</output>
133-
</label>
134-
<p class="grid-sizing-units" id="silverSizeUnits" aria-live="polite" title="Ancho de banda en un eje de 96 unidades">4 plata · 4 pintura</p>
128+
<div class="grid-sizing">
135129
<label class="grid-sizing-toggle">
136130
<input type="checkbox" id="compactGridToggle">
137131
<span>Quitar fila y columna centrales</span>
@@ -175,7 +169,8 @@ <h2>Usados recientemente</h2>
175169
<input type="text" id="colorPickerHex" class="color-picker-hex" maxlength="7" spellcheck="false" aria-label="Color hex" inputmode="text" autocomplete="off">
176170
</div>
177171
</div>
172+
<script src="../js/grid-i18n-es.js"></script>
178173
<script src="../js/paint-palette-data.js"></script>
179-
<script src="../js/grid.js?v=10" defer></script>
174+
<script src="../js/grid.js?v=12" defer></script>
180175
</body>
181176
</html>

‎grid.html‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -125,13 +125,7 @@ <h1>Color Grid</h1>
125125
<button type="button" class="tone-ramp-label" id="toneRampLabel" aria-pressed="false">To black</button>
126126
<div class="tone-ramp" id="toneRamp" role="listbox" aria-label="Five steps from color to black"></div>
127127
</div>
128-
<div class="grid-sizing" aria-label="Silver grid sizing">
129-
<label class="grid-sizing-label">
130-
<span>Silver bands</span>
131-
<input type="range" id="silverSize" min="0.25" max="2" step="0.05" value="1" aria-valuemin="0.25" aria-valuemax="2" aria-valuenow="1">
132-
<output id="silverSizeVal" for="silverSize">1×</output>
133-
</label>
134-
<p class="grid-sizing-units" id="silverSizeUnits" aria-live="polite" title="Band width on a 96-unit axis">4 silver · 4 paint</p>
128+
<div class="grid-sizing">
135129
<label class="grid-sizing-toggle">
136130
<input type="checkbox" id="compactGridToggle">
137131
<span>Drop center row &amp; column</span>
@@ -176,6 +170,6 @@ <h2>Recently used</h2>
176170
</div>
177171
</div>
178172
<script src="./js/paint-palette-data.js"></script>
179-
<script src="./js/grid.js?v=10" defer></script>
173+
<script src="./js/grid.js?v=12" defer></script>
180174
</body>
181175
</html>

‎js/grid-i18n-es.js‎

Lines changed: 254 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,254 @@
1+
/* Spanish UI strings + palette color names for grid.html */
2+
window.GRID_STRINGS = {
3+
toBlack: 'A negro',
4+
toWhite: 'A blanco',
5+
black: 'negro',
6+
white: 'blanco',
7+
fiveStepsTo: function (t) { return 'Cinco pasos del color al ' + t; },
8+
rampTo: function (t) { return 'Degradado a ' + t + ' — arrastra sobre la cuadrícula'; },
9+
eraser: 'Borrador',
10+
ramp: 'Degradado',
11+
switchToLight: 'Cambiar a modo claro',
12+
switchToDark: 'Cambiar a modo oscuro',
13+
lightMode: 'Modo claro',
14+
darkMode: 'Modo oscuro',
15+
silver: 'plata',
16+
paint: 'pintura',
17+
paletteNotFound: 'Paleta no encontrada'
18+
};
19+
window.PAINT_PALETTE_GROUP_I18N = {
20+
'reds': 'Rojos y rosas',
21+
'oranges-yellows': 'Naranjas y amarillos',
22+
'greens': 'Verdes',
23+
'blues': 'Azules y turquesas',
24+
'purples': 'Púrpuras y violetas',
25+
'browns-earth': 'Marrones y tierra',
26+
'neutrals': 'Neutros'
27+
};
28+
window.PAINT_PALETTE_I18N = {
29+
"Vivid Spectrum Red": "Rojo espectro intenso",
30+
"Bright Carmine": "Carmín brillante",
31+
"Pale Burnt Lake": "Laca quemada pálida",
32+
"Deep Burnt Lake": "Laca quemada profunda",
33+
"Dark Lake Red": "Rojo laca oscuro",
34+
"Blackish Red": "Rojo negruzco",
35+
"Eugenia Red 1": "Rojo Eugenia 1",
36+
"Vandyke Red": "Rojo Vandyke",
37+
"Ocher Red": "Rojo ocre",
38+
"Coral Red": "Rojo coral",
39+
"Etruscan Red": "Rojo etrusco",
40+
"salmon": "salmón",
41+
"Red Orange": "Rojo anaranjado",
42+
"Dark Russet Brown": "Marrón rojizo oscuro",
43+
"Peach Red": "Rojo melocotón",
44+
"Jasper Red": "Rojo jaspe",
45+
"Brick Red": "Rojo ladrillo",
46+
"English Red": "Rojo inglés",
47+
"Cinnamon Rufous": "Canela rojiza",
48+
"Orange Rufous": "Naranja rojizo",
49+
"Red Violet": "Violeta rojizo",
50+
"plum": "ciruela",
51+
"Violet Red": "Rojo violáceo",
52+
"Pomegranate Purple": "Púrpura granada",
53+
"Indian Lake": "Laca india",
54+
"Violet Carmine": "Carmín violáceo",
55+
"Red": "Rojo",
56+
"Spinel Red": "Rojo espinela",
57+
"Carmine": "Carmín",
58+
"Pompeian Red": "Rojo pompeyano",
59+
"Hydrangea Red": "Rojo hortensia",
60+
"Scarlet": "Escarlata",
61+
"Vistoris Lake": "Laca Vistoris",
62+
"Carmine Red": "Rojo carmín",
63+
"Eugenia Red 2": "Rojo Eugenia 2",
64+
"Spectrum Red": "Rojo espectro",
65+
"Pale Purplish Vinaceous": "Rosado pálido",
66+
"Fresh Color": "Coral fresco",
67+
"Grenadine Pink": "Rosa granadina",
68+
"Seashell Pink": "Rosa concha",
69+
"Light Pinkish Cinnamon": "Canela rosado claro",
70+
"Pinkish Cinnamon": "Canela rosado",
71+
"Pale Cinammon-Pink": "Rosa canela pálido",
72+
"Laelia Pink": "Rosa laelia",
73+
"Hermosa Pink": "Rosa hermosa",
74+
"Eosine Pink": "Rosa eosina",
75+
"Old Rose": "Rosa viejo",
76+
"Cameo Pink": "Rosa camafeo",
77+
"Corinthian Pink": "Rosa corintio",
78+
"Flame Orange": "Naranja llama",
79+
"Vinaceous Cinnamon": "Canela vinoso",
80+
"Apricot Orange": "Naranja albaricoque",
81+
"Orange": "Naranja",
82+
"chocolate": "chocolate",
83+
"Ochraceous Salmon": "Salmón ocre",
84+
"Ochraceous Orange": "Naranja ocre",
85+
"Golden Orange": "Naranja dorado",
86+
"navajowhite": "blanco navajo",
87+
"blanchedalmond": "almendra blanqueada",
88+
"wheat": "trigo",
89+
"goldenrod": "vara de oro",
90+
"Dull Citrine": "Citrino apagado",
91+
"Golden Yellow": "Amarillo dorado",
92+
"Light Cinnamon Buff": "Ante canela claro",
93+
"Pale Maple": "Arce pálido",
94+
"Cinnamon Buff": "Ante canela",
95+
"Maple": "Arce",
96+
"Cream Yellow": "Amarillo crema",
97+
"Yellow Orange": "Amarillo anaranjado",
98+
"Isabella Color": "Color isabelino",
99+
"Ivory Buff": "Ante marfil",
100+
"Orange Yellow": "Naranja amarillento",
101+
"Yellow Ocher": "Ocre amarillo",
102+
"Deep Golden Ocher": "Ocre dorado profundo",
103+
"Naples Yellow": "Amarillo Nápoles",
104+
"Sulphine Yellow": "Amarillo sulfino",
105+
"Olive Ocher": "Ocre oliva",
106+
"Sea-foam Yellow": "Amarillo espuma de mar",
107+
"Pyrite Yellow": "Amarillo pirita",
108+
"Pale Lemon Yellow": "Amarillo limón pálido",
109+
"Sulphur Yellow": "Amarillo azufre",
110+
"Apricot Yellow": "Amarillo albaricoque",
111+
"Lemon Yellow": "Amarillo limón",
112+
"Yellow": "Amarillo",
113+
"Light Green Yellow": "Amarillo verdoso claro",
114+
"Yellow Green": "Verde amarillento",
115+
"Olive Buff": "Ante oliva",
116+
"Citron Yellow": "Amarillo cidra",
117+
"Olive Yellow": "Amarillo oliva",
118+
"Citrine": "Citrino",
119+
"Dark Citrine": "Citrino oscuro",
120+
"Light Brownish Olive": "Oliva amarronado claro",
121+
"Olive": "Oliva",
122+
"Kronbergs Green": "Verde Kronberg",
123+
"Lincoln Green": "Verde Lincoln",
124+
"Grape Green": "Verde uva",
125+
"Olive Green": "Verde oliva",
126+
"Oil Green": "Verde aceite",
127+
"Pale Turtle Green": "Verde tortuga pálido",
128+
"Rainette Green": "Verde rana",
129+
"Dark Greenish Glaucous": "Glauco verdoso oscuro",
130+
"Light Green": "Verde claro",
131+
"Deep Slate Olive": "Oliva pizarra profundo",
132+
"Chromium Green": "Verde cromo",
133+
"Cossack Green": "Verde cosaco",
134+
"Cobalt Green": "Verde cobalto",
135+
"Green": "Verde",
136+
"Diamine Green": "Verde diamina",
137+
"Pistachio Green": "Verde pistacho",
138+
"Glaucous Green": "Verde glauco",
139+
"Turquoise Green": "Verde turquesa",
140+
"Deep Grayish Olive": "Oliva grisáceo profundo",
141+
"Andover Green": "Verde Andover",
142+
"Medium Sea Glaucous": "Glauco marino medio",
143+
"aquamarine": "aguamarina",
144+
"Dull Viridian Green": "Verde viridiana apagado",
145+
"Blackish Olive": "Oliva negruzco",
146+
"Sea Green": "Verde mar",
147+
"Dusky Green": "Verde botella",
148+
"Deep Slate Green": "Verde pizarra profundo",
149+
"Artemisia Green": "Verde artemisa",
150+
"Venice Green": "Verde Venecia",
151+
"Benzol Green": "Verde benzol",
152+
"Light Porcelain Green": "Verde porcelana claro",
153+
"Green Blue": "Azul verdoso",
154+
"Light Glaucous Blue": "Azul glauco claro",
155+
"dodgerblue": "azul dodger",
156+
"Pale Cerulean Blue": "Azul cerúleo pálido",
157+
"Pale King&#x27;s Blue 1": "Azul rey pálido 1",
158+
"Deep Sea Green": "Verde mar profundo",
159+
"Blackish Slate Green": "Verde pizarra negruzco",
160+
"Pale Turquoise Green": "Verde turquesa pálido",
161+
"Deep Peacock Blue": "Azul pavo real profundo",
162+
"lightseagreen": "verde mar claro",
163+
"lightcyan": "cian claro",
164+
"paleturquoise": "turquesa pálido",
165+
"Dark Cyan Green": "Verde cian oscuro",
166+
"Deep Turquoise Green": "Verde turquesa profundo",
167+
"Nile Blue": "Azul Nilo",
168+
"Calamine Blue": "Azul calamina",
169+
"Peacock Blue": "Azul pavo real",
170+
"Pale Methyl Blue": "Azul metilo pálido",
171+
"Cerulean Blue": "Azul cerúleo",
172+
"powderblue": "azul polvo",
173+
"Dark Medici Blue": "Azul Medici oscuro",
174+
"Antwarp Blue": "Azul Amberes",
175+
"deepskyblue": "azul cielo profundo",
176+
"Pale King&#x27;s Blue 2": "Azul rey pálido 2",
177+
"skyblue": "azul cielo",
178+
"Vandar Poel&#x27;s Blue": "Azul Vandar Poel",
179+
"Helvetia Blue": "Azul Helvetia",
180+
"Blue": "Azul",
181+
"Dark Tyrian Blue": "Azul tirio oscuro",
182+
"Olympic Blue": "Azul olímpico",
183+
"Salvia Blue": "Azul salvia",
184+
"Deep Lyons Blue": "Azul Lyon profundo",
185+
"Deep Indigo": "Índigo profundo",
186+
"Violet Blue": "Azul violáceo",
187+
"Blue Violet": "Violeta azulado",
188+
"Dull Blue Violet": "Violeta azulado apagado",
189+
"royalblue": "azul real",
190+
"Deep Violet Plumbeous": "Violeta plomizo profundo",
191+
"Pale Periwinkle": "Azul lavanda pálido",
192+
"Light Violet Blue": "Azul violeta claro",
193+
"Deep Medici Blue": "Azul Medici profundo",
194+
"midnightblue": "azul medianoche",
195+
"navy": "azul marino",
196+
"Dark Indigo Blue": "Azul índigo oscuro",
197+
"Dark Soft Violet": "Violeta suave oscuro",
198+
"mediumslateblue": "azul pizarra medio",
199+
"Violet": "Violeta",
200+
"mediumpurple": "púrpura medio",
201+
"Slate Purple": "Púrpura pizarra",
202+
"Light Lilac": "Lila claro",
203+
"Violet Ultramarine": "Violeta ultramar",
204+
"rebeccapurple": "púrpura Rebecca",
205+
"indigo": "índigo",
206+
"Blackish Violet": "Violeta negruzco",
207+
"Light Mauve": "Malva claro",
208+
"Aconite Violet": "Violeta acónito",
209+
"Dusky Madder Violet": "Violeta rubia oscuro",
210+
"Cotinga Purple": "Púrpura cotinga",
211+
"Lilac": "Lila",
212+
"Eupatorium Purple": "Púrpura rosado",
213+
"Dark Slate Purple": "Púrpura pizarra oscuro",
214+
"Rosolanc Purple": "Púrpura frambuesa",
215+
"Pansy Purple": "Púrpura pensamiento",
216+
"Vernonia Purple": "Malva oscuro",
217+
"Dark Perilla Purple": "Púrpura perilla oscuro",
218+
"Purple Drab": "Malva apagado",
219+
"Khaki / Tawny Olive": "Caqui / oliva leonado",
220+
"Dark Golden Ocher": "Ocre dorado oscuro",
221+
"Burnt Umber Brown": "Marrón sombra tostada",
222+
"Orange Citrine": "Citrino anaranjado",
223+
"Vinaceous Tawny": "Leonado vinoso",
224+
"Light Drab": "Gris claro",
225+
"Light Brown Drab": "Marrón grisáceo claro",
226+
"Hay&#x27;s Russet": "Rojizo Hay",
227+
"Madder Brown": "Marrón rubia",
228+
"Fawn": "Cervato",
229+
"Sudan Brown": "Marrón Sudán",
230+
"Brown": "Marrón",
231+
"Pale Ecru-Drab": "Beige grisáceo pálido",
232+
"Burnt Sienna": "Siena tostada",
233+
"Mars Brown Tobacco": "Marrón tabaco",
234+
"Pale Raw Umber": "Sombra natural clara",
235+
"Raw Sienna": "Siena natural",
236+
"Vandyke Brown": "Marrón Vandyke",
237+
"Ecru": "Crudo",
238+
"Sepia": "Sepia",
239+
"Taupe Brown": "Marrón topo",
240+
"white": "blanco",
241+
"aliceblue": "azul Alicia",
242+
"Grayish Lavender 1": "Lavanda grisáceo 1",
243+
"Neutral Gray": "Gris neutro",
244+
"Grayish Lavender 2": "Lavanda grisáceo 2",
245+
"Mineral Gray": "Gris mineral",
246+
"Warm Gray": "Gris cálido",
247+
"Light Grayish Olive": "Oliva grisáceo claro",
248+
"Slate Color": "Color pizarra",
249+
"Dull Purplish Black": "Negro amoratado",
250+
"Dark Mineral Gray": "Gris mineral oscuro",
251+
"Dull Violet Black": "Negro violáceo",
252+
"Deep Slate Color": "Color pizarra profundo",
253+
"Black": "Negro"
254+
};

0 commit comments

Comments
 (0)