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

109
sass/amber-banner.scss
View File

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

52
templates/shortcodes/amber_banner.html
View File

@ -1,31 +1,29 @@
<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> <p>
<p> A type safe, easy to use language compiled to bash
A type safe, easy to use language compiled to bash </p>
</p> <ul>
<ul> <li>
<li> <a href="https://amber-lang.com">
<a href="https://amber-lang.com"> <img alt="Go to website" title="Go to website" referrerpolicy="no-referrer" src="https://img.shields.io/badge/Go_to_website-orange?style=plastic">
<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>
</a> </li>
</li> <li>
<li> <a href="https://github.com/amber-lang/amber.git">
<a href="https://github.com/amber-lang/amber.git"> <img alt="GitHub repository" title="Github repository" referrerpolicy="no-referrer" src="https://img.shields.io/github/stars/amber-lang/amber?style=plastic">
<img alt="GitHub repository" title="Github repository" referrerpolicy="no-referrer" src="https://img.shields.io/github/stars/amber-lang/amber?style=plastic"> </a>
</a> </li>
</li> <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">
<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> </ul>
</ul>
</div>
</div> </div>
</div> </div>