silva
/
adrema-form
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add arvo font

This commit is contained in:
philipp lang 2024-01-30 01:58:30 +01:00
parent f1acf34fbd
commit 38626cf977
2 changed files with 44 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/Eventoverview.ce.vue
View File

@ -1,21 +1,35 @@
<template>
<div class="mt-4 md:mt-6 grid gap-4 grid-cols-[repeat(auto-fill,minmax(250px,1fr))]">
<a v-for="(event, index) in events" :key="index" :href="props.urlPattern.replace('{slug}', event.slug)"
class="relative top-0 transition-all duration-200 hover:top-[-10px] shadow-lg hover:shadow-2xl rounded-lg bg-white flex flex-col overflow-hidden group">
<img :src="event.image" />
<div class="p-6 flex flex-col">
<h2 class="font-arvo flex-none text-primary-700 text-sm md:text-base" v-text="event.name"></h2>
<div class="flex items-baseline text-sm">
<calendar-icon class="w-3 h-3 text-primary"></calendar-icon>
<span class="text-sm font-semibold text-gray-800 ml-2" v-text="event.dates"></span>
</div>
<div class="flex-grow c text-sm mt-3" v-text="event.excerpt"></div>
<div class="bg-primary focus:ring-2 text-font rounded-lg text-xs sm:text-sm py-1 text-center mt-3">
Zur Anmeldung
</div>
</div>
</a>
</div>
<div
class="mt-4 md:mt-6 grid gap-4 grid-cols-[repeat(auto-fill,minmax(250px,1fr))]"
>
<a
v-for="(event, index) in events"
:key="index"
:href="props.urlPattern.replace('{slug}', event.slug)"
class="relative top-0 transition-all duration-200 hover:top-[-10px] shadow-lg hover:shadow-2xl rounded-lg bg-white flex flex-col overflow-hidden group"
>
<img :src="event.image" />
<div class="p-6 flex flex-col">
<h2
class="font-arvo flex-none text-primary text-sm md:text-base"
v-text="event.name"
></h2>
<div class="flex items-baseline text-sm">
<calendar-icon class="w-3 h-3 text-primary"></calendar-icon>
<span
class="text-sm font-semibold text-gray-800 ml-2"
v-text="event.dates"
></span>
</div>
<div class="flex-grow c text-sm mt-3" v-text="event.excerpt"></div>
<div
class="bg-primary focus:ring-2 text-font rounded-lg text-xs sm:text-sm py-1 text-center mt-3"
>
Zur Anmeldung
</div>
</div>
</a>
</div>
</template>
<script setup>
@ -23,21 +37,21 @@ import { ref } from "vue";
import CalendarIcon from "./components/icons/CalendarIcon.vue";
const props = defineProps({
url: {
required: true,
type: String,
},
urlPattern: {
required: true,
type: String,
},
url: {
required: true,
type: String,
},
urlPattern: {
required: true,
type: String,
},
});
const events = ref([]);
async function reloadEvents() {
const results = await axios.get(props.url);
events.value = results.data.data;
const results = await axios.get(props.url);
events.value = results.data.data;
}
reloadEvents();

3
tailwind.config.js
View File

@ -20,6 +20,9 @@ export default {
DEFAULT: "var(--circle)",
},
},
fontFamily: {
arvo: ["Arvo"],
},
},
},
plugins: [require("@tailwindcss/container-queries")],