From 32bad58fbf10904dfe6c9bc233f3db50761071f2 Mon Sep 17 00:00:00 2001
From: alistair3149 <alistair31494322@gmail.com>
Date: Fri, 25 Dec 2020 14:49:41 -0500
Subject: [PATCH 01/11] feat(website): responsive hardpoint table

---
 website/src/app/itemgroup/itemgroup.component.html | 6 +++---
 website/src/app/itemport/itemport.component.html   | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/website/src/app/itemgroup/itemgroup.component.html b/website/src/app/itemgroup/itemgroup.component.html
index a14a45d236..588e019103 100644
--- a/website/src/app/itemgroup/itemgroup.component.html
+++ b/website/src/app/itemgroup/itemgroup.component.html
@@ -4,13 +4,13 @@ <h4 class="text-xl mt-4">{{groupName}}</h4>
 
   <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-600 border-b last:border-b-0 cursor-pointer items-center">
 
       <!-- Item group name -->
-      <div class="flex-grow font-bold">{{class.key}}</div>
+      <div class="flex-grow md:pl-4 font-bold">{{class.key}}</div>
 
       <!-- Size boxes -->
-      <div class="flex-shrink-0 flex">
+      <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-600 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>
diff --git a/website/src/app/itemport/itemport.component.html b/website/src/app/itemport/itemport.component.html
index b977189b54..be3e8e9a12 100644
--- a/website/src/app/itemport/itemport.component.html
+++ b/website/src/app/itemport/itemport.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="itemPort.Category !== 'Weapon attachments'" class="flex items-center">
+<div *ngIf="itemPort.Category !== 'Weapon attachments'" class="flex items-center overflow-auto sm:whitespace-nowrap md:whitespace-normal">
 
   <!-- 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">

From 0bd7e4f73fc5cdf89c0d5bb513474d6d7e60d49f Mon Sep 17 00:00:00 2001
From: alistair3149 <alistair31494322@gmail.com>
Date: Fri, 25 Dec 2020 14:59:46 -0500
Subject: [PATCH 02/11] fix(website): css typo

---
 website/src/app/itemport/itemport.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/app/itemport/itemport.component.html b/website/src/app/itemport/itemport.component.html
index be3e8e9a12..6e63ab4e92 100644
--- a/website/src/app/itemport/itemport.component.html
+++ b/website/src/app/itemport/itemport.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="itemPort.Category !== 'Weapon attachments'" class="flex items-center overflow-auto sm:whitespace-nowrap md:whitespace-normal">
+<div *ngIf="itemPort.Category !== 'Weapon attachments'" class="flex items-center overflow-auto whitespace-nowrap md:whitespace-normal">
 
   <!-- 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">

From b168f70e9edaea1c23a1362938ecc29648115788 Mon Sep 17 00:00:00 2001
From: alistair3149 <alistair31494322@gmail.com>
Date: Fri, 25 Dec 2020 15:56:08 -0500
Subject: [PATCH 03/11] fix(website): add bottom margin to prevent overlap with
 credits

---
 website/src/app/home-page/home-page.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/app/home-page/home-page.component.html b/website/src/app/home-page/home-page.component.html
index a25e055c96..481f5499e0 100644
--- a/website/src/app/home-page/home-page.component.html
+++ b/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>
 

From 20f1a52b50b29248015dfe79e4730b441a5849ab Mon Sep 17 00:00:00 2001
From: alistair3149 <alistair31494322@gmail.com>
Date: Fri, 25 Dec 2020 15:59:14 -0500
Subject: [PATCH 04/11] fix(website): Use standard viewport from Tailwind
 instead

---
 website/src/app/home-page/home-page.component.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/app/home-page/home-page.component.scss b/website/src/app/home-page/home-page.component.scss
index 12a114076c..2af227e0fb 100644
--- a/website/src/app/home-page/home-page.component.scss
+++ b/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;

From 37bc7ce53ea1eba3bb75ebaec80f16db7903925e Mon Sep 17 00:00:00 2001
From: alistair3149 <alistair31494322@gmail.com>
Date: Fri, 25 Dec 2020 16:36:31 -0500
Subject: [PATCH 05/11] refactor(website): Update navbar styles

---
 website/src/app/navbar/navbar.component.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/website/src/app/navbar/navbar.component.html b/website/src/app/navbar/navbar.component.html
index 41b782f656..9508db06cf 100644
--- a/website/src/app/navbar/navbar.component.html
+++ b/website/src/app/navbar/navbar.component.html
@@ -1,7 +1,7 @@
-<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>
+  <div class="container overflow-auto mx-auto px-5 py-3 flex lg:flex-row items-baseline text-sm text-gray-400 font-medium space-x-5">
+    <a class="uppercase leading-6 tracking-wide" routerLink="/"><span class="font-bold text-gray-200">SC</span><span>unpacked</span></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>

From 90fe3378127e9cbe7f5a1a1a835274d1632d3534 Mon Sep 17 00:00:00 2001
From: alistair3149 <alistair31494322@gmail.com>
Date: Fri, 25 Dec 2020 16:52:30 -0500
Subject: [PATCH 06/11] refactor(website): increase button click area in navbar

---
 website/src/app/navbar/navbar.component.html | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/website/src/app/navbar/navbar.component.html b/website/src/app/navbar/navbar.component.html
index 9508db06cf..9f55c81df9 100644
--- a/website/src/app/navbar/navbar.component.html
+++ b/website/src/app/navbar/navbar.component.html
@@ -1,15 +1,15 @@
 <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-sm text-gray-400 font-medium space-x-5">
-    <a class="uppercase leading-6 tracking-wide" routerLink="/"><span class="font-bold text-gray-200">SC</span><span>unpacked</span></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="container overflow-auto 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>

From 75795e5c8a79fbec9b052bd701e0d80301de1f40 Mon Sep 17 00:00:00 2001
From: alistair3149 <alistair31494322@gmail.com>
Date: Fri, 25 Dec 2020 16:54:44 -0500
Subject: [PATCH 07/11] fix(website): no text wrap for navbar button

---
 website/src/app/navbar/navbar.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/app/navbar/navbar.component.html b/website/src/app/navbar/navbar.component.html
index 9f55c81df9..9e4e9dd00d 100644
--- a/website/src/app/navbar/navbar.component.html
+++ b/website/src/app/navbar/navbar.component.html
@@ -1,6 +1,6 @@
 <nav class="bg-gray-800 border-b border-gray-700 border-opacity-50">
 
-  <div class="container overflow-auto mx-auto flex lg:flex-row items-baseline text-sm text-gray-400 font-medium">
+  <div class="container whitespace-nowrap overflow-auto 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>

From fd2eec5e763e36980a11c2ae6fcd2871bec5fb85 Mon Sep 17 00:00:00 2001
From: alistair3149 <alistair31494322@gmail.com>
Date: Fri, 25 Dec 2020 17:04:34 -0500
Subject: [PATCH 08/11] fix(website): only use container class in larger
 breakpoints

---
 website/src/app/navbar/navbar.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/app/navbar/navbar.component.html b/website/src/app/navbar/navbar.component.html
index 9e4e9dd00d..ce2170e483 100644
--- a/website/src/app/navbar/navbar.component.html
+++ b/website/src/app/navbar/navbar.component.html
@@ -1,6 +1,6 @@
 <nav class="bg-gray-800 border-b border-gray-700 border-opacity-50">
 
-  <div class="container whitespace-nowrap overflow-auto mx-auto flex lg:flex-row items-baseline text-sm text-gray-400 font-medium">
+  <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>

From 3f81994803717dee5b6c480b74e065d24be515c1 Mon Sep 17 00:00:00 2001
From: alistair3149 <alistair31494322@gmail.com>
Date: Sun, 27 Dec 2020 17:07:39 -0500
Subject: [PATCH 09/11] refactor(website): touch up the hardpoint table

---
 .../src/app/itemgroup/itemgroup.component.html   | 16 ++++++++--------
 .../src/app/itemgroup/itemgroup.component.scss   |  7 +++----
 website/src/app/itemport/itemport.component.html |  8 ++++----
 3 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/website/src/app/itemgroup/itemgroup.component.html b/website/src/app/itemgroup/itemgroup.component.html
index 588e019103..494fb88cc8 100644
--- a/website/src/app/itemgroup/itemgroup.component.html
+++ b/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 flex-col md:flex-row border-gray-600 border-b last:border-b-0 cursor-pointer items-center">
+    <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 md:pl-4 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 overflow-auto w-full md:w-auto">
-        <div *ngFor="let size of class.value.bySize; let s = index" class="size-box border-gray-600 border-l">
+        <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>
diff --git a/website/src/app/itemgroup/itemgroup.component.scss b/website/src/app/itemgroup/itemgroup.component.scss
index f48f91af39..a4e0a8e5a0 100644
--- a/website/src/app/itemgroup/itemgroup.component.scss
+++ b/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;
   }
 }
diff --git a/website/src/app/itemport/itemport.component.html b/website/src/app/itemport/itemport.component.html
index 6e63ab4e92..e79ae3e68d 100644
--- a/website/src/app/itemport/itemport.component.html
+++ b/website/src/app/itemport/itemport.component.html
@@ -1,7 +1,7 @@
-<div *ngIf="itemPort.Category !== 'Weapon attachments'" class="flex items-center overflow-auto whitespace-nowrap md:whitespace-normal">
+<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 -->

From 1bf59d690ed58a8efb206bfdd6e05f89585fdc1a Mon Sep 17 00:00:00 2001
From: alistair3149 <alistair31494322@gmail.com>
Date: Sun, 27 Dec 2020 19:08:40 -0500
Subject: [PATCH 10/11] refactor(website): tweak heading text on ship pages

---
 website/src/app/ship-page/ship-page.component.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/website/src/app/ship-page/ship-page.component.html b/website/src/app/ship-page/ship-page.component.html
index 773ed7d3fd..3ddef3948d 100644
--- a/website/src/app/ship-page/ship-page.component.html
+++ b/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>

From d4e2884bc56bb031a97b2e8ff1c1067990d7f0cd Mon Sep 17 00:00:00 2001
From: alistair3149 <alistair31494322@gmail.com>
Date: Sun, 27 Dec 2020 19:12:21 -0500
Subject: [PATCH 11/11] refactor(website): tweak stat styles

---
 website/src/app/stat/stat.component.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/website/src/app/stat/stat.component.html b/website/src/app/stat/stat.component.html
index 5bd58b4a8d..efc79eed2e 100644
--- a/website/src/app/stat/stat.component.html
+++ b/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>