Skip to content

Commit 93f3121

Browse files
veryCrunchyveryCrunchy
committed
wip: wip!!!
1 parent 8addab5 commit 93f3121

File tree

4 files changed

+106
-34
lines changed

4 files changed

+106
-34
lines changed

‎components/Header.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const { t } = useI18n(),
2121

2222
<template>
2323
<div class="flex items-center m3 flex-justify-between select-none">
24-
<div class="color-primary font-discord font-size-8">PreMiD</div>
24+
<a href="/" class="color-primary font-discord font-size-8">PreMiD</a>
2525
<div>
2626
<NuxtLink
2727
v-for="link in links"

‎pages/downloads.vue

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<script lang="ts" setup></script>
2+
3+
<template>
4+
<div
5+
class="h-full justify-center items-center flex-wrap justify-content gap-2 flex m-5 mt-20"
6+
>
7+
✨downloads✨
8+
</div>
9+
</template>
10+
11+
<style scoped></style>

‎pages/index.vue

Lines changed: 83 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,121 @@
11
<script lang="ts" setup></script>
22

33
<template>
4-
<div
5-
class="h-full justify-center items-center flex-wrap justify-content gap-2 m-20 flex"
4+
<section
5+
class="h-full justify-center items-center flex-wrap gap-2 flex mx-2 mt-20"
66
>
7-
<div>
7+
<div class="xs:pr-10">
88
<div>
99
<img
1010
src="/assets/images/logo-wordmark.png"
1111
alt="PreMiD Logo"
12-
class="max-w-120 w-1/1"
12+
class="xs:max-w-120 xs:w-1/1"
1313
/>
1414
<div class="flex justify-center">
1515
<p
16-
class="w-auto text-center font-semibold whitespace-pre-wrap max-w-screen sm:max-w-120"
16+
class="w-1/1 mt-5 text-center font-semibold whitespace-pre-wrap max-w-screen xs:max-w-120 text-5"
1717
>
1818
<span class="color-primary">PreMiD</span> is a simple, configurable
1919
utility that allows you to show what you're doing on the web in your
2020
Discord now playing status.
2121
</p>
2222
</div>
2323
</div>
24-
<div class="flex flex-wrap gap-4 m-4 justify-center">
24+
<div class="flex gap-4 justify-center lt-sm:flex-col m-10">
2525
<a
2626
href="#features"
27-
class="font-semibold text-nowrap bg-primary sm:py-3 rounded-full uppercase font-inter text-4 sm:px-10 px-4 py-2"
27+
class="font-semibold text-nowrap bg-primary text-center py-3 rounded-full uppercase font-inter text-4 px-10"
2828
>
2929
<FAIcon class="w-4 mr-1 h-4" :icon="'fa-solid fa-stream'" />{{
3030
$t("header.links.features")
3131
}}</a
3232
>
3333
<a
34-
href="#features"
35-
class="font-semibold text-nowrap bg-btn-grey sm:py-3 rounded-full uppercase font-inter text-4 sm:px-10 px-4 py-2"
34+
href="/downloads"
35+
class="font-semibold text-nowrap text-center bg-btn-grey py-3 rounded-full uppercase font-inter text-4 px-10"
3636
>
3737
<FAIcon class="w-4 mr-1 h-4" :icon="'fa-solid fa-download'" />{{
3838
$t("header.links.downloads")
3939
}}</a
4040
>
4141
</div>
4242
</div>
43-
<div
44-
class="h-65 bg-primary m-4 rounded-t-2 rounded-b-4 justify-center w-md"
45-
>
46-
<div class="flex items-center">
47-
<img
48-
class="rounded-full h-20 m-5"
49-
src="https://cdn.discordapp.com/avatars/503557087041683458/0e08c6c7ecd491094f443a86e53f1b13.png?size=1024"
50-
/>
51-
<div>
52-
<h1 class="font-semibold subpixel-antialiased text-5 font-inter">
53-
PreMiD
54-
</h1>
55-
<FAIcon class="h-5 mt-1 mr-1 w-5" :icon="'fa-solid fa-download'" />
43+
<section class="flex-col">
44+
<div
45+
v-for="presenceData in [
46+
{
47+
name: 'PreMiD',
48+
details: 'detail',
49+
state: 'state',
50+
time: '19:00 elapsed',
51+
},
52+
{
53+
user: {
54+
image:
55+
'https://cdn.discordapp.com/avatars/503557087041683458/0e08c6c7ecd491094f443a86e53f1b13.png?size=1024',
56+
name: 'PreMiD',
57+
},
58+
name: 'PreMiD',
59+
details: 'detail',
60+
state: 'state',
61+
time: '19:00 elapsed',
62+
},
63+
]"
64+
:key="presenceData.name"
65+
class="h-65 bg-primary m-4 rounded-t-2 rounded-b-4 justify-center w-md"
66+
>
67+
<div class="flex items-center">
68+
<img
69+
class="rounded-full h-20 m-5"
70+
src="https://cdn.discordapp.com/avatars/503557087041683458/0e08c6c7ecd491094f443a86e53f1b13.png?size=1024"
71+
/>
72+
<div>
73+
<h1 class="font-semibold subpixel-antialiased text-5 font-inter">
74+
PreMiD
75+
</h1>
76+
<FAIcon
77+
class="h-5 mt-1 h-fit mr-1 w-5"
78+
:icon="'fa-solid fa-download'"
79+
/>
80+
</div>
81+
</div>
82+
<div class="h-37 bg-primary brightness-95 w-full rounded-b-2 top-1/2">
83+
<div class="pt-4 pl-4">
84+
<h1 class="font-extrabold uppercase text-3">Playing a game</h1>
85+
<div class="flex flex-wrap mt-4 h-fit">
86+
<span class="max-h-22">
87+
<img
88+
class="rounded-md h-22"
89+
src="https://cdn.discordapp.com/avatars/503557087041683458/0e08c6c7ecd491094f443a86e53f1b13.png?size=1024"
90+
/>
91+
92+
<div
93+
class="rounded-full relative bottom-8 bg-primary w-9 h-9 left-15"
94+
>
95+
<img
96+
class="w-8 h-8 rounded-full m-0.5"
97+
src="https://cdn.discordapp.com/avatars/503557087041683458/0e08c6c7ecd491094f443a86e53f1b13.png?size=1024"
98+
/>
99+
</div>
100+
</span>
101+
<div class="pl-5 my-a">
102+
<h1 class="font-bold text-sm pb-.5">{{ presenceData.name }}</h1>
103+
<p class="text-xs font-extralight pb-.5">
104+
{{ presenceData.state }}
105+
</p>
106+
<p class="text-xs font-extralight pb-.5">
107+
{{ presenceData.details }}
108+
</p>
109+
<p class="text-xs font-extralight pb-.5">
110+
{{ presenceData.time }}
111+
</p>
112+
</div>
113+
</div>
114+
</div>
56115
</div>
57116
</div>
58-
<div class="h-35 bg-primary brightness-95 w-full rounded-b-2 top-1/2">
59-
<h1 class="font-extrabold pt-5 text-3.5 font-inter pl-5">
60-
Playing a game
61-
</h1>
62-
<img
63-
class="rounded-md h-20 ml-5 mt-3"
64-
src="https://cdn.discordapp.com/avatars/503557087041683458/0e08c6c7ecd491094f443a86e53f1b13.png?size=1024"
65-
/>
66-
</div>
67-
</div>
68-
</div>
117+
</section>
118+
</section>
69119
</template>
70120

71121
<style scoped></style>

‎pages/store.vue

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<script lang="ts" setup></script>
2+
3+
<template>
4+
<div
5+
class="h-full justify-center items-center flex-wrap justify-content gap-2 flex m-5 mt-20"
6+
>
7+
✨store✨
8+
</div>
9+
</template>
10+
11+
<style scoped></style>

0 commit comments

Comments
 (0)