make mockup
This commit is contained in:
commit
4a860896c2
GPG Key ID:
48E29AF13B5F1349
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
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');
|
||||
}
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue