Upgrade site

* Now use `inspr` to parameterise most pages.
* Now has a blog section because why not.
* Also has an about page.
* Latest track on home page is now automatically retrieved when running
  `make`.

diff --git a/.gitignore b/.gitignore
new file mode 100644 (file)
index 0000000..f734cd1
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+*.html
+robots.txt

diff --git a/Makefile b/Makefile
index a648eba293a373a942c59597087d5869701f9419..834d9f4de5b2179b5bbe2d19404148e900530fa8 100644 (file)
--- a/Makefile
+++ b/Makefile
@@ -1,3 +1,22 @@
+FILES = ./index.html.sh ./about.html.sh ./blog.html.sh
+POSTS = $(shell find blog -type f -name '*.md')
+FILESOUT = $(patsubst %.html.sh, %.html, $(FILES))
+POSTSOUT = $(patsubst %.md, %.html, $(POSTS))
+
+site: $(FILESOUT) $(POSTSOUT) robots.txt
+
+./%.html : ./%.html.sh
+       inspr "$<" | bash | tee "$@" >/dev/null
+
+blog/%.html : blog/%.md ./blog.sh
+       ./blog.sh "$<" | tee "$@" >/dev/null
+
+robots.txt: robots.txt.sh
+       inspr robots.txt.sh | bash | tee robots.txt >/dev/null
+
 push:
        rsync --exclude-from=rsync-excludes -ruzv -e "ssh -p 993" \
                ./ mi@boxin.space:/var/www/
+
+clean:
+       rm $(FILESOUT) $(POSTSOUT) robots.txt

diff --git a/about.html.sh b/about.html.sh
new file mode 100644 (file)
index 0000000..5bdeaec
--- /dev/null
+++ b/about.html.sh
@@ -0,0 +1,27 @@
+;; source lib.sh
+;; Title About
+;; Head about
+
+<p><img alt="Me!" src="/img/me.jpg"></p>
+
+<p>Hey ^^ I'm _</p><ul>
+       <li>Mi/Mimi/Mira (rhymes with "nearer")</li>
+       <li>sometimes also Daki/Cel</li>
+       <li>she/her or they/them</li>
+       <li>level 21</li>
+       <li>resident on TERF island</li>
+       <li>trans, non-binary, agender</li>
+       <li>bi, aro, polyam, really heckin' gay</li>
+</ul>
+
+<p>I _</p><ul>
+       <li>hate computers</li>
+       <li>try and write code anyway...</li>
+       <li>make noises (some of it even sounds like music!)</li>
+       <li>play bass</li>
+</ul>
+
+<p>and you're unfortunate enough to have found my website! Enjoy your
+stay &lt;3</p>
+
+;; Footer

diff --git a/blog.css b/blog.css
new file mode 100644 (file)
index 0000000..b2a2c7a
--- /dev/null
+++ b/blog.css
@@ -0,0 +1,30 @@
+#blog {
+       list-style-type : none ;
+       margin : 0 ;
+       padding : 0 ;
+       width : 100% ;
+}
+#blog li {
+       width : 100% ;
+       margin : 1em 0 ;
+}
+#blog a {
+       display : block ;
+       font-family : Saviour ;
+       line-height : 0.7 ;
+       font-size : calc(clamp(1em, 7vw, 1.5em)) ;
+       margin-bottom : 0.3em ;
+}
+#blog time {
+       display : block ;
+}
+#blog span {
+       display : block ;
+       font-size : calc(clamp(0.01em, 5vw, 0.8em)) ;
+}
+
+time {
+       text-align : left ;
+       font-size : calc(clamp(0.01em, 4vw, 0.6em)) ;
+}
+

diff --git a/blog.html.sh b/blog.html.sh
new file mode 100644 (file)
index 0000000..d754051
--- /dev/null
+++ b/blog.html.sh
@@ -0,0 +1,24 @@
+;; source lib.sh
+;; TitleA Blog
+       <link type="text/css" rel="stylesheet" href="/blog.css">
+;; TitleB
+;; Head blog
+
+<ul id="blog">
+
+;;>
+find blog -type f -name '*.md' | while read f ; do
+       d="$(sed '3q;d' "$f")"
+cat <<EOF >/dev/stdout
+<li>
+       <time datetime="$d">$(date -d "$d" "+%-d %B %Y")</time>
+       <a href="/${f::-3}">$(sed '1q;d' "$f" | tr 'A-Z' 'a-z')</a>
+       <span>$(sed '2q;d' "$f")</span>
+</li>
+EOF
+done
+<;;
+
+</ul>
+
+;; Footer

diff --git a/blog.sh b/blog.sh
new file mode 100755 (executable)
index 0000000..7e8f489
--- /dev/null
+++ b/blog.sh
@@ -0,0 +1,18 @@
+#!/bin/bash
+
+S="$1"
+d="$(sed '3q;d' "$S")"
+
+title="$(sed '1q;d' "$S")"
+
+source lib.sh
+
+TitleA "$title"
+echo '<link type="text/css" rel="stylesheet" href="/blogwide.css">'
+TitleB
+Head "$(echo "$title" | tr 'A-Z' 'a-z')"
+echo "<time datetime=\"$d\">$(date -d "$d" "+%-d %B %Y")</time>"
+
+tail -n +4 "$S" | markdown | sed 's#<p>\([0-9]*\)<img#<p class="i i\1"><img#'
+
+Footer

diff --git a/blog/2022-01-22/1.mp3 b/blog/2022-01-22/1.mp3
new file mode 100644 (file)
index 0000000..72e8417
Binary files /dev/null and b/blog/2022-01-22/1.mp3 differ

diff --git a/blog/2022-01-22/1.png b/blog/2022-01-22/1.png
new file mode 100644 (file)
index 0000000..2a9edfd
Binary files /dev/null and b/blog/2022-01-22/1.png differ

diff --git a/blog/2022-01-22/2.mp3 b/blog/2022-01-22/2.mp3
new file mode 100644 (file)
index 0000000..ab400a1
Binary files /dev/null and b/blog/2022-01-22/2.mp3 differ

diff --git a/blog/2022-01-22/clipper.png b/blog/2022-01-22/clipper.png
new file mode 100644 (file)
index 0000000..525c63a
Binary files /dev/null and b/blog/2022-01-22/clipper.png differ

diff --git a/blog/2022-01-22/early.png b/blog/2022-01-22/early.png
new file mode 100644 (file)
index 0000000..a813422
Binary files /dev/null and b/blog/2022-01-22/early.png differ

diff --git a/blog/2022-01-22/late.png b/blog/2022-01-22/late.png
new file mode 100644 (file)
index 0000000..aa79d03
Binary files /dev/null and b/blog/2022-01-22/late.png differ

diff --git a/blog/2022-01-22/sub1.mp3 b/blog/2022-01-22/sub1.mp3
new file mode 100644 (file)
index 0000000..00c0bb9
Binary files /dev/null and b/blog/2022-01-22/sub1.mp3 differ

diff --git a/blog/2022-01-22/sub1.png b/blog/2022-01-22/sub1.png
new file mode 100644 (file)
index 0000000..63fe20f
Binary files /dev/null and b/blog/2022-01-22/sub1.png differ

diff --git a/blog/2022-01-22/sub2.mp3 b/blog/2022-01-22/sub2.mp3
new file mode 100644 (file)
index 0000000..d6341d0
Binary files /dev/null and b/blog/2022-01-22/sub2.mp3 differ

diff --git a/blog/2022-01-22/sub2.png b/blog/2022-01-22/sub2.png
new file mode 100644 (file)
index 0000000..8a3d63e
Binary files /dev/null and b/blog/2022-01-22/sub2.png differ

diff --git a/blog/2022-01-22/transient-shaping.md b/blog/2022-01-22/transient-shaping.md
new file mode 100644 (file)
index 0000000..e41ea78
--- /dev/null
+++ b/blog/2022-01-22/transient-shaping.md
@@ -0,0 +1,69 @@
+Transient Shaping on Drums and More
+Make them go pop!
+2022-01-22
+
+Making drums sound really punchy is always fun. Here's what I do to try and make
+them really pop.
+
+First, picking a good sample goes a long way. It's way easier to make a punchy
+drum ***punchy*** than to make a soft pathetic drum punchy. This is my starting
+sound with a frequency shifter to pitch it down somewhere I prefer and with a
+high-pass filter to take out anything below the fundamental. I also shortened it
+with the quick fade out in FL's sampler.
+
+<audio controls><source src="1.mp3" type="audio/mpeg"></audio>
+
+Now on to the magic. In Maximus, the 'Master' channel's attack is a lookahead,
+whereas for the 3 frequency bands it isn't. What this means is that if you turn
+up the attack on the master, you introduce latency and the compressor kicks in
+early, which looks like this in an extreme case:
+
+0![](early.png)
+
+The 'LMH DEL' control introduces a lookahead to the frequency bands if desired,
+but here we want that at 0. Then, use the same kinda settings but this time on
+one of the frequency bands (turn the other two off) and ooh hello!
+
+6![](late.png)
+
+Now rather than our transient being level for a bit before tailing off, because
+the compression comes in just *after* the transient, it ends up being
+accentuated, which makes it nice and tall and spiky, which is where you get your
+punch from. Do notice that the volume is now significantly higher, but before
+you turn the post-gain down, put a soft clipper on it a bit like this:
+
+10![](clipper.png)
+
+That'll eat up a lot of the peak, but rather than limiting it, it'll be
+clipping, which with a soft saturation curve like that not just retains the
+punch, but also adds this wonderful warm "pop" to the transient and gives the
+fundamental some stronger harmonics. This may be undesirable especially on bass
+drums, in which case using saturation to just clip the top off the transient can
+get you similar results, and also keeps your peak volume a bit lower, allowing
+your mix to be a little louder. The result sounds like this:
+
+<audio controls><source src="2.mp3" type="audio/mpeg"></audio>
+
+The effect is subtle, but if you're listening at mixing volume (loud but not
+uncomfortably so), then the second one feels noticeably more immediate.
+However, this technique can be applied to any sound. If you have an immediate
+but sustained sound like a sub bass, you can use this to create transients out
+of thin air!
+
+Before:
+
+0![](sub1.png)
+
+<audio controls><source src="sub1.mp3" type="audio/mpeg"></audio>
+
+And after:
+
+7![](sub2.png)
+
+<audio controls><source src="sub2.mp3" type="audio/mpeg"></audio>
+
+This too can be combined with saturation, but for a sub, it may be preferable to
+just clip the transient for more "pop" rather than introduce more harmonics that
+might interfere with what's sitting above it.
+
+I hope this is helpful ^^

diff --git a/blogwide.css b/blogwide.css
new file mode 100644 (file)
index 0000000..a4895f7
--- /dev/null
+++ b/blogwide.css
@@ -0,0 +1,32 @@
+@media all and (min-width: 115em) {
+       #banner { margin-left : 15em ; }
+       #wrap {
+               transform : translate(-15em, 0) ;
+       }
+
+       p.i {
+               position : relative ;
+               height : 0.2em ;
+               background-color : var(--pink) ;
+               transform : translate(2em, 0) ;
+       }
+
+       p.i img {
+               position : absolute ;
+               left : 100% ;
+               bottom : 0 ;
+               max-width : 15em !important ;
+       }
+
+       .i0  img { transform : translate(0, 0) ; }
+       .i1  img { transform : translate(0, 10%) ; }
+       .i2  img { transform : translate(0, 20%) ; }
+       .i3  img { transform : translate(0, 30%) ; }
+       .i4  img { transform : translate(0, 40%) ; }
+       .i5  img { transform : translate(0, 50%) ; }
+       .i6  img { transform : translate(0, 60%) ; }
+       .i7  img { transform : translate(0, 70%) ; }
+       .i8  img { transform : translate(0, 80%) ; }
+       .i9  img { transform : translate(0, 90%) ; }
+       .i10 img { transform : translate(0, 100%) ; }
+}

diff --git a/font/Atkinson-Hyperlegible-Bold.ttf b/font/Atkinson-Hyperlegible-Bold.ttf
new file mode 100644 (file)
index 0000000..14b7196
Binary files /dev/null and b/font/Atkinson-Hyperlegible-Bold.ttf differ

diff --git a/font/Atkinson-Hyperlegible-BoldItalic.ttf b/font/Atkinson-Hyperlegible-BoldItalic.ttf
new file mode 100644 (file)
index 0000000..4532705
Binary files /dev/null and b/font/Atkinson-Hyperlegible-BoldItalic.ttf differ

diff --git a/font/Atkinson-Hyperlegible-Italic.ttf b/font/Atkinson-Hyperlegible-Italic.ttf
new file mode 100644 (file)
index 0000000..89e5ce4
Binary files /dev/null and b/font/Atkinson-Hyperlegible-Italic.ttf differ

diff --git a/font/Atkinson-Hyperlegible-Regular.ttf b/font/Atkinson-Hyperlegible-Regular.ttf
new file mode 100644 (file)
index 0000000..c4fa6fb
Binary files /dev/null and b/font/Atkinson-Hyperlegible-Regular.ttf differ

diff --git a/global.css b/global.css
index 580354cb072a416e6a8ea8dfec9d36d86b1751b5..968aef192b5070133eaf76da34d6076fc8e52555 100644 (file)
--- a/global.css
+++ b/global.css
@@ -1,17 +1,14 @@
 /* VARIABLES */
 
 :root {
-       --b    : #212121 ;
+       --b    : #000    ;
+       --g    : #212121 ;
        --w    : #fff    ;
        --grey : #6b6b6b ;
-       --purp : #aa2bd4 ;
+       --dpur : #aa2bd4 ;
+       --lpur : #d56ef7 ;
        --pink : #ff297f ;
        --cyan : #00ffff ;
-
-       --1 : 16px ;
-       --2 : 32px ;
-       --3 : 48px ;
-       --4 : 64px ;
 }
 
 /* FONTS */
@@ -21,8 +18,26 @@
        src         : url('/font/Savior4.ttf') ;
 }
 
-/* ensure no AA on bitmap font */
-a.block > b , a.block > span , h2 , p , footer { filter : contrast(1) ; }
+@font-face {
+       font-family : Atkinson                                       ;
+       src         : url('/font/Atkinson-Hyperlegible-Regular.ttf') ;
+}
+@font-face {
+       font-family : Atkinson                                    ;
+       src         : url('/font/Atkinson-Hyperlegible-Bold.ttf') ;
+       font-weight : bold                                        ;
+}
+@font-face {
+       font-family : Atkinson                                      ;
+       src         : url('/font/Atkinson-Hyperlegible-Italic.ttf') ;
+       font-style  : italic                                        ;
+}
+@font-face {
+       font-family : Atkinson                                          ;
+       src         : url('/font/Atkinson-Hyperlegible-BoldItalic.ttf') ;
+       font-style  : italic                                            ;
+       font-weight : bold                                              ;
+}
 
 /* ANIMATIONS */
 
@@ -39,26 +54,60 @@ a.block > b , a.block > span , h2 , p , footer { filter : contrast(1) ; }
 /* STYLES */
 
 html {
-       font-family : Saviour, monospace ;
-       scrollbar-color : var(--cyan) var(--b) ;
+       scrollbar-color : var(--pink) var(--w) ;
        overflow-x : hidden ;
+       background-image    : url('/img/bgdark.png') ;
+       background-repeat   : repeat-y           ;
+       background-position : center top         ;
+       background-color    : var(--b) ;
+}
+
+@media all and (max-width: 42em) {
+       body { background-size : 47px, 47px ; }
+       #wrap { width : calc(100% - 94px) !important ; }
+}
+
+@media all and (max-width: 70em) {
+       body {
+               background-image    : url('/img/bgthinright2.png' ) ,
+                                     url('/img/bgthinleft2.png') !important ;
+       }
+       #wrap { width : calc(100% - 188px) ; }
+}
+
+@media all and (min-width: 70em) {
+       body {
+               background-image    : url('/img/bgright.png' ) ,
+                                     url('/img/bgleft.png') ;
+       }
+       #wrap { width : calc(100% - 280px) ; }
 }
 
 body {
-       margin             : 0             ;
-       padding            : 0             ;
+       margin             : 0 auto        ;
        width              : 100%          ;
        min-height         : 100vh         ;
+       overflow-x         : hidden ;
+       font-family        : Atkinson ;
+
+       background-repeat   : repeat-y, repeat-y          ;
+       background-position : left top, right top         ;
+}
+
+#wrap {
+       margin : 0 auto ;
+       max-width : 52em ;
+       min-height : 100vh ;
        display            : grid          ;
-       grid-template-rows : auto 1fr auto ;
+       grid-template-rows : auto auto 1fr auto ;
+       color : var(--w) ;
 }
 
 #banner {
-       display                    : block                                    ;
-       margin                     : 0 auto                                   ;
-       animation                  : glitch 0.2s linear 1s 1 normal backwards ;
-       width                      : 975px                                    ;
-       max-width                  : 95%                                      ;
+       display : block ;
+       margin : 0 auto ;
+       animation : glitch 0.2s linear 1s 1 normal backwards ;
+       max-width : 100% ;
        transition                 : transform 0.05s                          ;
        transition-timing-function : ease-out                                 ;
 }
@@ -67,86 +116,53 @@ a:hover > #banner , a:focus > #banner {
        transform : rotate(-1.5deg) scale(1.05) ;
 }
 
-h2 {
-       color        : var(--purp) ;
-       font-weight  : normal      ;
-       text-align   : center      ;
-       margin-top   : 0           ;
-       display      : block       ;
-       margin-left  : auto        ;
-       margin-right : auto        ;
+#head {
+       text-align : center ;
+       font-family : Saviour ;
+       color : var(--lpur) ;
+       line-height : 0.7 ;
+       font-size : calc(clamp(1em, 8vw, 4em)) ;
 }
 
-div.gif {
-       width : 180px ;
-       height : 180px ;
-       background-size : cover ;
-       display : block ;
-}
+p , ul { font-size : calc(clamp(1em, 5vw, 2em)) ; }
+ul { list-style-type : '- ' ; }
 
-#latest { background-image : url('/img/latest.png'   ) ; }
-a.block:hover #latest , a.block:focus #latest {
-       background-image : url('/img/latest.gif') ;
-}
-#bandcamp { background-image : url('/img/bandcamp.png' ) ; }
-a.block:hover #bandcamp , a.block:focus #bandcamp {
-       background-image : url('/img/bandcamp.gif') ;
-}
-#mastodon { background-image : url('/img/mastodon.png' ) ; }
-a.block:hover #mastodon , a.block:focus #mastodon {
-       background-image : url('/img/mastodon.gif') ;
-}
-#funkwhale { background-image : url('/img/funkwhale.png') ; }
-a.block:hover #funkwhale , a.block:focus #funkwhale {
-       background-image : url('/img/funkwhale.gif') ;
+time {
+       color : var(--grey) ;
+       font-size : calc(clamp(0.01em, 4vw, 1.2em)) ;
+       text-align : right ;
 }
 
-a {
-       color                      : var(--purp)       ;
-       transition                 : text-shadow 0.03s ;
-       transition-timing-function : ease-out          ;
-}
-a:hover , a:focus {
-       text-shadow : 3px 0 1px var(--cyan) , -3px 0 1px var(--pink) ;
+img:not(#banner) , audio {
+       display : block ;
+       margin : 0 auto ;
+       max-width : calc(100% - 4em) ;
+       filter : drop-shadow(-0.5em -0.2em 0px var(--pink))
+                drop-shadow(0.5em 0.2em 0px var(--cyan)) ;
 }
 
-a.block {
-       text-decoration : none ;
-       color : #212121 ;
-       transition : transform 0.05s ;
-       transition-timing-function : ease-out ;
+img:not(#banner) {
+       max-height : 50em ;
 }
 
-a.block.l:hover , a.block.l:focus { transform : rotate( 1.5deg) scale(1.05) ; }
-a.block.r:hover , a.block.r:focus { transform : rotate(-1.5deg) scale(1.05) ; }
-
-hr {
-       border           : none     ;
+audio {
+       width : 100% ;
        background-color : var(--b) ;
-       height           : 3px      ;
-       position         : relative ;
 }
 
-hr:after {
-       content : '' ;
-       display : block ;
-       background-image : url('/img/trans.png') ;
-       width  : 69px ;
-       height : 7px ;
-       position : absolute ;
-       top : -2px ;
+footer {
+       max-width : 100% ;
+       margin : 1em auto ;
+       text-align : center ;
+       color : var(--grey) ;
+       font-size : min(1em, 2.1vw) ;
 }
 
-p {
-       text-align : center   ;
-       display    : block    ;
-       margin     : auto     ;
-       color      : var(--b) ;
+a {
+       color                      : var(--lpur)       ;
+       transition                 : text-shadow 0.03s ;
+       transition-timing-function : ease-out          ;
 }
-
-footer {
-       text-align : center      ;
-       color      : var(--grey) ;
-       display    : block       ;
-       margin     : auto        ;
+a:hover , a:focus {
+       text-shadow : 0.2em 0 1px var(--cyan) , -0.2em 0 1px var(--pink) ;
 }

diff --git a/img/about.gif b/img/about.gif
new file mode 100644 (file)
index 0000000..1c61001
Binary files /dev/null and b/img/about.gif differ

diff --git a/img/about.png b/img/about.png
new file mode 100644 (file)
index 0000000..ece7f8e
Binary files /dev/null and b/img/about.png differ

diff --git a/img/banner.png b/img/banner.png
index 3cb6cbe9d2bb7d57222263e2f961f071524281c9..434368964ae1e08e52d3d97b5bd3f71bb4c86373 100644 (file)
Binary files a/img/banner.png and b/img/banner.png differ

diff --git a/img/bg.png b/img/bg.png
index eb051bc4c53ad86b0ce8c4174e40fee59deb52ab..a35efe515ccb9314ce09e61b67297a68983ab81d 100644 (file)
Binary files a/img/bg.png and b/img/bg.png differ

diff --git a/img/bgdark.png b/img/bgdark.png
new file mode 100644 (file)
index 0000000..226333d
Binary files /dev/null and b/img/bgdark.png differ

diff --git a/img/bgleft.png b/img/bgleft.png
new file mode 100644 (file)
index 0000000..085b467
Binary files /dev/null and b/img/bgleft.png differ

diff --git a/img/bgright.png b/img/bgright.png
new file mode 100644 (file)
index 0000000..664fa9f
Binary files /dev/null and b/img/bgright.png differ

diff --git a/img/bgthinleft.png b/img/bgthinleft.png
index 128d55dc16c5178d39f334c9297567db156d9f78..ddbeea290bf1b5edb69eaf7b6e5064cd5a9e7cad 100644 (file)
Binary files a/img/bgthinleft.png and b/img/bgthinleft.png differ

diff --git a/img/bgthinleft2.png b/img/bgthinleft2.png
new file mode 100644 (file)
index 0000000..29981d7
Binary files /dev/null and b/img/bgthinleft2.png differ

diff --git a/img/bgthinright.png b/img/bgthinright.png
index 862def9808bcf46ae6d3910834f10f6343e0c4c4..8304c0d6ed98d8c15649feaabca973322ddde4a3 100644 (file)
Binary files a/img/bgthinright.png and b/img/bgthinright.png differ

diff --git a/img/bgthinright2.png b/img/bgthinright2.png
new file mode 100644 (file)
index 0000000..5059886
Binary files /dev/null and b/img/bgthinright2.png differ

diff --git a/img/blog.gif b/img/blog.gif
new file mode 100644 (file)
index 0000000..dc0309e
Binary files /dev/null and b/img/blog.gif differ

diff --git a/img/blog.png b/img/blog.png
new file mode 100644 (file)
index 0000000..fd2015c
Binary files /dev/null and b/img/blog.png differ

diff --git a/img/border.png b/img/border.png
new file mode 100644 (file)
index 0000000..b6787cf
Binary files /dev/null and b/img/border.png differ

diff --git a/img/code.gif b/img/code.gif
new file mode 100644 (file)
index 0000000..4ac828a
Binary files /dev/null and b/img/code.gif differ

diff --git a/img/code.png b/img/code.png
new file mode 100644 (file)
index 0000000..96f6c5f
Binary files /dev/null and b/img/code.png differ

diff --git a/img/latest.gif b/img/latest.gif
index 22715047daef51e528da1281275eab4a71a131d2..8bae8a4d56b679fe80e07c349a6d66bb6d459b9a 100644 (file)
Binary files a/img/latest.gif and b/img/latest.gif differ

diff --git a/img/latest.png b/img/latest.png
index a98e04514da98754bddcb41b0ff389b3170ce06b..3486b360b4885b985d5a498074feda000cd452cb 100644 (file)
Binary files a/img/latest.png and b/img/latest.png differ

diff --git a/img/me.jpg b/img/me.jpg
new file mode 100644 (file)
index 0000000..113497f
Binary files /dev/null and b/img/me.jpg differ

diff --git a/img/pagesleft.png b/img/pagesleft.png
new file mode 100644 (file)
index 0000000..965ad10
Binary files /dev/null and b/img/pagesleft.png differ

diff --git a/img/pagesright.png b/img/pagesright.png
new file mode 100644 (file)
index 0000000..f2cbd1c
Binary files /dev/null and b/img/pagesright.png differ

diff --git a/index.css b/index.css
new file mode 100644 (file)
index 0000000..92b06ae
--- /dev/null
+++ b/index.css
@@ -0,0 +1,120 @@
+html {
+       scrollbar-color : var(--cyan) var(--g) ;
+       background-image : url('/img/bg.png') ;
+}
+
+@media all and (max-width: 42em) {
+       body { background-size : 47px, 47px ; }
+       #wrap { width : calc(100% - 94px) !important ; }
+}
+
+@media all and (max-width: 70em) {
+       body {
+               background-image    : url('/img/bgthinleft.png' ) ,
+                                     url('/img/bgthinright.png') !important ;
+       }
+       #wrap { width : calc(100% - 188px) ; }
+}
+
+@media all and (min-width: 70em) {
+       body {
+               background-image    : url('/img/bgleft.png' ) ,
+                                     url('/img/bgright.png') ;
+       }
+       #wrap { width : calc(100% - 280px) ; }
+}
+
+body { max-width          : calc(70em + 280px) ; }
+
+#head { color : var(--dpur) ; }
+
+#wrap {
+       background-color : var(--w) ;
+       max-width : 70em ;
+}
+
+a {
+       color : var(--dpur) ;
+}
+
+div.gif {
+       width : 180px ;
+       height : 180px ;
+       max-width : 28vw ;
+       max-height : 28vw ;
+       background-size : cover ;
+       display : block ;
+}
+
+#links > div , #links { width : 100% ; }
+
+#links a {
+       display : inline-flex ;
+       flex-wrap : nowrap ;
+       justify-content : flex-start ;
+       align-items : center ;
+       text-decoration : none ;
+       transition : transform 0.05s ;
+       transition-timing-function : ease-out ;
+}
+
+#links > div:nth-child(even) {
+       text-align : right ;
+       margin : calc(clamp(max(-90px, -17.5vw), calc(8em - 20vw) , 0px)) auto ;
+}
+
+#links div:nth-child(even) a { flex-direction : row-reverse ; }
+
+#links div:nth-child(odd) a:hover , #links div:nth-child(odd) a:focus {
+       transform : rotate(1.5deg) scale(1.05) ;
+}
+#links div:nth-child(even) a:hover , #links div:nth-child(even) a:focus {
+       transform : rotate(-1.5deg) scale(1.05) ;
+}
+
+.gifheader {
+       font-family : Saviour, monospace ;
+       line-height : 0.7 ;
+       max-width : calc(100% - min(180px, 28vw)) ;
+}
+
+.gifheader h2 {
+       margin : 0 ;
+       font-size : calc(clamp(1em, 10vw, 4.5em)) ;
+       color : var(--b) ;
+}
+
+.gifheader p {
+       margin : 0 ;
+       font-size : calc(clamp(1em, 10vw, 4.5em) * 0.7) ;
+       color : var(--dpur) ;
+}
+
+#g-latest { background-image : url('/img/latest.png') ; }
+#links a:hover #g-latest , #links a:focus #g-latest {
+       background-image : url('/img/latest.gif') ;
+}
+#g-bandcamp { background-image : url('/img/bandcamp.png') ; }
+#links a:hover #g-bandcamp , #links a:focus #g-bandcamp {
+       background-image : url('/img/bandcamp.gif') ;
+}
+#g-about { background-image : url('/img/about.png') ; }
+#links a:hover #g-about , #links a:focus #g-about {
+       background-image : url('/img/about.gif') ;
+}
+#g-mastodon { background-image : url('/img/mastodon.png') ; }
+#links a:hover #g-mastodon , #links a:focus #g-mastodon {
+       background-image : url('/img/mastodon.gif') ;
+}
+#g-blog { background-image : url('/img/blog.png') ; }
+#links a:hover #g-blog , #links a:focus #g-blog {
+       background-image : url('/img/blog.gif') ;
+}
+#g-funkwhale { background-image : url('/img/funkwhale.png') ; }
+#links a:hover #g-funkwhale , #links a:focus #g-funkwhale {
+       background-image : url('/img/funkwhale.gif') ;
+}
+#g-code { background-image : url('/img/code.png') ; }
+#links a:hover #g-code , #links a:focus #g-code {
+       background-image : url('/img/code.gif') ;
+}

diff --git a/index.html b/index.html
deleted file mode 100644 (file)
index d4f9075..0000000
--- a/index.html
+++ /dev/null
@@ -1,68 +0,0 @@
-<!DOCTYPE html>
-<html><head>
-       <title>Mira // Box in Space</title>
-       <link type="text/css" rel="stylesheet" href="/global.css">
-       <link type="text/css" rel="stylesheet" media="all and (min-width: 1200px)"
-             href="/wide.css">
-       <link type="text/css" rel="stylesheet"
-             media="all and (min-width: 690px) and (max-width: 1199px)"
-             href="/thin.css">
-       <link type="text/css" rel="stylesheet" media="all and (max-width: 689px)"
-             href="/mobile.css">
-       <link type="image/png" rel="shortcut icon" href="/img/favicon.png">
-</head><body>
-
-       <a href="/">
-               <img id="banner" alt="MIRA" src="/img/banner.png">
-       </a>
-
-       <div id="wrap">
-               <h2 id="sub">mi/mimi/mira/daki | she/they</h2>
-
-               <div id="links">
-                       <a class="block l"
-                          href="https://miraonthewall.bandcamp.com/track/spree">
-                               <div class="gif" id="latest"></div>
-                               <b>latest release</b><br>
-                               <span>spree</span>
-                       </a>
-
-                       <a class="block r" href="https://miraonthewall.bandcamp.com">
-                               <div class="gif" id="bandcamp"></div>
-                               <b>bandcamp</b><br>
-                               <span>new music</span>
-                       </a>
-               </div>
-
-               <div id="links">
-                       <a class="block l" rel="me" href="https://mastodon.art/@mira">
-                               <div class="gif" id="mastodon"></div>
-                               <b>mastodon</b><br>
-                               <span>@mira@mastodon.art</span>
-                       </a>
-
-                       <a class="block r" href="https://open.audio/channels/oliea">
-                               <div class="gif" id="funkwhale"></div>
-                               <b>funkwhale</b><br>
-                               <span>old music</span>
-                       </a>
-               </div>
-
-               <hr>
-
-               <h2>other stuff</h2>
-               <p><a href="/whatflag">whatflag</a> - colour-based pride flag
-               identifier. works completely without javascript.</p>
-               <p><a href="/gitweb.cgi">git</a> - some git repos. some of them
-               compile.</p>
-       </div>
-
-       <footer>
-               <hr>
-               site content <a href="/LICENCE">cc-by-nc-sa-4.0</a> mira ayre 2021 -
-               <a href="/gitweb.cgi?p=website;a=summary">view source</a><br>
-               logo <a href="/LICENCE">cc-by-nc-sa-4.0</a> mira ayre &amp; erin nova
-               2021
-       </footer>
-
-</body></html>

diff --git a/index.html.sh b/index.html.sh
new file mode 100644 (file)
index 0000000..a562e3d
--- /dev/null
+++ b/index.html.sh
@@ -0,0 +1,42 @@
+;; source lib.sh
+;; TitleA Mira
+       <link type="text/css" rel="stylesheet" href="/index.css">
+;; TitleB
+
+;;>
+function Block() { # id name sub link
+cat <<EOF >/dev/stdout
+<div>
+<a href="$4">
+       <div class="gif" id="g-$1"></div>
+       <div class="gifheader">
+               <h2>$2</h2>
+               <p>$3</p>
+       </div>
+</a>
+</div>
+EOF
+}
+<;;
+
+;; Head 'music and stuff | she/they'
+
+<div id="links">
+
+;;>
+HTML="$(curl -s 'https://miraonthewall.bandcamp.com' \
+       | pup '#music-grid li:first-child')"
+Block latest 'latest release' \
+       "$(echo "$HTML" | pup '.title text{}' | xargs | tr 'A-Z' 'a-z')" \
+       "https://miraonthewall.bandcamp.com$(echo "$HTML" | pup 'a attr{href}')"
+Block bandcamp bandcamp 'new music' 'https://miraonthewall.bandcamp.com'
+Block about about 'who the f-' '/about'
+Block mastodon mastodon '@mira' 'https://mastodon.art/@mira" rel="me'
+Block blog blog 'words ig' '/blog'
+Block funkwhale funkwhale 'old music' 'https://open.audio/channels/oliea'
+Block code code 'i hate computers' '/gitweb.cgi'
+<;;
+
+</div>
+
+;; Footer

diff --git a/lib.sh b/lib.sh
new file mode 100644 (file)
index 0000000..9aa0bbf
--- /dev/null
+++ b/lib.sh
@@ -0,0 +1,40 @@
+function TitleA() {
+cat <<EOF >/dev/stdout
+<!DOCTYPE html>
+<html><head>
+       <title>$@ // Box in Space</title>
+       <meta charset="UTF-8">
+       <meta name="viewport" content="width=device-width, initial-scale=1.0">
+       <link type="text/css" rel="stylesheet" href="/global.css">
+EOF
+}
+
+function TitleB() {
+cat <<EOF >/dev/stdout
+</head><body>
+       <div id="wrap">
+       <a href="/"><img id="banner" alt="MIRA" src="/img/banner.png"></a>
+EOF
+}
+
+function Title() {
+       TitleA "$@"
+       TitleB
+}
+
+function Footer() {
+cat <<EOF >/dev/stdout
+<footer>
+       Site content <a href="/LICENCE">CC-BY-NC-SA-4.0</a> Mira Ayre
+       2021-$(date +%Y)
+       (<a href="/gitweb.cgi?p=website;a=summary">view source</a>)<br>
+       Logo <a href="/LICENCE">CC-BY-NC-SA-4.0</a> Mira Ayre &amp; Erin Nova 2021
+</footer></div></body></html>
+EOF
+}
+
+function Head() {
+cat <<EOF >/dev/stdout
+<h1 id="head">$@</h1>
+EOF
+}

diff --git a/mobile.css b/mobile.css
deleted file mode 100644 (file)
index aa12cce..0000000
--- a/mobile.css
+++ /dev/null
@@ -1,59 +0,0 @@
-html {
-       background-image    : url('/img/bgthinleft.png' ) ,
-                             url('/img/bgthinright.png') ;
-       background-color    : var(--w)                    ;
-       background-repeat   : repeat-y, repeat-y          ;
-       background-position : left top, right top         ;
-       background-size     : 47px, 32px                  ;
-
-       scrollbar-width : thin ;
-}
-
-h2 {
-       font-size : var(--2)          ;
-       width     : calc(100% - 50px) ;
-}
-
-#links {
-       display : flex ;
-       justify-content : center ;
-}
-
-a.block {
-       display : block ;
-       margin : 5px ;
-       text-align : center ;
-       width : 155px ;
-}
-
-a.block > b {
-       margin : 0 ;
-       font-size : var(--2) ;
-       line-height : var(--1) ;
-}
-
-a.block > span {
-       color : var(--purp) ;
-       font-size : var(--1) ;
-}
-
-div.gif {
-       display : inline-block ;
-       width : 90px ;
-       height : 90px ;
-}
-
-#sub { margin-bottom : 0 ; }
-
-hr {
-       width      : 200px ;
-       box-shadow : 10px 0 1px var(--cyan) , -10px 0 1px var(--pink) ;
-       margin     : 15px auto ;
-}
-
-hr:after { left : 65.5px ; }
-
-p , footer {
-       font-size : var(--1) ;
-       width : calc(100% - 50px) ;
-}

diff --git a/robots.txt.sh b/robots.txt.sh
new file mode 100644 (file)
index 0000000..bcc3556
--- /dev/null
+++ b/robots.txt.sh
@@ -0,0 +1,9 @@
+User-agent: *
+Disallow: /img/
+Disallow: /font/
+;;>
+find . -type f \( -name '*.css' -or -name '*.mp3' -or -name '*.png' \
+       -or -name '*.jpg' \) | while read f ; do
+       echo "Disallow: ${f:1}"
+done
+<;;

diff --git a/rsync-excludes b/rsync-excludes
index dc69082cadfe2d036c15656a9eced7218d3c055c..3953de23d650e023a514d9e3819a3ec47bb31ae1 100644 (file)
--- a/rsync-excludes
+++ b/rsync-excludes
@@ -1,4 +1,6 @@
+*.git
 *rsync-excludes
+*.md
+*.sh
 *Makefile
 *README
-*.git

diff --git a/thin.css b/thin.css
deleted file mode 100644 (file)
index ffbe505..0000000
--- a/thin.css
+++ /dev/null
@@ -1,54 +0,0 @@
-html {
-       background-image    : url('/img/bgthinleft.png' ) ,
-                             url('/img/bgthinright.png') ;
-       background-color    : var(--w)                    ;
-       background-repeat   : repeat-y, repeat-y          ;
-       background-position : left top, right top         ;
-}
-
-h2 {
-       font-size : var(--3)           ;
-       width     : calc(100% - 100px) ;
-}
-
-#links {
-       display : flex ;
-       justify-content : center ;
-}
-
-a.block {
-       display : block ;
-       margin : 10px ;
-       text-align : center ;
-       width : 315px ;
-}
-
-a.block > b {
-       margin : 0 ;
-       font-size : var(--3) ;
-}
-
-a.block > span {
-       color : var(--purp) ;
-       font-size : var(--2) ;
-}
-
-div.gif {
-       display : inline-block ;
-       margin : 0 50px ;
-}
-
-#sub { margin-bottom : 0 ; }
-
-hr {
-       width      : 400px ;
-       box-shadow : 20px 0 1px var(--cyan) , -20px 0 1px var(--pink) ;
-       margin     : 30px auto ;
-}
-
-hr:after { left : 165.5px ; }
-
-p , footer {
-       font-size : var(--2) ;
-       width : calc(100% - 100px) ;
-}

diff --git a/wide.css b/wide.css
deleted file mode 100644 (file)
index 6f9ee43..0000000
--- a/wide.css
+++ /dev/null
@@ -1,79 +0,0 @@
-html {
-       background-image    : url('/img/bg.png') ;
-       background-color    : var(--b)           ;
-       background-repeat   : repeat-y           ;
-       background-position : center top         ;
-}
-
-h2 {
-       font-size : var(--3) ;
-       width     : 975px    ;
-}
-
-a.block.r { text-align : right ; }
-
-a.block.l > div.gif { float : left  ; }
-a.block.r > div.gif { float : right ; }
-
-a.block {
-       display   : block      ;
-       width     : 955px      ;
-       max-width : 100%       ;
-       height    : 180px      ;
-}
-
-a.block > b {
-       margin    : 2em 0    ;
-       font-size : var(--4) ;
-       padding   : 0 25px   ;
-       position  : relative ;
-       bottom    : -35px    ;
-}
-
-a.block > span {
-       margin    : 0           ;
-       padding   : 0 25px      ;
-       color     : var(--purp) ;
-       position  : relative    ;
-       bottom    : -15px       ;
-       font-size : var(--3)    ;
-}
-
-hr {
-       width      : 800px                                              ;
-       box-shadow : 100px 0 1px var(--cyan) , -100px 0 1px var(--pink) ;
-       margin     : 70px auto 30px auto                                ;
-}
-
-hr:after { left : 365.5px ; }
-
-p , footer {
-       font-size : var(--2) ;
-       width     : 975px    ;
-}
-
-@media all and (min-height: 730px) {
-       a.block { margin : -60px auto ; }
-}
-
-@media all and (max-height: 729px) {
-       a.block {
-               height : 140px ;
-               width  : 485px ;
-       }
-       div.gif {
-               width  : 140px ;
-               height : 140px ;
-       }
-
-       a.block > b    { font-size : var(--3) ; }
-       a.block > span { font-size : var(--2) ; }
-
-       #links {
-               display         : flex   ;
-               justify-content : center ;
-       }
-
-       #sub { margin-bottom : 0    ; }
-       hr   { margin-top    : 30px ; }
-}