M .gitignore => .gitignore +4 -0
@@ 1,3 1,4 @@
+/assets/
/bower_components/
/node_modules/
/.pulp-cache/
@@ 8,3 9,6 @@
/.purs*
/.psa*
/.spago
+index.html
+index.css
+index.js<
\ No newline at end of file
M Makefile => Makefile +5 -5
@@ 3,15 3,15 @@
all: index.html index.css index.js
entr:
- ls *.slim *.scss *.purs *.dhall | entr make
+ ( ls *.slim *.scss *.purs *.dhall; find assets/ ) | entr make
-index.html: index.slim
+index.html: index.slim assets/paras.txt
/usr/share/doc/ruby-slim/examples/slimrb -p index.slim > $@
-index.css: index.scss
- sassc -Mt expanded $< $@
+index.css: index.scss _font-face.scss
+ sassc -Mt expanded index.scss $@
-index.js: Main.purs
+index.js: Main.purs packages.dhall spago.dhall
spago bundle-app --main Main --to index.js
clean:
A _font-face.scss => _font-face.scss +46 -0
@@ 0,0 1,46 @@
+// https://gist.github.com/jonathantneal/d0460e5c2d5d7f9bc5e6
+
+// =============================================================================
+// String Replace
+// =============================================================================
+
+@function str-replace($string, $search, $replace: "") {
+ $index: str-index($string, $search);
+
+ @if $index {
+ @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+ }
+
+ @return $string;
+}
+
+// =============================================================================
+// Font Face
+// =============================================================================
+
+@mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff2 woff ttf svg) {
+ $src: null;
+
+ $extmods: (
+ eot: "?",
+ svg: "#" + str-replace($name, " ", "_")
+ );
+
+ $formats: (
+ otf: "opentype",
+ ttf: "truetype"
+ );
+
+ @each $ext in $exts {
+ $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
+ $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
+ $src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma);
+ }
+
+ @font-face {
+ font-family: quote($name);
+ font-style: $style;
+ font-weight: $weight;
+ src: $src;
+ }
+}
M index.scss => index.scss +184 -0
@@ 1,3 1,187 @@
+@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;
+
+ * {
+ box-sizing: border-box;
+ }
+}
+
+body > hgroup {
+ font-family: druk, sans-serif;
+ margin-bottom: 40vh;
+
+ h1 {
+ display: block;
+ width: 100%;
+ height: 50vh;
+ background: url(assets/img/POST-PART-TITLE.png) no-repeat center;
+ background-size: contain;
+ color: rgba(0, 0, 0, 0);
+ }
+}
+
+body > p {
+ max-width: $column-width;
+ margin: 1em auto;
+
+ &:nth-of-type(1) {
+ font-family: druk, sans-serif;
+ background: url(assets/img/BREAST-PATTERN.png) no-repeat center top;
+ background-size: contain;
+ padding-top: 20%;
+ }
+
+ &:nth-of-type(2) {
+// TODO: what should happen on small screens where text won't fit in circle?
+ position: relative;
+ z-index: 0;
+
+ span {
+ position: relative;
+ display: block;
+ background: $fg;
+ color: $fg-alt;
+ border-radius: 100%;
+ height: $column-width;
+ padding: 11em;
+ padding-top: calc(#{$column-width/2} - 5em);
+
+ &:before {
+ display: block;
+ background: url(assets/img/WOMAN-OVAL.png) no-repeat center;
+ background-size: contain;
+ height: 50vh;
+ width: 10vw;
+ content: "";
+ position: absolute;
+ top: -5vh;
+ left: -3vw;
+ z-index: -1;
+ transform: scaleX(-1);
+ }
+
+ &:after {
+ display: block;
+ background: url(assets/img/WOMAN-OVAL.png) no-repeat center;
+ background-size: contain;
+ height: 40vh;
+ width: 10vw;
+ content: "";
+ position: absolute;
+ bottom: -5vh;
+ right: 3vw;
+ }
+ }
+ }
+
+ &:nth-of-type(3) {
+ background: url(assets/img/DETAIL-HAIR.png) no-repeat center top;
+ background-size: 30%;
+ padding-top: 30%;
+ margin-top: 30vh;
+ }
+
+ &:nth-of-type(5) {
+ background: url(assets/img/WOMAN-MIRRORED.png) no-repeat center top;
+ background-size: 40%;
+ padding-top: 30%;
+ margin-top: 30vh;
+ font-family: druk, sans-serif;
+ }
+
+ &:nth-of-type(6) {
+ background: url(assets/img/DETAIL-LEGS.png) no-repeat center top;
+ background-size: 30%;
+ padding-top: 30%;
+ margin-top: 30vh;
+ }
+
+ &.fin {
+ font-size: 2em;
+ font-family: druk, sans-serif;
+ color: $fg-alt;
+ }
+}
+
+#story {
+ background: $fg;
+ color: $fg-alt;
+ margin-top: 30vh;
+
+ > h1 {
+ background: $bg;
+ color: $fg-alt;
+ font-family: druk, sans-serif;
+ padding-bottom: 1em;
+ }
+
+ p {
+ max-width: $column-width;
+ margin: 1em auto;
+ background: url(assets/img/DETAIL-WOMB.png) no-repeat center top;
+ background-size: 30%;
+ padding-top: 23%;
+ margin-top: 10vh;
+ padding-bottom: 10vh;
+ }
+}
+
+#credits {
+ position: relative;
+ margin: auto;
+ max-width: $column-width;
+// TODO: what should happen on small screens where text won't fit in circle?
+ background: $fg;
+ color: $fg-alt;
+ border-radius: 100%;
+ padding: 11em;
+ padding-top: calc(#{$column-width/2} - 4em);
+ margin-top: 15vw;
+ height: $column-width;
+
+ &:before {
+ display: block;
+ background: url(assets/img/WOMAN-ARMS.png) no-repeat center;
+ background-size: contain;
+ width: 16vw;
+ height: 40vw;
+ content: "";
+
+ position: absolute;
+ top: -15vw;
+ left: calc(50% - 8vw);
+ }
+}
+
+footer {
+ background: $fg;
+ color: $fg-alt;
+ padding-top: 2em;
+
+ p {
+ max-width: $column-width;
+ margin: 1em auto;
+ }
+
+ address {
+ display: inline-block;
+ }
+
+ img {
+ max-height: 3em;
+ }
}
M index.slim => index.slim +49 -2
@@ 1,6 1,53 @@
+- paras = File.read("assets/paras.txt").lines
doctype html
html
head
- title Post Part
+ meta charset="utf-8"
+ title Post-Part
+ link type="text/css" rel="stylesheet" href="index.css"
+ script type="text/javascript" src="index.js"
body
- Hai
+ a href="#wallpaper" skip to wallpaper
+ hgroup
+ h1 Post-Part
+ h2 The Yellow Wallpaper
+ p= paras[0]
+ p: span= paras[1]
+ p= paras[2]
+
+ section#story
+ h1 The Story
+ p= paras[3]
+
+ p= paras[4]
+
+ p= paras[5]
+ small Explore the wallpaper with your cursor
+
+ #wallpaper
+
+ section#credits
+ h1= paras[6]
+ p= paras[7]
+
+ p= paras[8]
+ p= paras[9]
+
+ p.fin Thank you
+
+ footer
+ p= paras[10]
+ p= paras[11]
+ p= paras[12]
+
+ img src="assets/img/INSTAGRAM.png" alt="Instagram"
+
+ address
+ ' Contact Us
+ ' Catherine Mellinger
+ ' Nat Janin
+ ' Pazit Cahlon
+
+ img src="assets/img/OAC.svg" alt="Ontario Arts Council"
+
+ img src="assets/img/WORKMAN_ARTS.png" alt="Workman Arts"