Skip to content

Mice #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zesameri merged 7 commits into from
Apr 23, 2026
Merged

Mice #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8afd95f
new pages
zesameri Apr 23, 2026
2f121d6
swap videos
zesameri Apr 23, 2026
ac07f1d
use IMG_6003 for muze hover video
zesameri Apr 23, 2026
d76f69f
replace self-referencing art nav with words link on art page
zesameri Apr 23, 2026
842286a
fix relative paths in essays/*.html for subdirectory location
zesameri Apr 23, 2026
2342392
set art page crumple colors
zesameri Apr 23, 2026
c8de28b
more colors
zesameri Apr 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 72 additions & 0 deletions art.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang="en" class="">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-72294820-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'UA-72294820-1');
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>art</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1, maximum-scale=1">
<meta name="description" content="It's whatever you want to make of it.">
<meta name="author" content="kvitka">
<!-- Facebook Metadata -->
<meta name="og:title" content="art">
<meta name="og:description" content="It's whatever you want to make of it.">
<meta name="og:url" content="http://zesameri.github.io">
<meta name="og:type" content="website">
<meta name="theme-color" content="#111">
<!-- Styles -->
<link href="./css/main.css" rel="stylesheet">
<link href="./css/crumple.css" rel="stylesheet">
<link href="./css/font.css" rel="stylesheet">
<link href="./css/mobile.css" rel="stylesheet">
<!-- Webpage Icon -->
<link rel="shortcut icon" href="./assets/images/icon.png" type="image/png">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">

<!-- Jquery Min Library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

</head>
<body id="art">
<div class="content-wrapper">
<section class="writing">
<div class="top-bar">
<h1 class="header">
<a href="./secrets.html" class="simple-link"><img class="header-img" src="assets/images/flower.svg"></a>
art
</h1>
</div>

<dl class="list">
<dt> Alhambra </dt>
<dd class="list__item">
<p>
I visited the Nasrid Palaces of the Alhambra this past summer.
As a child, I wanted to become a mosaicist,
shaping glass squares into flowing forms.
I rekindled that wonder through reconstructing these patterns.
</p>
<a class="list__link" href="./alhambra.html">see more here</a>
</dd>
</dl>
</section>

<footer class="footer" id="footer">
<a class="footer__link--home" href=".">home</a>
<a class="footer__link--writings" href="./writings.html">words</a>
<a class="footer__link--playlists" href="https://open.spotify.com/user/1286649958" target="_blank" rel="noopener noreferrer">muze</a>
<a class="footer__link--instagram" href="https://www.instagram.com/eww.york/" target="_blank" rel="noopener noreferrer">trash</a>
<a class="footer__link--github" href="https://github.com/zesameri" target="_blank" rel="noopener noreferrer">code</a>
</footer>
</div>
<div class="crumple" aria-hidden=""></div>
</body>
</html>
Binary file added assets/videos/IMG_5997.MOV
View file
Open in desktop
Binary file not shown.
Binary file renamed assets/videos/IMG_1624.MOV → assets/videos/IMG_6002.MOV
View file
Open in desktop
Binary file not shown.
Binary file added assets/videos/IMG_6003.MOV
View file
Open in desktop
Binary file not shown.
Binary file added assets/videos/IMG_6120.MOV
View file
Open in desktop
Binary file not shown.
130 changes: 75 additions & 55 deletions css/crumple.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -378,7 +378,8 @@
z-index: 1;
}

.crumple-video--alhambra {
.crumple-video--alhambra,
.crumple-video--art {
z-index: 1;
}

Expand Down Expand Up @@ -578,11 +579,13 @@
animation: f 1s .25s linear reverse forwards;
}

body.has-hover:not(#trash):not(#essays):not(#poems):has(.footer__link--alhambra:hover) .crumple {
body.has-hover:not(#trash):not(#essays):not(#poems):has(.footer__link--alhambra:hover) .crumple,
body.has-hover:not(#trash):not(#essays):not(#poems):has(.footer__link--art:hover) .crumple {
z-index: 2;
}

body.has-hover:not(#trash):not(#essays):not(#poems):has(.footer__link--alhambra:hover) .crumple-video--alhambra {

body.has-hover:not(#trash):not(#essays):not(#poems):has(.footer__link--alhambra:hover) .crumple-video--alhambra,
body.has-hover:not(#trash):not(#essays):not(#poems):has(.footer__link--art:hover) .crumple-video--art {
opacity: 1;
-webkit-animation: d 1s .25s linear reverse forwards;
animation: d 1s .25s linear reverse forwards;
Expand All @@ -593,54 +596,63 @@
display: none;
}

/* Colors for other pages (trash, writings, poems) */
/* First link (blue) - using nth-child(3n+1) */
body#trash:has(.footer > a:nth-child(3n+1):hover) .crumple,
body#essays:has(.footer > a:nth-child(3n+1):hover) .crumple,
body#poems:has(.footer > a:nth-child(3n+1):hover) .crumple {
/* Per-page nav colors — set --c1 through --c5 per body id */
body#essays { --c1: #ab2439; --c2: #5a82b3; --c3: #a36aa5; --c4: #d8a37b; --c5: #e0b3b6; }
body#art { --c1: #c7d14f; --c2: #00b49b; --c3: #96d1aa; --c4: #78cdd0; --c5: #b73f74; }
body#trash { --c1: #020121; --c2: #012118; --c3: #210120; --c4: #020121; --c5: #012118; }
body#poems { --c1: #c1c494; --c2: #bce4e5; --c3: #97acc8; --c4: #099197; --c5: #ebd3a2; --c6: #a5c8d1; }

body#essays:has(.footer > a:hover) .crumple,
body#art:has(.footer > a:hover) .crumple,
body#trash:has(.footer > a:hover) .crumple,
body#poems:has(.footer > a:hover) .crumple {
z-index: 2;
}
body#trash:has(.footer > a:nth-child(3n+1):hover) .crumple:after,
body#essays:has(.footer > a:nth-child(3n+1):hover) .crumple:after,
body#poems:has(.footer > a:nth-child(3n+1):hover) .crumple:after {
background-color: #020121;
opacity: 1;

body#essays:has(.footer > a:nth-child(1):hover) .crumple:after,
body#art:has(.footer > a:nth-child(1):hover) .crumple:after,
body#trash:has(.footer > a:nth-child(1):hover) .crumple:after,
body#poems:has(.footer > a:nth-child(1):hover) .crumple:after {
background-color: var(--c1); opacity: 1;
-webkit-animation: e 1s 0s linear reverse forwards;
animation: e 1s 0s linear reverse forwards;
}

/* Second link (green) - using nth-child(3n+2) */
body#trash:has(.footer > a:nth-child(3n+2):hover) .crumple,
body#essays:has(.footer > a:nth-child(3n+2):hover) .crumple,
body#poems:has(.footer > a:nth-child(3n+2):hover) .crumple {
z-index: 2;
}

body#trash:has(.footer > a:nth-child(3n+2):hover) .crumple:after,
body#essays:has(.footer > a:nth-child(3n+2):hover) .crumple:after,
body#poems:has(.footer > a:nth-child(3n+2):hover) .crumple:after {
background-color: #012118;
opacity: 1;

body#essays:has(.footer > a:nth-child(2):hover) .crumple:after,
body#art:has(.footer > a:nth-child(2):hover) .crumple:after,
body#trash:has(.footer > a:nth-child(2):hover) .crumple:after,
body#poems:has(.footer > a:nth-child(2):hover) .crumple:after {
background-color: var(--c2); opacity: 1;
-webkit-animation: b 1s 0s linear reverse forwards;
animation: b 1s 0s linear reverse forwards;
}

/* Third link (purple) - using nth-child(3n) */
body#trash:has(.footer > a:nth-child(3n):hover) .crumple,
body#essays:has(.footer > a:nth-child(3n):hover) .crumple,
body#poems:has(.footer > a:nth-child(3n):hover) .crumple {
z-index: 2;
}

body#trash:has(.footer > a:nth-child(3n):hover) .crumple:after,
body#essays:has(.footer > a:nth-child(3n):hover) .crumple:after,
body#poems:has(.footer > a:nth-child(3n):hover) .crumple:after {
background-color: #210120;
opacity: 1;

body#essays:has(.footer > a:nth-child(3):hover) .crumple:after,
body#art:has(.footer > a:nth-child(3):hover) .crumple:after,
body#trash:has(.footer > a:nth-child(3):hover) .crumple:after,
body#poems:has(.footer > a:nth-child(3):hover) .crumple:after {
background-color: var(--c3); opacity: 1;
-webkit-animation: c 1s 0s linear reverse forwards;
animation: c 1s 0s linear reverse forwards;
}

body#essays:has(.footer > a:nth-child(4):hover) .crumple:after,
body#art:has(.footer > a:nth-child(4):hover) .crumple:after,
body#trash:has(.footer > a:nth-child(4):hover) .crumple:after,
body#poems:has(.footer > a:nth-child(4):hover) .crumple:after {
background-color: var(--c4); opacity: 1;
-webkit-animation: e 1s 0s linear reverse forwards;
animation: e 1s 0s linear reverse forwards;
}

body#essays:has(.footer > a:nth-child(5):hover) .crumple:after,
body#art:has(.footer > a:nth-child(5):hover) .crumple:after,
body#trash:has(.footer > a:nth-child(5):hover) .crumple:after,
body#poems:has(.footer > a:nth-child(5):hover) .crumple:after {
background-color: var(--c5); opacity: 1;
-webkit-animation: b 1s 0s linear reverse forwards;
animation: b 1s 0s linear reverse forwards;
}

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

/* Second link (green) - alhambra */
body.no-hover:not(#trash):not(#essays):not(#poems):has(.footer__link--alhambra:hover) .crumple {
/* Second link (green) - alhambra / art */
body.no-hover:not(#trash):not(#essays):not(#poems):has(.footer__link--alhambra:hover) .crumple,
body.no-hover:not(#trash):not(#essays):not(#poems):has(.footer__link--art:hover) .crumple {
z-index: 2;
}

body.no-hover:not(#trash):not(#essays):not(#poems):has(.footer__link--alhambra:hover) .crumple:after {

body.no-hover:not(#trash):not(#essays):not(#poems):has(.footer__link--alhambra:hover) .crumple:after,
body.no-hover:not(#trash):not(#essays):not(#poems):has(.footer__link--art:hover) .crumple:after {
background-color: #012118;
opacity: 1;
-webkit-animation: b 1s 0s linear reverse forwards;
Expand Down Expand Up @@ -812,18 +826,21 @@ body:has(.footer__link--home:hover) .crumple:after {
background-image: none;
}

body:has(.footer__link--alhambra:active) .crumple {
body:has(.footer__link--alhambra:active) .crumple,
body:has(.footer__link--art:active) .crumple {
background: transparent;
z-index: 0;
}

body:has(.footer__link--alhambra:active) .crumple-video--alhambra {

body:has(.footer__link--alhambra:active) .crumple-video--alhambra,
body:has(.footer__link--art:active) .crumple-video--art {
opacity: 1;
-webkit-animation: d 1s .25s linear forwards;
animation: d 1s .25s linear forwards;
}

body:has(.footer__link--alhambra:active) .crumple:after {

body:has(.footer__link--alhambra:active) .crumple:after,
body:has(.footer__link--art:active) .crumple:after {
background-image: none;
}
}
Expand Down Expand Up @@ -899,18 +916,21 @@ body:has(.footer__link--home:hover) .crumple:after {
background-image: none;
}

body:has(.footer__link--alhambra.mobile-trigger) .crumple {
body:has(.footer__link--alhambra.mobile-trigger) .crumple,
body:has(.footer__link--art.mobile-trigger) .crumple {
background: transparent;
z-index: 0;
}

body:has(.footer__link--alhambra.mobile-trigger) .crumple-video--alhambra {

body:has(.footer__link--alhambra.mobile-trigger) .crumple-video--alhambra,
body:has(.footer__link--art.mobile-trigger) .crumple-video--art {
opacity: 1;
-webkit-animation: d 1s .25s linear forwards;
animation: d 1s .25s linear forwards;
}

body:has(.footer__link--alhambra.mobile-trigger) .crumple:after {

body:has(.footer__link--alhambra.mobile-trigger) .crumple:after,
body:has(.footer__link--art.mobile-trigger) .crumple:after {
background-image: none;
}
}
38 changes: 19 additions & 19 deletions bauermeister-rainbow.html → essays/bauermeister-rainbow.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,10 @@
<meta name="og:type" content="website">
<meta name="theme-color" content="#111">
<!-- Styles -->
<link href="./css/main.css" rel="stylesheet">
<link href="./css/crumple.css" rel="stylesheet">
<link href="./css/font.css" rel="stylesheet">
<link href="./css/mobile.css" rel="stylesheet">
<link href="../css/main.css" rel="stylesheet">
<link href="../css/crumple.css" rel="stylesheet">
<link href="../css/font.css" rel="stylesheet">
<link href="../css/mobile.css" rel="stylesheet">
<style>
.essay-img {
max-width: 100%;
Expand Down Expand Up @@ -58,7 +58,7 @@
}
</style>
<!-- Webpage Icon -->
<link rel="shortcut icon" href="./assets/images/icon.png" type="image/png">
<link rel="shortcut icon" href="../assets/images/icon.png" type="image/png">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">

Expand All @@ -71,18 +71,18 @@
<section class="writing">
<div class="top-bar">
<h1 class="header">
<a href="./secrets.html" class="simple-link">
<img class="header-img" src="assets/images/flower.svg">
<a href="../secrets.html" class="simple-link">
<img class="header-img" src="../assets/images/flower.svg">
</a>
<a href="./writings.html" class="simple-link">writing</a>
<a href="../writings.html" class="simple-link">writing</a>
</h1>
</div>

<dl class="list">
<dt>Investigating Bauermeister's Rainbow</dt>
<dd class="list__item">
<figure>
<img class="essay-img" src="assets/images/rainbow-1973.webp" alt="Rainbow 1973">
<img class="essay-img" src="../assets/images/rainbow-1973.webp" alt="Rainbow 1973">
<figcaption>
<em>Rainbow</em> (1973) (18.75 in. x 25.00 in)<br>
<em>Lithograph on paper</em>
Expand Down Expand Up @@ -128,15 +128,15 @@ <h1 class="header">
</p>

<figure>
<img class="essay-img" src="assets/images/needless-needles-1972.webp"
<img class="essay-img" src="../assets/images/needless-needles-1972.webp"
alt="Needless Needles 1972">
<figcaption>
<em>Needless Needles</em> (1972) (15.9 x 18.9 x 4.7 in.)<br>
<em>mixed media, india ink, glass lense</em>
</figcaption>
</figure>
<figure>
<img class="essay-img" src="assets/images/needless-needles-1964.webp"
<img class="essay-img" src="../assets/images/needless-needles-1964.webp"
alt="Needless Needles 1964">
<figcaption>
<em>Needless Needles</em>, 1964 (19 5/8 x 23 5/8 in)<br>
Expand Down Expand Up @@ -167,17 +167,17 @@ <h1 class="header">
lines as if to fracture and obscure the prism, just as the glass lenses obscure the
image in her lense boxes.
</p>
<img class="essay-img" src="assets/images/rainbow-detail-1.webp" alt="Rainbow detail">
<img class="essay-img" src="assets/images/rainbow-detail-2.webp" alt="Rainbow detail">
<img class="essay-img" src="../assets/images/rainbow-detail-1.webp" alt="Rainbow detail">
<img class="essay-img" src="../assets/images/rainbow-detail-2.webp" alt="Rainbow detail">
<p>
Between the bands are clusters of dark circles, thematic in Bauermeister's work. On
Needless Needles (1964), "multiple spheres, some overlapping each other, some partially
framed by compass lines, suggesting the path of a planet in orbit," (Sechler). The
words cosmic harmony, galaxies, solar systems, energy and a variety of constellations
are clustered around these circular groups.
</p>
<img class="essay-img" src="assets/images/rainbow-detail-3.webp" alt="Rainbow detail">
<img class="essay-img" src="assets/images/rainbow-detail-4.webp" alt="Rainbow detail">
<img class="essay-img" src="../assets/images/rainbow-detail-3.webp" alt="Rainbow detail">
<img class="essay-img" src="../assets/images/rainbow-detail-4.webp" alt="Rainbow detail">
<p>
The two yellow colored parts of the piece below are irregular, and repetition of the
words cancer and sickness make the colored bodies malignant in comparison to the
Expand All @@ -188,7 +188,7 @@ <h1 class="header">
</p>

<figure>
<img class="essay-img" src="assets/images/bauermeister-wabenbild-1961.webp"
<img class="essay-img" src="../assets/images/bauermeister-wabenbild-1961.webp"
alt="Wabenbild/Malberg 1961">
<figcaption>
<em>Wabenbild/Malberg</em> 1961 (1 3/8 in. x 1 3/8)<br>
Expand Down Expand Up @@ -224,7 +224,7 @@ <h1 class="header">
</p>

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

<footer class="footer" id="footer">
<a class="footer__link--home" href=".">home</a>
<a class="footer__link--alhambra" href="./alhambra.html">alhambra</a>
<a class="footer__link--home" href="..">home</a>
<a class="footer__link--art" href="../art.html">art</a>
<a class="footer__link--playlists" href="https://open.spotify.com/user/1286649958"
target="_blank" rel="noopener noreferrer">muze</a>
<a class="footer__link--instagram" href="https://www.instagram.com/eww.york/"
Expand Down
Loading