75 lines
1.4 KiB
Vue
75 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import type { Color, ViewportLength } from "csstype";
|
|
|
|
// fix ReferenceError: _unref is not defined
|
|
// https://github.com/nuxt/framework/issues/5546
|
|
import { unref as _unref } from "vue";
|
|
|
|
const {
|
|
href,
|
|
color = "pink",
|
|
darkcolor = "#c88994",
|
|
title,
|
|
clearstyles = false,
|
|
forceheight,
|
|
} = defineProps<{
|
|
href?: string;
|
|
color?: Color;
|
|
darkcolor?: Color;
|
|
title?: string;
|
|
clearstyles?: boolean;
|
|
forceheight?: ViewportLength<"rem">;
|
|
}>();
|
|
|
|
const padding = clearstyles ? "0" : "1rem";
|
|
const height = forceheight ?? "auto";
|
|
</script>
|
|
|
|
<template>
|
|
<a class="no-underline inline-block flex" :href="href">
|
|
<div class="container box">
|
|
<p class="m-0 w-full title">{{ title }}</p>
|
|
<div class="main-content">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.container {
|
|
/* make sure width is good for fullscreen 1080p,
|
|
* fullscreen 1080p at 1.25 scaling,
|
|
* mobile
|
|
*/
|
|
width: 28rem;
|
|
height: v-bind(height);
|
|
border: 0.5rem solid v-bind(color);
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
html.dark .container {
|
|
border: 0.5rem solid v-bind(darkcolor);
|
|
}
|
|
|
|
.main-content {
|
|
padding: v-bind(padding);
|
|
padding-top: 0;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.title {
|
|
background: v-bind(color);
|
|
}
|
|
|
|
html.dark .title {
|
|
background: v-bind(darkcolor);
|
|
}
|
|
|
|
@media screen and (max-width: 600px) {
|
|
.container {
|
|
width: 90vw;
|
|
}
|
|
}
|
|
</style>
|