diff --git a/art.html b/art.html new file mode 100644 index 0000000..dfca4c8 --- /dev/null +++ b/art.html @@ -0,0 +1,72 @@ + + + + + + + + art + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+

+ + art +

+
+ +
+
Alhambra
+
+

+ 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. +

+ see more here +
+
+
+ + +
+
+ + diff --git a/assets/videos/IMG_5997.MOV b/assets/videos/IMG_5997.MOV new file mode 100644 index 0000000..be69125 Binary files /dev/null and b/assets/videos/IMG_5997.MOV differ diff --git a/assets/videos/IMG_1624.MOV b/assets/videos/IMG_6002.MOV similarity index 52% rename from assets/videos/IMG_1624.MOV rename to assets/videos/IMG_6002.MOV index 7e33b9c..eda0eaa 100644 Binary files a/assets/videos/IMG_1624.MOV and b/assets/videos/IMG_6002.MOV differ diff --git a/assets/videos/IMG_6003.MOV b/assets/videos/IMG_6003.MOV new file mode 100644 index 0000000..1ff9e3a Binary files /dev/null and b/assets/videos/IMG_6003.MOV differ diff --git a/assets/videos/IMG_6120.MOV b/assets/videos/IMG_6120.MOV new file mode 100644 index 0000000..eed44a2 Binary files /dev/null and b/assets/videos/IMG_6120.MOV differ diff --git a/css/crumple.css b/css/crumple.css index c1279c1..e96e907 100755 --- a/css/crumple.css +++ b/css/crumple.css @@ -378,7 +378,8 @@ z-index: 1; } -.crumple-video--alhambra { +.crumple-video--alhambra, +.crumple-video--art { z-index: 1; } @@ -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; @@ -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 */ @@ -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; @@ -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; } } @@ -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; } } diff --git a/bauermeister-rainbow.html b/essays/bauermeister-rainbow.html similarity index 92% rename from bauermeister-rainbow.html rename to essays/bauermeister-rainbow.html index e09267b..1ba33fb 100644 --- a/bauermeister-rainbow.html +++ b/essays/bauermeister-rainbow.html @@ -22,10 +22,10 @@ - - - - + + + + - + @@ -71,10 +71,10 @@

- - + + - writing + writing

@@ -82,7 +82,7 @@

Investigating Bauermeister's Rainbow
- Rainbow 1973 + Rainbow 1973
Rainbow (1973) (18.75 in. x 25.00 in)
Lithograph on paper @@ -128,7 +128,7 @@

- Needless Needles 1972
Needless Needles (1972) (15.9 x 18.9 x 4.7 in.)
@@ -136,7 +136,7 @@

- Needless Needles 1964
Needless Needles, 1964 (19 5/8 x 23 5/8 in)
@@ -167,8 +167,8 @@

lines as if to fracture and obscure the prism, just as the glass lenses obscure the image in her lense boxes.

- Rainbow detail - Rainbow detail + Rainbow detail + Rainbow detail

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 @@ -176,8 +176,8 @@

words cosmic harmony, galaxies, solar systems, energy and a variety of constellations are clustered around these circular groups.

- Rainbow detail - Rainbow detail + Rainbow detail + Rainbow detail

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 @@ -188,7 +188,7 @@

- Wabenbild/Malberg 1961
Wabenbild/Malberg 1961 (1 3/8 in. x 1 3/8)
@@ -224,7 +224,7 @@

- Orplid 1 und 2
Orplid 1 und 2. Zweiteiliges Mappenwerk. Ca. 1979-82. (15.7 x 19.5 in.)
@@ -316,8 +316,8 @@