forked from blek/world
move amber banner to top right
This commit is contained in:
parent
7cc38727d5
commit
11e3f75d99
GPG Key ID:
A622C22C9BC616B2
|
|
@ -2,6 +2,8 @@
|
|||
title = "Welcome"
|
||||
+++
|
||||
|
||||
{{ amber_banner() }}
|
||||
|
||||
## 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.
|
||||
|
||||
|
|
@ -42,7 +44,6 @@ Also you can view it [here](https://umami.blek.codes/share/ucLh7hS5xcXCpklV/worl
|
|||
</div>
|
||||
|
||||
## Projects
|
||||
{{ amber_banner() }}
|
||||
You can find the list of my projects [here](/projects).
|
||||
|
||||
## Blog
|
||||
|
|
|
|||
|
|
@ -1,60 +1,69 @@
|
|||
.amber-banner {
|
||||
background: #0005;
|
||||
border: 1px solid #000;
|
||||
border-radius: 8px;
|
||||
|
||||
height: 5rem;
|
||||
width: fit-content;
|
||||
padding: 1rem;
|
||||
.amber-banner-wrapper {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
align-items: end;
|
||||
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;
|
||||
margin-top: 0.5rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
small {
|
||||
display: block;
|
||||
color: #555555;
|
||||
}
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
|
||||
.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);
|
||||
}
|
||||
margin-bottom: 2rem;
|
||||
|
||||
* {
|
||||
margin: 0; padding: 0;
|
||||
}
|
||||
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;
|
||||
}
|
||||
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: 0;
|
||||
margin-left: 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-right: 1rem;
|
||||
|
||||
|
||||
background: #0003;
|
||||
border: 1px solid #000;
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,29 +1,31 @@
|
|||
<link rel="stylesheet" href="/amber-banner.css">
|
||||
|
||||
<div class="amber-banner-title">
|
||||
Open source promotion
|
||||
</div>
|
||||
<div class="amber-banner">
|
||||
<img src="/amber.svg" class="amber-banner-icon">
|
||||
<div>
|
||||
<h1>Amber: the TypeScript for bash</h1>
|
||||
<p>
|
||||
A type safe, easy to use language compiled to bash
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<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">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<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">
|
||||
</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>
|
||||
</ul>
|
||||
<div class="amber-banner-wrapper">
|
||||
<div class="amber-banner-title">
|
||||
Open source promotion
|
||||
</div>
|
||||
<div class="amber-banner">
|
||||
<img src="/amber.svg" class="amber-banner-icon">
|
||||
<div>
|
||||
<h1>Amber: the TypeScript for bash</h1>
|
||||
<p>
|
||||
A type safe, easy to use language compiled to bash
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<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">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<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">
|
||||
</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>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue