cel
/
blossom
1
0
Fork 0
Code Issues 25 Pull Requests Packages Projects Releases Wiki Activity

refacor css and html

This commit is contained in:
cel 🌸 2023-01-17 00:48:57 +00:00
parent 8166458b41
commit 57c3a21bce
Signed by: cel
GPG Key ID: 48E29AF13B5F1349
6 changed files with 255 additions and 283 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

446
static/style.css
View File

@ -1,3 +1,17 @@
.panel {
pointer-events: all;
}
.panel:hover {
z-index: 15 !important;
pointer-events: all;
}
#page,
body {
pointer-events: none;
}
body { body {
background-color: #80a7e3; background-color: #80a7e3;
color: #311f20; color: #311f20;
@ -6,85 +20,15 @@ body {
margin: 0; margin: 0;
} }
.page { #page {
padding: 6vw; padding: 6vw;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
img { h2 {
max-width: 100%;
border: 4px solid #311f20;
}
.label,
.label * {
display: inline;
padding: 0;
border-radius: 0;
border: 0;
margin: 0;
background-color: #0000;
}
header {
display: flex;
align-items: end;
flex-wrap: wrap;
}
header>#stream,
header>#scrobble {
flex: 0 1 auto;
font-family: 'Terminal Grotesque Open';
font-size: 1.5rem;
}
#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: 'kaeru kaeru';
font-size: 2em; font-size: 2em;
padding: 0rem 4rem; font-family: PicNic;
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 { a {
@ -99,7 +43,6 @@ a {
a:hover { a:hover {
font-style: italic; font-style: italic;
// font-family: 'Avara';
} }
a.active { a.active {
@ -107,6 +50,24 @@ a.active {
color: #311f20; color: #311f20;
} }
img {
max-width: 100%;
border: 4px solid #311f20;
}
ul {
list-style-type: none;
margin: rem 0;
padding: 0;
}
.panel {
margin: 2vw;
border: 4px solid #311f20;
padding: 2rem 4rem;
position: relative;
}
nav { nav {
padding: 1rem 4rem; padding: 1rem 4rem;
background-color: #5faf87; background-color: #5faf87;
@ -114,11 +75,7 @@ nav {
font-family: 'Basteleur'; font-family: 'Basteleur';
} }
nav:hover { #nav {
z-index: 10;
}
ul#nav {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: start; justify-content: start;
@ -127,6 +84,15 @@ ul#nav {
font-size: 1.1rem; font-size: 1.1rem;
} }
#nav img {
position: relative;
top: 0.2em;
border: none;
height: 1em;
width: 1em;
padding: 0;
}
#suscakke { #suscakke {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -140,139 +106,10 @@ ul#nav {
font-style: normal; font-style: normal;
} }
#nav img { header {
position: relative;
top: 0.2em;
border: none;
height: 1em;
width: 1em;
padding: 0;
}
#blog-list {
width: 100%;
margin: 1em 0;
}
.blog-entry {
height: 1.4em;
display: flex; display: flex;
justify-content: space-between; align-items: end;
background-color: #0000; flex-wrap: wrap;
border-radius: 0;
padding: 0;
margin: 0;
font-size: 1.1rem;
}
.blog-entry:hover {
font-family: 'Steps-Mono';
}
#skinnyverse {
font-family: 'Karrik';
color: #e8c6e6;
border-color: #bf42a0;
background-color: #28446c;
flex: 1 1 15rem;
z-index: -1;
}
.post-content>div>h2,
.post-content>div>h3,
.post-content>div>h4 {
font-family: 'Cherry Bomb' !important;
}
#latest-skweets {
font-family: 'Cherry Bomb' !important;
background-color: #0000;
padding: 0;
margin: 0;
border-radius: 0;
color: #bf42a0;
}
#blogs {
z-index: -1;
background-color: #7f99e6;
font-family: 'Steps Mono'
}
h2 {
font-size: 2em;
font-family: PicNic;
}
#blogs h2 {
font-family: 'Director';
}
#footer {
z-index: -1;
background-color: #e8d2c5;
}
#footer>a {
border-radius: 0;
padding: 0;
background-color: #0000;
}
aside {
flex: 1 1 30rem;
}
#skinnyverse:hover,
.content: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 { main {
@ -284,44 +121,192 @@ main {
.main-content { .main-content {
flex: 12 1 0; flex: 12 1 0;
min-width: 50vw; min-width: 50vw;
z-index: 3; // z-index: 3;
z-index: 15;
overflow-wrap: break-word; overflow-wrap: break-word;
} }
.main-content:hover {
z-index: 10;
}
.p-name {
display: none;
}
.content { .content {
background-color: #d1a2e7; background-color: #d1a2e7;
} }
.content:hover { aside {
flex: 1 1 30rem;
}
footer {
z-index: -1;
background-color: #e8d2c5;
}
.badge,
.badge * {
display: inline;
padding: 0;
border-radius: 0;
border: 0;
margin: 4px 0;
background-color: #0000;
}
/* homepage css */
#title {
z-index: 10; z-index: 10;
display: inline-block;
font-family: 'kaeru kaeru';
font-size: 2em;
padding: 0rem 4rem;
background-color: #d16a84;
}
#stream,
#scrobble {
flex: 0 1 auto;
font-size: 1.8rem;
}
#scrobble {
background-color: #eb743b;
font-family: 'Terminal Grotesque Open';
border-radius: 0;
color: #353070;
}
#stream {
background-color: #b52f6a;
max-width: 100%;
width: 550px;
aspect-ratio: 550/350;
}
iframe {
margin: 0;
padding: 0;
}
/* posts sidebar widget */
#posts {
z-index: -1;
background-color: #7f99e6;
font-family: 'Steps Mono'
}
#posts h2 {
font-family: 'Director';
}
#post-list {
width: 100%;
margin: 1em 0;
}
.post-entry {
height: 1.4em;
display: flex;
justify-content: space-between;
background-color: #0000;
border-radius: 0;
padding: 0;
margin: 0;
font-size: 1.1rem;
}
.post-entry:hover {
font-family: 'Steps-Mono';
}
/* skinnyverse sidebar widget */
#skinnyverse {
font-family: 'Karrik';
color: #e8c6e6;
border-color: #bf42a0;
background-color: #28446c;
z-index: -1;
}
#latest-skweets {
font-family: 'Cherry Bomb' !important;
background-color: #0000;
padding: 0;
margin: 0;
border-radius: 0;
color: #bf42a0;
}
.skweet {
display: flex;
gap: 2em;
margin: 2em 0;
}
.skweet h2,
.skweet h3,
.skweet h4,
.skweet h5 {
font-family: 'Cherry Bomb' !important;
margin: 0;
padding: 0;
}
.skweet .profile {
border: 4px solid #bf42a0;
width: 48px;
height: 48px;
}
.skweet-content {
flex: 1 1 auto;
}
.skweet-info {
display: flex;
justify-content: space-between;
}
.skweet-gallery {
display: flex;
max-width: 100%;
gap: 1em;
}
.skweet-gallery img {
border: 4px solid #bf42a0;
flex: 1 1 auto;
width: 10px;
}
/* contact page */
.p-name {
display: none;
}
/* branches */
.branch {
border: none;
width: 100vw;
position: absolute;
pointer-events: none;
} }
#branch6 { #branch6 {
top: 200vw; top: 200vw;
-webkit-transform: scaleX(-1); -webkit-transform: scaleX(-1);
transform: scaleX(-1); transform: scaleX(-1);
pointer-events: none;
} }
#branch2 { #branch2 {
top: 60vw; top: 60vw;
z-index: -2; z-index: -2;
pointer-events: none;
} }
#branch3 { #branch3 {
top: 100vw; top: 100vw;
z-index: -2; z-index: -2;
pointer-events: none;
} }
#branch4 { #branch4 {
@ -329,12 +314,10 @@ main {
-webkit-transform: scaleX(-1); -webkit-transform: scaleX(-1);
transform: scaleX(-1); transform: scaleX(-1);
z-index: 0; z-index: 0;
pointer-events: none;
} }
#branch5 { #branch5 {
top: 0vw; top: 0vw;
pointer-events: none;
} }
#branch1 { #branch1 {
@ -342,17 +325,14 @@ main {
-webkit-transform: scaleX(-1); -webkit-transform: scaleX(-1);
transform: scaleX(-1); transform: scaleX(-1);
z-index: -1; z-index: -1;
pointer-events: none;
} }
#branch7 { #branch7 {
top: 180vw; top: 180vw;
pointer-events: none;
} }
#branch8 { #branch8 {
top: 260vw; top: 260vw;
pointer-events: none;
} }
#branch9 { #branch9 {
@ -360,31 +340,26 @@ main {
-webkit-transform: scaleX(-1); -webkit-transform: scaleX(-1);
transform: scaleX(-1); transform: scaleX(-1);
z-index: 4; z-index: 4;
pointer-events: none;
} }
#branch10 { #branch10 {
top: 100vw; top: 100vw;
pointer-events: none;
} }
#branch11 { #branch11 {
top: 145vw; top: 145vw;
-webkit-transform: scaleX(-1); -webkit-transform: scaleX(-1);
transform: scaleX(-1); transform: scaleX(-1);
pointer-events: none;
} }
#branch12 { #branch12 {
top: 180vw; top: 180vw;
pointer-events: none;
z-index: 4; z-index: 4;
} }
#branch13 { #branch13 {
top: 15vw; top: 15vw;
z-index: -3; z-index: -3;
pointer-events: none;
} }
#branch14 { #branch14 {
@ -392,5 +367,4 @@ main {
-webkit-transform: scaleX(-1); -webkit-transform: scaleX(-1);
transform: scaleX(-1); transform: scaleX(-1);
z-index: 4; z-index: 4;
pointer-events: none;
} }

52
templates/base.html.tera
View File

@ -2,29 +2,29 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="fonts.css"> <link rel="stylesheet" href="/fonts.css">
<title>cel's garden</title> <title>cel's garden</title>
</head> </head>
<body> <body>
<img class="branch" id="branch1" src="branches/branch837-1.png" alt="cherry blossom branch"> <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="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="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="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="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="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="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="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="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="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="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="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="branch13" src="/branches/branch883-1.png" alt="cherry blossom branch">
<img class="branch" id="branch14" src="branches/branch883-2.png" alt="cherry blossom branch"> <img class="branch" id="branch14" src="/branches/branch883-2.png" alt="cherry blossom branch">
<div class="page"> <div id="page">
<header> <header>
@ -33,15 +33,15 @@
</header> </header>
<nav class="panel" id="nav"> <nav class="panel">
<ul id="nav"> <ul id="nav">
<li><a class="{% block nav_home %}{% endblock %}" href="/">home</a></li> <li><a class="{% block nav_home %}{% endblock %}" href="/">home</a></li>
<li><a class="{% block nav_contact %}{% endblock %}" style="font-family: 'Compagnon Roman';" href="/contact">kontakt</a></li> <li><a class="{% block nav_contact %}{% endblock %}" style="font-family: 'Compagnon Roman';" href="/contact">kontakt</a></li>
<li><a class="{% block nav_projects %}{% endblock %}" style="font-family: 'DeGerm LoCase';" href="/projects">projetos</a></li> <li><a class="{% block nav_projects %}{% endblock %}" style="font-family: 'DeGerm LoCase';" href="/projects">projetos</a></li>
<li><a class="{% block nav_sound %}{% endblock %}" href="/sound">音</a></li> <li><a class="{% block nav_sound %}{% endblock %}" style="font-family: 'kirieji'" href="/sound">音</a></li>
<li><a class="{% block nav_listens %}{% endblock %}" style="font-family: 'Darumadrop One'" href="/listens">きいてます</a></li> <li><a class="{% block nav_listens %}{% endblock %}" style="font-family: 'Darumadrop One'" href="/listens">きいてます</a></li>
<li><a href="https://bimbo.video" style="font-family: 'Mon Hugo In'">video</a></li> <li><a href="https://bimbo.video" style="font-family: 'Mon Hugo In'">video</a></li>
<li><a href="https://live.blos.sm" style="font-family: ukikusa" >🔴 ライブ</a></li> <li><a href="https://live.blos.sm" style="font-family: id_kana018" >🔴ライブ</a></li>
<li><a class="{% block nav_pix %}{% endblock %}" style="font-family: Minecraftia" href="/pix">pix</a></li> <li><a class="{% block nav_pix %}{% endblock %}" style="font-family: Minecraftia" href="/pix">pix</a></li>
<li><a class="{% block nav_shodo %}{% endblock %}" href="/shodo">書道</a></li> <li><a class="{% block nav_shodo %}{% endblock %}" href="/shodo">書道</a></li>
<li><a class="{% block nav_thoughts %}{% endblock %}" style="font-family: 'MAZIUS REVIEW 20.09';" href="/thoughts">thoughts</a></li> <li><a class="{% block nav_thoughts %}{% endblock %}" style="font-family: 'MAZIUS REVIEW 20.09';" href="/thoughts">thoughts</a></li>
@ -71,13 +71,11 @@
</main> </main>
<footer> <footer class="panel">
<div class="panel" id="footer"> <a class="badge" href="https://skinnyver.se"><img src="https://skinnyver.se/instance/skinnyversebadge.png"></a>
<a href="https://skinnyver.se"><img src="https://skinnyver.se/instance/skinnyversebadge.png"></a> <a class="badge" 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://social.xenofem.me/"><img src="https://s3.eu-west-1.wasabisys.com/skinnyverse/4520d16b-565c-4956-b1f0-dd18afcdf906/xenofemme.png"></a> <a class="badge" href="https://asbestos.cafe"><img src="https://asbestos.cafe/instance/asbestoscafesisterinstance.png"></a>
<a href="https://asbestos.cafe"><img src="https://asbestos.cafe/instance/asbestoscafesisterinstance.png"></a> <a class="badge" href="https://worm.pink"><img src="https://worm.pink/instance/wormpinksistersite.png"></a>
<a href="https://worm.pink"><img src="https://worm.pink/instance/wormpinksistersite.png"></a>
</div>
</footer> </footer>
</div> </div>

4
templates/home.html.tera
View File

@ -28,7 +28,7 @@
{% block content %} {% block content %}
<div class="content panel"> <div class="panel content">
<h2>hallo i am celeste welcome 2 my site 🌟</h2> <h2>hallo i am celeste welcome 2 my site 🌟</h2>
<p>this is where i dump everything</p> <p>this is where i dump everything</p>
<p>i wish u a wonderful day</p> <p>i wish u a wonderful day</p>
@ -44,7 +44,7 @@
<aside> <aside>
{% include "latestblogs" %} {% include "latestposts" %}
{% include "latestskweets" %} {% include "latestskweets" %}
</aside> </aside>

11
templates/latestblogs.html.tera
View File

@ -1,11 +0,0 @@
<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>

11
templates/latestposts.html.tera Normal file
View File

@ -0,0 +1,11 @@
<div class="panel" id="posts">
<h2>latest posts <a class="badge" href="/feed.xml"><img class="badge" src="/rssbadge.png" alt="rss newsfeed"></a></h2>
<table id="post-list">
<tr>
<td><a class="post-entry" href="/thoughts/fedi">fedi<span class="post-date">2023-02-04</span></a></td>
</tr>
<tr>
<td><a class="post-entry" href="/thoughts/fedi">slaying<span class="post-date">2023-01-20</span></a></td>
</tr>
</table>
</div>

14
templates/latestskweets.html.tera
View File

@ -1,19 +1,19 @@
<div class="panel" id="skinnyverse"> <div class="panel" id="skinnyverse">
<h2><a id="latest-skweets" href="https://skinnyver.se/cel">latest skweets</a></h2> <h2><a id="latest-skweets" href="https://skinnyver.se/cel">latest skweets</a></h2>
<div class="post"> <div class="skweet">
<img src="https://s3.eu-west-1.wasabisys.com/skinnyverse/426b13b9-0d01-4dc1-abc9-6dbc1ec8a8a6/bjorkcpu2.png" class="profile"> <img src="https://s3.eu-west-1.wasabisys.com/skinnyverse/426b13b9-0d01-4dc1-abc9-6dbc1ec8a8a6/bjorkcpu2.png" class="profile">
<div class="post-content"> <div class="skweet-content">
<div><h4>@cel</h4><h5>2h ago</h5></div> <div class="skweet-info"><h4>@cel</h4><h5>2h ago</h5></div>
<p>@nyx @lain ikr? omg we have no choice but to stan our skinny legend</p> <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 class="skweet-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> </div>
<div class="post"> <div class="skweet">
<img src="https://s3.eu-west-1.wasabisys.com/skinnyverse/426b13b9-0d01-4dc1-abc9-6dbc1ec8a8a6/bjorkcpu2.png" class="profile"> <img src="https://s3.eu-west-1.wasabisys.com/skinnyverse/426b13b9-0d01-4dc1-abc9-6dbc1ec8a8a6/bjorkcpu2.png" class="profile">
<div class="post-content"> <div class="skweet-content">
<div><h4>@cel</h4><h5>2h ago</h5></div> <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> <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 class="skweet-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> </div>
</div> </div>