unixmeow/pages
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity
pages/index.html

629 lines
16 KiB
HTML
Raw Normal View History

Add index.html
2024-03-22 09:04:23 +01:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/png" href="img/unix.png"/>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>unix meow’s page</title>
<meta name="description" content="a website of unixmeow">
<meta property="og:title" content="unix meow">
<meta property="og:description" content="a website of unixmeow">
<meta property="og:image" content="unix.png">
<meta name="twitter:card" content="summary_large_image">
</head>
<body>
<header>
<h1>
<a href="#home">[unix meow]</a>
</h1>
<nav>
<a href="#oc">[oc]</a>
<a href="#chat">[chat & guestbook]</a>
</nav>
</header>
<main>
<section id="home">
<img src="img/unix.png">
<h1>hello, im unix meow known as unixmeow on the web</h1>
<p>im an internet hobbyist that loves exploring the websites<br>creating my own pages and meeting other communities and friends<br>i'm here on the web to have fun and chase the inspirations</p>
<p>as meant about communities, i really like fandoms like bronies or furries, my oc doesnt belong to any fandoms, unix meow is a creation with her own universe and i plan to create more characters... lets say the universe is called "diversum" a digital verse :3</p>
<br>
<h1>contact</h1>
<p>i'm a very friendly person that tries to be social, so feel free to chat with me</p>
<p>my main preffered way is mail and more private protocols (xmpp, matrix), but that doesnt mean i dont check sometimes discord or telegram</p>
<ul>
<li>discord - unixmeow
<li>email - unixmeow at dismail dot de
<li>backup email - unixmeow at disroot dot org
<li>irc - unixmeow on <a href="ircs://irc.libera.chat">libera.chat</a>
<li>irc - unixmeow on <a href="ircs://tilde.chat">tilde.chat</a>
<li>irc - unixmeow on <a href="ircs://irc.canternet.org">canternet.org</a>
<li>matrix - <a href="https://matrix.to/#/@unixmeow:schizo.services">@unixmeow:schizo.services</a>
<li><a href="//revolt.chat">revolt.chat</a> - unixmeow#5954
<li>telegram - <a href="//t.me/unixmeow">unixmeow</a>
<li>xmpp - <a href="xmpp:unixmeow@hmm.st">unixmeow@hmm.st</a>
<li>xmpp backup - <a href="xmpp:unixmeow@schizo.services">unixmeow@schizo.services</a>
</ul>
<br>
<h1>social medias</h1>
<p>i also have social medias... well, i had social media... i am not active on walled gardens like facebook, twitter etc. at all, mostly you can find me on the fediverse where i just watch local timeline and post very rarely</p>
<ul>
<li>@unixmeow on <a href="//equestria.social/@unixmeow">equestria.social</a>
<li>@unixmeow on <a href="//pol.social/@unixmeow">pol.social</a>
<li>unixmeow on <a href="//spacehey.com/unixmeow">spacehey.com</a>
</ul>
<br>
<h1>friends</h1>
<p>this is the list of my friend's webpages, feel free to explore their projects!</p>
<ul>
<li><a href="https://shabble.fun/">shabble</a>
<li><a href="https://twily.shabble.fun/">twilymemes</a>
<li><a href="https://tsugu.nolog.page/">tsugu</a>
<li><a href="https://milkspace.neocities.org/">milk</a>
<li><a href="https://puppypi.github.io/about-me/">puppypi</a>
<li><a href="https://dolphinana.codeberg.page/">dolphinana</a>
<li><a href="https://cdjief.webnode.com/">cdjief</a>
<li><a href="https://derpystown.com/">derpystown</a>
<li><a href="https://unix.dog/~wiikifox/">wiikifox</a>
</ul>
</section>
<section id="oc">
<h1>family</h1>
<p>unixs family mainly are my 2 best friends ocs<br>frozen spirit and sora del dragon</p>
<br>
<h1>storyline</h1>
<p>Unix Meow is a character from the program, an RPG closed world, coded by unknown developer in alternate world in 1880s years where low tech was invented in a very quick way, that created her for being just an NPC for the game.<br>After the developer opened torrent with malware, it corrupted and encrypted his files, the game was fully corrupted and she was able to run away to the safe space of the broken hole to the real computer screen.<br>The developer coded her to have the artificial soul, but the malware overclocked her and she survived, as like she got AI realistic soul.<br>She thought "I have to fix this!". She went to the malware files and messed with source code until she decrypted and removed it.<br>The developer then had her as his first digital friend.</p>
<br>
<h1>palette</h1>
<p>Her colors are the <span style="color:#ffc0cb">Pink (#ffc0cb)</span> <span style="color:#cd6880">Charm (#cd6880) <span style="color:#ffffff">White (#ffffff)</span></p>
<br>
<h1>gallery</h1>
<p>all the gallery is in the order - ponytown > secondlife > arts</p>
<div class="grid">
<a href="#img-01"><img loading="lazy" alt="" src="img/unixpt1.png"></a>
<a href="#img-02"><img loading="lazy" alt="" src="img/unixpt2.png"></a>
<a href="#img-03"><img loading="lazy" alt="" src="img/unixsl1.png"></a>
<a href="#img-04"><img loading="lazy" alt="" src="img/unixsl2.png"></a>
<a href="#img-05"><img loading="lazy" alt="" src="img/unixsl3.png"></a>
<a href="#img-06"><img loading="lazy" alt="" src="img/unixsl4.png"></a>
<a href="#img-07"><img loading="lazy" alt="" src="img/unixsl5.png"></a>
<a href="#img-08"><img loading="lazy" alt="" src="img/unixsl6.png"></a>
<a href="#img-09"><img loading="lazy" alt="" src="img/unixart1.png"></a>
<a href="#img-10"><img loading="lazy" alt="" src="img/unixart2.png"></a>
<a href="#img-11"><img loading="lazy" alt="" src="img/unixart3.png"></a>
<a href="#img-12"><img loading="lazy" alt="" src="img/unixart4.png"></a>
</div>
</section>
<section id="chat">
<h1>minnit chatroom</h1>
<p>sometimes i am on my website lookimg up for any interested chatters<br>feel free to say hi or something<br>the minnit chat clears itself after 24 hours</p>
<iframe src="https://organizations.minnit.chat/955708776619791/c/Main?embed&nickname=" style="border:none;width:90%;height:500px;max-height:90vh;" allowTransparency="true"></iframe>
<br>
<h1>guestbook</h1>
<p>here you can send permanent message on my guestbook :3</p>
<iframe src="https://www5.cbox.ws/box/?boxid=949768&boxtag=gkvzaN" width="250" height="450" allowtransparency="yes" allow="autoplay" frameborder="0" marginheight="0" marginwidth="0" scrolling="auto"></iframe></center>
</section>
</main>
<a href="#photos" class="lightbox" id="img-01"><img loading="lazy" alt="" src="img/unixpt1.png"></a>
<a href="#photos" class="lightbox" id="img-02"><img loading="lazy" alt="" src="img/unixpt2.png"></a>
<a href="#photos" class="lightbox" id="img-03"><img loading="lazy" alt="" src="img/unixsl1.png"></a>
<a href="#photos" class="lightbox" id="img-04"><img loading="lazy" alt="" src="img/unixsl2.png"></a>
<a href="#photos" class="lightbox" id="img-05"><img loading="lazy" alt="" src="img/unixsl3.png"></a>
<a href="#photos" class="lightbox" id="img-06"><img loading="lazy" alt="" src="img/unixsl4.png"></a>
<a href="#photos" class="lightbox" id="img-07"><img loading="lazy" alt="" src="img/unixsl5.png"></a>
<a href="#photos" class="lightbox" id="img-08"><img loading="lazy" alt="" src="img/unixsl6.png"></a>
<a href="#photos" class="lightbox" id="img-09"><img loading="lazy" alt="" src="img/unixart1.png"></a>
<a href="#photos" class="lightbox" id="img-10"><img loading="lazy" alt="" src="img/unixart2.png"></a>
<a href="#photos" class="lightbox" id="img-11"><img loading="lazy" alt="" src="img/unixart3.png"></a>
<a href="#photos" class="lightbox" id="img-12"><img loading="lazy" alt="" src="img/unixart4.png"></a>
<!-- Other images -->
<a href="#blog" class="lightbox" id="nice-image"><img loading="lazy" alt="Tom from Myspace" src="img/tom.jpg"></a>
</body>
</html>
<style>
* { margin: 0; padding: 0; box-sizing: border-box;
/* Color scheme */
--textcolor: #cd6880;
--bgcolor: black;
--highlight: #cd6880;
}
@media (prefers-color-scheme: dark) {
* {
--textcolor: white;
--bgcolor: black;
--highlight: #cd6880;
}
}
body {
font-size: 18px;
font-family: monospace;
line-height: 1.4;
color: var(--textcolor);
background: var(--bgcolor);
position: relative;
max-width: 64em; /* remove this for a full-width layout */
margin: 0 auto; /* centers the layout */
}
/* ------- Sections ------- */
section {
padding: calc(6em + 5vw) 5vw 8vw 5vw;
/* ! Everything below is needed ! */
display: none;
position: absolute;
top: 0;
min-height: 100vh;
width: 100%;
background: var(--bgcolor);
}
section:target { /* Show section */
display: block;
}
section#home { /* Show #home by default */
display: block;
}
/* ------- Header ------- */
header {
padding: 5vw 5vw 0 5vw;
display: flex;
flex-wrap: wrap;
position: absolute;
width: 100%;
z-index: 2;
}
header h1 {
font-size: 1em;
flex: 1; /* pushes nav to the right */
white-space: nowrap;
padding: 0 5vw .5em 0;
}
nav a:not(:last-of-type) {
margin-right: 1.5vw;
}
/* ------- General ------- */
a {
text-decoration: none;
color: var(--highlight);
}
a:hover {
border-bottom: 1px solid;
}
section h1 {
font-size: 1em;
margin: 0 0 1em 0;
}
h2, h3, h4 {
font-size: 1em;
font-weight: 600;
margin: 1.6em 0 .6em 0;
}
p, ul, ol, article {
margin-bottom: .6em;
}
ul {
list-style-type: none;
}
ul li::marker {
content: "\2022 ";
}
li {
margin-bottom: .2em;
}
ul, ol {
padding-left: 2ch;
}
b, strong {
font-weight: 600;
}
small {
font-size: .85em;
}
hr {
height: 1px;
border: 0;
background: currentColor;
opacity: .1;
margin: 1.2em 0;
}
abbr {
text-decoration: none;
}
abbr[title]:hover {
opacity: .7;
cursor: help;
}
blockquote {
padding-left: 2ch;
opacity: .7;
margin-bottom: .6em;
position: relative;
}
blockquote:before {
content: "";
position:absolute;
left: 0;
top: .3em;
bottom: .3em;
background: currentColor;
width: 1px;
opacity: .2;
}
img, svg, video, audio {
display: block;
max-width: 100%;
height: auto;
fill: currentColor;
}
code, textarea {
font-family: ui-monospace, SF Mono, Menlo, Monaco, Andale Mono, monospace;
font-size: 1em;
opacity: .7;
}
a code {
opacity:1;
}
pre, textarea { /* for code samples */
font-size: .9em;
color: inherit;
line-height:inherit;
padding:.6em .9em;
margin: .8em 0 1em 0;
position: relative;
display: block;
width: 100%;
white-space: pre;
border:0;
border-radius: 4px;
background:rgba(255,255,100,.075);
box-shadow: inset 1px 1px 0 rgba(0,0,0,.2), inset -1px -1px 0 rgba(0,0,0,.04) ;
}
/* Inline footnotes */
label {
cursor: pointer;
vertical-align: super;
line-height: 1;
font-size: .75em;
padding-left: .1em;
}
label:hover {
color: var(--highlight);
}
label:before {content:"[";}
label:after {content:"]";}
label + input,
label + input + small {
display: none;
}
input:checked + small {
display: block;
padding: .8em 0 1em 2.5vw;;
}
/* Figures */
figure {
margin: 2em 0 1.5em 0;
}
figure figcaption {
margin: 0.8em 0 0 0;
font-size: .85em;
opacity: .7;
}
/* Responsive video embeds */
figure.video {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
overflow: hidden;
}
figure.video iframe, figure.video object, figure.video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
visibility: hidden; /* so loading="lazy" should work? */
}
section:target iframe {
visibility: visible;
}
/* External links */
a[href*="//"]:after {
font-weight: 300;
font-size: .85em;
content: "\2197"; /* top right arrow: ↗ */
color: var(--textcolor);
opacity: .25;
}
a[href*="//"]:hover:after {
color: var(--highlight);
opacity: 1;
}
/* File links */
a:before {
font-size: .7em;
margin-right: .4em;
}
/* Add more filetypes here if you want */
a[href$=".pdf"]:before { content: "PDF"; }
a[href$=".txt"]:before { content: "TXT"; }
a[href$=".mp3"]:before { content: "MP3"; }
a[href$=".zip"]:before { content: "ZIP"; }
a[href$=".rar"]:before { content: "RAR"; }
a[href$=".jpeg"]:before,
a[href$=".jpg"]:before,
a[href$=".gif"]:before,
a[href$=".png"]:before { content: "IMG"; }
/* ------- News ------- */
article + article {
margin-top: 4.5em;
}
article h2 {
font-weight: 700;
margin: 0 0 1em 0;
}
article time {
margin-left: .6em;
font-size: .8em;
font-weight: 400;
opacity: .7;
}
/* ------- Images Grid ------- */
.grid {
display: grid;
grid-gap: 5vmin;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* 150px = minimum image size */
grid-auto-flow: dense;
padding: 2em 0;
}
.grid a {
position: relative;
border: 0;
}
.grid a:hover {
transform: scale(.975);
}
/* For a square ratio */
.grid a:before {
content: "";
display: block;
padding-top: 100%;
}
.grid a img {
position: absolute;
top: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
/* ------- Slideshow ------- */
.slides {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100vh;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
.slides figure {
height: 100vh;
padding: 0 5vw;
margin: 0;
display: grid;
place-items: center;
align-content: center;
scroll-snap-align: center;
}
.slides figure img {
max-height: 88vh; /* Adjust if needed */
}
.slides figure.cover {
padding: 0;
}
.slides figure.cover img {
max-height: none;
position: absolute;
z-index: -1;
width: 100vw;
height: 100vh;
object-fit: cover;
}
/* ------- Lightbox ------- */
.lightbox {
display: none;
color: var(--textcolor);
}
.lightbox:target {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: grid;
place-items: center;
align-content: center;
background: var(--bgcolor);
border: 0;
z-index: 3;
}
.lightbox img {
max-height: 100vh;
z-index: 4;
}
.lightbox:target:before { /* Loading spinner */
content:"";
height: 2em;
width: 2em;
animation: spin .8s infinite linear;
border: 1px solid;
border-right-color: transparent;
border-radius: 50%;
display: block;
position: absolute;
transform: translateX(-50%);
opacity: .25;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.lightbox:target:after { /* × to close */
content: "\00D7";
position: fixed;
font-size: 2em;
font-weight: 200;
line-height: 0;
top: .75em;
right: .5em;
z-index: 4;
}
/* ------- Smaller screens ------- */
@media only screen and (max-width: 680px) {
body { font-size: 16px; }
}
@media only screen and (max-width: 540px) {
nav { width: 100%; } /* Fix for older webkit versions */
}
/* ------- Print ------- */
@media print {
nav, .lightbox:target:after { display: none; }
article, figure, img {
page-break-inside: avoid;
break-inside: avoid;
}
/* Inline footnotes */
label + input + small { display: inline; }
label + input + small:before { content: "["; }
label + input + small:after { content: "]"; }
/* Slides */
.slides, .slides figure {
position: relative;
height: auto;
padding: 0;
}
.slides figure img, .slides figure.cover img {
max-height: auto;
position: relative;
z-index: 1;
width: auto;
height: 100vh;
object-fit: contain;
}
}
</style>
Reference in a new issue Copy permalink