Skip to content

Commit e4bc83d

Browse files
zesamerizesameri
committed
add spanish, ukrainian, mandarin site copies with language switcher; remove trash page
1 parent 78f8115 commit e4bc83d

36 files changed

Lines changed: 9131 additions & 93 deletions

‎alhambra.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ <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>
5859
</footer>
5960
</div>
6061

‎art.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@ <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>
7879
</footer>
7980
</div>
8081
<div class="crumple" aria-hidden=""></div>

‎css/grid.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -611,6 +611,24 @@ button.tool[aria-pressed="true"] {
611611
.site-footer > a:hover {
612612
color: var(--link);
613613
}
614+
615+
.lang-switcher {
616+
font-family: "Trebuchet MS", Helvetica, sans-serif;
617+
font-size: 0.95em;
618+
letter-spacing: 2px;
619+
color: var(--text);
620+
margin-top: 8px;
621+
}
622+
623+
.lang-switcher a {
624+
color: var(--text);
625+
text-decoration: underline;
626+
}
627+
628+
.lang-switcher a:focus,
629+
.lang-switcher a:hover {
630+
color: var(--link);
631+
}
614632
@media (orientation: landscape) {
615633
:root {
616634
--footer-bar: calc(2.75rem + env(safe-area-inset-bottom, 0px));

‎css/main.css‎

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

134+
.lang-switcher {
135+
padding-top: 0.7em;
136+
}
137+
138+
.lang-switcher a {
139+
text-decoration: none;
140+
}
141+
142+
.lang-switcher a:hover {
143+
text-decoration: underline;
144+
}
145+
134146
.hero-footer {
135147
position: fixed;
136148
right: 5em;

‎css/nyc.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -286,6 +286,10 @@
286286
color: #a6a9ac;
287287
}
288288

289+
.lang-switcher a {
290+
color: inherit;
291+
}
292+
289293
@media (max-width: 600px) {
290294
.site-header h1 { font-size: 22px; }
291295
.cards { grid-template-columns: 1fr; }

‎es/alhambra.html‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
<!DOCTYPE html>
2+
<html lang="es">
3+
<head>
4+
<!-- Global site tag (gtag.js) - Google Analytics -->
5+
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-72294820-1"></script>
6+
<script>
7+
window.dataLayer = window.dataLayer || [];
8+
function gtag(){dataLayer.push(arguments);}
9+
gtag('js', new Date());
10+
gtag('config', 'UA-72294820-1');
11+
</script>
12+
<title>alhambra - zesameri</title>
13+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
14+
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1, maximum-scale=1">
15+
<meta name="author" content="kvitka">
16+
<meta name="theme-color" content="#111">
17+
<!-- Styles -->
18+
<link href="../css/main.css" rel="stylesheet">
19+
<link href="../css/crumple.css" rel="stylesheet">
20+
<link href="../css/font.css" rel="stylesheet">
21+
<link href="../css/mobile.css" rel="stylesheet">
22+
<link href="../css/alhambra.css" rel="stylesheet">
23+
<!-- Webpage Icon -->
24+
<link rel="shortcut icon" href="../assets/images/icon.png" type="image/png">
25+
<!-- Fonts -->
26+
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
27+
</head>
28+
<body>
29+
<canvas id="triangleCanvas"></canvas>
30+
<canvas id="gridCanvas"></canvas>
31+
32+
<div class="content-wrapper">
33+
<section class="hero">
34+
<div class="top-bar">
35+
<h1 class="header">
36+
<a class="simple-link" href="./art.html"> arte </a>
37+
<img class="header-img" src="../assets/images/flower.svg" alt="Flower">
38+
</h1>
39+
</div>
40+
<div class="bio">
41+
<p>
42+
Visité los Palacios Nazaríes de la Alhambra el verano pasado.
43+
Después de quedarme despierta hasta tarde para conseguir una entrada temprana,
44+
me desperté antes del amanecer para subir a la entrada de la finca.
45+
Como alcanzar a Alá, se sintió sagrado.
46+
De niña, quería ser mosaicista,
47+
dando forma a cuadrados de vidrio en formas fluidas.
48+
Reavivé esa maravilla reconstruyendo estos patrones.
49+
Siglos de geometría desenredándose, puedo sentir su devoción.
50+
51+
</p>
52+
</div>
53+
</section>
54+
<footer class="footer" id="footer">
55+
<a href="../">inicio</a>
56+
<a data-pattern="triangle">noche estrellada</a>
57+
<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>
59+
</footer>
60+
</div>
61+
62+
<script>
63+
// Pattern controller for alhambra page
64+
const footerLinks = document.querySelectorAll('.footer a[data-pattern]');
65+
const triangleCanvas = document.getElementById('triangleCanvas');
66+
const gridCanvas = document.getElementById('gridCanvas');
67+
68+
// Load triangle pattern
69+
const triangleScript = document.createElement('script');
70+
triangleScript.src = '../js/triangle.js';
71+
72+
// Load grid pattern
73+
const gridScript = document.createElement('script');
74+
gridScript.src = '../js/alhambra-grid.js';
75+
76+
document.body.appendChild(triangleScript);
77+
document.body.appendChild(gridScript);
78+
79+
// Handle pattern switching
80+
footerLinks.forEach(link => {
81+
link.addEventListener('mouseenter', (e) => {
82+
const pattern = e.target.dataset.pattern;
83+
84+
if (pattern === 'triangle') {
85+
triangleCanvas.classList.add('visible');
86+
} else if (pattern === 'grid') {
87+
gridCanvas.classList.add('visible');
88+
}
89+
90+
document.querySelector('.bio').style.display = 'none';
91+
});
92+
93+
link.addEventListener('mouseleave', () => {
94+
triangleCanvas.classList.remove('visible');
95+
gridCanvas.classList.remove('visible');
96+
document.querySelector('.bio').style.display = 'block';
97+
});
98+
99+
// Add mobile click functionality
100+
link.addEventListener('click', (e) => {
101+
e.preventDefault();
102+
const pattern = link.getAttribute('data-pattern');
103+
104+
if (pattern === 'triangles') {
105+
triangleCanvas.classList.add('visible');
106+
gridCanvas.classList.remove('visible');
107+
} else if (pattern === 'grid') {
108+
gridCanvas.classList.add('visible');
109+
triangleCanvas.classList.remove('visible');
110+
}
111+
112+
document.querySelector('.bio').style.display = 'none';
113+
114+
// Auto-hide after 3 seconds on mobile
115+
setTimeout(() => {
116+
triangleCanvas.classList.remove('visible');
117+
gridCanvas.classList.remove('visible');
118+
document.querySelector('.bio').style.display = 'block';
119+
}, 3000);
120+
});
121+
});
122+
</script>
123+
</body>
124+
</html>

‎es/art.html‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<!DOCTYPE html>
2+
<html lang="es" class="">
3+
<head>
4+
<!-- Global site tag (gtag.js) - Google Analytics -->
5+
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-72294820-1"></script>
6+
<script>
7+
window.dataLayer = window.dataLayer || [];
8+
function gtag(){dataLayer.push(arguments);}
9+
gtag('js', new Date());
10+
11+
gtag('config', 'UA-72294820-1');
12+
</script>
13+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
14+
<title>arte</title>
15+
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1, maximum-scale=1">
16+
<meta name="description" content="Es lo que tú quieras que sea.">
17+
<meta name="author" content="kvitka">
18+
<!-- Facebook Metadata -->
19+
<meta name="og:title" content="arte">
20+
<meta name="og:description" content="Es lo que tú quieras que sea.">
21+
<meta name="og:url" content="http://zesameri.github.io">
22+
<meta name="og:type" content="website">
23+
<meta name="theme-color" content="#111">
24+
<!-- Styles -->
25+
<link href="../css/main.css" rel="stylesheet">
26+
<link href="../css/crumple.css" rel="stylesheet">
27+
<link href="../css/font.css" rel="stylesheet">
28+
<link href="../css/mobile.css" rel="stylesheet">
29+
<!-- Webpage Icon -->
30+
<link rel="shortcut icon" href="../assets/images/icon.png" type="image/png">
31+
<!-- Fonts -->
32+
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
33+
34+
<!-- Jquery Min Library -->
35+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
36+
37+
</head>
38+
<body id="art">
39+
<div class="content-wrapper">
40+
<section class="writing">
41+
<div class="top-bar">
42+
<h1 class="header">
43+
arte
44+
<img class="header-img" src="../assets/images/flower.svg">
45+
</h1>
46+
</div>
47+
48+
<dl class="list">
49+
50+
<dt> Grid </dt>
51+
<dd class="list__item">
52+
<p>
53+
Este es un prototipo para una pintura en la que estoy trabajando.
54+
Es una excusa para estudiar la teoría del color de Joesf Albers,
55+
y una oportunidad de representar recuerdos y emociones pasadas de forma minimalista.
56+
</p>
57+
<a class="list__link" href="./grid.html">ver más aquí</a>
58+
</dd>
59+
<dt> Alhambra </dt>
60+
<dd class="list__item">
61+
<p>
62+
Visité los Palacios Nazaríes de la Alhambra el verano pasado.
63+
De niña, quería ser mosaicista,
64+
dando forma a cuadrados de vidrio en formas fluidas.
65+
Reavivé esa maravilla reconstruyendo estos patrones.
66+
</p>
67+
<a class="list__link" href="./alhambra.html">ver más aquí</a>
68+
</dd>
69+
</dl>
70+
</section>
71+
72+
<footer class="footer" id="footer">
73+
<a class="footer__link--home" href="../">inicio</a>
74+
<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>
76+
<a class="footer__link--instagram" href="https://www.instagram.com/eww.york/" target="_blank" rel="noopener noreferrer">basura</a>
77+
<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>
79+
</footer>
80+
</div>
81+
<div class="crumple" aria-hidden=""></div>
82+
</body>
83+
</html>

0 commit comments

Comments
 (0)