~singpolyma/post-part

fbfb8f0ecf15e6763c898515aa59b14d637b5b17 — Stephen Paul Weber 2 years ago 89f018f
Throw all content in the right order with styles approaching the right direction
5 files changed, 288 insertions(+), 7 deletions(-)

M .gitignore
M Makefile
A _font-face.scss
M index.scss
M index.slim
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"