Skip to content

Commit 942e7ba

Browse files
zesamerizesameri
committed
reposition language switcher, translate signoffs and playlists labels, add Noto Sans SC for zh, add mandarin font preview page
1 parent e4bc83d commit 942e7ba

37 files changed

Lines changed: 286 additions & 75 deletions

‎alhambra.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,8 @@ <h1 class="header">
5555
<a href=".">home</a>
5656
<a data-pattern="triangle">starry night</a>
5757
<a data-pattern="grid">diamonds</a>
58-
<div class="lang-switcher">EN · <a href="./es/alhambra.html">ES</a> · <a href="./uk/alhambra.html">UK</a> · <a href="./zh/alhambra.html">中文</a></div>
5958
</footer>
59+
<div class="lang-switcher">EN · <a href="./es/alhambra.html">ES</a> · <a href="./uk/alhambra.html">УКР</a> · <a href="./zh/alhambra.html">中文</a></div>
6060
</div>
6161

6262
<script>

‎art.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,8 +75,8 @@ <h1 class="header">
7575
<a class="footer__link--playlists" href="https://open.spotify.com/user/1286649958" target="_blank" rel="noopener noreferrer">muze</a>
7676
<a class="footer__link--instagram" href="https://www.instagram.com/eww.york/" target="_blank" rel="noopener noreferrer">trash</a>
7777
<a class="footer__link--github" href="https://github.com/zesameri" target="_blank" rel="noopener noreferrer">code</a>
78-
<div class="lang-switcher">EN · <a href="./es/art.html">ES</a> · <a href="./uk/art.html">UK</a> · <a href="./zh/art.html">中文</a></div>
7978
</footer>
79+
<div class="lang-switcher">EN · <a href="./es/art.html">ES</a> · <a href="./uk/art.html">УКР</a> · <a href="./zh/art.html">中文</a></div>
8080
</div>
8181
<div class="crumple" aria-hidden=""></div>
8282
</body>

‎css/font.css‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@
55

66
/* Base Typography */
77
body {
8-
font-family: 'Roboto Slab', serif;
8+
font-family: 'Roboto Slab', 'Noto Sans SC', serif;
99
line-height: 1.5;
1010
color: #f8f8f6;
1111
}
1212

1313
/* Headers */
1414
h1, dt, .footer > a {
15-
font-family: "Trebuchet MS", Helvetica, sans-serif;
15+
font-family: "Trebuchet MS", Helvetica, "Noto Sans SC", sans-serif;
1616
letter-spacing: 2px;
1717
font-weight: bold;
1818
}
@@ -22,7 +22,7 @@ h1, dt, .footer > a {
2222
letter-spacing: 5px;
2323
text-align: left;
2424
text-decoration: none;
25-
font-family: "Trebuchet MS", Helvetica, sans-serif;
25+
font-family: "Trebuchet MS", Helvetica, "Noto Sans SC", sans-serif;
2626
line-height: 1em;
2727
}
2828

@@ -33,7 +33,7 @@ h1, dt, .footer > a {
3333

3434
/* Writing Page Typography */
3535
.section-title {
36-
font-family: "Trebuchet MS", Helvetica, sans-serif;
36+
font-family: "Trebuchet MS", Helvetica, "Noto Sans SC", sans-serif;
3737
font-size: 2em;
3838
letter-spacing: 3px;
3939
margin-top: 2em;
@@ -47,12 +47,12 @@ dt {
4747
}
4848

4949
.list__link {
50-
font-family: monospace;
50+
font-family: monospace, "Noto Sans SC", sans-serif;
5151
}
5252

5353
.reference {
5454
font-style: italic;
55-
font-family: "Trebuchet MS", Helvetica, sans-serif;
55+
font-family: "Trebuchet MS", Helvetica, "Noto Sans SC", sans-serif;
5656
letter-spacing: 2px;
5757
font-weight: bold;
5858
}

‎css/grid.css‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ body {
5555
padding: 16px;
5656
padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
5757
max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
58-
font-family: 'Roboto Slab', serif;
58+
font-family: 'Roboto Slab', 'Noto Sans SC', serif;
5959
line-height: 1.5;
6060
background: var(--bg);
6161
color: var(--text);
@@ -64,7 +64,7 @@ button, input, label, select {
6464
font-family: inherit;
6565
}
6666
h1, h2 {
67-
font-family: "Trebuchet MS", Helvetica, sans-serif;
67+
font-family: "Trebuchet MS", Helvetica, "Noto Sans SC", sans-serif;
6868
font-weight: bold;
6969
}
7070
h1 {
@@ -597,7 +597,7 @@ button.tool[aria-pressed="true"] {
597597
flex-shrink: 0;
598598
}
599599
.site-footer > a {
600-
font-family: "Trebuchet MS", Helvetica, sans-serif;
600+
font-family: "Trebuchet MS", Helvetica, "Noto Sans SC", sans-serif;
601601
font-size: 1.1em;
602602
font-weight: normal;
603603
letter-spacing: 2px;
@@ -613,11 +613,14 @@ button.tool[aria-pressed="true"] {
613613
}
614614

615615
.lang-switcher {
616-
font-family: "Trebuchet MS", Helvetica, sans-serif;
616+
position: fixed;
617+
top: 3.5em;
618+
right: max(16px, env(safe-area-inset-right));
619+
z-index: 5;
620+
font-family: "Trebuchet MS", Helvetica, "Noto Sans SC", sans-serif;
617621
font-size: 0.95em;
618622
letter-spacing: 2px;
619623
color: var(--text);
620-
margin-top: 8px;
621624
}
622625

623626
.lang-switcher a {
@@ -629,6 +632,13 @@ button.tool[aria-pressed="true"] {
629632
.lang-switcher a:hover {
630633
color: var(--link);
631634
}
635+
636+
@media (max-width: 850px) {
637+
.lang-switcher {
638+
position: static;
639+
margin-top: 8px;
640+
}
641+
}
632642
@media (orientation: landscape) {
633643
:root {
634644
--footer-bar: calc(2.75rem + env(safe-area-inset-bottom, 0px));

‎css/main.css‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -131,8 +131,15 @@ section {
131131
padding-top: 0.7em;
132132
}
133133

134+
.bio-link {
135+
text-decoration: none;
136+
}
137+
134138
.lang-switcher {
135-
padding-top: 0.7em;
139+
position: fixed;
140+
top: 1.5em;
141+
right: 2em;
142+
z-index: 5;
136143
}
137144

138145
.lang-switcher a {
@@ -143,6 +150,13 @@ section {
143150
text-decoration: underline;
144151
}
145152

153+
@media only screen and (max-width: 850px) {
154+
.lang-switcher {
155+
position: static;
156+
margin-top: 0.7em;
157+
}
158+
}
159+
146160
.hero-footer {
147161
position: fixed;
148162
right: 5em;

‎css/nyc.css‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
22

33
body {
4-
font-family: "Trebuchet MS", Helvetica, sans-serif !important;
4+
font-family: "Trebuchet MS", Helvetica, "Noto Sans SC", sans-serif !important;
55
font-size: 15px;
66
line-height: 1.6;
77
color: #f8f8f6;
@@ -286,10 +286,23 @@
286286
color: #a6a9ac;
287287
}
288288

289+
.lang-switcher {
290+
position: fixed;
291+
top: 1.5em;
292+
right: 2em;
293+
z-index: 5;
294+
}
295+
289296
.lang-switcher a {
290297
color: inherit;
291298
}
292299

300+
@media (max-width: 600px) {
301+
.lang-switcher {
302+
position: static;
303+
}
304+
}
305+
293306
@media (max-width: 600px) {
294307
.site-header h1 { font-size: 22px; }
295308
.cards { grid-template-columns: 1fr; }

‎es/alhambra.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,8 @@ <h1 class="header">
5555
<a href="../">inicio</a>
5656
<a data-pattern="triangle">noche estrellada</a>
5757
<a data-pattern="grid">diamantes</a>
58-
<div class="lang-switcher"><a href="../alhambra.html">EN</a> · ES · <a href="../uk/alhambra.html">UK</a> · <a href="../zh/alhambra.html">中文</a></div>
5958
</footer>
59+
<div class="lang-switcher"><a href="../alhambra.html">EN</a> · ES · <a href="../uk/alhambra.html">УКР</a> · <a href="../zh/alhambra.html">中文</a></div>
6060
</div>
6161

6262
<script>

‎es/art.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,11 +72,11 @@ <h1 class="header">
7272
<footer class="footer" id="footer">
7373
<a class="footer__link--home" href="../">inicio</a>
7474
<a class="footer__link--writings" href="./writings.html">palabras</a>
75-
<a class="footer__link--playlists" href="https://open.spotify.com/user/1286649958" target="_blank" rel="noopener noreferrer">muze</a>
75+
<a class="footer__link--playlists" href="https://open.spotify.com/user/1286649958" target="_blank" rel="noopener noreferrer">muza</a>
7676
<a class="footer__link--instagram" href="https://www.instagram.com/eww.york/" target="_blank" rel="noopener noreferrer">basura</a>
7777
<a class="footer__link--github" href="https://github.com/zesameri" target="_blank" rel="noopener noreferrer">código</a>
78-
<div class="lang-switcher"><a href="../art.html">EN</a> · ES · <a href="../uk/art.html">UK</a> · <a href="../zh/art.html">中文</a></div>
7978
</footer>
79+
<div class="lang-switcher"><a href="../art.html">EN</a> · ES · <a href="../uk/art.html">УКР</a> · <a href="../zh/art.html">中文</a></div>
8080
</div>
8181
<div class="crumple" aria-hidden=""></div>
8282
</body>

‎es/grid-wada.html‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66
<title>Cuadrículas 24×24 de Wada Sanzo</title>
77
<style>
8-
body { padding: 16px; font-family: system-ui, sans-serif; }
8+
body { padding: 16px; font-family: system-ui, 'Noto Sans SC', sans-serif; }
99
.tables-side {
1010
display: flex;
1111
flex-wrap: wrap;
@@ -23,6 +23,15 @@
2323
margin: 0 0 12px;
2424
}
2525
.caption a { color: #336; }
26+
p.lang-switcher {
27+
position: fixed;
28+
top: 12px;
29+
right: 16px;
30+
max-width: none;
31+
}
32+
@media (max-width: 850px) {
33+
p.lang-switcher { position: static; }
34+
}
2635
</style>
2736
</head>
2837
<body>
@@ -31,7 +40,7 @@
3140
paletas de <a href="https://www.wada-sanzo-colors.com/colors" target="_blank" rel="noopener noreferrer">Wada Sanzo</a>
3241
· <a href="./wada-colors.html">todas las muestras</a>
3342
</p>
34-
<p class="caption lang-switcher"><a href="../grid-wada.html">EN</a> · ES · <a href="../uk/grid-wada.html">UK</a> · <a href="../zh/grid-wada.html">中文</a></p>
43+
<p class="caption lang-switcher"><a href="../grid-wada.html">EN</a> · ES · <a href="../uk/grid-wada.html">УКР</a> · <a href="../zh/grid-wada.html">中文</a></p>
3544
<div class="tables-side">
3645
<table id="grid">
3746
<tbody><tr>

‎es/grid.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -155,11 +155,11 @@ <h2>Usados recientemente</h2>
155155
<a class="footer__link--home" href="../">inicio</a>
156156
<a class="footer__link--writings" href="./writings.html">palabras</a>
157157
<a class="footer__link--art" href="./art.html">arte</a>
158-
<a class="footer__link--playlists" href="https://open.spotify.com/user/1286649958" target="_blank" rel="noopener noreferrer">muze</a>
158+
<a class="footer__link--playlists" href="https://open.spotify.com/user/1286649958" target="_blank" rel="noopener noreferrer">muza</a>
159159
<a class="footer__link--instagram" href="https://www.instagram.com/eww.york/" target="_blank" rel="noopener noreferrer">basura</a>
160160
<a class="footer__link--github" href="https://github.com/zesameri" target="_blank" rel="noopener noreferrer">código</a>
161-
<div class="lang-switcher"><a href="../grid.html">EN</a> · ES · <a href="../uk/grid.html">UK</a> · <a href="../zh/grid.html">中文</a></div>
162161
</footer>
162+
<div class="lang-switcher"><a href="../grid.html">EN</a> · ES · <a href="../uk/grid.html">УКР</a> · <a href="../zh/grid.html">中文</a></div>
163163
<div id="colorPickerBackdrop" class="color-picker-backdrop" hidden></div>
164164
<div id="colorPickerPopover" class="color-picker-popover" role="dialog" aria-label="Elegir color" hidden>
165165
<div class="color-picker-sv" id="colorPickerSv">

0 commit comments

Comments
 (0)