YunoHost/yunohost-portal
1
0
Fork 0
mirror of https://github.com/YunoHost/yunohost-portal.git synced 2024-09-03 20:06:23 +02:00
Code Issues Projects Releases Packages Wiki Activity

tiles: center text + reduce size

Browse source
This commit is contained in:
axolotle 2023-11-22 16:18:34 +01:00
parent 0f55168f25
commit 50dccdeae2
1 changed files with 11 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
pages/index.vue
View file

@ -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,