-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
literally HOW LONG has it said “misdaventures” help
- Loading branch information
Showing
5 changed files
with
251 additions
and
51 deletions.
There are no files selected for viewing
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,195 @@ | ||
| --- | ||
| layout: none | ||
| --- | ||
| <!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>Projects™ by a-flyleaf</title> | ||
| <style> | ||
| *{margin:0; padding:0; box-sizing:border-box; font-size:100%; word-wrap:break-word;} | ||
| body{overflow-x:hidden; font-family:verdana,sans-serif; line-height:135%; background:#c0c0c0; color:#111;} | ||
| header,main,section,figure,.block{display:block;} | ||
|
|
||
| #sitewrap{max-width:1280px;} | ||
| .wrap{padding:1rem; margin:0 auto;} | ||
| span{display:inline-block;} | ||
| .block,#cmyk{margin:1.5rem; text-decoration:0;} .block:hover,.block:focus,.block:active{opacity:.65;} | ||
| p{margin-top:.5em;} | ||
| figure{line-height:0;} img{max-width:100%; height:auto;} | ||
| ::selection{background:rgba(0,0,0,.15);} | ||
| a{color:inherit;} a:hover,a:focus,a:active{text-decoration:none;} | ||
|
|
||
| .brand {background:url(../bg-light.png) #fff;} | ||
| .brand .wrap{max-width:17.5rem; text-align:center; background:rgba(255,255,255,.75);} | ||
| .brand a{text-decoration-color:#c0c0c0;} .brand a:hover,.brand a:focus,.brand a:active{color:#0080ff;} | ||
| .brand ::selection{background:rgba(0,128,255,.85); color:#fff;} | ||
|
|
||
| header{padding:2rem 0;} | ||
| h1{font-size:2em; line-height:115%;} h1 a{text-decoration:0;} | ||
|
|
||
| h2{font-size:1.5em; line-height:125%;} | ||
| .desc{text-align:center;} .desc p{margin-bottom:-1rem;} | ||
|
|
||
| h3{font-size:1.5em; line-height:115%; margin-bottom:.5rem;} | ||
| #stories .block p{font-size:.85em;} | ||
|
|
||
| #ygbtdm{background:#151515; color:#fff; font-family: 'bookman old style','urw bookman l','itc bookman',georgia,times,serif; font-size:1.25em; line-height:145%;} | ||
| #ygbtdm ::selection{background:#404040;} | ||
| #ygbtdm .sum{max-width:30rem;} | ||
| #ygbtdm p{line-height:145%;} | ||
|
|
||
| #four{background:#fff; font-family:initial; font-size:1.25em;} | ||
| #four ::selection{background:rgba(128,128,128,.5);} | ||
| #four .sum{max-width:25rem;} | ||
| #four h3{font-family:consolas,monospace; font-size:4em; line-height:.75em; margin-top:-.5rem;} | ||
| #four blockquote{line-height:135%;} | ||
|
|
||
| #tfe{background:#000; color:#fff; font-family:calibri,sans-serif; font-size:1.25em; line-height:135%;} | ||
| #tfe ::selection{background:#ff9600;} | ||
|
|
||
| #tfe .sum,#cmyk .sum{max-width:20rem;} | ||
|
|
||
| #cmyk{background:#404040; color:#fff; margin:0;} #cmyk img{filter:grayscale(50%);} #cmyk p{line-height:150%;} | ||
| #cmyk span{display:inline; font-weight:normal;} | ||
|
|
||
| #p5js{background:#202020; color:#dfdfdf; font-family:sans-serif; line-height:150%;} | ||
| #p5js ::selection{background:#000; color:#fff;} | ||
| #p5js figure{width:65%; margin:0 auto;} | ||
| #p5js h3{margin:1rem 0 0;} | ||
|
|
||
| #artfight{background:#111; color:#fff; font-family:'segoe ui',helvetica,arial,sans-serif; line-height:150%;} | ||
|
|
||
| #dragonotes{background:#dcd6c8; color:#232323;} | ||
| #dragonotes h3{background:#731d08; color:#fff; margin-bottom:0;} | ||
| #dragonotes p{margin-top:-.25rem;} | ||
|
|
||
| #other .wrap{max-width:25rem;} | ||
|
|
||
| #here{padding:1rem 0;} | ||
| #here .wrap{padding:1rem;} | ||
| #here p{line-height:150%;} #here a:last-child{font-weight:bold;} | ||
|
|
||
| @media (prefers-color-scheme:dark){ | ||
| .brand{background:url(../bg-dark.png) #111; color:#fff; line-height:150%;} .brand .wrap{background:rgba(17,17,17,.5);} | ||
| } | ||
|
|
||
| @media only screen and (min-width:640px) { | ||
| .block,#cmyk{margin:0;} | ||
| main .wrap{padding:2rem;} | ||
| .desc{font-size:1.5em; margin-bottom:1.5rem;} | ||
| #stories .wrap{padding:1.5rem;} | ||
|
|
||
| #ygbtdm h3{margin-top:-1.75em;} | ||
| #four h3{margin:-1em 0 .5rem -.05em; color:#fff;} | ||
| #tfe h3{margin-top:-1.65em; color:#000;} | ||
| #cmyk h3{margin-top:-.5em;} | ||
|
|
||
| .float{width:100%; overflow:auto;} | ||
| #tfe,#cmyk,#other .float section{display:inline-block; float:left;} | ||
| #tfe,#cmyk{width:50%; min-height:21rem;} | ||
|
|
||
| #other .desc{margin:1rem auto;} | ||
| #p5js figure{width:100%;} #artfight h3{margin-top:-.5em;} | ||
| #other .float section{width:33.33%; font-size:.85em; min-height:24rem;} | ||
|
|
||
| #here{padding:3rem 0;} | ||
| } | ||
|
|
||
| @media only screen and (min-width:915px){ | ||
| #sitewrap{margin:0 auto; padding:1rem;} | ||
| #tfe,#cmyk{min-height:22rem;} | ||
| #other .float section{font-size:1em; min-height:26rem;} | ||
| } | ||
|
|
||
| @media only screen and (min-width:1000px){ | ||
| #sitewrap{padding:2rem;} | ||
| #tfe,#cmyk{min-height:25.25rem;} | ||
| #other .float section{min-height:30rem;} | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body><div id="sitewrap"> | ||
| <header class="brand"><div class="wrap"> | ||
| <h1><span>Projects™</span> <span>by <a href="{{site.url}}">a-flyleaf</a></span></h1> | ||
| <p>An assortment of stuff that, unlike the <a href="{{site.url}}/shriblets">shriblets</a>, has taken some significant amount of time to develop.</p> | ||
| </div></header> | ||
|
|
||
| <main> | ||
| <section id="stories"> | ||
| <div class="wrap desc"> | ||
| <h2>Misdaventures in Narrative</h2> | ||
| <p>In reverse-chronological order.</p> | ||
| </div> | ||
| <a class="block" href="{{site.url}}/ygbtdm"><section id="ygbtdm"> | ||
| <figure><picture><source media="(min-width:640px)" srcset="img/ygbtdm-full.png"><img src="img/ygbtdm-640.png" alt=""/></picture></figure> | ||
| <div class="wrap"> | ||
| <h3><span>You’re gonna be</span> <span>the death of me</h3> | ||
| <div class="sum"> | ||
| <blockquote>A twitchy survivalist-wannabe warily teams up with a suspiciously-careless girl in a thrilling, destructive hellscape.</blockquote> | ||
| <p>Story that I’m figuring out how to present as I go along. Site published early this year (2022), updates ongoing.</p> | ||
| </div> | ||
| </div> | ||
| </section></a> | ||
| <a class="block" href="{{site.url}}/hello-world"><section id="four"> | ||
| <figure><picture><source media="(min-width:640px)" srcset="img/404-full.png"><img src="img/404-640.png" alt=""/></picture></figure> | ||
| <div class="wrap"> | ||
| <h3>404</h3> | ||
| <div class="sum"> | ||
| <blockquote>Four people attempt to navigate and develop the artificial, incomplete world in which they exist.</blockquote> | ||
| <p>Experimental web-based story. Launched 2020; in development limbo as of late 2021.</p> | ||
| </div> | ||
| </div> | ||
| </section></a> | ||
| <div class="float"><a class="block" href="{{site.url}}/projects/tfe"><section id="tfe"> | ||
| <figure><picture><source media="(min-width:640px)" srcset="img/tfe-full.png"><img src="img/tfe-640.png" alt=""/></picture></figure> | ||
| <div class="wrap"> | ||
| <h3>The Firebird Effect</h3> | ||
| <div class="sum"> | ||
| <blockquote>A young pokémon trainer is pulled ever wayward on her search for answers.</blockquote> | ||
| <p>Discontinued comic. First posted 2016–17 on deviantArt, officially dropped in 2018.</p> | ||
| </div> | ||
| </div> | ||
| </section></a> | ||
| <a class="block" href="{{site.url}}/toyshelf"><section id="cmyk"> | ||
| <figure><picture><source media="(min-width:640px)" srcset="img/cmyk-full.png"><img src="img/cmyk-640.png" alt=""/></picture></figure> | ||
| <div class="wrap"> | ||
| <h3>Toyshelf <span>(not a story)</span></h3> | ||
| <p class="sum">A collection of characters, the seven shown above and others. (This should probably be under miscellany but I don’t feel like reshuffling this page yet…)</p> | ||
| </div> | ||
| </section></a></div><!--/float--> | ||
| </section><section id="other"> | ||
| <div class="wrap desc"> | ||
| <h2>miscellany</h2> | ||
| <p>In no particular order.</p> | ||
| </div> | ||
| <div class="float"><a href="{{site.url}}/p5jsomething" class="block"><section id="p5js"> | ||
| <div class="wrap"> | ||
| <figure><img src="img/p5js.png" alt=""/></figure> | ||
| <h3>p5jsomething</h3> | ||
| <p>Code experimentation for class, spring 2020. Originally titled “p5jsnake” but in the process of coding it stopped being snake.</p> | ||
| </div> | ||
| </section></a> | ||
| <a href="{{site.url}}/artfight" class="block"><section id="artfight"> | ||
| <figure><img src="img/artfight.png" alt=""/></figure> | ||
| <div class="wrap"> | ||
| <h3>ArtFight 2021(+)</h3> | ||
| <p>Gallery for an annual art trading game, because the official site isn’t particularly guest-friendly.</p> | ||
| </div> | ||
| </section></a> | ||
| <a href="{{site.url}}/dragonotes" class="block"><section id="dragonotes"> | ||
| <h3><div class="wrap">dragonotes</div></h3> | ||
| <div class="wrap"><p>Resource hub & personal tracker for the browser-based game Flight Rising; sporadically updated.</p></div> | ||
| </section></a></div><!--/float--> | ||
| <section class="brand" id="here"><div class="wrap"> | ||
| <h3>This site!</h3> | ||
| <p>You are here. <a href="https://github.com/a-flyleaf/a-flyleaf.github.io/commit/1e78f061897b5c1b0fb4bb996d956c4e8541469d">Created on GitHub in 2019</a> and still kickin’. <a href="{{site.url}}">Here’s a link back to base~</a></p> | ||
| </div></section> | ||
| </section> | ||
| </main> | ||
| </div></body> | ||
| </html> |