Skip to content

Commit aae56bf

Browse files
zesamerizesameri
authored
Merge pull request #7 from zesameri/mice
Mice
2 parents 913cb99 + c8de28b commit aae56bf

16 files changed

Lines changed: 233 additions & 141 deletions

‎art.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<html lang="en" 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>art</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="It's whatever you want to make of it.">
17+
<meta name="author" content="kvitka">
18+
<!-- Facebook Metadata -->
19+
<meta name="og:title" content="art">
20+
<meta name="og:description" content="It's whatever you want to make of it.">
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+
<a href="./secrets.html" class="simple-link"><img class="header-img" src="assets/images/flower.svg"></a>
44+
art
45+
</h1>
46+
</div>
47+
48+
<dl class="list">
49+
<dt> Alhambra </dt>
50+
<dd class="list__item">
51+
<p>
52+
I visited the Nasrid Palaces of the Alhambra this past summer.
53+
As a child, I wanted to become a mosaicist,
54+
shaping glass squares into flowing forms.
55+
I rekindled that wonder through reconstructing these patterns.
56+
</p>
57+
<a class="list__link" href="./alhambra.html">see more here</a>
58+
</dd>
59+
</dl>
60+
</section>
61+
62+
<footer class="footer" id="footer">
63+
<a class="footer__link--home" href=".">home</a>
64+
<a class="footer__link--writings" href="./writings.html">words</a>
65+
<a class="footer__link--playlists" href="https://open.spotify.com/user/1286649958" target="_blank" rel="noopener noreferrer">muze</a>
66+
<a class="footer__link--instagram" href="https://www.instagram.com/eww.york/" target="_blank" rel="noopener noreferrer">trash</a>
67+
<a class="footer__link--github" href="https://github.com/zesameri" target="_blank" rel="noopener noreferrer">code</a>
68+
</footer>
69+
</div>
70+
<div class="crumple" aria-hidden=""></div>
71+
</body>
72+
</html>

‎assets/videos/IMG_5997.MOV‎

26.6 MB
Binary file not shown.

assets/videos/IMG_1624.MOV renamed to assets/videos/IMG_6002.MOV

14.3 MB
Binary file not shown.

‎assets/videos/IMG_6003.MOV‎

40 MB
Binary file not shown.

‎assets/videos/IMG_6120.MOV‎

58.2 MB
Binary file not shown.

‎css/crumple.css‎

Lines changed: 75 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -378,7 +378,8 @@
378378
z-index: 1;
379379
}
380380

381-
.crumple-video--alhambra {
381+
.crumple-video--alhambra,
382+
.crumple-video--art {
382383
z-index: 1;
383384
}
384385

@@ -578,11 +579,13 @@
578579
animation: f 1s .25s linear reverse forwards;
579580
}
580581

581-
body.has-hover:not(#trash):not(#essays):not(#poems):has(.footer__link--alhambra:hover) .crumple {
582+
body.has-hover:not(#trash):not(#essays):not(#poems):has(.footer__link--alhambra:hover) .crumple,
583+
body.has-hover:not(#trash):not(#essays):not(#poems):has(.footer__link--art:hover) .crumple {
582584
z-index: 2;
583585
}
584-
585-
body.has-hover:not(#trash):not(#essays):not(#poems):has(.footer__link--alhambra:hover) .crumple-video--alhambra {
586+
587+
body.has-hover:not(#trash):not(#essays):not(#poems):has(.footer__link--alhambra:hover) .crumple-video--alhambra,
588+
body.has-hover:not(#trash):not(#essays):not(#poems):has(.footer__link--art:hover) .crumple-video--art {
586589
opacity: 1;
587590
-webkit-animation: d 1s .25s linear reverse forwards;
588591
animation: d 1s .25s linear reverse forwards;
@@ -593,54 +596,63 @@
593596
display: none;
594597
}
595598

596-
/* Colors for other pages (trash, writings, poems) */
597-
/* First link (blue) - using nth-child(3n+1) */
598-
body#trash:has(.footer > a:nth-child(3n+1):hover) .crumple,
599-
body#essays:has(.footer > a:nth-child(3n+1):hover) .crumple,
600-
body#poems:has(.footer > a:nth-child(3n+1):hover) .crumple {
599+
/* Per-page nav colors — set --c1 through --c5 per body id */
600+
body#essays { --c1: #ab2439; --c2: #5a82b3; --c3: #a36aa5; --c4: #d8a37b; --c5: #e0b3b6; }
601+
body#art { --c1: #c7d14f; --c2: #00b49b; --c3: #96d1aa; --c4: #78cdd0; --c5: #b73f74; }
602+
body#trash { --c1: #020121; --c2: #012118; --c3: #210120; --c4: #020121; --c5: #012118; }
603+
body#poems { --c1: #c1c494; --c2: #bce4e5; --c3: #97acc8; --c4: #099197; --c5: #ebd3a2; --c6: #a5c8d1; }
604+
605+
body#essays:has(.footer > a:hover) .crumple,
606+
body#art:has(.footer > a:hover) .crumple,
607+
body#trash:has(.footer > a:hover) .crumple,
608+
body#poems:has(.footer > a:hover) .crumple {
601609
z-index: 2;
602610
}
603-
604-
body#trash:has(.footer > a:nth-child(3n+1):hover) .crumple:after,
605-
body#essays:has(.footer > a:nth-child(3n+1):hover) .crumple:after,
606-
body#poems:has(.footer > a:nth-child(3n+1):hover) .crumple:after {
607-
background-color: #020121;
608-
opacity: 1;
611+
612+
body#essays:has(.footer > a:nth-child(1):hover) .crumple:after,
613+
body#art:has(.footer > a:nth-child(1):hover) .crumple:after,
614+
body#trash:has(.footer > a:nth-child(1):hover) .crumple:after,
615+
body#poems:has(.footer > a:nth-child(1):hover) .crumple:after {
616+
background-color: var(--c1); opacity: 1;
609617
-webkit-animation: e 1s 0s linear reverse forwards;
610618
animation: e 1s 0s linear reverse forwards;
611619
}
612-
613-
/* Second link (green) - using nth-child(3n+2) */
614-
body#trash:has(.footer > a:nth-child(3n+2):hover) .crumple,
615-
body#essays:has(.footer > a:nth-child(3n+2):hover) .crumple,
616-
body#poems:has(.footer > a:nth-child(3n+2):hover) .crumple {
617-
z-index: 2;
618-
}
619-
620-
body#trash:has(.footer > a:nth-child(3n+2):hover) .crumple:after,
621-
body#essays:has(.footer > a:nth-child(3n+2):hover) .crumple:after,
622-
body#poems:has(.footer > a:nth-child(3n+2):hover) .crumple:after {
623-
background-color: #012118;
624-
opacity: 1;
620+
621+
body#essays:has(.footer > a:nth-child(2):hover) .crumple:after,
622+
body#art:has(.footer > a:nth-child(2):hover) .crumple:after,
623+
body#trash:has(.footer > a:nth-child(2):hover) .crumple:after,
624+
body#poems:has(.footer > a:nth-child(2):hover) .crumple:after {
625+
background-color: var(--c2); opacity: 1;
625626
-webkit-animation: b 1s 0s linear reverse forwards;
626627
animation: b 1s 0s linear reverse forwards;
627628
}
628-
629-
/* Third link (purple) - using nth-child(3n) */
630-
body#trash:has(.footer > a:nth-child(3n):hover) .crumple,
631-
body#essays:has(.footer > a:nth-child(3n):hover) .crumple,
632-
body#poems:has(.footer > a:nth-child(3n):hover) .crumple {
633-
z-index: 2;
634-
}
635-
636-
body#trash:has(.footer > a:nth-child(3n):hover) .crumple:after,
637-
body#essays:has(.footer > a:nth-child(3n):hover) .crumple:after,
638-
body#poems:has(.footer > a:nth-child(3n):hover) .crumple:after {
639-
background-color: #210120;
640-
opacity: 1;
629+
630+
body#essays:has(.footer > a:nth-child(3):hover) .crumple:after,
631+
body#art:has(.footer > a:nth-child(3):hover) .crumple:after,
632+
body#trash:has(.footer > a:nth-child(3):hover) .crumple:after,
633+
body#poems:has(.footer > a:nth-child(3):hover) .crumple:after {
634+
background-color: var(--c3); opacity: 1;
641635
-webkit-animation: c 1s 0s linear reverse forwards;
642636
animation: c 1s 0s linear reverse forwards;
643637
}
638+
639+
body#essays:has(.footer > a:nth-child(4):hover) .crumple:after,
640+
body#art:has(.footer > a:nth-child(4):hover) .crumple:after,
641+
body#trash:has(.footer > a:nth-child(4):hover) .crumple:after,
642+
body#poems:has(.footer > a:nth-child(4):hover) .crumple:after {
643+
background-color: var(--c4); opacity: 1;
644+
-webkit-animation: e 1s 0s linear reverse forwards;
645+
animation: e 1s 0s linear reverse forwards;
646+
}
647+
648+
body#essays:has(.footer > a:nth-child(5):hover) .crumple:after,
649+
body#art:has(.footer > a:nth-child(5):hover) .crumple:after,
650+
body#trash:has(.footer > a:nth-child(5):hover) .crumple:after,
651+
body#poems:has(.footer > a:nth-child(5):hover) .crumple:after {
652+
background-color: var(--c5); opacity: 1;
653+
-webkit-animation: b 1s 0s linear reverse forwards;
654+
animation: b 1s 0s linear reverse forwards;
655+
}
644656

645657
/* Mobile home page: use colors instead of videos */
646658
/* First link (blue) - writing */
@@ -655,12 +667,14 @@
655667
animation: e 1s 0s linear reverse forwards;
656668
}
657669

658-
/* Second link (green) - alhambra */
659-
body.no-hover:not(#trash):not(#essays):not(#poems):has(.footer__link--alhambra:hover) .crumple {
670+
/* Second link (green) - alhambra / art */
671+
body.no-hover:not(#trash):not(#essays):not(#poems):has(.footer__link--alhambra:hover) .crumple,
672+
body.no-hover:not(#trash):not(#essays):not(#poems):has(.footer__link--art:hover) .crumple {
660673
z-index: 2;
661674
}
662-
663-
body.no-hover:not(#trash):not(#essays):not(#poems):has(.footer__link--alhambra:hover) .crumple:after {
675+
676+
body.no-hover:not(#trash):not(#essays):not(#poems):has(.footer__link--alhambra:hover) .crumple:after,
677+
body.no-hover:not(#trash):not(#essays):not(#poems):has(.footer__link--art:hover) .crumple:after {
664678
background-color: #012118;
665679
opacity: 1;
666680
-webkit-animation: b 1s 0s linear reverse forwards;
@@ -812,18 +826,21 @@ body:has(.footer__link--home:hover) .crumple:after {
812826
background-image: none;
813827
}
814828

815-
body:has(.footer__link--alhambra:active) .crumple {
829+
body:has(.footer__link--alhambra:active) .crumple,
830+
body:has(.footer__link--art:active) .crumple {
816831
background: transparent;
817832
z-index: 0;
818833
}
819-
820-
body:has(.footer__link--alhambra:active) .crumple-video--alhambra {
834+
835+
body:has(.footer__link--alhambra:active) .crumple-video--alhambra,
836+
body:has(.footer__link--art:active) .crumple-video--art {
821837
opacity: 1;
822838
-webkit-animation: d 1s .25s linear forwards;
823839
animation: d 1s .25s linear forwards;
824840
}
825-
826-
body:has(.footer__link--alhambra:active) .crumple:after {
841+
842+
body:has(.footer__link--alhambra:active) .crumple:after,
843+
body:has(.footer__link--art:active) .crumple:after {
827844
background-image: none;
828845
}
829846
}
@@ -899,18 +916,21 @@ body:has(.footer__link--home:hover) .crumple:after {
899916
background-image: none;
900917
}
901918

902-
body:has(.footer__link--alhambra.mobile-trigger) .crumple {
919+
body:has(.footer__link--alhambra.mobile-trigger) .crumple,
920+
body:has(.footer__link--art.mobile-trigger) .crumple {
903921
background: transparent;
904922
z-index: 0;
905923
}
906-
907-
body:has(.footer__link--alhambra.mobile-trigger) .crumple-video--alhambra {
924+
925+
body:has(.footer__link--alhambra.mobile-trigger) .crumple-video--alhambra,
926+
body:has(.footer__link--art.mobile-trigger) .crumple-video--art {
908927
opacity: 1;
909928
-webkit-animation: d 1s .25s linear forwards;
910929
animation: d 1s .25s linear forwards;
911930
}
912-
913-
body:has(.footer__link--alhambra.mobile-trigger) .crumple:after {
931+
932+
body:has(.footer__link--alhambra.mobile-trigger) .crumple:after,
933+
body:has(.footer__link--art.mobile-trigger) .crumple:after {
914934
background-image: none;
915935
}
916936
}

bauermeister-rainbow.html renamed to essays/bauermeister-rainbow.html

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,10 @@
2222
<meta name="og:type" content="website">
2323
<meta name="theme-color" content="#111">
2424
<!-- 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">
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">
2929
<style>
3030
.essay-img {
3131
max-width: 100%;
@@ -58,7 +58,7 @@
5858
}
5959
</style>
6060
<!-- Webpage Icon -->
61-
<link rel="shortcut icon" href="./assets/images/icon.png" type="image/png">
61+
<link rel="shortcut icon" href="../assets/images/icon.png" type="image/png">
6262
<!-- Fonts -->
6363
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
6464

@@ -71,18 +71,18 @@
7171
<section class="writing">
7272
<div class="top-bar">
7373
<h1 class="header">
74-
<a href="./secrets.html" class="simple-link">
75-
<img class="header-img" src="assets/images/flower.svg">
74+
<a href="../secrets.html" class="simple-link">
75+
<img class="header-img" src="../assets/images/flower.svg">
7676
</a>
77-
<a href="./writings.html" class="simple-link">writing</a>
77+
<a href="../writings.html" class="simple-link">writing</a>
7878
</h1>
7979
</div>
8080

8181
<dl class="list">
8282
<dt>Investigating Bauermeister's Rainbow</dt>
8383
<dd class="list__item">
8484
<figure>
85-
<img class="essay-img" src="assets/images/rainbow-1973.webp" alt="Rainbow 1973">
85+
<img class="essay-img" src="../assets/images/rainbow-1973.webp" alt="Rainbow 1973">
8686
<figcaption>
8787
<em>Rainbow</em> (1973) (18.75 in. x 25.00 in)<br>
8888
<em>Lithograph on paper</em>
@@ -128,15 +128,15 @@ <h1 class="header">
128128
</p>
129129

130130
<figure>
131-
<img class="essay-img" src="assets/images/needless-needles-1972.webp"
131+
<img class="essay-img" src="../assets/images/needless-needles-1972.webp"
132132
alt="Needless Needles 1972">
133133
<figcaption>
134134
<em>Needless Needles</em> (1972) (15.9 x 18.9 x 4.7 in.)<br>
135135
<em>mixed media, india ink, glass lense</em>
136136
</figcaption>
137137
</figure>
138138
<figure>
139-
<img class="essay-img" src="assets/images/needless-needles-1964.webp"
139+
<img class="essay-img" src="../assets/images/needless-needles-1964.webp"
140140
alt="Needless Needles 1964">
141141
<figcaption>
142142
<em>Needless Needles</em>, 1964 (19 5/8 x 23 5/8 in)<br>
@@ -167,17 +167,17 @@ <h1 class="header">
167167
lines as if to fracture and obscure the prism, just as the glass lenses obscure the
168168
image in her lense boxes.
169169
</p>
170-
<img class="essay-img" src="assets/images/rainbow-detail-1.webp" alt="Rainbow detail">
171-
<img class="essay-img" src="assets/images/rainbow-detail-2.webp" alt="Rainbow detail">
170+
<img class="essay-img" src="../assets/images/rainbow-detail-1.webp" alt="Rainbow detail">
171+
<img class="essay-img" src="../assets/images/rainbow-detail-2.webp" alt="Rainbow detail">
172172
<p>
173173
Between the bands are clusters of dark circles, thematic in Bauermeister's work. On
174174
Needless Needles (1964), "multiple spheres, some overlapping each other, some partially
175175
framed by compass lines, suggesting the path of a planet in orbit," (Sechler). The
176176
words cosmic harmony, galaxies, solar systems, energy and a variety of constellations
177177
are clustered around these circular groups.
178178
</p>
179-
<img class="essay-img" src="assets/images/rainbow-detail-3.webp" alt="Rainbow detail">
180-
<img class="essay-img" src="assets/images/rainbow-detail-4.webp" alt="Rainbow detail">
179+
<img class="essay-img" src="../assets/images/rainbow-detail-3.webp" alt="Rainbow detail">
180+
<img class="essay-img" src="../assets/images/rainbow-detail-4.webp" alt="Rainbow detail">
181181
<p>
182182
The two yellow colored parts of the piece below are irregular, and repetition of the
183183
words cancer and sickness make the colored bodies malignant in comparison to the
@@ -188,7 +188,7 @@ <h1 class="header">
188188
</p>
189189

190190
<figure>
191-
<img class="essay-img" src="assets/images/bauermeister-wabenbild-1961.webp"
191+
<img class="essay-img" src="../assets/images/bauermeister-wabenbild-1961.webp"
192192
alt="Wabenbild/Malberg 1961">
193193
<figcaption>
194194
<em>Wabenbild/Malberg</em> 1961 (1 3/8 in. x 1 3/8)<br>
@@ -224,7 +224,7 @@ <h1 class="header">
224224
</p>
225225

226226
<figure>
227-
<img class="essay-img" src="assets/images/orplid-1979.webp"
227+
<img class="essay-img" src="../assets/images/orplid-1979.webp"
228228
alt="Orplid 1 und 2">
229229
<figcaption>
230230
<em>Orplid 1 und 2. Zweiteiliges Mappenwerk.</em> Ca. 1979-82. (15.7 x 19.5 in.)<br>
@@ -316,8 +316,8 @@ <h1 class="header">
316316
</section>
317317

318318
<footer class="footer" id="footer">
319-
<a class="footer__link--home" href=".">home</a>
320-
<a class="footer__link--alhambra" href="./alhambra.html">alhambra</a>
319+
<a class="footer__link--home" href="..">home</a>
320+
<a class="footer__link--art" href="../art.html">art</a>
321321
<a class="footer__link--playlists" href="https://open.spotify.com/user/1286649958"
322322
target="_blank" rel="noopener noreferrer">muze</a>
323323
<a class="footer__link--instagram" href="https://www.instagram.com/eww.york/"

0 commit comments

Comments
 (0)