Ship page style tweaks

website/src/app/home-page/home-page.component.html

@@ -26,7 +26,7 @@ <h4 class="text-2xl">
 
 </div>
 
-<div class="container mx-auto max-w-7xl p-10 mt-10 bg-black bg-opacity-80">
+<div class="container mx-auto max-w-7xl p-10 mt-10 sm:mb-56 bg-black bg-opacity-80">
 
   <h2 class="text-2xl">Latest updates</h2>
 

website/src/app/home-page/home-page.component.scss

@@ -39,7 +39,7 @@
   }
 }
 
-@media (max-width: 767px) {
+@media (max-width: 640px) {
   .credits {
     flex-direction: column;
     position: relative;

website/src/app/itemgroup/itemgroup.component.html

@@ -1,20 +1,20 @@
-<h4 class="text-xl mt-4">{{groupName}}</h4>
+<h4 class="text-lg font-medium mt-4 mb-2">{{groupName}}</h4>
 
-<div *ngIf="groupItems" class="bg-black border border-gray-600">
+<div *ngIf="groupItems" class="bg-black border border-gray-800">
 
   <ng-container *ngFor="let class of groupItems | keyvalue">
 
-    <div (click)="toggleItems(class.key)" class="flex border-gray-600 border-b last:border-b-0 cursor-pointer items-center pl-4">
+    <div (click)="toggleItems(class.key)" class="flex flex-col md:flex-row border-gray-800 border-b last:border-b-0 hover:bg-white hover:bg-opacity-10 cursor-pointer items-center">
 
       <!-- Item group name -->
-      <div class="flex-grow font-bold">{{class.key}}</div>
+      <div class="flex-grow md:pl-4 font-medium">{{class.key}}</div>
 
       <!-- Size boxes -->
-      <div class="flex-shrink-0 flex">
-        <div *ngFor="let size of class.value.bySize; let s = index" class="size-box border-gray-600 border-l">
+      <div class="flex-shrink-0 flex overflow-auto w-full md:w-auto">
+        <div *ngFor="let size of class.value.bySize; let s = index" class="size-box border-gray-800 border-l">
           <div *ngIf="size.length" class="size-box-inner bg-primary">
             <span class="text-xs text-white text-opacity-80">S{{s}}</span><br>
-            <span class="text-white text-opacity-90">{{size.length | nozero}}</span>
+            <span class="text-white font-bold">{{size.length | nozero}}</span>
           </div>
           <div *ngIf="!size.length" class="size-box-inner bg-gray-900">
             <span class="text-xs text-white text-opacity-80">S{{s}}</span>
@@ -25,7 +25,7 @@ <h4 class="text-xl mt-4">{{groupName}}</h4>
 
     <ng-container *ngIf="class.value.showItems">
       <ng-container *ngFor="let size of class.value.bySize">
-        <div *ngFor="let itemPort of size" class="border-gray-600 border-b last:border-b-0 pl-2">
+        <div *ngFor="let itemPort of size" class="border-gray-800 border-b last:border-b-0">
           <app-itemport [itemPort]="itemPort.itemPort"></app-itemport>
         </div>
       </ng-container>
@@ -34,6 +34,6 @@ <h4 class="text-xl mt-4">{{groupName}}</h4>
 
 </div>
 
-<div *ngIf="!groupItems" class="px-4 py-2 bg-black text-gray-600 border border-gray-600">
+<div *ngIf="!groupItems" class="px-4 py-2 bg-black text-gray-600 border border-gray-800">
   None
 </div>

website/src/app/itemgroup/itemgroup.component.scss

@@ -4,10 +4,9 @@
   text-align: center;
 
   .size-box-inner {
-    width: 41px;
-    height: 42px;
-    margin-top: 3px;
-    margin-left: 3px;
+    width: 47px;
+    height: 48px;
+    padding: 3px;
     line-height: 1;
   }
 }

website/src/app/itemport/itemport.component.html

@@ -1,7 +1,7 @@
-<div *ngIf="itemPort.Category !== 'Weapon attachments'" class="flex items-center">
+<div *ngIf="itemPort.Category !== 'Weapon attachments'" class="flex items-center overflow-auto whitespace-nowrap md:whitespace-normal hover:bg-white hover:bg-opacity-5">
 
   <!-- Size box -->
-  <div class="size-box-inner flex-shrink-0 flex items-center justify-center w-8 h-8 my-2 mr-4 text-xs" [class.bg-primary]="itemPort.InstalledItem" [class.bg-gray-900]="!itemPort.InstalledItem">
+  <div class="size-box-inner flex-shrink-0 flex items-center justify-center w-12 h-12 p-2 mr-4 border-gray-800 border-t border-r text-sm" [class.bg-primary]="itemPort.InstalledItem" [class.bg-gray-900]="!itemPort.InstalledItem">
     <span class="text-white text-opacity-80">S{{itemPort.Size}}</span>
   </div>
 
@@ -29,8 +29,8 @@
   <div class="flex-1">
     <!-- Item name -->
     <div *ngIf="itemPort.InstalledItem" class="mr-4">
-      <a [routerLink]="['/items', itemPort.Loadout.toLowerCase()]" class="text-primary">{{itemPort.InstalledItem.Name || itemPort.Loadout}}</a>
-      <span class="text-xs text-primary ml-2"><a [routerLink]="['/items/compare']" [queryParams]="{type: itemPort.InstalledItem.Type, size: itemPort.InstalledItem.Size, selected: itemPort.Loadout}">Compare</a></span>
+      <a [routerLink]="['/items', itemPort.Loadout.toLowerCase()]" class="text-primary hover:text-pink-400 font-semibold">{{itemPort.InstalledItem.Name || itemPort.Loadout}}</a>
+      <span class="text-xs text-primary ml-2"><a class="hover:text-pink-400" [routerLink]="['/items/compare']" [queryParams]="{type: itemPort.InstalledItem.Type, size: itemPort.InstalledItem.Size, selected: itemPort.Loadout}">Compare</a></span>
     </div>
 
     <!-- Installed item info -->

website/src/app/navbar/navbar.component.html

@@ -1,15 +1,15 @@
-<nav class="bg-black bg-opacity-60">
+<nav class="bg-gray-800 border-b border-gray-700 border-opacity-50">
 
-  <div class="container overflow-auto mx-auto px-5 py-3 flex lg:flex-row items-baseline text-gray-400 space-x-5">
-    <a class="text-xl text-primary smallcaps text-shadow-sm" routerLink="/">SCunpacked</a>
-    <a class="hover:text-white" routerLink="/ships" routerLinkActive="text-white">Ships</a>
-    <a class="hover:text-white" routerLink="/items" routerLinkActive="text-white">Ship equipment</a>
-    <a class="hover:text-white" routerLink="/fps-weapons" routerLinkActive="text-white">FPS gear</a>
-    <a class="hover:text-white" routerLink="/shops" routerLinkActive="text-white">Shops</a>
-    <a class="hover:text-white" routerLink="/commodities" routerLinkActive="text-white">Commodities</a>
+  <div class="xl:container px-1 whitespace-nowrap overflow-auto xl:mx-auto flex lg:flex-row items-baseline text-sm text-gray-400 font-medium">
+    <a class="mr-1 px-2 py-3 uppercase leading-6 tracking-wide" routerLink="/"><span class="font-bold text-gray-200">SC</span><span>unpacked</span></a>
+    <a class="px-2 py-3 hover:text-white" routerLink="/ships" routerLinkActive="text-white">Ships</a>
+    <a class="px-2 py-3 hover:text-white" routerLink="/items" routerLinkActive="text-white">Ship equipment</a>
+    <a class="px-2 py-3 hover:text-white" routerLink="/fps-weapons" routerLinkActive="text-white">FPS gear</a>
+    <a class="px-2 py-3 hover:text-white" routerLink="/shops" routerLinkActive="text-white">Shops</a>
+    <a class="px-2 py-3 hover:text-white" routerLink="/commodities" routerLinkActive="text-white">Commodities</a>
     <span class="flex-grow"></span>
-    <span class=""><a href="https://github.com/richardthombs/scunpacked"><i class="fab fa-lg fa-github hover:text-white"></i></a></span>
-    <span class="smallcaps">v3.12.0a LIVE</span>
+    <span class=""><a class="px-2 py-3" href="https://github.com/richardthombs/scunpacked"><i class="fab fa-lg fa-github hover:text-white"></i></a></span>
+    <span class="px-2 smallcaps">v3.12.0a LIVE</span>
   </div>
 
 </nav>

website/src/app/ship-page/ship-page.component.html

@@ -3,7 +3,7 @@
 <div class="container mx-auto bg-black bg-opacity-80 text-white text-opacity-80 p-10 my-10">
   <div class="flex">
     <div class="flex-grow">
-      <h1 class="text-2xl">{{ship?.Name || ship?.ClassName}}</h1>
+      <h1 class="text-3xl font-semibold">{{ship?.Name || ship?.ClassName}}</h1>
       <div class="text-gray-400">
         {{ship?.Career || "No career"}} / {{ship?.Role || 'No role'}}
       </div>
@@ -77,7 +77,7 @@ <h1 class="text-2xl">{{ship?.Name || ship?.ClassName}}</h1>
     </div>
   </div>
 
-  <div class="mt-10">CIG says:</div>
+  <div class="mt-10 mb-2 text-xl font-medium">Description</div>
   <div class="text-gray-400 italic" style="white-space: pre-line;">
     "{{ship?.Description}}"
   </div>

website/src/app/stat/stat.component.html

@@ -1,6 +1,6 @@
 <div>
-  <div class="text-primary text-base">{{title}}</div>
-  <div class="text-white text-xl">
+  <div class="text-gray-400 text-sm">{{title}}</div>
+  <div class="text-white text-2xl font-semibold">
     <span>{{formattedValue}}</span>
     <span class="ml-1 text-base smallcaps text-gray-400">{{siPrefix}}{{units}}</span>
   </div>