blek
/
otherworld
forked from blek/world
1
0
Fork 0
Code Pull Requests 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

111
sass/amber-banner.scss
View File

@ -1,60 +1,69 @@
.amber-banner { .amber-banner-wrapper {
background: #0005; position: absolute;
border: 1px solid #000; right: 0;
border-radius: 8px;
height: 5rem;
width: fit-content;
padding: 1rem;
display: flex; display: flex;
align-items: center; align-items: end;
gap: 1rem; flex-direction: column;
margin-bottom: 2rem; .amber-banner {
background: #0005;
border: 1px solid #000;
border-radius: 8px;
height: 5rem;
width: fit-content;
padding: 1rem;
* {
margin: 0; padding: 0;
}
h1 {
font-size: 1.5rem;
}
ul {
list-style: none;
display: flex; display: flex;
margin-top: 0.5rem; align-items: center;
gap: 0.5rem; gap: 1rem;
}
small {
display: block;
color: #555555;
}
.amber-banner-icon { margin-bottom: 2rem;
height: 100%;
padding: 0 1rem; * {
@keyframes amber-banner-icon-breathe { margin: 0; padding: 0;
0%, 30% {
transform: scale(1);
}
56% {
transform: scale(1.1);
}
70%, to {
transform: scale(1);
}
} }
animation: amber-banner-icon-breathe 6s ease infinite; h1 {
font-size: 1.5rem;
}
ul {
list-style: none;
display: flex;
margin-top: 0.5rem;
gap: 0.5rem;
}
small {
display: block;
color: #555555;
}
.amber-banner-icon {
height: 100%;
padding: 0 1rem;
@keyframes amber-banner-icon-breathe {
0%, 30% {
transform: scale(1);
}
56% {
transform: scale(1.1);
}
70%, to {
transform: scale(1);
}
}
animation: amber-banner-icon-breathe 6s ease infinite;
}
}
.amber-banner-title {
width: fit-content;
border-radius: 8px 8px 0 0;
padding: 0.2em 0.5em;
margin-right: 1rem;
background: #0003;
border: 1px solid #000;
border-bottom: 0;
} }
} }
.amber-banner-title {
width: fit-content;
border-radius: 8px 8px 0 0;
padding: 0.2em 0.5em;
margin: 0;
margin-left: 1rem;
background: #0003;
border: 1px solid #000;
border-bottom: 0;
}

52
templates/shortcodes/amber_banner.html
View File

@ -1,29 +1,31 @@
<link rel="stylesheet" href="/amber-banner.css"> <link rel="stylesheet" href="/amber-banner.css">
<div class="amber-banner-title"> <div class="amber-banner-wrapper">
Open source promotion <div class="amber-banner-title">
</div> Open source promotion
<div class="amber-banner"> </div>
<img src="/amber.svg" class="amber-banner-icon"> <div class="amber-banner">
<div> <img src="/amber.svg" class="amber-banner-icon">
<h1>Amber: the TypeScript for bash</h1> <div>
<p> <h1>Amber: the TypeScript for bash</h1>
A type safe, easy to use language compiled to bash <p>
</p> A type safe, easy to use language compiled to bash
<ul> </p>
<li> <ul>
<a href="https://amber-lang.com"> <li>
<img alt="Go to website" title="Go to website" referrerpolicy="no-referrer" src="https://img.shields.io/badge/Go_to_website-orange?style=plastic"> <a href="https://amber-lang.com">
</a> <img alt="Go to website" title="Go to website" referrerpolicy="no-referrer" src="https://img.shields.io/badge/Go_to_website-orange?style=plastic">
</li> </a>
<li> </li>
<a href="https://github.com/amber-lang/amber.git"> <li>
<img alt="GitHub repository" title="Github repository" referrerpolicy="no-referrer" src="https://img.shields.io/github/stars/amber-lang/amber?style=plastic"> <a href="https://github.com/amber-lang/amber.git">
</a> <img alt="GitHub repository" title="Github repository" referrerpolicy="no-referrer" src="https://img.shields.io/github/stars/amber-lang/amber?style=plastic">
</li> </a>
<li> </li>
<img alt="GPL 3.0 license" title="GPL 3.0 license" referrerpolicy="no-referrer" src="https://img.shields.io/github/license/amber-lang/amber?style=plastic&color=blue"> <li>
</li> <img alt="GPL 3.0 license" title="GPL 3.0 license" referrerpolicy="no-referrer" src="https://img.shields.io/github/license/amber-lang/amber?style=plastic&color=blue">
</ul> </li>
</ul>
</div>
</div> </div>
</div> </div>