lbry-tech/src/components/Contribute.astro
2023-12-04 19:52:18 +01:00

62 lines
No EOL
1.6 KiB
Text

---
import { contributions } from "../config";
---
<section id="contribute">
<div class="text">
<h2>Contribute</h2>
<p>No matter your experience or skill level, you can progress content freedom.</p>
</div>
<div class="contributions">
{contributions.map((contribution: object) => (
<div class="contribution">
<figure><img src={contribution.url} alt={contribution.title}/></figure>
<div class="text">
<p class="title">{contribution.title}</p>
</div>
</div>
))}
</div>
<div class="button-primary"><a href="/contribute">Collaborate with Contributors</a></div>
</section>
<style>
.contributions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 40px;
}
.contributions .contribution {
display: flex;
flex-direction: column;
width: 150px;
height: 150px;
align-items: center;
justify-content: center;
overflow: hidden;
/* padding: 10px; */
border-radius: 16px;
transition: 0.3s;
box-shadow: 2px 2px 2px var(--tertiary-background);
background-color: var(--secondary-background);
}
.contributions .contribution figure {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.contributions .contribution figure img {
height: 50px;
color: red;
fill: red;
}
.contributions .contribution .title {
font-size: 1.5rem;
font-weight: bold;
}
</style>