mirror of
https://github.com/YunoHost/yunohost-portal.git
synced 2024-09-03 20:06:23 +02:00
tiles: center text + reduce size
This commit is contained in:
parent
0f55168f25
commit
50dccdeae2
1 changed files with 11 additions and 9 deletions
|
@ -56,11 +56,11 @@ const apps = computed(() => {
|
||||||
|
|
||||||
<ul v-else class="tile-container">
|
<ul v-else class="tile-container">
|
||||||
<li v-for="app in apps" :key="app.id" class="tile relative">
|
<li v-for="app in apps" :key="app.id" class="tile relative">
|
||||||
<a :href="app.url" class="btn p-5" :class="app.variant">
|
<a :href="app.url" class="btn" :class="app.variant">
|
||||||
<div class="text-6xl font-extrabold mb-1" aria-hidden="true">
|
<span class="text-6xl font-extrabold" aria-hidden="true">
|
||||||
{{ app.label.substring(0, 2) }}
|
{{ app.label.substring(0, 2) }}
|
||||||
</div>
|
</span>
|
||||||
<span class="leading-tight mt-2">{{ app.label }}</span>
|
<span class="leading-tight">{{ app.label }}</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
@ -71,17 +71,19 @@ const apps = computed(() => {
|
||||||
<style>
|
<style>
|
||||||
.tile-container {
|
.tile-container {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fit, 10rem);
|
grid-template-columns: repeat(auto-fit, 9rem);
|
||||||
grid-auto-rows: 10rem;
|
grid-auto-rows: 9rem;
|
||||||
grid-gap: 1.5rem;
|
grid-gap: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tile a {
|
.tile a {
|
||||||
display: inline-block;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: start;
|
align-items: center;
|
||||||
border-radius: 0;
|
justify-content: center;
|
||||||
|
gap: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tile:hover a,
|
.tile:hover a,
|
||||||
|
|
Loading…
Add table
Reference in a new issue