MiiFox.net/system.html
2023-09-26 13:38:13 +02:00

161 lines
9.3 KiB
HTML

<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>