kglt/fensir
1
0
Fork 0
Code Activity

Layout card items (#5)

Browse source 
Reviewed-on: ofs/fensir#5
Co-authored-by: kogeletey <kg@re128.org>
Co-committed-by: kogeletey <kg@re128.org>
This commit is contained in:
Konrad Geletey 2024-12-08 12:37:20 +03:00 • committed by Konrad Geletey
parent fa8b158954
commit 8420434edb
Signed by: git
GPG key ID: 0CB1190D5D313992
8 changed files with 179 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

90
src/pages/cards.astro Normal file
View file

@ -0,0 +1,90 @@
---
import Default from "@/layouts/Default.astro"
import Card from "@/components/Card.vue"
import CarbonAddLarge from "@/icons/CarbonAddLarge.vue"
import CarbonSearch from "@/icons/CarbonSearch.vue"
---
<Default>
<Card class="card__content">
<div class="content__heading">
<h3> Coins </h3>
<div class="content__search-score">
<CarbonSearch />
<span> 10K </span>
</div>
</div>
<p>
Search coins of evm networks
</p>
<span class="badge"> Free </span>
</Card>
<Card class="card__add">
<CarbonAddLarge class="add__icon" />
</Card>
</Default>
<style>
:global(main) {
align-items: start;
justify-items: start;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
margin-left: 20px;
margin-top: 20px;
gap: 10px;
}
.card__add {
place-content: center;
}
.card__content {
display: grid;
gap: 15px;
color: var(--primary);
& h3 {
font-size: 20px;
}
& p {
font-size: 14px;
}
& .badge {
justify-self: end;
}
}
.card__content .content__heading {
display: inline-grid;
grid-auto-flow: column;
}
.card__content .content__heading .content__search-score {
display: grid;
grid-auto-flow: column;
align-items: center;
gap: 5px;
justify-self: end;
& svg {
width: 1rem;
height: 1rem;
}
}
.badge {
color: var(--primary);
padding: 0 10px;
display: inline-grid;
grid-column: 1;
place-items: center;
font-size: 12px;
background: var(--darken);
border: 0.5px solid var(--green);
}
.card__add .add__icon {
width: 5rem;
height: 5rem;
color: var(--primary);
}
</style>

35
src/pages/index.astro
View file

@ -1,43 +1,14 @@
---
import Default from "@/layouts/Default.astro"
import Button from "@/components/Button.vue"
import Search from "@/components/Search.vue"
import Footer from "@/components/Footer.astro"
---
<Default>
<header>
<span class="rate"> 0 / 5000 RQT </span>
<Button class="sign" />
</header>
<main>
<Search />
</main>
<Footer />
<Default type="home">
<Search />
</Default>
<style>
header {
display: grid;
grid-auto-flow: column;
align-items: center;
justify-content: end;
margin-top: 10px;
gap: 30px;
}
span.rate {
color: var(--primary);
font-size: 16px;
}
button.sign {
margin-right: 15px;
}
main {
display: grid;
:global(main) {
place-items: center;
min-height: calc(100vh - 55px - 2.5rem);
}
</style>