Fraser commited on
Commit
dfcba44
·
1 Parent(s): 930c40e
src/lib/components/Piclets/PicletDetail.svelte CHANGED
@@ -114,9 +114,14 @@
114
  </button>
115
  </div>
116
 
 
 
 
 
 
 
117
  <!-- Large Image Section -->
118
  <div class="large-image-section">
119
- <div class="piclet-id">#{String(instance.id).padStart(3, '0')}</div>
120
  <div class="large-image-container">
121
  <img
122
  src={instance.imageData || instance.imageUrl}
@@ -125,12 +130,6 @@
125
  />
126
  </div>
127
  </div>
128
-
129
- <!-- Card Title -->
130
- <div class="card-title-section">
131
- <h1 class="card-title">{instance.nickname || instance.typeId}</h1>
132
- <div class="tier-badge">{instance.tier.toUpperCase()}</div>
133
- </div>
134
  </div>
135
  </div>
136
 
@@ -324,11 +323,10 @@
324
 
325
  .logo-background {
326
  position: absolute;
327
- top: 50%;
328
- left: 50%;
329
- transform: translate(-50%, -50%);
330
- width: 200px;
331
- height: 200px;
332
  background-image: url('/assets/snap_logo.png');
333
  background-size: contain;
334
  background-repeat: no-repeat;
@@ -400,20 +398,10 @@
400
  display: flex;
401
  flex-direction: column;
402
  align-items: center;
403
- margin-bottom: 20px;
404
  position: relative;
405
  z-index: 2;
406
  }
407
 
408
- .piclet-id {
409
- align-self: flex-start;
410
- color: white;
411
- font-size: 16px;
412
- font-weight: 600;
413
- margin-bottom: 10px;
414
- opacity: 0.9;
415
- }
416
-
417
  .large-image-container {
418
  display: flex;
419
  align-items: center;
@@ -433,6 +421,7 @@
433
  display: flex;
434
  justify-content: space-between;
435
  align-items: center;
 
436
  position: relative;
437
  z-index: 2;
438
  }
 
114
  </button>
115
  </div>
116
 
117
+ <!-- Card Title -->
118
+ <div class="card-title-section">
119
+ <h1 class="card-title">{instance.nickname || instance.typeId}</h1>
120
+ <div class="tier-badge">{instance.tier.toUpperCase()}</div>
121
+ </div>
122
+
123
  <!-- Large Image Section -->
124
  <div class="large-image-section">
 
125
  <div class="large-image-container">
126
  <img
127
  src={instance.imageData || instance.imageUrl}
 
130
  />
131
  </div>
132
  </div>
 
 
 
 
 
 
133
  </div>
134
  </div>
135
 
 
323
 
324
  .logo-background {
325
  position: absolute;
326
+ bottom: 20px;
327
+ right: 20px;
328
+ width: 120px;
329
+ height: 120px;
 
330
  background-image: url('/assets/snap_logo.png');
331
  background-size: contain;
332
  background-repeat: no-repeat;
 
398
  display: flex;
399
  flex-direction: column;
400
  align-items: center;
 
401
  position: relative;
402
  z-index: 2;
403
  }
404
 
 
 
 
 
 
 
 
 
 
405
  .large-image-container {
406
  display: flex;
407
  align-items: center;
 
421
  display: flex;
422
  justify-content: space-between;
423
  align-items: center;
424
+ margin-bottom: 20px;
425
  position: relative;
426
  z-index: 2;
427
  }