add: amber banner
This commit is contained in:
parent
f16f7a78d6
commit
6b5a9601c4
GPG Key ID:
A622C22C9BC616B2
|
|
@ -42,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
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
.amber-banner {
|
||||||
|
background: #0005;
|
||||||
|
border: 1px solid #000;
|
||||||
|
border-radius: 8px;
|
||||||
|
|
||||||
|
height: 5rem;
|
||||||
|
width: fit-content;
|
||||||
|
padding: 1rem;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<svg viewBox="0 0 957.7 1703" xmlns="http://www.w3.org/2000/svg"><path d="M0 560.3c0-22.4 8-44 22.5-61L428 23.3a66.1 66.1 0 0 1 100.6-.1l406.5 476a93.9 93.9 0 0 1 22.5 61.1v536.2c0 20.9-7 41.2-19.8 57.7l-407.3 523.3a66.2 66.2 0 0 1-104.4 0L19.8 1154.1A94 94 0 0 1 0 1096.5Z" fill="url(#a)"/><path d="M0 560.3c0-22.4 8-44 22.5-61L428 23.3a66.1 66.1 0 0 1 100.6-.1l406.5 476a93.9 93.9 0 0 1 22.5 61.1v536.2c0 20.9-7 41.2-19.8 57.7l-407.3 523.3a66.2 66.2 0 0 1-104.4 0L19.8 1154.1A94 94 0 0 1 0 1096.5Z" fill="url(#b)"/><path d="M456.8 461.1a31.8 31.8 0 0 0 22.1-30.3l.4-264.2a19.3 19.3 0 0 0-34-12.5L124.7 529.7a19.3 19.3 0 0 0 20.4 30.8l311.7-99.4z" fill="url(#c)"/><defs><radialGradient id="a" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="rotate(-90 1023.3 682.2) scale(1705.53474)"><stop offset="0" stop-color="#ffa200"/><stop offset="1" stop-color="#ad004f"/></radialGradient><radialGradient id="b" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(525.52052 0 0 775.7961 478.9 775.8)"><stop offset="0" stop-color="#ffa100" stop-opacity="0"/><stop offset=".5" stop-color="#ffa100" stop-opacity=".2"/><stop offset="1" stop-color="#ffa100" stop-opacity=".8"/></radialGradient><linearGradient id="c" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="scale(-795.7954 795.7954) rotate(-67.3 .5 1.1)"><stop offset="0" stop-color="#ffea00"/><stop offset="1" stop-color="#ff7d00"/></linearGradient></defs></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1,29 @@
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
Loading…
Reference in New Issue