blek
/
world
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

move amber banner to top right

This commit is contained in:
b1ek 2024-10-20 18:15:24 +10:00
parent 7cc38727d5
commit 11e3f75d99
Signed by: blek
GPG Key ID: A622C22C9BC616B2
3 changed files with 89 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
content/_index.md
View File

@ -2,6 +2,8 @@
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.
@ -42,7 +44,6 @@ 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,4 +1,12 @@
.amber-banner { .amber-banner-wrapper {
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;
@ -46,15 +54,16 @@
} }
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: 0; margin-right: 1rem;
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,9 +1,10 @@
<link rel="stylesheet" href="/amber-banner.css"> <link rel="stylesheet" href="/amber-banner.css">
<div class="amber-banner-title"> <div class="amber-banner-wrapper">
<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>
@ -26,4 +27,5 @@
</li> </li>
</ul> </ul>
</div> </div>
</div>
</div> </div>