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 {
background-color: #80a7e3;
color: #311f20;
@ -6,85 +20,15 @@ body {
margin: 0;
}
.page {
#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;
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';
h2 {
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;
font-family: PicNic;
}
a {
@ -99,7 +43,6 @@ a {
a:hover {
font-style: italic;
// font-family: 'Avara';
}
a.active {
@ -107,6 +50,24 @@ a.active {
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 {
padding: 1rem 4rem;
background-color: #5faf87;
@ -114,11 +75,7 @@ nav {
font-family: 'Basteleur';
}
nav:hover {
z-index: 10;
}
ul#nav {
#nav {
display: flex;
align-items: center;
justify-content: start;
@ -127,6 +84,15 @@ ul#nav {
font-size: 1.1rem;
}
#nav img {
position: relative;
top: 0.2em;
border: none;
height: 1em;
width: 1em;
padding: 0;
}
#suscakke {
margin: 0;
padding: 0;
@ -140,139 +106,10 @@ ul#nav {
font-style: normal;
}
#nav img {
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;
header {
display: flex;
justify-content: space-between;
background-color: #0000;
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;
align-items: end;
flex-wrap: wrap;
}
main {
@ -284,44 +121,192 @@ main {
.main-content {
flex: 12 1 0;
min-width: 50vw;
z-index: 3;
// z-index: 3;
z-index: 15;
overflow-wrap: break-word;
}
.main-content:hover {
z-index: 10;
}
.p-name {
display: none;
}
.content {
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;
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 {
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 {
@ -329,12 +314,10 @@ main {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
z-index: 0;
pointer-events: none;
}
#branch5 {
top: 0vw;
pointer-events: none;
}
#branch1 {
@ -342,17 +325,14 @@ main {
-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 {
@ -360,31 +340,26 @@ main {
-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 {
@ -392,5 +367,4 @@ main {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
z-index: 4;
pointer-events: none;
}

52
templates/base.html.tera
View File

@ -2,29 +2,29 @@
<html lang="en">
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="fonts.css">
<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">
<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">
<div id="page">
<header>
@ -33,15 +33,15 @@
</header>
<nav class="panel" id="nav">
<nav class="panel">
<ul id="nav">
<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_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 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_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>
@ -71,13 +71,11 @@
</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 class="panel">
<a class="badge" 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 class="badge" 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>
</footer>
</div>

4
templates/home.html.tera
View File

@ -28,7 +28,7 @@
{% block content %}
<div class="content panel">
<div class="panel content">
<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>
@ -44,7 +44,7 @@
<aside>
{% include "latestblogs" %}
{% include "latestposts" %}
{% include "latestskweets" %}
</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">
<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">
<div class="post-content">
<div><h4>@cel</h4><h5>2h ago</h5></div>
<div class="skweet-content">
<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>
<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 class="post">
<div class="skweet">
<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>
<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>