make mockup
After Width: | Height: | Size: 1.2 MiB |
After Width: | Height: | Size: 1.0 MiB |
After Width: | Height: | Size: 1.1 MiB |
After Width: | Height: | Size: 1.5 MiB |
After Width: | Height: | Size: 2.1 MiB |
After Width: | Height: | Size: 1.4 MiB |
After Width: | Height: | Size: 1.6 MiB |
After Width: | Height: | Size: 2.1 MiB |
After Width: | Height: | Size: 1.9 MiB |
After Width: | Height: | Size: 1.2 MiB |
After Width: | Height: | Size: 1.6 MiB |
After Width: | Height: | Size: 1.1 MiB |
After Width: | Height: | Size: 1.1 MiB |
After Width: | Height: | Size: 1.1 MiB |
|
@ -0,0 +1,12 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: kaerukaeru;
|
||||||
|
src: url('/fonts/kaerukaeru-Regular.woff2') format('woff2'),
|
||||||
|
url('/fonts/kaerukaeru-Regular.woff') format('woff');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: Louise;
|
||||||
|
src: url('/fonts/Louise-Regular.woff2') format('woff2'),
|
||||||
|
url('/fonts/Louise-Regular.woff') format('woff');
|
||||||
|
}
|
||||||
|
|
|
@ -0,0 +1,142 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8"/>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<link rel="stylesheet" href="fonts.css">
|
||||||
|
<title>cel's garden</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<img class="branch" id="branch1" src="branches/branch837-1.png" alt="cherry blossom branch">
|
||||||
|
<img class="branch" id="branch2" src="branches/branch878.png" alt="cherry blossom branch">
|
||||||
|
<img class="branch" id="branch3" src="branches/branch837-2.png" alt="cherry blossom branch">
|
||||||
|
<img class="branch" id="branch4" src="branches/branch840.png" alt="cherry blossom branch">
|
||||||
|
<img class="branch" id="branch5" src="branches/branch869.png" alt="cherry blossom branch">
|
||||||
|
<img class="branch" id="branch6" src="branches/branch871.png" alt="cherry blossom branch">
|
||||||
|
<img class="branch" id="branch7" src="branches/branch879.png" alt="cherry blossom branch">
|
||||||
|
<img class="branch" id="branch8" src="branches/branch880.png" alt="cherry blossom branch">
|
||||||
|
<img class="branch" id="branch9" src="branches/branch881-1.png" alt="cherry blossom branch">
|
||||||
|
<img class="branch" id="branch10" src="branches/branch881-2.png" alt="cherry blossom branch">
|
||||||
|
<img class="branch" id="branch11" src="branches/branch882-1.png" alt="cherry blossom branch">
|
||||||
|
<img class="branch" id="branch12" src="branches/branch882-2.png" alt="cherry blossom branch">
|
||||||
|
<img class="branch" id="branch13" src="branches/branch883-1.png" alt="cherry blossom branch">
|
||||||
|
<img class="branch" id="branch14" src="branches/branch883-2.png" alt="cherry blossom branch">
|
||||||
|
|
||||||
|
<div class="page">
|
||||||
|
<header>
|
||||||
|
<div class="panel" id="title">
|
||||||
|
<h1>cel 🌸</h1>
|
||||||
|
</div>
|
||||||
|
<!--<iframe
|
||||||
|
class="panel"
|
||||||
|
id="stream"
|
||||||
|
src="https://live.blos.sm/embed/video"
|
||||||
|
title="girlstream"
|
||||||
|
referrerpolicy="origin"
|
||||||
|
scrolling="no"
|
||||||
|
allowfullscreen>
|
||||||
|
</iframe>-->
|
||||||
|
<a href="https://listenbrainz.org/user/celblossom" class="panel" id="scrobble">now playing: Parfum d'étoiles - Ichiko Aoba</a>
|
||||||
|
</header>
|
||||||
|
<nav class="panel" id="nav">
|
||||||
|
<ul id="nav">
|
||||||
|
<li><a class="active" href="/">home</a></li>
|
||||||
|
<li><a href="/contact">kontakt</a></li>
|
||||||
|
<li><a href="/projects">projetos</a></li>
|
||||||
|
<li><a href="/sound">音</a></li>
|
||||||
|
<li><a href="/listens">楽</a></li>
|
||||||
|
<li><a href="/linkz">cute linkz</a></li>
|
||||||
|
<li><a href="https://bimbo.video">video</a></li>
|
||||||
|
<li><a href="https://live.blos.sm">🔴 live</a></li>
|
||||||
|
<li><a href="/pix">pix</a></li>
|
||||||
|
<li><a href="/thoughts">thoughts</a></li>
|
||||||
|
<li><a href="/girlblog">girlblog</a></li>
|
||||||
|
<li><a href="/writing">flop</a></li>
|
||||||
|
<li><a href="/zettelkasten">zettelkasten</a></li>
|
||||||
|
<li><a href="/read">よむ</a></li>
|
||||||
|
<li><a href="https://sectorinf.com/cel">🦋🐞🐌🐝🕷</a></li>
|
||||||
|
<li><a href="/plants">plantas</a></li>
|
||||||
|
<li><a href="https://ass-smacc"><img src="https://skinnyver.se/emoji/Wigs/suscakke.png"></a></li>
|
||||||
|
<li><a href="https://pussy.accountants">pussy</a></li>
|
||||||
|
<li><a href="/guestbook">visitas</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<div class="content">
|
||||||
|
<div class="info panel">
|
||||||
|
<h2>hallo i am celeste welcome 2 my site 🌟</h2>
|
||||||
|
<p>this is where i dump everything</p>
|
||||||
|
<p>i wish u a wonderful day</p>
|
||||||
|
<br>
|
||||||
|
<img src="https://s3.eu-west-1.wasabisys.com/skinnyverse/f28c467a-0ee1-4d49-a638-08a010fd9927/quinntyping.png">
|
||||||
|
<p>perpetually under construction</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="info panel h-card" rel="author">
|
||||||
|
<h1 class="p-name">cel</h1>
|
||||||
|
|
||||||
|
<h3>pronouns: <a class="u-url" rel="me" href="https://en.pronouns.page/@celblossom"><span class="p-x-pronoun-nominative">she</span>/<span class="p-x-pronoun-accusative">her</span></a></h3>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>email: <a class="u-email" href="mailto:cel@blos.sm">cel@blos.sm</a> <a href="cel.asc" class="u-key" rel="pgpkey">pgp key</a></li>
|
||||||
|
<li>matrix: <a class="u-impp" href="matrix:u/@cel:pussy.accountants">@cel:pussy.accountants</a></li>
|
||||||
|
<li>xmpp: <a class="u-impp" href="xmpp:cel@blos.sm?message">cel@blos.sm</a></li>
|
||||||
|
<li>fedi: <a class="u-url" rel="me" href="https://skinnyver.se/cel">@cel@skinnyver.se</a></li>
|
||||||
|
<li>silly little videos (soon): <a class="u-url" rel="me" href="https://skinnyver.se/cel">@cel@bimbo.video</a></li>
|
||||||
|
<li>pix (soon 2): <a class="u-url" rel="me" href="https://skinnyver.se/cel">@cel@portra400.video</a></li>
|
||||||
|
<li>git: <a class="u-url" rel="me" href="https://sectorinf.com/cel">sectorinf/cel</a></li>
|
||||||
|
<li>scrobbles: <a class="u-url" href="https://listenbrainz.org/user/celblossom">listenbrainz/celblossom</a></li>
|
||||||
|
<li>bandcamp fan: <a class="u-url" href="https://bandcamp.com/celblossom">bandcamp/celblossom</a></li>
|
||||||
|
<br>
|
||||||
|
<li><span class="p-note">languages (in rough skill order): english, portuguese, german, japanese, chinese, french, latin, toki pona, korean</span></li></li>
|
||||||
|
<li><span class="p-note">programming: rust, go, webdev, erlang, lisp</span></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<aside>
|
||||||
|
<div class="panel" id="blogs">
|
||||||
|
<h2>latest blogs <a class="label" href="/feed.xml"><img class="label" src="https://cinni.net/images/icon/rssbadge.png" alt="rss newsfeed"></a></h2>
|
||||||
|
<table id="blog-list">
|
||||||
|
<tr>
|
||||||
|
<td><a class="blog-entry" href="/thoughts/fedi">fedi<span class="blog-date">2023-02-04</span></a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><a class="blog-entry" href="/thoughts/fedi">slaying<span class="blog-date">2023-01-20</span></a></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div class="panel" id="skinnyverse">
|
||||||
|
<h2><a id="latest-skweets" href="https://skinnyver.se/cel">latest skweets</a></h2>
|
||||||
|
<div class="post">
|
||||||
|
<img src="https://s3.eu-west-1.wasabisys.com/skinnyverse/426b13b9-0d01-4dc1-abc9-6dbc1ec8a8a6/bjorkcpu2.png" class="profile">
|
||||||
|
<div class="post-content">
|
||||||
|
<div><h4>@cel</h4><h5>2h ago</h5></div>
|
||||||
|
<p>@nyx @lain ikr? omg we have no choice but to stan our skinny legend</p>
|
||||||
|
<div class="gallery"><img src="https://skinnyver.se/media/22aca0d1-441c-425f-b9b2-7501a29d8e9c/lain_skinny2.png"><img src="https://skinnyver.se/media/4f6344de-b334-417e-b202-f1daf3207986/vlcsnap-2022-06-15-09h55m17s937.png"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="post">
|
||||||
|
<img src="https://s3.eu-west-1.wasabisys.com/skinnyverse/426b13b9-0d01-4dc1-abc9-6dbc1ec8a8a6/bjorkcpu2.png" class="profile">
|
||||||
|
<div class="post-content">
|
||||||
|
<div><h4>@cel</h4><h5>2h ago</h5></div>
|
||||||
|
<p>@nyx @lain ikr? omg we have no choice but to stan our skinny legend</p>
|
||||||
|
<div class="gallery"><img src="https://skinnyver.se/media/22aca0d1-441c-425f-b9b2-7501a29d8e9c/lain_skinny2.png"><img src="https://skinnyver.se/media/4f6344de-b334-417e-b202-f1daf3207986/vlcsnap-2022-06-15-09h55m17s937.png"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<aside>
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
<div class="panel" id="footer">
|
||||||
|
<a href="https://skinnyver.se"><img src="https://skinnyver.se/instance/skinnyversebadge.png"></a>
|
||||||
|
<a href="https://social.xenofem.me/"><img src="https://s3.eu-west-1.wasabisys.com/skinnyverse/4520d16b-565c-4956-b1f0-dd18afcdf906/xenofemme.png"></a>
|
||||||
|
<a href="https://asbestos.cafe"><img src="https://asbestos.cafe/instance/asbestoscafesisterinstance.png"></a>
|
||||||
|
<a href="https://worm.pink"><img src="https://worm.pink/instance/wormpinksistersite.png"></a>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -0,0 +1,344 @@
|
||||||
|
body {
|
||||||
|
background-color: #80a7e3;
|
||||||
|
color: #311f20;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page {
|
||||||
|
padding: 6vw;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
border: 4px solid #311f20;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label,
|
||||||
|
.label * {
|
||||||
|
display: inline;
|
||||||
|
padding: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
border: 0;
|
||||||
|
margin: 0 0.1em;
|
||||||
|
background-color: #0000;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
display: flex;
|
||||||
|
align-items: end;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
header > #stream,
|
||||||
|
header > #scrobble {
|
||||||
|
flex: 0 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#stream {
|
||||||
|
background-color: #b52f6a;
|
||||||
|
max-width: 100%;
|
||||||
|
width: 550px;
|
||||||
|
aspect-ratio: 550/350;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
margin: 2vw;
|
||||||
|
border: 4px solid #311f20;
|
||||||
|
padding: 2rem 4rem;
|
||||||
|
position: relative;
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
|
||||||
|
header, main, body {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#title {
|
||||||
|
z-index: 10;
|
||||||
|
display: inline-block;
|
||||||
|
font-family: kaerukaeru;
|
||||||
|
font-size: 2em;
|
||||||
|
padding: 0rem 4rem;
|
||||||
|
background-color: #d16a84;
|
||||||
|
}
|
||||||
|
|
||||||
|
#scrobble {
|
||||||
|
background-color: #eb743b;
|
||||||
|
border-radius: 0;
|
||||||
|
color: #353070;
|
||||||
|
}
|
||||||
|
|
||||||
|
iframe {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style-type: none;
|
||||||
|
margin: rem 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #edc953;
|
||||||
|
background-color: #311f20;
|
||||||
|
padding: 0.5em;
|
||||||
|
border-radius: 2em;
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.active {
|
||||||
|
background-color: #edc953;
|
||||||
|
color: #311f20;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
padding: 1rem 4rem;
|
||||||
|
background-color: #5faf87;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav:hover {
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul#nav {
|
||||||
|
display: flex;
|
||||||
|
justify-content: start;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.2em;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav img {
|
||||||
|
height: 1.1rem;
|
||||||
|
width: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#blog-list {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-entry {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
background-color: #0000;
|
||||||
|
border-radius: 0;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#skinnyverse {
|
||||||
|
font-family: CherryBomb;
|
||||||
|
color: #e8c6e6;
|
||||||
|
border-color: #bf42a0;
|
||||||
|
background-color: #28446c;
|
||||||
|
flex: 1 1 15rem;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#latest-skweets {
|
||||||
|
background-color: #0000;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
color: #bf42a0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#blogs {
|
||||||
|
z-index: -1;
|
||||||
|
background-color: #7f99e6;
|
||||||
|
}
|
||||||
|
|
||||||
|
#footer {
|
||||||
|
z-index: -1;
|
||||||
|
background-color: #e8d2c5;
|
||||||
|
}
|
||||||
|
|
||||||
|
#footer > a {
|
||||||
|
border-radius: 0;
|
||||||
|
padding: 0;
|
||||||
|
background-color: #0000;
|
||||||
|
}
|
||||||
|
|
||||||
|
aside {
|
||||||
|
flex: 1 1 30rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#skinnyverse:hover,
|
||||||
|
#blogs:hover,
|
||||||
|
#footer:hover {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post {
|
||||||
|
display: flex;
|
||||||
|
gap: 2em;
|
||||||
|
margin: 2em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post h4, h5 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post > .profile {
|
||||||
|
border: 4px solid #bf42a0;
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post > .post-content > div {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post > .post-content > .gallery {
|
||||||
|
display: flex;
|
||||||
|
max-width: 100%;
|
||||||
|
gap: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post > .post-content > .gallery > img {
|
||||||
|
border: 4px solid #bf42a0;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
width: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.branch {
|
||||||
|
border: none;
|
||||||
|
width: 100vw;
|
||||||
|
position: absolute;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
flex: 12 1 0;
|
||||||
|
min-width: 50vw;
|
||||||
|
z-index: 3;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content:hover {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-name {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
background-color: #d1a2e7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info:hover {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
#branch6 {
|
||||||
|
top: 200vw;
|
||||||
|
-webkit-transform: scaleX(-1);
|
||||||
|
transform: scaleX(-1);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#branch2 {
|
||||||
|
top: 60vw;
|
||||||
|
|
||||||
|
z-index: -2;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#branch3 {
|
||||||
|
top: 100vw;
|
||||||
|
z-index: -2;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#branch4 {
|
||||||
|
top: 270vw;
|
||||||
|
-webkit-transform: scaleX(-1);
|
||||||
|
transform: scaleX(-1);
|
||||||
|
z-index: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#branch5 {
|
||||||
|
top: 0vw;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#branch1 {
|
||||||
|
top: 0vw;
|
||||||
|
-webkit-transform: scaleX(-1);
|
||||||
|
transform: scaleX(-1);
|
||||||
|
z-index: -1;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#branch7 {
|
||||||
|
top: 180vw;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#branch8 {
|
||||||
|
top: 260vw;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#branch9 {
|
||||||
|
top: 50vw;
|
||||||
|
-webkit-transform: scaleX(-1);
|
||||||
|
transform: scaleX(-1);
|
||||||
|
z-index: 4;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#branch10 {
|
||||||
|
top: 100vw;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#branch11 {
|
||||||
|
top: 145vw;
|
||||||
|
-webkit-transform: scaleX(-1);
|
||||||
|
transform: scaleX(-1);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#branch12 {
|
||||||
|
top: 180vw;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
#branch13 {
|
||||||
|
top: 15vw;
|
||||||
|
z-index: -3;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#branch14 {
|
||||||
|
top: 105vw;
|
||||||
|
-webkit-transform: scaleX(-1);
|
||||||
|
transform: scaleX(-1);
|
||||||
|
z-index: 4;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|