* 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`.
--- /dev/null
+*.html
+robots.txt
+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
--- /dev/null
+;; 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 <3</p>
+
+;; Footer
--- /dev/null
+#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)) ;
+}
+
--- /dev/null
+;; 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
--- /dev/null
+#!/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
--- /dev/null
+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
+
+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
+
+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
+
+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
+
+<audio controls><source src="sub1.mp3" type="audio/mpeg"></audio>
+
+And after:
+
+7
+
+<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 ^^
--- /dev/null
+@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%) ; }
+}
/* 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 */
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 */
/* 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 ;
}
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) ;
}
--- /dev/null
+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') ;
+}
+++ /dev/null
-<!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 & erin nova
- 2021
- </footer>
-
-</body></html>
--- /dev/null
+;; 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
--- /dev/null
+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 & Erin Nova 2021
+</footer></div></body></html>
+EOF
+}
+
+function Head() {
+cat <<EOF >/dev/stdout
+<h1 id="head">$@</h1>
+EOF
+}
+++ /dev/null
-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) ;
-}
--- /dev/null
+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
+<;;
+*.git
*rsync-excludes
+*.md
+*.sh
*Makefile
*README
-*.git
+++ /dev/null
-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) ;
-}
+++ /dev/null
-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 ; }
-}