40 lines
873 B
Vue
40 lines
873 B
Vue
<script setup lang="ts">
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<footer class="footer">
|
|
<span>© Dr Edgy Adventures</span>
|
|
</footer>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.footer {
|
|
will-change: transform, opacity;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 5dvh;
|
|
|
|
/* glassy background */
|
|
background: hsla(30, 100%, 46%, 0.8);
|
|
|
|
/* frosted borders */
|
|
border-top: 1px solid rgba(255, 255, 255, 0.25);
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
|
|
|
|
/* chamfered corners */
|
|
clip-path: polygon(
|
|
20px 0, /* top-left chamfer */
|
|
calc(100% - 20px) 0, /* top-right chamfer */
|
|
100% 20px,
|
|
100% 100%,
|
|
0 100%,
|
|
0 20px /* bottom-left chamfer */
|
|
);
|
|
|
|
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
|
|
color: white;
|
|
}
|
|
</style>
|