From 9544cc4ac396da96b570c93e60de5c62117663fa Mon Sep 17 00:00:00 2001 From: Stephen Paul Weber Date: Mon, 8 Mar 2021 15:11:19 -0500 Subject: [PATCH] Start on new homepage --- Home.purs | 66 +++++++++++++++++++++ Makefile | 11 +++- index.scss | 166 +++++++++++++++++++++++++++++++++++++++++++++++++++++ index.slim | 61 ++++++++++++++++++++ 4 files changed, 303 insertions(+), 1 deletion(-) create mode 100644 Home.purs create mode 100644 index.scss create mode 100644 index.slim diff --git a/Home.purs b/Home.purs new file mode 100644 index 0000000..4c36ba4 --- /dev/null +++ b/Home.purs @@ -0,0 +1,66 @@ +-- Full source may be found at: https://git.singpolyma.net/post-part +-- Copyright 2020 Stephen Paul Weber +-- +-- Permission to use, copy, modify, and/or distribute this software for any +-- purpose with or without fee is hereby granted, provided that the above +-- copyright notice and this permission notice appear in all copies. +-- +-- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES +-- WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF +-- MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY +-- SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER +-- RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF +-- CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN +-- CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. + +module Home where + +import Prelude +import Effect +import Effect.Class +import Data.Maybe +import Data.Either +import Data.Array +import Debug.Trace +import Data.Traversable +import Math as Math +import Data.Tuple (Tuple(..)) +import Data.Int as Int +import Effect.Timer as Timer +import Effect.Ref as Ref +import Effect.Aff (Aff, Canceler(..), makeAff, launchAff_) +import Web.DOM.ParentNode (querySelector, querySelectorAll, QuerySelector(..), ParentNode) +import Web.DOM.Document as DOMDocument +import Web.HTML.HTMLDocument as HTMLDocument +import Web.HTML.HTMLElement as HTMLElement +import Web.HTML.HTMLMediaElement as HTMLMediaElement +import Web.HTML (window, HTMLElement, HTMLMediaElement) +import Web.HTML.Event.EventTypes (load) +import Web.UIEvent.MouseEvent as MouseEvent +import Web.UIEvent.MouseEvent.EventTypes (mousemove, mouseout, click) +import Web.HTML.Window as Window +import Web.DOM.Element as Element +import Web.DOM.NodeList as NodeList +import Web.DOM.DOMTokenList as DOMTokenList +import Web.Event.EventTarget (addEventListener, eventListener) +import Partial.Unsafe (unsafePartial) +import Web.CSSOM.ElementCSSInlineStyle as Style +import Web.CSSOM.CSSStyleDeclaration as Style + +data TickTock = Tick | Tock + +tick Tick = Tock +tick Tock = Tick + +main = unsafePartial $ do + win <- window + doc <- HTMLDocument.toParentNode <$> Window.document win + tickTockRef <- Ref.new Tick + Timer.setInterval 10000 $ do + Just slideshow <- (HTMLElement.fromElement =<< _) <$> + querySelector (QuerySelector "#slideshow img") doc + slideshowStyle <- Style.style (Style.fromHTMLElement slideshow) + tickTock <- Ref.modify tick tickTockRef + case tickTock of + Tick -> Style.setProperty slideshowStyle "opacity" "0" + Tock -> Style.setProperty slideshowStyle "opacity" "1" diff --git a/Makefile b/Makefile index 8f45f5f..6ce7afe 100644 --- a/Makefile +++ b/Makefile @@ -1,10 +1,19 @@ .PHONY: all entr -all: interactive/index.html interactive/index.css interactive/index.js +all: index.html index.css index.js interactive/index.html interactive/index.css interactive/index.js entr: ( find -name '*.slim' -o -name '*.scss' -o -name '*.purs' -o -name '*.dhall'; find assets/ ) | entr make +index.html: index.slim assets/paras.txt + /usr/share/doc/ruby-slim/examples/slimrb -p index.slim > $@ + +index.css: index.scss _font-face.scss + sassc -Mt expanded index.scss $@ + +index.js: Home.purs packages.dhall spago.dhall + spago bundle-app -u-c --main Home --to index.js + interactive/index.html: interactive/index.slim assets/paras.txt assets/audio/transcripts.txt /usr/share/doc/ruby-slim/examples/slimrb -p interactive/index.slim > $@ diff --git a/index.scss b/index.scss new file mode 100644 index 0000000..6751858 --- /dev/null +++ b/index.scss @@ -0,0 +1,166 @@ +/* +* Full source may be found at: https://git.singpolyma.net/post-part +* Copyright 2020 Stephen Paul Weber +* +* Permission to use, copy, modify, and/or distribute this software for any +* purpose with or without fee is hereby granted, provided that the above +* copyright notice and this permission notice appear in all copies. +* +* THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES +* WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF +* MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY +* SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER +* RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF +* CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN +* CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. +*/ + +@import "font-face"; + +@include font-face(cardo, "assets/fonts/cardo-v12-latin-regular"); +@include font-face(druk, "assets/fonts/Druk Wide Web Medium Regular", null, null, woff2 woff ttf otf); + +$bg: black; +$fg: #fff9e4; +$fg-alt: #887a00; +$column-width: 50vw; + +html, body { + margin: 0; + font-family: cardo, sans-serif; + background: $bg; + color: $fg; + text-align: center; + line-height: 1.7; + + * { + box-sizing: border-box; + } +} + +body > hgroup { + position: relative; + font-family: druk, sans-serif; + + h1 { + display: block; + width: 100%; + height: 50vh; + margin-top: 2em; + background: url(assets/img/POST-PART-TITLE.png) no-repeat center; + background-size: contain; + color: rgba(0, 0, 0, 0); + margin-bottom: 3em; + } +} + +a, a:visited { + color: #0bf; + &:hover { + color: #fb0; + } +} + +h1, h2 { + font-weight: normal; + font-family: druk; +} + +body > a[href^="https://gofund.me"] { + &, &:link, &:visited { + display: inline-block; + text-decoration: none; + background: $fg-alt; + color: $fg; + font-size: 2em; + padding: 0.5em; + } +} + +p { + max-width: $column-width; + margin: 5em auto; + font-size: 1.5em; +} + +img { + max-width: 90%; +} + +#slideshow { + position: relative; + overflow: hidden; + + img:first-of-type { + position: absolute; + opacity: 1; + transition: opacity 2s; + } +} + +body > section { + background: $fg; + color: $fg-alt; + padding-top: 5em; + padding-bottom: 5em; +} + +#location { + ol { counter-reset: ol; } + + li { + list-style-type: none; + margin: 2em 0; + font-size: 1.5em; + + &:before { + display: inline-block; + counter-increment: ol; + content: counter(ol); + background: $bg; + color: $fg; + border-radius: 100%; + width: 1.6em; + height: 1.6em; + margin-right: 0.3em; + } + + img { + width: $column-width/2; + max-width: 90%; + display: block; + margin: 1em auto; + } + } + + > p > a > img { + display: inline-block; + margin-top: 0.5em; + } + + &:before { + content: ""; + display: block; + margin: auto; + background: url("assets/img/womb-pattern.svg") no-repeat center center; + background-size: contain; + height: $column-width/2; + max-width: $column-width; + } + + &:after { + content: ""; + display: block; + margin: auto; + background: url("assets/img/WOMAN-MIRRORED.png") no-repeat center center; + background-size: contain; + height: $column-width/2; + max-width: $column-width; + } +} + +a[href="interactive"] { + display: block; + font-size: 1.5em; + margin-bottom: 5em; +} diff --git a/index.slim b/index.slim new file mode 100644 index 0000000..aff2f69 --- /dev/null +++ b/index.slim @@ -0,0 +1,61 @@ +-# Full source may be found at: https://git.singpolyma.net/post-part +-# Copyright 2020 Stephen Paul Weber +-# +-# Permission to use, copy, modify, and/or distribute this software for any +-# purpose with or without fee is hereby granted, provided that the above +-# copyright notice and this permission notice appear in all copies. +-# +-# THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES +-# WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF +-# MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY +-# SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER +-# RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF +-# CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN +-# CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. + +- paras = File.read("assets/paras.txt").lines +doctype html +html + head + meta charset="utf-8" + title Post-Part + link type="text/css" rel="stylesheet" href="index.css" + script type="text/javascript" src="index.js" + base target="_blank" + body + hgroup + h1 Post-Part + + a href="https://gofund.me/b0a0ac62" Donate + + p= paras[8] + p= paras[9] + p= paras[13] + + #slideshow + img src="assets/img/wallpaper-normal.png" alt="Wallpaper in natural light" + img src="assets/img/wallpaper-blue.png" alt="Wallpaper in blue light" + + p== paras[14] + + section#location + h1 Exhibition Location & Partners + #detail-womb + markdown: + 1. [![Abrosia Corner Bakery](assets/img/ambrosia.png)](https://ambrosiacornerbakery.com/) + 1. Bendon Street Parking Garage, at the corer of Charles Street — City of Kitchener site + 1. [![Schneider Haus](assets/img/schneiderhaus.svg)](https://www.schneiderhaus.ca) + + p + == paras[15] + a href="https://www.instagram.com/longernin_collective/" + img src="assets/img/INSTAGRAM.png" alt="Instagram" + + #sponsors + #separator-image + + p Thank you to the following sponsors for their support of the Kitchener exhibition of Post-Part + + LOGOS + + a href="interactive" View our interactive website -- 2.45.2