~singpolyma/shore50: Initial commit

7 files changed, 302 insertions(+), 0 deletions(-)

A .gitignore
A Makefile
A _font-face.scss
A element.slim
A index.scss
A index.slim
A util.rb

A  => .gitignore +5 -0

@@ 1,5 @@
+assets/
+demo/
+output/
+*.html
+*.css<
\ No newline at end of file

A  => Makefile +16 -0

@@ 1,16 @@
+.PHONY: all entr
+
+all: \
+	index.html index.css
+
+entr:
+	( echo Makefile; find -name '*.rb' -o -name '*.slim' -o -name '*.scss' -o -name '*.purs' -o -name '*.dhall'; find assets/ ) | entr make
+
+index.html: index.slim util.rb element.slim
+	/usr/share/doc/ruby-slim/examples/slimrb -r./util -p index.slim > $@
+
+index.css: index.scss _font-face.scss
+	sassc -Mt expanded index.scss $@
+
+clean:
+	$(RM) -r index.html index.css

A  => _font-face.scss +46 -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;
+	}
+}

A  => element.slim +3 -0

@@ 1,3 @@
+.element class=type style=style
+	- Dir["assets/ELEMENTS/#{type}/*.png"].each do |path|
+		img src=path alt=type

A  => index.scss +143 -0

@@ 1,143 @@
+/*
+* Full source may be found at: https://git.singpolyma.net/shore50
+* Copyright 2023 Stephen Paul Weber <singpolyma.net>
+*
+* 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(abhaya, "assets/Fonts/AbhayaLibre[wght]");
+@include font-face(segoe, "assets/Fonts/Segoe UI");
+
+$fg: black;
+$bg: white;
+$column-width: 50vw;
+
+html, body {
+	margin: 0;
+	font-family: segoe, sans-serif;
+	background: $bg;
+	color: $fg;
+	text-align: center;
+	line-height: 1.7;
+
+	* {
+		box-sizing: border-box;
+	}
+}
+
+h1, h2, h3, h4 { font-family: abhaya, sans-serif; }
+
+#path, #logo {
+	display: inline-block;
+	position: relative;
+
+	#bg {
+		width: 100%;
+		z-index: -1;
+	}
+}
+
+@keyframes fade {
+	from {
+		opacity: 1;
+	}
+	20% {
+		opacity: 1;
+	}
+	34% {
+		opacity: 0;
+	}
+	88% {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+@mixin framedelay($seconds, $animation, $framecount) {
+	animation: #{$seconds}s infinite $animation;
+	@for $i from 1 through ($framecount - 1) {
+		&:nth-of-type(#{$framecount - $i}) {
+			animation-delay: #{($seconds/$framecount)*$i}s;
+		}
+	}
+}
+
+.BANANA {
+	position: absolute;
+	width: 7%;
+
+	img {
+		position: absolute;
+		width: 100%;
+		@include framedelay(12, fade, 9);
+	}
+}
+
+.EGGPLANT {
+	position: absolute;
+	width: 7%;
+
+	img {
+		position: absolute;
+		width: 100%;
+		@include framedelay(12, fade, 9);
+	}
+}
+
+.CHERRIES {
+	position: absolute;
+	width: 10%;
+
+	img {
+		position: absolute;
+		width: 100%;
+		@include framedelay(12, fade, 9);
+	}
+}
+
+.FLOWERS {
+	position: absolute;
+	width: 7%;
+
+	img {
+		position: absolute;
+		width: 100%;
+		@include framedelay(12, fade, 9);
+	}
+}
+
+.BEE {
+	position: absolute;
+	width: 15%;
+
+	img {
+		position: absolute;
+		width: 100%;
+		@include framedelay(12, fade, 3);
+	}
+}
+
+.SITTINGBIRD {
+	position: absolute;
+	width: 15%;
+
+	img {
+		position: absolute;
+		width: 100%;
+		@include framedelay(12, fade, 3);
+	}
+}

A  => index.slim +86 -0

@@ 1,86 @@
+/ Full source may be found at: https://git.singpolyma.net/shore50
+  Copyright 2023 Stephen Paul Weber <singpolyma.net>
+
+  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.
+
+doctype html
+html
+	head
+		meta charset="utf-8"
+		title SHORE50
+		link type="text/css" rel="stylesheet" href="index.css"
+		base target="_blank"
+	body
+		#logo
+			img alt="SHORE 50" src="assets/SHORE50Logo_Elements/WebsiteLogo_BASE.png"
+			== render :element, type: "BEE", style: "top: 50%; right: 25%;"
+			== render :element, type: "SITTINGBIRD", style: "top: 13%; left: 40%;"
+
+		#path
+			img#bg src="assets/WebMainImage_FULL_BASE.png"
+
+			== render :element, type: "BANANA", style: "top: 4%; left: 11%;"
+			== render :element, type: "BANANA", style: "top: 4%; left: 22%;"
+			== render :element, type: "BANANA", style: "top: 6%; left: 15%;"
+
+			== render :element, type: "BANANA", style: "top: 10.5%; left: 26%;"
+			== render :element, type: "BANANA", style: "top: 13%; left: 27%;"
+			== render :element, type: "BANANA", style: "top: 12%; left: 36%;"
+
+			== render :element, type: "BANANA", style: "top: 16%; left: 0%;"
+			== render :element, type: "BANANA", style: "top: 17.5%; left: 4%;"
+			== render :element, type: "BANANA", style: "top: 16.5%; left: 11%;"
+
+			== render :element, type: "BANANA", style: "top: 16%; right: 4%;"
+			== render :element, type: "BANANA", style: "top: 15%; right: 15%;"
+			== render :element, type: "BANANA", style: "top: 17%; right: 15%;"
+
+			== render :element, type: "EGGPLANT", style: "top: 18%; left: 35%;"
+			== render :element, type: "EGGPLANT", style: "top: 20%; left: 37%;"
+			== render :element, type: "EGGPLANT", style: "top: 18%; left: 43%;"
+
+			== render :element, type: "EGGPLANT", style: "top: 27%; left: 1%;"
+			== render :element, type: "EGGPLANT", style: "top: 29%; left: 2%;"
+			== render :element, type: "EGGPLANT", style: "top: 28%; left: 7%;"
+
+			== render :element, type: "EGGPLANT", style: "top: 37%; left: 10%;"
+			== render :element, type: "EGGPLANT", style: "top: 36.5%; left: 14%;"
+			== render :element, type: "EGGPLANT", style: "top: 37.25%; left: 18.5%;"
+
+			== render :element, type: "CHERRIES", style: "top: 32%; right: 25%;"
+			== render :element, type: "CHERRIES", style: "top: 34%; right: 27%;"
+			== render :element, type: "CHERRIES", style: "top: 37.25%; right: 18.5%;"
+
+			== render :element, type: "EGGPLANT", style: "top: 50.25%; right: 32%;"
+			== render :element, type: "EGGPLANT", style: "top: 53%; right: 35%;"
+			== render :element, type: "EGGPLANT", style: "top: 52%; right: 28%;"
+
+			== render :element, type: "CHERRIES", style: "top: 50%; left: 7%;"
+			== render :element, type: "CHERRIES", style: "top: 53%; left: 2%;"
+			== render :element, type: "CHERRIES", style: "top: 49%; left: 0%;"
+
+			== render :element, type: "EGGPLANT", style: "top: 66%; right: 32%;"
+			== render :element, type: "EGGPLANT", style: "top: 68%; right: 35%;"
+			== render :element, type: "EGGPLANT", style: "top: 69%; right: 28%;"
+
+			== render :element, type: "EGGPLANT", style: "top: 80%; right: 7%;"
+			== render :element, type: "EGGPLANT", style: "top: 82%; right: 11%;"
+			== render :element, type: "EGGPLANT", style: "top: 81%; right: 17%;"
+
+			== render :element, type: "CHERRIES", style: "top: 76%; right: 40%;"
+			== render :element, type: "CHERRIES", style: "top: 78%; right: 45%;"
+			== render :element, type: "CHERRIES", style: "top: 79%; right: 35%;"
+
+			== render :element, type: "FLOWERS", style: "top: 94%; left: 10%;"
+			== render :element, type: "FLOWERS", style: "top: 94%; left: 30%;"
+			== render :element, type: "FLOWERS", style: "top: 94%; left: 50%;"

A  => util.rb +3 -0

@@ 1,3 @@
+def render(template, **kwargs)
+	Slim::Template.new(template.to_s + ".slim").render(nil, kwargs)
+end