Leahnaya/splatoon3.ink
1
0
Fork 0
mirror of https://github.com/misenhower/splatoon3.ink.git synced 2026-09-11 10:05:44 -05:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Simplify the product container component

Browse Source 
This makes it easier to apply patterned background images.
This commit is contained in:
Matt Isenhower
2022-09-14 20:48:52 -07:00
parent 5c6a0ce262
commit fc5a26f0d9
5 changed files with 20 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/assets/img/tag-card-header.svg
View File

@@ -1,5 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg viewBox="0 0 2000 60" xmlns="http://www.w3.org/2000/svg">
<path d="M 1029.96 23.774 C 1029.761 26.218 1027.719 28.101 1025.267 28.102 L 975.732 28.102 C 975.601 28.102 975.477 28.075 975.348 28.064 C 972.917 27.866 971 25.859 971 23.384 C 971.004 20.775 973.123 18.664 975.732 18.668 L 993.936 18.668 C 993.93 18.562 993.919 18.458 993.919 18.353 C 993.919 14.901 996.727 12.103 1000.189 12.103 L 1000.809 12.103 C 1002.796 12.102 1004.666 13.045 1005.847 14.643 C 1006.648 15.714 1007.08 17.016 1007.08 18.353 C 1007.08 18.459 1007.07 18.563 1007.064 18.668 L 1025.267 18.668 C 1027.881 18.668 1030 20.779 1030 23.385 C 1030 23.518 1029.971 23.643 1029.96 23.774 M 2000 0 L 0 0 L 0 60 L 2000 60 L 2000 0 Z" fill-rule="evenodd" data-bx-origin="0.5 0.5"></path>
</svg>
<svg viewBox="0 0 2000 4000" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
<path d="M 1029.96 23.774 C 1029.761 26.218 1027.719 28.101 1025.267 28.102 L 975.732 28.102 C 975.601 28.102 975.477 28.075 975.348 28.064 C 972.917 27.866 971 25.859 971 23.384 C 971.004 20.775 973.123 18.664 975.732 18.668 L 993.936 18.668 C 993.93 18.562 993.919 18.458 993.919 18.353 C 993.919 14.901 996.727 12.103 1000.189 12.103 L 1000.809 12.103 C 1002.796 12.102 1004.666 13.045 1005.847 14.643 C 1006.648 15.714 1007.08 17.016 1007.08 18.353 C 1007.08 18.459 1007.07 18.563 1007.064 18.668 L 1025.267 18.668 C 1027.881 18.668 1030 20.779 1030 23.385 C 1030 23.518 1029.971 23.643 1029.96 23.774 M 2000 0 L 0 0 L 0 4000 L 2000 4000 L 2000 0 Z" fill-rule="evenodd" bx:origin="0.5 0.5"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 913 B

After

Width:  |  Height:  |  Size: 840 B

13
src/components/ProductContainer.vue
View File

@@ -1,11 +1,6 @@
<template>
<div>
<div :class="props.bg" class="rounded-t-2xl h-12 -mb-1 header-mask">
</div>
<div :class="props.bg" class="rounded-b-2xl pb-10">
<slot />
</div>
<div class="product-mask rounded-2xl" :class="props.bg">
<slot />
</div>
</template>
@@ -19,10 +14,10 @@ const props = defineProps({
</script>
<style scoped>
.header-mask {
.product-mask {
mask-image: url('@/assets/img/tag-card-header.svg');
mask-position: top;
mask-size: auto 60px;
mask-size: 2000px auto;
mask-repeat: no-repeat;
}
</style>

2
src/components/ScheduleBox.vue
View File

@@ -1,5 +1,5 @@
<template>
<ProductContainer bg="bg-gray-600" class="w-full">
<ProductContainer bg="bg-gray-600 pt-10 pb-8" class="w-full">
<div class="space-y-2">
<div class="flex items-center space-x-2 mx-2">
<img :src="type.img" />

4
src/components/screenshots/ScreenshotScheduleBox.vue
View File

@@ -1,6 +1,6 @@
<template>
<ProductContainer bg="bg-gray-600">
<div class="space-y-2 -mb-8">
<ProductContainer bg="bg-gray-600 pt-10">
<div class="space-y-2">
<div class="flex items-center justify-center space-x-1 mx-2">
<div class="font-splatoon1 text-4xl">
{{ type.name }}

21
src/views/FaqView.vue
View File

@@ -6,8 +6,8 @@
<Splat2 class="absolute -top-32 -left-24 w-64" />
<Splat5 class="absolute -right-28 -bottom-24 w-64" />
<ProductContainer class="relative md:rotate-1">
<div class="relative">
<div class="relative md:rotate-1">
<ProductContainer class="py-12">
<div class="faq text-gray-300 px-10">
<div class="space-y-6">
<h1>FAQ</h1>
@@ -80,8 +80,8 @@
<h2>My question wasn't answered here!</h2>
<p>
Please feel free to contact me on Twitter at <a href="https://twitter.com/splatoon3ink"
target="_blank">@Splatoon3ink</a> or via <a href="mailto:matt@isenhower.com"
target="_blank">email</a> if you have any other
target="_blank">@Splatoon3ink</a> or via <a href="mailto:matt@isenhower.com"
target="_blank">email</a> if you have any other
questions!
</p>
</div>
@@ -90,15 +90,14 @@
<router-link to="/">&laquo; Splatoon 3 Countdown</router-link>
</div>
</div>
<img class="absolute hidden sm:block -top-16 right-14 w-48 -rotate-3" src="@/assets/img/tape/tape-1.png" />
<img class="absolute -bottom-20 left-8 w-44 rotate-6" src="@/assets/img/tape/tape-3.png" />
<img class="absolute top-20 -right-24 w-32 rotate-6" src="@/assets/img/stickers/sticker-4.png" />
<img class="absolute hidden sm:block -bottom-14 right-32 w-44 -rotate-3" src="@/assets/img/stickers/sticker-10.png" />
</div>
</div>
</ProductContainer>
</ProductContainer>
<img class="absolute hidden sm:block -top-6 right-14 w-48 -rotate-3" src="@/assets/img/tape/tape-1.png" />
<img class="absolute -bottom-10 left-8 w-44 rotate-6" src="@/assets/img/tape/tape-3.png" />
<img class="absolute top-40 -right-24 w-32 rotate-6" src="@/assets/img/stickers/sticker-4.png" />
<img class="absolute hidden sm:block -bottom-6 right-32 w-44 -rotate-3" src="@/assets/img/stickers/sticker-10.png" />
</div>
</div>
</div>
</div>