added system.html
This commit is contained in:
parent
5fbf83fa09
commit
d60232a105
1 changed files with 161 additions and 0 deletions
161
system.html
Normal file
161
system.html
Normal file
|
|
@ -0,0 +1,161 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="robots" content="max-snippet:-1, max-image-preview:large, max-video-preview:-1">
|
||||
<meta http-equiv="Cache-control" content="no-cache, max-age=64800">
|
||||
<link rel="shortcut icon" type="image/png" href="favicon.png">
|
||||
<style>
|
||||
body{
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
min-height: calc(100vh - 2em);
|
||||
background-color: #333;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
align-content: flex-start;
|
||||
}
|
||||
body>h1{
|
||||
font-family: initial;
|
||||
width: 100%;
|
||||
background-color: #555;
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
min-height: 1.6em;
|
||||
color: #ddd;
|
||||
}
|
||||
p,h4{
|
||||
max-width: 900px;
|
||||
margin-right: auto;
|
||||
}
|
||||
h1, h2, h3{
|
||||
text-align: center;
|
||||
}
|
||||
small, sup>sub{
|
||||
opacity: 0.6;
|
||||
}
|
||||
article{
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
margin: 1em;
|
||||
margin-left: 0.5em;
|
||||
margin-right: 0.5em;
|
||||
flex-grow: 1;
|
||||
background-color: #fff;
|
||||
max-width: calc(100vw - 1em);
|
||||
overflow: auto;
|
||||
|
||||
}
|
||||
u{
|
||||
font-style: italic;
|
||||
text-decoration-color: #aaa;
|
||||
opacity: 0.8;
|
||||
}
|
||||
section{
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-content: flex-start;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
section>a{
|
||||
display:block;
|
||||
flex-grow: 1;
|
||||
max-width: calc(100vw - 4em);
|
||||
width: 50%;
|
||||
}
|
||||
img{
|
||||
max-width:100%;
|
||||
height:100%;
|
||||
}
|
||||
p{
|
||||
margin: 1em;
|
||||
}
|
||||
a[href="https://miifox.net/#img42"]{ background-image: url("https://miifox.net/img/42.png"); background-size: cover; background-repeat: no-repeat; background-position: 25% 0; }
|
||||
a[href="https://miifox.net/#img42"]>img{opacity: 0;}
|
||||
a[href="https://miifox.net/#img75"]{ background-image: url("https://miifox.net/img/75.png"); background-size: cover; background-repeat: no-repeat; background-position: 10% 0; }
|
||||
a[href="https://miifox.net/#img75"]>img{opacity: 0;}
|
||||
a[href="https://miifox.net/#img77"]{ background-image: url("https://miifox.net/img/77.png"); background-size: cover; background-repeat: no-repeat; background-position: center; }
|
||||
a[href="https://miifox.net/#img77"]>img{opacity: 0;}
|
||||
a[href="https://miifox.net/#img80"]{ background-image: url("https://miifox.net/img/80.png"); background-size: cover; background-repeat: no-repeat; background-position: 75% 0; }
|
||||
a[href="https://miifox.net/#img80"]>img{opacity: 0;}
|
||||
a[href="https://miifox.net/#img32"]{ background-image: url("https://miifox.net/img/32.png"); background-size: cover; background-repeat: no-repeat; background-position: center; }
|
||||
a[href="https://miifox.net/#img32"]>img{opacity: 0;}
|
||||
a[href="https://miifox.net/#img2"]{ background-image: url("https://miifox.net/img/2.png"); background-size: cover; background-repeat: no-repeat; background-position: center; }
|
||||
a[href="https://miifox.net/#img2"]>img{opacity: 0;}
|
||||
a[href="https://miifox.net/#img4"]{ background-image: url("https://miifox.net/img/4.png"); background-size: cover; background-repeat: no-repeat; background-position: 0 0; }
|
||||
a[href="https://miifox.net/#img4"]>img{opacity: 0;}
|
||||
a[href="https://miifox.net/#img27"]{ background-image: url("https://miifox.net/img/27.png"); background-size: cover; background-repeat: no-repeat; background-position: center; }
|
||||
a[href="https://miifox.net/#img27"]>img{opacity: 0;}
|
||||
a[href="https://miifox.net/#img79"]{ background-image: url("https://miifox.net/img/79.png"); background-size: cover; background-repeat: no-repeat; background-position: 25% 0; }
|
||||
a[href="https://miifox.net/#img79"]>img{opacity: 0;}
|
||||
a[href="https://miifox.net/#img74"]{ background-image: url("https://miifox.net/img/74.png"); background-size: cover; background-repeat: no-repeat; background-position: center; }
|
||||
a[href="https://miifox.net/#img74"]>img{opacity: 0;}
|
||||
a[href="https://miifox.net/#img8"]{ background-image: url("https://miifox.net/img/8.png"); background-size: cover; background-repeat: no-repeat; background-position: 85% 0; }
|
||||
a[href="https://miifox.net/#img8"]>img{opacity: 0;}
|
||||
a[href="https://miifox.net/#img28"]{ background-image: url("https://miifox.net/img/28.png"); background-size: cover; background-repeat: no-repeat; background-position: center; }
|
||||
a[href="https://miifox.net/#img28"]>img{opacity: 0;}
|
||||
a[href="https://miifox.net/#img73"]{ background-image: url("https://miifox.net/img/73.png"); background-size: cover; background-repeat: no-repeat; background-position: center; }
|
||||
a[href="https://miifox.net/#img73"]>img{opacity: 0;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>System of a yawn</h1>
|
||||
<article>
|
||||
<p>A good friend of mine recently linked this <a href="https://tulpanomicon.guide/">article / guide</a> about yet another way to percieve systems but since this is yet another form i don't relate to <sup>(although it is closer in form to my perseption than the traditional round-robin system system <sub>system system system</sub> :-D)</sup> I decided to spend some time elaborating what <strong>*is*</strong> my current perspection on it.</p>
|
||||
<p>Sorry in advance these are just ramblings. Also some piquant artwork ahead so be beware.</p>
|
||||
</article>
|
||||
<article>
|
||||
<section>
|
||||
<a href="https://miifox.net/#img12"><img src="https://miifox.net/img/12.png" alt="An image of Caroline Husky in a pool thing, drinking a glass of Aperol Spiritz, used as an example for 'Internet furry sona' kind of me'"></a>
|
||||
<p><em>This is me</em>. This is how I present myself to the internet, a filthy furry whatever, this is how my friends know me.</p>
|
||||
</section>
|
||||
</article>
|
||||
<article>
|
||||
<p><em>This is me</em>. A boring office clerk, a shell of a human being, who clearly does not eat enough to stay alive and has the personality of a doorknob but who knows a fair bit about computers despite forgetting half of it half of the time.</p>
|
||||
</article>
|
||||
<article>
|
||||
<p><em>This is me</em>. Or at least it's my childhood fears, my loneliness. In my dreams I am constantly on the run, fleeing... from what<sup>(?)</sup> i don't know either.</p>
|
||||
</article>
|
||||
<article>
|
||||
<p><em>This is me</em>. I cloned myself to have someone to befriend. Or did it clone me? Or was it just some <u title="I am not exact on my terms, and I hate how pagan/native fetishism has ruined the term; but it is the closest I think I know that would match the concept. Ghost i've seen used for it too in older litterature; but that has quite litterally the meaning of 'dead person' in modern venicular.">spirit</u> passing by, glueing itself to the poor soul I am? Or am I the spirit passing by? Whatever it is, it is an entity that is mostly <em>me</em> most of the time, but sometimes seperates from me a bit to help me pass through difficult times</p>
|
||||
</article>
|
||||
<article>
|
||||
<section>
|
||||
<a href="https://miifox.net/#img42"><img src="https://miifox.net/img/42.png" alt="An artwork featuring Caroline in a burning forest"></a>
|
||||
<a href="https://miifox.net/#img75"><img src="https://miifox.net/img/75.png" alt="The refsheet for Bob the Lynx"></a>
|
||||
<a href="https://miifox.net/#img2"><img src="https://miifox.net/img/2.png" alt="An artwork featuring Mii"></a>
|
||||
<a href="https://miifox.net/#img8"><img src="https://miifox.net/img/8.png" alt="An artwork featuring Caroline"></a>
|
||||
</section>
|
||||
<section>
|
||||
<p><em>This is me</em>. This is how I present myself to the internet. None of these characters are superior to any of the other, but they relate to me, and others can relate me through them.</p>
|
||||
</section>
|
||||
</article>
|
||||
<article>
|
||||
<section>
|
||||
|
||||
<a href="https://miifox.net/#img73"><img src="https://miifox.net/img/73.png" alt="An artwork featuring Black the Lynx"></a>
|
||||
<a href="https://miifox.net/#img4"><img src="https://miifox.net/img/4.png" alt="An artwork featuring Mii"></a>
|
||||
<a href="https://miifox.net/#img79"><img src="https://miifox.net/img/79.png" alt="An artwork featuring Charles"></a>
|
||||
<a href="https://miifox.net/#img28"><img src="https://miifox.net/img/28.png" alt="An artwork featuring Aerolynx"></a>
|
||||
</section>
|
||||
<section>
|
||||
<p>These characters are originally from stories I wrote or I never wrote down. Some of them I relate to more deeply now, and some of them will always remain characters to me.</p>
|
||||
</section>
|
||||
</article>
|
||||
<article>
|
||||
<section>
|
||||
<p>This is how the <em>other me</em> manifests itself most of the time. It's really a friend to me, a support through though times.</p>
|
||||
</section>
|
||||
<section>
|
||||
<a href="https://miifox.net/#img32"><img src="https://miifox.net/img/32.png" alt="An artwork featuring Mii"></a>
|
||||
<a href="https://miifox.net/#img74"><img src="https://miifox.net/img/74.png" alt="An artwork featuring Rayna"></a>
|
||||
<a href="https://miifox.net/#img27"><img src="https://miifox.net/img/27.png" alt="An artwork featuring Aerolynx"></a>
|
||||
<a href="https://miifox.net/#img80"><img src="https://miifox.net/img/80.png" alt="An artwork featuring Black the Lynx"></a>
|
||||
</section>
|
||||
</article>
|
||||
<article>
|
||||
<p>Yes there is overlap, and the boundaries are ill-defined. This is intentional, and I'd like to keep it that way.<p>
|
||||
<p><strong>So in conclusion:</strong> <em>are there multiple entities inside my head?</em> yes, kinda; but mostly no - all depending on how you define <q>entity</q> and <q>inside my head</q></p>
|
||||
</article>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue