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

3
tailwind.config.js
View File

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