From c16bf17bae91a6dd19c4c4d5c47551217d015898 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 13 Apr 2021 12:26:13 +0200 Subject: inserting texts --- frontend/site/projects/museum/views/counter.js | 11 ++ frontend/site/projects/museum/views/credits.css | 56 +++++++--- frontend/site/projects/museum/views/credits.js | 123 ++++++++++++++------- frontend/site/projects/museum/views/home.css | 57 ++++++++-- frontend/site/projects/museum/views/home.js | 55 +++++++-- frontend/site/projects/museum/views/nav.overlay.js | 17 ++- frontend/site/projects/museum/views/overlay.css | 2 +- .../site/projects/museum/views/text.overlay.js | 4 +- 8 files changed, 241 insertions(+), 84 deletions(-) (limited to 'frontend/site/projects/museum/views') diff --git a/frontend/site/projects/museum/views/counter.js b/frontend/site/projects/museum/views/counter.js index 270e61f..f930b85 100644 --- a/frontend/site/projects/museum/views/counter.js +++ b/frontend/site/projects/museum/views/counter.js @@ -66,3 +66,14 @@ const commatize = (n, radix) => { while (n) return nums.join("") } + +const JAKRAWAL_TEXTS = [ + "Wildfires occur frequently during the dry season in northern Thailand’s high mountains. The source of fire is not natural but arson.", + "In the past it was hypothesized that local people set the fires to clear land for agricultural use, or for hunting.", + "There were efforts to solve the problem at the community level, but the fires only became more severe.", + "Strangely, the blazes often occurred in the national park—an area difficult for villagers to access.", + "During the wildfire suppression efforts of May 2020, a group of scholars and volunteers discovered important evidence that would change the original hypothesis: They found several instances of improvised devices made of clothes pegs connected to a small battery by a power cable.", + "Combustion was triggered by a small clod of clay positioned in the middle between the pegs, acting as a timer—after melting in the heat the wires attached to the batteries would ignite.", + "Villagers who were interviewed said that this was not a technique that they were familiar with.", + "Although we cannot know the intention of the burners, it is likely that the park’s natural resources are being used to benefit some group of people. And the poor have always been condemned.", +] diff --git a/frontend/site/projects/museum/views/credits.css b/frontend/site/projects/museum/views/credits.css index 8f9bec5..92b1017 100644 --- a/frontend/site/projects/museum/views/credits.css +++ b/frontend/site/projects/museum/views/credits.css @@ -12,6 +12,7 @@ .page a { color: #FF790D; text-decoration: none; + font-weight: bold; } .page-title { font-family: 'Druk'; @@ -36,29 +37,45 @@ /* credits */ .page-left { - display: flex; - flex-direction: column; - justify-content: space-between; - width: 66%; - height: 100%; + width: 33%; } .page-right { - width: 33%; + width: 66%; } -.page-subtitle, -.page-credits .curated-by, -.page-credits-artists div { +.page-subtitle { text-align: center; font-family: 'Druk Wide', sans-serif; text-transform: uppercase; font-size: 2vw; } -.build-credits { + + +.page-credits .page-subtitle { + margin-bottom: 1rem; +} + +.columns { display: flex; flex-direction: row; - justify-content: space-around; - padding: 1vw 0; } + +.credits-rows { + margin-bottom: 1.1rem; +} +.credits-rows > div { + display: flex; + flex-direction: row; +} +.credits-rows > div > div:first-child { + width: 100px; +} +.page-right .column { + width: calc(66% - 0.5rem); +} +.page-right .column:first-child { + margin-right: 1rem; +} + .build-credits div { width: 20vw; } @@ -66,13 +83,18 @@ font-weight: bold; } .page-credits .icons { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; padding: 1vw 0; text-align: center; } -.page-credits .icons svg { - height: 4vmax; - margin-right: 2vmax; +.page-credits .icons img { + height: 2.7rem; + margin-right: 2rem; } -.page-credits .curated-by { - margin-top: 1vw; +.page-credits .icons img.pcai { + height: 4rem; } + diff --git a/frontend/site/projects/museum/views/credits.js b/frontend/site/projects/museum/views/credits.js index 1a0a553..9a19fcf 100644 --- a/frontend/site/projects/museum/views/credits.js +++ b/frontend/site/projects/museum/views/credits.js @@ -3,8 +3,7 @@ import actions from 'site/actions' import "./credits.css" -import { BerlinIcon, HatjeCantz, ATB } from "site/projects/museum/icons" -import { ARTISTS, ARTIST_ORDER } from "site/projects/museum/constants" +import { ArteLogo } from "site/projects/museum/icons" export default class Credits extends Component { constructor(props) { @@ -28,56 +27,94 @@ export default class Credits extends Component {
The Last Museum
-
- {ARTIST_ORDER.map(key => ( -
- {ARTISTS[key].name} -
- ))} -
-
+
CREDITS
+
+
+
ARTWORK CREDITS
+
+
+ +
+
+
- Designed by
- Sometimes Always +
Curator:
Nadim Samman
- Developed by
- Jules LaPlace +
Design:
Sometimes Always +
+
+
Developer:
Jules LaPlace
-
- {BerlinIcon} - {HatjeCantz} - {ATB} +
+ Commissioned by:
+ KW Institute for Contemporary Art
+ Auguststraße 69
+ 10117 Berlin
+ Tel. +49 30 243459-0
+ Fax +49 30 243459-99
+ info@kw-berlin.de
+
+ KW Institute for Contemporary Art is institutionally supported by the Senate Department for Culture and Europe, Berlin.
+
+ The Last Museum is produced in collaboration with Polyeco Contemporary Art Initiative (PCAI), Athens
+
+ Press Enquiries:
+ Natanja von Stosch
+ Tel. +49 30 243459 41
+ nvs@kw-berlin.de
+ Press Releases and Image Material:
+ kw-berlin.de/en/press
-
- CURATED BY NADIM SAMMAN +
+ +
-
- KW Institute for Contemporary Art
- KUNST-WERKE BERLIN e. V.
- Auguststraße 69
- 10117 Berlin
- Tel. +49 30 243459-0
- Fax +49 30 243459-99
- info@kw-berlin.de
-
- Director: Krist Gruijthuijsen
- Chairman: Olafur Eliasson
- Register Court: Amtsgericht Charlottenburg
- Responsible for Content in Accordance with § 10 Section 3 MDStV:
- Krist Gruijthuijsen (Address see above)
-
- Press Contact:
- Natanja von Stosch
- KW Institute for Contemporary Art
- Tel. +49 30 243459 41
- nvs@kw-berlin.de
-
- Press Releases and Image Material:
- kw-berlin.de/en/press + +
+
+ Charles Stankievech
+ The Glass Key
+ Location: Cosmic Ray Research Station, Canadian Rocky Mountains (winter solstice)
+ Videography & Sound design: Charles Stankievech
+
+ Nora Al-Badri
+ This Is Not A Hacker Space
+ Location: C-Base, Berlin, Germany
+ Videography: Siska
+ Soundtrack mix: Shamsa
+ Track mixed in: Cadans - No Connection (Broken Mix)
+ Melodic Acapella female sound: Lynn Adib
+ poem: Nikki Giovanni ‘Ego Tripping’
+ الأمل
+ Al-Amal/ Hope Mars Mission (via YouTube)
+ Special thanks to the Norberta, Gregor and the spaceship crew in Berlin-Mitte; Andy and CCC.
+
+ Juliana Cerqueira Leite
+ Untitled
+ Location: Santa Ifigênia, São Paulo, Brasil
+ Videography & Sound design: Juliana Cerqueira Leite +
+
+ Zohra Opoku
+ The Myths of Eternal Life
+ Videography & Sound Design: Zohra Opoko
+ Location: Unfinished mortuary, Accra, Ghana.
+
+ Nicole Foreshew
+ Dhurany Yanggu 
(message song of running water)
+ Location: Gumbaynggirr Country, Northern Tablelands and Northern Rivers districts of New South Wales, Australia.
+ Videography & Sound Design: Nicole Foreshew
+
+ Jakrawal Nilthamrong
+ Barn Burner
+ Location: Chiang Mai, Thailand.
+ Videography & Sound Design: Jakrawal Nilthamrong +
+
) diff --git a/frontend/site/projects/museum/views/home.css b/frontend/site/projects/museum/views/home.css index 188840b..c8a55c9 100644 --- a/frontend/site/projects/museum/views/home.css +++ b/frontend/site/projects/museum/views/home.css @@ -3,8 +3,9 @@ html { } .app > div.home { display: block; - background: #111111; +/* transition: opacity 0.4s; +*/ opacity: 1.0; cursor: pointer; position: fixed; @@ -15,13 +16,51 @@ html { } .app > div.home.hidden { opacity: 0.0; - pointer-events: none; + cursor: pointer; + /*pointer-events: none;*/ } -.home-byline { - font-family: "Druk Wide"; +/* intro animation */ + +.app > div.home.intro { + background-color: #111111; + background-image: url(/last-museum/static/media/last-museum/homepage.jpg); + background-size: cover; + background-position: center bottom; +} + +.app > div.home.orange-bg { + background-color: #FF790D; +} +.app > div.home.white-bg { + background-color: #ffffff; +} +.app > div.home.black-bg { + background-color: #111111; +} + +.home.white-text div { + color: #ffffff; + text-shadow: 0px 0px 10px #ffffff; +} +.home.white-text div.home-artists, +.home.white-text div.home-message { + text-shadow: 0px 0px 5px #ffffff; +} + +.home.orange-text div { color: #FF790D; + text-shadow: 0px 0px 10px #FF790D; +} +.home.orange-text div.home-artists, +.home.orange-text div.home-message { text-shadow: 0px 0px 5px #FF790D; +} + +/* home styling */ + +.home-byline { + font-family: "Druk Wide"; opacity: 1; white-space: nowrap; transition: opacity 0.2s; @@ -34,9 +73,7 @@ html { font-family: "Druk"; font-weight: 900; font-style: italic; - color: #FF790D; white-space: nowrap; - text-shadow: 0px 0px 10px #FF790D; font-size: 49vh; position: absolute; left: 0; @@ -47,8 +84,6 @@ html { } .home-artists { font-family: "Druk Wide"; - color: #FF790D; - text-shadow: 0px 0px 5px #FF790D; opacity: 1; white-space: nowrap; transition: opacity 0.2s; @@ -60,13 +95,11 @@ html { } .home-message { font-family: "Druk Wide"; - color: #FF790D; - text-shadow: 0px 0px 5px #ff790d; opacity: 0.0; transition: opacity 0.2s; width: 140vh; - font-size: 4vh; - line-height: 1.2; + font-size: 3.5vh; + line-height: 1.1; position: absolute; top: 40vh; text-align: center; diff --git a/frontend/site/projects/museum/views/home.js b/frontend/site/projects/museum/views/home.js index 1520c11..7c42ef9 100644 --- a/frontend/site/projects/museum/views/home.js +++ b/frontend/site/projects/museum/views/home.js @@ -1,13 +1,18 @@ import React, { Component } from 'react' import { connect } from 'react-redux' +import { history } from 'site/store' import actions from 'site/actions' import "./home.css" +let clicked = false +let started = false + class Home extends Component { constructor(props) { super(props) + this.ref = React.createRef() this.handleClick = this.handleClick.bind(this) this.state = { open: false, @@ -26,18 +31,54 @@ class Home extends Component { handleClick(e) { e && e.preventDefault() - if (this.state.open) { - actions.site.interact() - this.setState({ hidden: true }) + actions.site.interact() + + this.index = 0 + const FLASH_TIME = 150 + const order = [ + ["home orange-text intro", FLASH_TIME], + ["home white-text orange-bg", FLASH_TIME], + ["home orange-text white-bg", FLASH_TIME], + ["home white-text orange-bg", FLASH_TIME], + ["home orange-text white-bg", FLASH_TIME], + ["home white-text orange-bg", FLASH_TIME], + ] + + const go = () => { + clearTimeout(this.timeout) + const item = order[this.index] + if (item) { + this.ref.current.className = item[0] + this.index += 1 + this.timeout = setTimeout(go, item[1]) + } else { + this.ref.current.className = "home orange-text intro hidden" + clicked = true + } } - else { - this.setState({ open: true }) + + if (!clicked) { + go() + } else if (!started) { + this.ref.current.className = "home orange-text black-bg open" + setTimeout(() => { + started = true + }, 200) + } else { + this.ref.current.className = "home orange-text orange-bg open" + setTimeout(() => { + history.push("/last-museum/stankievech-1") + }, FLASH_TIME) } } render() { return ( - ) } -- cgit v1.2.3-70-g09d2