style: add grid for columns, fix padding

Kyzoid · Jan 21, 2024 · 7d739b4 · 7d739b4
1 parent 5ed5dd8
commit 7d739b4
Show file tree

Hide file tree

Showing 9 changed files with 30 additions and 33 deletions.
diff --git a/src/components/Home.vue b/src/components/Home.vue
@@ -2,7 +2,7 @@
  <div class="body flex flex-col items-center justify-center h-full w-full">
  <Background class="fixed top-0 left-0 overflow-hidden" />
 
- <div class="username-wrapper flex flex-col justify-center align-center mb-8 ">
+ <div class="username-wrapper flex flex-col justify-center align-center mb-8">
  <div class="relative ml-2 username">
  <h1 class="absolute z-20">KYZOID</h1>
  <span class="absolute z-10 signature">Kyzoid</span>
@@ -11,44 +11,43 @@
  </div>
 
  <div ref="$card" class="z-30 card" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mousemove="rotateToMouse">
- <div class="grid grid-cols-2 gap-2 text-white font-weight-regular">
- <div>
- <div class="mb-2">
- <h2 class="uppercase text-xs opacity-60">Sound Voltex</h2>
+ <div class="grid grid-cols-2 gap-3 sm:gap-6 text-white font-weight-regular p-3 sm:p-6">
+ <div class="grid grid-cols-1 gap-3">
+ <div>
+ <h2 class="uppercase text-xs opacity-50 mb-1">Sound Voltex</h2>
  <SDVXCard :value="stats['SDVX']" />
  </div>
- <div class="mb-2">
- <h2 class="uppercase text-xs opacity-60">Maimai DX</h2>
- <div class="mt-0.5 flex items-center">
- <MaimaiCard class="maimai" :value="stats['maimaiDeluxe']" />
- </div>
+ <div>
+ <h2 class="uppercase text-xs opacity-50 mb-1">Maimai DX</h2>
+ <MaimaiCard class="maimai" :value="stats['maimaiDeluxe']" />
  </div>
 
- <div class="mb-2">
- <h2 class="uppercase text-xs opacity-60">Jubeat Festo</h2>
+ <div>
+ <h2 class="uppercase text-xs opacity-50 mb-1">Jubeat Ave.</h2>
  <JubeatCard :value="stats['jubeat']" />
  </div>
 
  <div>
- <h2 class="uppercase text-xs opacity-60">Pop'n Music</h2>
+ <h2 class="uppercase text-xs opacity-50 mb-1">Pop'n Music</h2>
  <PopnCard :value="stats['popn']" />
  </div>
  </div>
- <div>
- <div class="mb-2">
- <h2 class="uppercase text-xs opacity-60">osu!mania</h2>
+
+ <div class="grid grid-cols-1 gap-4">
+ <div>
+ <h2 class="uppercase text-xs opacity-50 mb-1">osu!mania</h2>
  <OsuCard :value="stats['osu']['mania']" />
  </div>
- <div class="mb-2">
- <h2 class="uppercase text-xs opacity-60">ScoreSaber</h2>
+ <div>
+ <h2 class="uppercase text-xs opacity-50 mb-1">ScoreSaber</h2>
  <ScoreSaberCard :value="stats['scoresaber']" />
  </div>
- <div class="mb-2">
- <h2 class="uppercase text-xs opacity-60">EZ2ON Reboot: R</h2>
+ <div>
+ <h2 class="uppercase text-xs opacity-50 mb-1">EZ2ON Reboot: R</h2>
  <EZ2ONCard :value="ez2onAverage()" />
  </div>
  <div>
- <h2 class="uppercase text-xs opacity-60">vivid/stasis</h2>
+ <h2 class="uppercase text-xs opacity-50 mb-1">vivid/stasis</h2>
  <VividStasisCard :value="stats['vivid/stasis']" />
  </div>
  </div>
@@ -145,10 +144,8 @@ const ez2onAverage = () => {
 
 .card { 
  position: relative;
- width: 350px;
  box-shadow: 0 1px 10px rgba(0,0,0,0.2);
  border-radius: 12px;
- padding: .5rem .825rem .825rem .825rem;
  border: 2px solid rgba(255,255,255, 0.1); 
 
  background: rgba(0, 0, 0, 0.1);

diff --git a/src/components/cards/jubeat.vue b/src/components/cards/jubeat.vue
@@ -1,5 +1,5 @@
 <template>
- <div class="jubeat mt-1 flex justify-between items-center px-2">
+ <div class="jubeat flex justify-between items-center px-2">
  <span class="jubeat-label font-medium">Jubility</span>
  <span class="jubeat-rating font-medium opacity-90">{{ value }}</span>
  </div>

diff --git a/src/components/cards/maimai.vue b/src/components/cards/maimai.vue
@@ -1,5 +1,5 @@
 <template>
- <div class="relative rating shrink-0 mt-2 sm:mt-0.5">
+ <div class="relative rating shrink-0">
  <img class="absolute" :src="rating" alt="Rating silver">
  <span class="absolute font-bold text-sm">{{ value }}</span>
  </div>

diff --git a/src/components/cards/osu.vue b/src/components/cards/osu.vue
@@ -1,5 +1,5 @@
 <template>
- <div class="osu relative mt-1 flex items-center justify-center">
+ <div class="osu relative flex items-center justify-center">
  <img class="osu-bg" :src="background" alt="osu! Card" />
  <div class="px-2 osu-wrapper relative w-full flex justify-center -ml-2">
  <span class="absolute osu-rating z-20">{{ value }}pp</span>

diff --git a/src/components/cards/popn.vue b/src/components/cards/popn.vue
@@ -1,5 +1,5 @@
 <template>
- <div class="popn relative px-2 mt-1">
+ <div class="popn relative px-2">
  <div class="popn-inner h-full flex items-center justify-center">
  <div class="popn-avatar h-6 w-6 rounded-full border-blue-600 border-2">
  <img :src="classThree" alt="Pop'N Music class 6">

diff --git a/src/components/cards/scoresaber.vue b/src/components/cards/scoresaber.vue
@@ -1,5 +1,5 @@
 <template>
- <div class="scoresaber flex items-center justify-center px-2 mt-1">
+ <div class="scoresaber flex items-center justify-center px-2">
  <img class="scoresaber-bg" :src="background" alt="ScoreSaber Card">
  <span class="font-medium scoresaber-rating mr-1">{{ value }}</span>
  <span class="font-medium scoresaber-label">pp</span>

diff --git a/src/components/cards/sdvx.vue b/src/components/cards/sdvx.vue
@@ -1,5 +1,5 @@
 <template>
- <div class="sdvx mt-0.5 relative flex items-center">
+ <div class="sdvx relative flex items-center">
  <img class="sdvx-bg" :src="background" alt="SDVX background" />
  <img class="sdvx-icon" width="28" :src="`/sdvx/volforce/${volforce(value)}.png`" :alt="`Volforce ${volforce(value)}`" />
  <img class="sdvx-stars" :src="`/sdvx/volforce/force/rounded/${volforceStars(value)}.png`" alt="Volforce stars">

diff --git a/src/components/cards/vividstasis.vue b/src/components/cards/vividstasis.vue
@@ -1,5 +1,5 @@
 <template>
- <div class="mt-1 vivid">
+ <div class="vivid">
  <img class="z-0 vivid-bg" :src="background" alt="vivid/stasis card">
  <div class="flex items-center justify-between h-full px-2">
  <span class="z-10 vivid-label font-medium text-shadow uppercase">Rating</span>

diff --git a/src/stats.json b/src/stats.json
@@ -1,8 +1,8 @@
 {
- "maimaiDeluxe": "13386",
+ "maimaiDeluxe": "13638",
  "SDVX": "17.260",
- "popn": "71.63",
- "jubeat": "7179",
+ "popn": "74.63",
+ "jubeat": "7138",
  "vivid/stasis": "15027",
  "ez2on": {
  "4S": "20.949",