Remove scrollbar styles for small breakpoint (originally #69)

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

@@ -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>

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 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">

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/styles.scss

@@ -40,27 +40,29 @@ a:hover {
   }
 }
 
-// Scrollbar
-html {
-  --scrollbarBG: transparent;
-  --thumbBG: rgba(255, 20, 147, 0.7);
-}
+/***** Scrollbar *****/
+@media (min-width: 768px) {
+	html {
+	  --scrollbarBG: transparent;
+	  --thumbBG: rgba(255, 20, 147, 0.7);
+	}
 
-*::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
+	*::-webkit-scrollbar {
+	  width: 6px;
+	  height: 6px;
+	}
 
-* {
-  scrollbar-width: thin;
-  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
-}
+	* {
+	  scrollbar-width: thin;
+	  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
+	}
 
-*::-webkit-scrollbar-track {
-  background: var(--scrollbarBG);
-}
+	*::-webkit-scrollbar-track {
+	  background: var(--scrollbarBG);
+	}
 
-*::-webkit-scrollbar-thumb {
-  background-color: var(--thumbBG);
-  border: 3px solid var(--scrollbarBG);
-}
+	*::-webkit-scrollbar-thumb {
+	  background-color: var(--thumbBG);
+	  border: 3px solid var(--scrollbarBG);
+	}
+}