diff options
| -rw-r--r-- | static/style.css | 340 | ||||
| -rw-r--r-- | templates/base.html.tera | 52 | ||||
| -rw-r--r-- | templates/home.html.tera | 4 | ||||
| -rw-r--r-- | templates/latestblogs.html.tera | 11 | ||||
| -rw-r--r-- | templates/latestposts.html.tera | 11 | ||||
| -rw-r--r-- | templates/latestskweets.html.tera | 14 |
6 files changed, 202 insertions, 230 deletions
diff --git a/static/style.css b/static/style.css index 4313657..658197c 100644 --- a/static/style.css +++ b/static/style.css @@ -1,90 +1,34 @@ -body { - background-color: #80a7e3; - color: #311f20; - font-family: 'Go Mono'; - padding: 0; - margin: 0; +.panel { + pointer-events: all; } -.page { - padding: 6vw; - display: flex; - flex-direction: column; +.panel:hover { + z-index: 15 !important; + pointer-events: all; } -img { - max-width: 100%; - border: 4px solid #311f20; +#page, +body { + pointer-events: none; } -.label, -.label * { - display: inline; +body { + background-color: #80a7e3; + color: #311f20; + font-family: 'Go Mono'; padding: 0; - border-radius: 0; - border: 0; margin: 0; - background-color: #0000; } -header { +#page { + padding: 6vw; 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; + flex-direction: column; } -#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,21 +106,103 @@ ul#nav { font-style: normal; } -#nav img { - position: relative; - top: 0.2em; - border: none; - height: 1em; - width: 1em; +header { + display: flex; + align-items: end; + flex-wrap: wrap; +} + +main { + display: flex; + flex-wrap: wrap; + align-items: flex-start; +} + +.main-content { + flex: 12 1 0; + min-width: 50vw; + // z-index: 3; + z-index: 15; + overflow-wrap: break-word; +} + +.content { + background-color: #d1a2e7; +} + +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; } -#blog-list { +/* 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; } -.blog-entry { +.post-entry { height: 1.4em; display: flex; justify-content: space-between; @@ -165,25 +213,20 @@ ul#nav { font-size: 1.1rem; } -.blog-entry:hover { +.post-entry:hover { font-family: 'Steps-Mono'; } +/* skinnyverse sidebar widget */ + #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; @@ -193,135 +236,77 @@ ul#nav { 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 { +.skweet { display: flex; gap: 2em; margin: 2em 0; } -.post h4, -h5 { +.skweet h2, +.skweet h3, +.skweet h4, +.skweet h5 { + font-family: 'Cherry Bomb' !important; margin: 0; + padding: 0; } -.post>.profile { +.skweet .profile { border: 4px solid #bf42a0; width: 48px; height: 48px; } -.post-content { +.skweet-content { flex: 1 1 auto; } -.post>.post-content>div { +.skweet-info { display: flex; justify-content: space-between; } -.post>.post-content>.gallery { +.skweet-gallery { display: flex; max-width: 100%; gap: 1em; } -.post>.post-content>.gallery>img { +.skweet-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; -} - -.main-content { - flex: 12 1 0; - min-width: 50vw; - z-index: 3; - overflow-wrap: break-word; -} - -.main-content:hover { - z-index: 10; -} +/* contact page */ .p-name { display: none; } -.content { - background-color: #d1a2e7; -} +/* branches */ -.content:hover { - z-index: 10; +.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; }
\ No newline at end of file diff --git a/templates/base.html.tera b/templates/base.html.tera index 06758ea..05f07cd 100644 --- a/templates/base.html.tera +++ b/templates/base.html.tera @@ -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> diff --git a/templates/home.html.tera b/templates/home.html.tera index 3396894..1d5d7da 100644 --- a/templates/home.html.tera +++ b/templates/home.html.tera @@ -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> diff --git a/templates/latestblogs.html.tera b/templates/latestblogs.html.tera deleted file mode 100644 index 966a728..0000000 --- a/templates/latestblogs.html.tera +++ /dev/null @@ -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>
\ No newline at end of file diff --git a/templates/latestposts.html.tera b/templates/latestposts.html.tera new file mode 100644 index 0000000..101fbb9 --- /dev/null +++ b/templates/latestposts.html.tera @@ -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>
\ No newline at end of file diff --git a/templates/latestskweets.html.tera b/templates/latestskweets.html.tera index 15a413c..bcdc2fa 100644 --- a/templates/latestskweets.html.tera +++ b/templates/latestskweets.html.tera @@ -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>
\ No newline at end of file |