fix: margin on small displays
This commit is contained in:
parent
c2cbc11c8b
commit
c765592096
3 changed files with 19 additions and 18 deletions
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<!-- Hero card -->
|
<!-- Hero card -->
|
||||||
<div class="relative">
|
<div class="relative md:mt-4">
|
||||||
<div class="absolute inset-x-0 bottom-0 h-1/2 bg-gray-100" />
|
<div class="absolute inset-x-0 bottom-0 h-1/2 bg-gray-100" />
|
||||||
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
|
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
|
||||||
<div class="relative shadow-xl sm:rounded-2xl sm:overflow-hidden">
|
<div class="relative shadow-xl sm:rounded-2xl sm:overflow-hidden">
|
||||||
|
@ -16,7 +16,7 @@
|
||||||
/>
|
/>
|
||||||
</h1>
|
</h1>
|
||||||
<p
|
<p
|
||||||
class="mt-6 max-w-lg mx-auto text-center text-xl text-indigo-500 sm:max-w-3xl"
|
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"
|
||||||
>
|
>
|
||||||
...there was a queer tale of fantasy tabletop roleplaying games.
|
...there was a queer tale of fantasy tabletop roleplaying games.
|
||||||
Join Gaiety on a journey through her favorite game systems,
|
Join Gaiety on a journey through her favorite game systems,
|
||||||
|
@ -30,13 +30,13 @@
|
||||||
>
|
>
|
||||||
<a
|
<a
|
||||||
href="#videolist"
|
href="#videolist"
|
||||||
class="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-indigo-700 bg-white hover:bg-indigo-50 sm:px-8"
|
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"
|
||||||
>
|
>
|
||||||
Watch
|
Watch
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="https://ko-fi.com/gaiety"
|
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-indigo-500 bg-opacity-60 hover:bg-opacity-70 sm:px-8"
|
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"
|
||||||
>
|
>
|
||||||
Support
|
Support
|
||||||
</a>
|
</a>
|
||||||
|
|
|
@ -1,5 +1,3 @@
|
||||||
import tailwindAspectRatio from '@tailwindcss/aspect-ratio'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
// Global page headers: https://go.nuxtjs.dev/config-head
|
// Global page headers: https://go.nuxtjs.dev/config-head
|
||||||
head: {
|
head: {
|
||||||
|
@ -35,18 +33,6 @@ export default {
|
||||||
'@nuxtjs/tailwindcss',
|
'@nuxtjs/tailwindcss',
|
||||||
],
|
],
|
||||||
|
|
||||||
tailwindcss: {
|
|
||||||
config: {
|
|
||||||
plugins: [tailwindAspectRatio],
|
|
||||||
},
|
|
||||||
// theme: {
|
|
||||||
// colors: {
|
|
||||||
// 'brand-bright': '#ca4e8d',
|
|
||||||
// 'brand-dark': '#83398c',
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
},
|
|
||||||
|
|
||||||
// Modules: https://go.nuxtjs.dev/config-modules
|
// Modules: https://go.nuxtjs.dev/config-modules
|
||||||
modules: [],
|
modules: [],
|
||||||
|
|
||||||
|
|
15
tailwind.config.js
Normal file
15
tailwind.config.js
Normal file
|
@ -0,0 +1,15 @@
|
||||||
|
import tailwindAspectRatio from '@tailwindcss/aspect-ratio'
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
config: {
|
||||||
|
plugins: [tailwindAspectRatio],
|
||||||
|
},
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
brandbright: '#ca4e8d',
|
||||||
|
branddark: '#83398c',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
Loading…
Add table
Reference in a new issue