shriblets overhaul

a-flyleaf · May 13, 2021 · 1e7722e · 1e7722e
1 parent a491d73
commit 1e7722e
Show file tree

Hide file tree

Showing 20 changed files with 288 additions and 1 deletion.
diff --git a/_includes/shriblet.html b/_includes/shriblet.html
@@ -0,0 +1,11 @@
+<article>
+	<figure><a href="{{site.url}}/shriblets/{{include.date}}-{{include.title}}"><img src="{{site.url}}/shriblets/img/{{include.date}}-{{include.title}}.jpg" alt=""/></a></figure>
+	<div class="info">
+		<h2><a href="{{site.url}}/shriblets/{{include.date}}-{{include.title}}">{{include.title}}</a></h2> <span class="date">{{include.date}}</span>
+		<p>{{include.desc}}</p>
+		<aside><ul>
+			<li>lang = {{include.lang}}</li>
+			<li>isResponsive = {{include.mobile}};</li>
+		</ul></aside>
+</div>
+</article>
diff --git a/_layouts/shriblets.html b/_layouts/shriblets.html
@@ -0,0 +1,77 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+
+		<title>shriblets by a-flyleaf</title>
+		<link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500&display=swap" rel="stylesheet">
+		<style>
+			*{margin:0;padding:0; font-size:100%; box-sizing:border-box;}
+			body{background:#262626; color:#d9d9d9; font-family:'fira mono',consolas,monospace; font-size:1.15em; padding:.85rem 1.5rem; line-height:1.35em;}
+			header,main,section,article{display:block;}
+			a{color:#fff;} a:hover,a:active,a:focus{background:#000;}
+			::selection{background:rgba(0,0,0,.5);}
+			.x{position:absolute; left:-999px; width:1px; height:1px; top:auto; overflow:hidden;}
+			p{margin:.5rem 0;}
+			.comment{font-size:.85em; color:#808080;}
+			hr{border:0; height:1em;}
+
+			header{font-size:1.15em;} /*can probably just use the default font size everywhere but here*/
+			h1::before{content:"# ";}
+			header a:hover,header a:active,header a:focus{font-weight:bold;}
+
+			#desc{font-size:.85em;}
+			blockquote::before{content:">"; padding-right:1em;} blockquote{margin-left:1.25em; text-indent:-1.15em; margin-bottom:1em;}
+
+			article{background:#404040; border:1px solid #808080;margin:1rem 0;}
+			figure{font-size:0;}
+			img{max-width:100%; height:auto;} figure a:focus,figure a:hover,figure a:active{opacity:.5;}
+			.info{padding:.5em 1em; line-height:1.5em;}
+			h2{display:inline;}
+			.date{font-size:.85em;}
+			aside{font-size:.85em;} aside ul{list-style-type:none; margin-top:1em;} aside li:first-child{margin:.5em 0;}
+
+			#wrap{max-width:45em; margin:0 auto;}
+
+			@media only screen and (min-width:490px){
+				header,#desc{margin-left:1.75rem;}
+				h1{display:inline;}
+
+				article{overflow:auto; padding:.5em;}
+				figure{width:25%; padding-top:3rem; padding-left:.5rem;} .info{width:75%;}
+				figure,.info{float:left;}
+			}
+
+			@media only screen and (min-width:55.7em){
+				article{padding:.5em 1.75em;} figure{padding-left:0;} .info{padding-left:1.75em; padding-right:0;}
+			}
+		</style>
+	</head>
+
+	<body><div id="wrap">
+		<p class="comment">&lt;--pageinfo--&gt;</p>
+		<header>
+			<h1>shriblets</h1>
+			<span>by <a href="../">a-flyleaf</a></span>
+		</header>
+		<hr/>
+		<main>
+			<section id="desc">
+				<blockquote>shriblet <i>(noun)</i>: 1) a tiny, stray scrap of paper; 2) a made-up word</blockquote>
+				<p>Random little pages.</p>
+				<p>Ordered chronologically. All code and art is mine unless otherwise noted.</p>
+			</section>
+			<p class="comment">&lt;--/pageinfo--&gt;</p>
+			<hr/>
+			<section>
+				<p class="comment">&lt;--screenshot | pagetitle, date, description, language(s) in focus | additional notes--&gt;</p>
+				<p class="comment">&lt;--"lang" denotes which coding language I was focused on using; HTML/CSS is a given, and javascript is only noted if I was actively playing with it--&gt;</p>
+				{{content}}
+			</section>
+		</main>
+		<hr/>
+		<footer><p class="comment">&lt;--/shriblets--&gt;</p></footer>
+	</div></body>
+</html>
diff --git a/shriblets/2021-05-13-shriblets2.html b/shriblets/2021-05-13-shriblets2.html
@@ -0,0 +1,97 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+
+		<title>shriblets by a-flyleaf</title>
+		<link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500&display=swap" rel="stylesheet">
+		<style>
+			*{margin:0;padding:0; font-size:100%; box-sizing:border-box;}
+			body{background:#262626; color:#d9d9d9; font-family:'fira mono',consolas,monospace; font-size:1.15em; padding:.85rem 1.5rem; line-height:1.35em;}
+			header,main,section,article{display:block;}
+			a{color:#fff;} a:hover,a:active,a:focus{font-weight:bold; background:#000;}
+			::selection{background:rgba(0,0,0,.5);}
+			.x{position:absolute; left:-999px; width:1px; height:1px; top:auto; overflow:hidden;}
+			p{margin:.5rem 0;}
+			.comment{font-size:.85em; color:#808080;}
+			hr{border:0; height:1em;}
+
+			header{font-size:1.15em;} /*can probably just use the default font size everywhere but here*/
+			h1::before{content:"# ";}
+
+			#desc{font-size:.85em;}
+			blockquote::before{content:"> ";} blockquote{margin-left:1.25em; text-indent:-1.15em; margin-bottom:1em;}
+
+			article{background:#404040; border:1px solid #808080;margin:1rem 0;}
+			figure{font-size:0;}
+			img{max-width:100%; height:auto;}
+			.info{padding:.5em 1em; line-height:1.5em;}
+			h2{display:inline;}
+			.date{font-size:.85em;}
+			aside{font-size:.85em;} aside ul{list-style-type:none; margin-top:1em;} aside li:first-child{margin:.5em 0;}
+
+			#wrap{max-width:45em; margin:0 auto;}
+
+			@media only screen and (min-width:490px){
+				header,#desc{margin-left:1.75rem;}
+				h1{display:inline;}
+
+				article{overflow:auto; padding:.5em;}
+				figure{width:25%; padding-top:3rem; padding-left:.5rem;} .info{width:75%;}
+				figure,.info{float:left;}
+			}
+
+			@media only screen and (min-width:55.7em){
+				article{padding:.5em 1.75em;} figure{padding-left:0;} .info{padding-left:1.75em;}
+			}
+		</style>
+	</head>
+		<!--based on my site directory page from web design, but recoded/redesigned from memory-->
+		<!--screenshot | *pagetitle* date / short description / language(s) in focus | works on mobile Y/N -->
+	<body><div id="wrap">
+		<p class="comment">&lt;--pageinfo--&gt;</p>
+		<header>
+			<h1>shriblets</h1>
+			<span>by <a href="../">a-flyleaf</a></span>
+		</header>
+		<hr/>
+		<main>
+			<section id="desc">
+				<blockquote>shriblet <i>(noun)</i>: 1) a tiny, stray scrap of paper; 2) a made-up word</blockquote>
+				<p>Random little pages. Ordered chronologically.</p>
+			</section>
+			<p class="comment">&lt;--/pageinfo--&gt;</p>
+			<hr/>
+			<section>
+			<p class="comment">&lt;--screenshot | pagetitle, date, description, language(s) in focus | additional notes--&gt;</p>
+				<!--use includes-->
+				<article>
+					<figure><a href="PAGELINK"><img src="https://via.placeholder.com/426x240.jpg" alt=""/></a></figure><!--16:9 resolution-->
+					<div class="info">
+						<h2><a href="PAGELINK">pagetitle</a></h2> <span class="date">2021-05-13</span>
+						<p>short description. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
+						<aside><ul>
+							<li>lang = #html #css #javascript #etc</li>
+							<li>isMobileFriendly = true; blogPost = true;</li>
+						</ul></aside>
+					</div>
+				</article>
+				<article>
+					<figure><a href="PAGELINK"><img src="https://via.placeholder.com/426x240.jpg" alt=""/></a></figure><!--16:9 resolution-->
+					<div class="info">
+						<h2>pagetitle</h2> <span class="date">2021-05-13</span>
+						<p>short description.</p>
+						<aside><ul>
+							<li>lang = #html #css #javascript #etc</li>
+							<li>isMobileFriendly = true; blogPost = true;</li>
+						</ul></aside>
+					</div>
+				</article>
+			</section>
+		</main>
+		<hr/>
+		<footer><p class="comment">&lt;--/shriblets--&gt;</p></footer>
+	</div></body>
+</html>
diff --git a/shriblets/img/2018-08-heighthell.jpg b/shriblets/img/2018-08-heighthell.jpg
diff --git a/shriblets/img/2018-12-14-headshots.jpg b/shriblets/img/2018-12-14-headshots.jpg
diff --git a/shriblets/img/2019-03-06-songwall.jpg b/shriblets/img/2019-03-06-songwall.jpg
diff --git a/shriblets/img/2019-04-21-styleguide.jpg b/shriblets/img/2019-04-21-styleguide.jpg
diff --git a/shriblets/img/2019-05-29-type.jpg b/shriblets/img/2019-05-29-type.jpg
diff --git a/shriblets/img/2019-05-wiki.jpg b/shriblets/img/2019-05-wiki.jpg
diff --git a/shriblets/img/2019-09-19-feltron.jpg b/shriblets/img/2019-09-19-feltron.jpg
diff --git a/shriblets/img/2019-12-05-404mp3.jpg b/shriblets/img/2019-12-05-404mp3.jpg
diff --git a/shriblets/img/2019-index.jpg b/shriblets/img/2019-index.jpg
diff --git a/shriblets/img/2020-04-1112-walkcycles.jpg b/shriblets/img/2020-04-1112-walkcycles.jpg
diff --git a/shriblets/img/2020-0405-p5jsomething.jpg b/shriblets/img/2020-0405-p5jsomething.jpg
diff --git a/shriblets/img/2020-06-07-art.jpg b/shriblets/img/2020-06-07-art.jpg
diff --git a/shriblets/img/2021-04-29-split.jpg b/shriblets/img/2021-04-29-split.jpg
diff --git a/shriblets/img/2021-05-13-shriblets2.jpg b/shriblets/img/2021-05-13-shriblets2.jpg
diff --git a/shriblets/img/note.txt b/shriblets/img/note.txt
@@ -0,0 +1,2 @@
+JPG quality 95
+doesn't HAVE to crop at the top of the page or fullscreen, whatever looks best for the content--but ideally it looks good on default pageload
diff --git a/shriblets/index.html b/shriblets/index.html
@@ -0,0 +1,97 @@
+---
+layout: shriblets
+---
+{%include shriblet.html
+	title="heighthell"
+	date="2018-08"
+	desc="Interactive character height chart, heavily inspired by <a href='http://mxedk.com/pokechamp/'>a version with Pokémon player characters</a>, and one of my first experiments with Javascript. (Could not figure out how to make the characters stand separately on pageload without altering the draggable area, and the toggles are buggy.)"
+	lang="#js #jquery"
+	mobile="false"
+%}{%include shriblet.html
+	title="headshots"
+	date="2018-12-14"
+	desc="Assorted characters and an overview of the stories they’re from. (Links may be broken.)"
+	lang="#html #css"
+	mobile="true"
+%}{%include shriblet.html
+	title="songwall"
+	date="2019-03-06"
+	desc="Character song page; unfinished."
+	lang="#html #css"
+	mobile="true"
+%}{%include shriblet.html
+	title="index"
+	date="2019"
+	desc="The original homepage for this website, used from <a href='https://github.com/a-flyleaf/a-flyleaf.github.io/commit/06856f11df13bd760564abba74b81f40c8b9e47f#diff-0eb547304658805aad788d320f10bf1f292797b5e6d745a3bf617584da017051'>site creation</a> to <a href='https://github.com/a-flyleaf/a-flyleaf.github.io/commit/e3e46b1ec471093cf42264a393f7287b9fec1b6b#diff-0eb547304658805aad788d320f10bf1f292797b5e6d745a3bf617584da017051'>May 2021</a>. Forgot exactly when I coded it, but presumably at some point in conjunction with (if not before) the styleguide."
+	lang="#html #css"
+	mobile="true"
+%}{%include shriblet.html
+	title="styleguide"
+	date="2019-04-21"
+	desc="Style guide for what later became the first layout of this website."
+	lang="#html #css"
+	mobile="true"
+%}{%include shriblet.html
+	title="wiki"
+	date="2019-05"
+	desc="Pseudo-wiki page that doubles as a character bio/infodump. (Links may be broken.)"
+	lang="#html #css"
+	mobile="true"
+%}{%include shriblet.html
+	title="type"
+	date="2019-05-29"
+	desc="Attempt at creating a typewriter-esque effect with pure HTML/CSS."
+	lang="#html #css"
+	mobile="true"
+%}{%include shriblet.html
+	title="feltron"
+	date="2019-09-19"
+	desc="A page of <a href='http://feltron.com/FAR07.html'>Nicholas Feltron’s 2007 Annual Report</a>, but as a HTML page. Experimenting with CSS grid."
+	lang="#html #css"
+	mobile="true"
+%}<article><!--tfw I gotta use the raw code for that one (1) "."-->
+	<figure><a href="{{site.url}}/shriblets/2019-12-05-404mp3"><img src="{{site.url}}/shriblets/img/2019-12-05-404mp3.jpg" alt=""/></a></figure>
+	<div class="info">
+		<h2><a href="{{site.url}}/shriblets/2019-12-05-404mp3">404.mp3</a></h2> <span class="date">2019-12-05</span>
+		<p>Esoteric character song page.</p>
+		<aside><ul>
+			<li>lang = #html #css</li>
+			<li>isResponsive = true;</li>
+		</ul></aside>
+</div></article><article><!--also here, for the "+"-->
+	<figure><a href="{{site.url}}/shriblets/2020-04-1112-walkcycles"><img src="{{site.url}}/shriblets/img/2020-04-1112-walkcycles.jpg" alt=""/></a></figure>
+	<div class="info">
+		<h2><a href="{{site.url}}/shriblets/2020-04-1112-walkcycles">walkcycles</a></h2> <span class="date">2020-04-11+12</span>
+		<p>Fiddling with CSS animations.</p>
+		<aside><ul>
+			<li>lang = #html #css</li>
+			<li>isResponsive = false;</li>
+		</ul></aside>
+</div></article>{%include shriblet.html
+	title="art"
+	date="2020-06-07"
+	desc="Something of a portfolio page. Unfinished-ish; layout looks best single-column but widescreen doesn’t break."
+	lang="#html #css"
+	mobile="true"
+%}{%include shriblet.html
+	title="split"
+	date="2021-04-29"
+	desc="An <a href='../blog/addition-update'>exploration</a> of parallel dysfunction, in the format of divided HTML frames; based on <a href='https://anthology.rhizome.org/my-boyfriend-came-back-from-the-war'><i>My Boyfriend Came Back from the War</i></a>."
+	lang="#html #css"
+	mobile="true"
+%}<article><!--this isn't really a shriblet but I don't have anywhere else to put it-->
+	<figure><a href="{{site.url}}/p5jsomething"><img src="{{site.url}}/shriblets/img/2020-0405-p5jsomething.jpg" alt=""/></a></figure>
+	<div class="info">
+		<h2><a href="{{site.url}}/p5jsomething">p5jsomething</a></h2> <span class="date">2020-04+05</span>
+		<p>Experimenting with p5js for class; requires arrow keys for movement.</p>
+		<aside><ul>
+			<li>lang = #js #p5js</li>
+			<li>isResponsive = false;</li>
+		</ul></aside>
+</div></article>{%include shriblet.html
+	title="shriblets2"
+	date="2021-05-13"
+	desc="A recode of this page, since I thought it deserved its own thing; implemented same day. Images via <a href='https://placeholder.com'>placeholder.com</a>."
+	lang="#html #css"
+	mobile="true"
+%}
diff --git a/shriblets/index.md → shriblets/old-index.md b/shriblets/index.md → shriblets/old-index.md
@@ -42,4 +42,7 @@ Random little pages.
 	Something of a portfolio page.
 
 - <span style="font-family:monospace;font-weight:bold;">2021-04-29 [split]({{site.url}}/shriblets/2021-04-29-split)</span>  
-	An exploration of parallel dysfunction, in the format of divided HTML frames. Based on <i>[My Boyfriend Came Back from the War](https://anthology.rhizome.org/my-boyfriend-came-back-from-the-war)</i>.
+	An exploration of parallel dysfunction, in the format of divided HTML frames. Based on <i>[My Boyfriend Came Back from the War](https://anthology.rhizome.org/my-boyfriend-came-back-from-the-war)</i>.
+
+- <span style="font-family:monospace;font-weight:bold;">2021-05-13 [shriblets2]({{site.url}}/shriblets/2021-05-13-shriblets2)</span>  
+	A recode of this page, since I thought it deserved its own thing. Implemented on the same day.