@@ 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;
+ }
+}
@@ 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);
+ }
+}
@@ 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%;"