Skip to content

Commit 00b89ab

Browse files
zesamerizesameri
committed
play color crumple on mobile tap before navigating; pastel per-language colors and lowercase labels for language nav
1 parent 942e7ba commit 00b89ab

37 files changed

Lines changed: 163 additions & 58 deletions

‎alhambra.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ <h1 class="header">
5656
<a data-pattern="triangle">starry night</a>
5757
<a data-pattern="grid">diamonds</a>
5858
</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>
59+
<div class="lang-switcher">en · <a class="lang-es" href="./es/alhambra.html">es</a> · <a class="lang-uk" href="./uk/alhambra.html">укр</a> · <a class="lang-zh" 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
@@ -76,7 +76,7 @@ <h1 class="header">
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>
7878
</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>
79+
<div class="lang-switcher">en · <a class="lang-es" href="./es/art.html">es</a> · <a class="lang-uk" href="./uk/art.html">укр</a> · <a class="lang-zh" href="./zh/art.html">中文</a></div>
8080
</div>
8181
<div class="crumple" aria-hidden=""></div>
8282
</body>

‎css/crumple.css‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -934,3 +934,32 @@ body:has(.footer__link--home:hover) .crumple:after {
934934
background-image: none;
935935
}
936936
}
937+
938+
/* Mobile color crumples: the .mobile-trigger rules above only animate video
939+
elements, which never load on mobile. These give .crumple:after the same
940+
per-link colors used by the desktop no-hover fallbacks. */
941+
@media (hover: none) and (pointer: coarse) {
942+
body.no-hover:has(.footer__link--writings.mobile-trigger) .crumple:after,
943+
body.no-hover:has(.footer__link--instagram.mobile-trigger) .crumple:after {
944+
background-color: #020121;
945+
opacity: 1;
946+
-webkit-animation: e 1s .25s linear reverse forwards;
947+
animation: e 1s .25s linear reverse forwards;
948+
}
949+
950+
body.no-hover:has(.footer__link--art.mobile-trigger) .crumple:after,
951+
body.no-hover:has(.footer__link--alhambra.mobile-trigger) .crumple:after,
952+
body.no-hover:has(.footer__link--github.mobile-trigger) .crumple:after {
953+
background-color: #012118;
954+
opacity: 1;
955+
-webkit-animation: b 1s .25s linear reverse forwards;
956+
animation: b 1s .25s linear reverse forwards;
957+
}
958+
959+
body.no-hover:has(.footer__link--playlists.mobile-trigger) .crumple:after {
960+
background-color: #210120;
961+
opacity: 1;
962+
-webkit-animation: c 1s .25s linear reverse forwards;
963+
animation: c 1s .25s linear reverse forwards;
964+
}
965+
}

‎css/grid.css‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -623,16 +623,18 @@ button.tool[aria-pressed="true"] {
623623
color: var(--text);
624624
}
625625

626-
.lang-switcher a {
627-
color: var(--text);
628-
text-decoration: underline;
629-
}
630-
626+
.lang-switcher a,
631627
.lang-switcher a:focus,
632628
.lang-switcher a:hover {
633-
color: var(--link);
629+
text-decoration: none;
630+
border-bottom: none;
634631
}
635632

633+
.lang-en, .lang-en:focus, .lang-en:hover { color: #e3f0e2; }
634+
.lang-es, .lang-es:focus, .lang-es:hover { color: #f5eed6; }
635+
.lang-uk, .lang-uk:focus, .lang-uk:hover { color: #dfe8f5; }
636+
.lang-zh, .lang-zh:focus, .lang-zh:hover { color: #f6e0e6; }
637+
636638
@media (max-width: 850px) {
637639
.lang-switcher {
638640
position: static;

‎css/main.css‎

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -131,8 +131,27 @@ section {
131131
padding-top: 0.7em;
132132
}
133133

134-
.bio-link {
134+
.bio-link,
135+
.bio-link:focus,
136+
.bio-link:hover {
135137
text-decoration: none;
138+
border-bottom: none;
139+
}
140+
141+
.lang-en, .lang-en:focus, .lang-en:hover {
142+
color: #e3f0e2; /* off-white pastel green */
143+
}
144+
145+
.lang-es, .lang-es:focus, .lang-es:hover {
146+
color: #f5eed6; /* off-white butter */
147+
}
148+
149+
.lang-uk, .lang-uk:focus, .lang-uk:hover {
150+
color: #dfe8f5; /* off-white pastel blue */
151+
}
152+
153+
.lang-zh, .lang-zh:focus, .lang-zh:hover {
154+
color: #f6e0e6; /* off-white pink */
136155
}
137156

138157
.lang-switcher {
@@ -142,12 +161,11 @@ section {
142161
z-index: 5;
143162
}
144163

145-
.lang-switcher a {
146-
text-decoration: none;
147-
}
148-
164+
.lang-switcher a,
165+
.lang-switcher a:focus,
149166
.lang-switcher a:hover {
150-
text-decoration: underline;
167+
text-decoration: none;
168+
border-bottom: none;
151169
}
152170

153171
@media only screen and (max-width: 850px) {

‎css/nyc.css‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -293,10 +293,18 @@
293293
z-index: 5;
294294
}
295295

296-
.lang-switcher a {
297-
color: inherit;
296+
.lang-switcher a,
297+
.lang-switcher a:focus,
298+
.lang-switcher a:hover {
299+
text-decoration: none;
300+
border-bottom: none;
298301
}
299302

303+
.lang-en, .lang-en:focus, .lang-en:hover { color: #e3f0e2; }
304+
.lang-es, .lang-es:focus, .lang-es:hover { color: #f5eed6; }
305+
.lang-uk, .lang-uk:focus, .lang-uk:hover { color: #dfe8f5; }
306+
.lang-zh, .lang-zh:focus, .lang-zh:hover { color: #f6e0e6; }
307+
300308
@media (max-width: 600px) {
301309
.lang-switcher {
302310
position: static;

‎es/alhambra.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ <h1 class="header">
5656
<a data-pattern="triangle">noche estrellada</a>
5757
<a data-pattern="grid">diamantes</a>
5858
</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>
59+
<div class="lang-switcher"><a class="lang-en" href="../alhambra.html">en</a> · es · <a class="lang-uk" href="../uk/alhambra.html">укр</a> · <a class="lang-zh" href="../zh/alhambra.html">中文</a></div>
6060
</div>
6161

6262
<script>

‎es/art.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ <h1 class="header">
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>
7878
</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>
79+
<div class="lang-switcher"><a class="lang-en" href="../art.html">en</a> · es · <a class="lang-uk" href="../uk/art.html">укр</a> · <a class="lang-zh" href="../zh/art.html">中文</a></div>
8080
</div>
8181
<div class="crumple" aria-hidden=""></div>
8282
</body>

‎es/grid-wada.html‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,11 @@
2323
margin: 0 0 12px;
2424
}
2525
.caption a { color: #336; }
26+
.lang-switcher a, .lang-switcher a:hover { text-decoration: none; border-bottom: none; }
27+
.lang-en { color: #3d5c40; }
28+
.lang-es { color: #6b6238; }
29+
.lang-uk { color: #3a4a66; }
30+
.lang-zh { color: #6e4450; }
2631
p.lang-switcher {
2732
position: fixed;
2833
top: 12px;
@@ -40,7 +45,7 @@
4045
paletas de <a href="https://www.wada-sanzo-colors.com/colors" target="_blank" rel="noopener noreferrer">Wada Sanzo</a>
4146
· <a href="./wada-colors.html">todas las muestras</a>
4247
</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>
48+
<p class="caption lang-switcher"><a class="lang-en" href="../grid-wada.html">en</a> · es · <a class="lang-uk" href="../uk/grid-wada.html">укр</a> · <a class="lang-zh" href="../zh/grid-wada.html">中文</a></p>
4449
<div class="tables-side">
4550
<table id="grid">
4651
<tbody><tr>

‎es/grid.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ <h2>Usados recientemente</h2>
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>
161161
</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>
162+
<div class="lang-switcher"><a class="lang-en" href="../grid.html">en</a> · es · <a class="lang-uk" href="../uk/grid.html">укр</a> · <a class="lang-zh" 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)