gaiety/faetale
gaiety/faetale
1
0
Fork 0
Code Activity

feat: improving design

Browse source
This commit is contained in:
Ava Gaiety Wroten 2021-12-30 11:37:41 -06:00
parent 1ff705bf64
commit e6e08e1f01
3 changed files with 47 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
components/IndexHero.vue
View file

@ -1,45 +1,47 @@
<template> <template>
<!-- Hero card --> <!-- Hero card -->
<div class="relative md:mt-4"> <div class="relative bg-pink-100 md:pt-4">
<div class="absolute inset-x-0 bottom-0 h-1/2 bg-gray-100" /> <div>
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8"> <div class="absolute inset-x-0 bottom-0 h-1/2 bg-pink-200" />
<div class="relative shadow-xl sm:rounded-2xl sm:overflow-hidden"> <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="absolute inset-0"> <div class="relative shadow-2xl sm:rounded-2xl sm:overflow-hidden">
<img class="h-full w-full object-cover" src="/hero.jpg" alt="" /> <div class="absolute inset-0">
</div> <img class="h-full w-full object-cover" src="/hero.jpg" alt="" />
<div class="relative p-8"> </div>
<h1> <div class="relative p-8">
<img <h1>
class="w-full max-w-xs m-auto" <img
src="/logo-square.webp" class="w-full max-w-xs m-auto"
alt="Faetale: Once Upon a Time" src="/logo-square.webp"
/> alt="Faetale: Once Upon a Time"
</h1> />
<p </h1>
class="mt-6 p-4 rounded-md max-w-lg mx-auto text-xl bg-pink-800 bg-opacity-40 text-pink-100 sm:max-w-3xl" <p
> class="mt-6 p-4 rounded-md max-w-lg mx-auto text-xl bg-brandlight bg-opacity-50 text-pink-100 sm:max-w-3xl"
...there was a queer tale of fantasy tabletop roleplaying games.
Join Gaiety on a journey through her favorite game systems,
adventures and who knows what else!
</p>
<div
class="mt-10 max-w-sm mx-auto sm:max-w-none sm:flex sm:justify-center"
>
<div
class="space-y-4 sm:space-y-0 sm:mx-auto sm:inline-grid sm:grid-cols-2 sm:gap-5"
> >
<a ...there was a queer tale of fantasy tabletop roleplaying games.
href="#videolist" Join Gaiety on a journey through her favorite game systems,
class="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-pink-600 bg-white hover:bg-pink-50 sm:px-8" adventures and who knows what else!
</p>
<div
class="mt-10 max-w-sm mx-auto sm:max-w-none sm:flex sm:justify-center"
>
<div
class="space-y-4 sm:space-y-0 sm:mx-auto sm:inline-grid sm:grid-cols-2 sm:gap-5"
> >
Watch <a
</a> href="#videolist"
<a class="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-pink-600 bg-white hover:bg-pink-50 sm:px-8"
href="https://ko-fi.com/gaiety" >
class="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-pink-500 bg-opacity-60 hover:bg-opacity-70 sm:px-8" Watch
> </a>
Support <a
</a> href="https://ko-fi.com/gaiety"
class="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-branddark bg-opacity-70 hover:bg-opacity-90 sm:px-8"
>
Support
</a>
</div>
</div> </div>
</div> </div>
</div> </div>

2
components/VideoPreview.vue
View file

@ -9,7 +9,7 @@
class="w-full h-full object-center object-cover group-hover:opacity-75" class="w-full h-full object-center object-cover group-hover:opacity-75"
/> />
</div> </div>
<time :datetime="publishedDatetime" class="mt-4 text-sm text-gray-700"> <time :datetime="publishedDatetime" class="mt-4 text-sm text-gray-500">
{{ publishedHuman }} {{ publishedHuman }}
</time> </time>
<h3 class="mt-1 text-lg font-medium text-gray-900"> <h3 class="mt-1 text-lg font-medium text-gray-900">

12
nuxt.config.js
View file

@ -141,12 +141,12 @@ export default {
tailwindcss: { tailwindcss: {
config: { config: {
plugins: [tailwindAspectRatio], plugins: [tailwindAspectRatio],
}, theme: {
theme: { extend: {
extend: { colors: {
colors: { brandlight: '#ca4e8d',
brandbright: '#ca4e8d', branddark: '#83398c',
branddark: '#83398c', },
}, },
}, },
}, },