blek
/
otherworld
forked from blek/world
1
0
Fork 0
Code Pull Requests Activity

Revert "move amber banner to top right" 

This reverts commit 11e3f75d99.
This commit is contained in:
b1ek 2024-10-21 11:57:42 +10:00
parent 11e3f75d99
commit ec4c158d2e
Signed by: blek
GPG Key ID: A622C22C9BC616B2
3 changed files with 76 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
content/_index.md
View File

@ -2,8 +2,6 @@
title = "Welcome" title = "Welcome"
+++ +++
{{ amber_banner() }}
## Welcome to my world! ## Welcome to my world!
Hello there! My name is Alice and i am a fullstack web dev. I like to start a lot of side projects, but finish only a few of them. Hello there! My name is Alice and i am a fullstack web dev. I like to start a lot of side projects, but finish only a few of them.
@ -44,6 +42,7 @@ Also you can view it [here](https://umami.blek.codes/share/ucLh7hS5xcXCpklV/worl
</div> </div>
## Projects ## Projects
{{ amber_banner() }}
You can find the list of my projects [here](/projects). You can find the list of my projects [here](/projects).
## Blog ## Blog

19
sass/amber-banner.scss
View File

@ -1,12 +1,4 @@
.amber-banner-wrapper { .amber-banner {
position: absolute;
right: 0;
display: flex;
align-items: end;
flex-direction: column;
.amber-banner {
background: #0005; background: #0005;
border: 1px solid #000; border: 1px solid #000;
border-radius: 8px; border-radius: 8px;
@ -54,16 +46,15 @@
} }
animation: amber-banner-icon-breathe 6s ease infinite; animation: amber-banner-icon-breathe 6s ease infinite;
} }
} }
.amber-banner-title { .amber-banner-title {
width: fit-content; width: fit-content;
border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0;
padding: 0.2em 0.5em; padding: 0.2em 0.5em;
margin-right: 1rem; margin: 0;
margin-left: 1rem;
background: #0003; background: #0003;
border: 1px solid #000; border: 1px solid #000;
border-bottom: 0; border-bottom: 0;
}
} }

8
templates/shortcodes/amber_banner.html
View File

@ -1,10 +1,9 @@
<link rel="stylesheet" href="/amber-banner.css"> <link rel="stylesheet" href="/amber-banner.css">
<div class="amber-banner-wrapper"> <div class="amber-banner-title">
<div class="amber-banner-title">
Open source promotion Open source promotion
</div> </div>
<div class="amber-banner"> <div class="amber-banner">
<img src="/amber.svg" class="amber-banner-icon"> <img src="/amber.svg" class="amber-banner-icon">
<div> <div>
<h1>Amber: the TypeScript for bash</h1> <h1>Amber: the TypeScript for bash</h1>
@ -27,5 +26,4 @@
</li> </li>
</ul> </ul>
</div> </div>
</div>
</div> </div>