Screenshot gallery

src/app.css

@@ -3,6 +3,6 @@
 @tailwind utilities;
 * {color: white}
 body {
-    background-color: #24273a;
+    background-color: #1e2030;
     color: white
 }

src/routes/+page.svelte

@@ -21,7 +21,7 @@
 		lightbox.init();})
 </script>
 
-<div class="flex justify-center items-center flex-col text-center bg-[#2a2b3c]">
+<div class="flex justify-center items-center flex-col text-center bg-[#24273a]">
 	<img alt="" height="216px" src="tileos.svg" width="216px">
 	<h1 class="text-3xl font-bold">Tile OS</h1>
 	<p>Debian-based distribution with tiling window managers.</p>
@@ -63,7 +63,7 @@
 </div>
 
 <div>
-	<div class="flex flex-col lg:flex-row p-8">
+	<div class="flex flex-col xl:flex-row p-8">
 		<div class="flex-1 m-5">
 			<h1 class="font-bold text-3xl mb-3">TileOS Sway BETA</h1>
 			<p>TileOS Sway is a flagship edition featuring Sway - a lightweight and highly customizable Wayland compositor. It is designed to be compatible with the i3 window manager but is built using the Wayland display server protocol instead of X11. Sway is a full feature complete Wayland compositor, combined with awesome Catppuccin color scheme, Waybar panel and apps from NWG project (such as nwg-drawer, nwg-look, etc) it provides powerful, easy to use and very flexible desktop.</p>
@@ -96,18 +96,24 @@
 			</div>
 		</div>
 		<div class="flex-1 m-5">
-			<div class="" id="sway-screenshots">
+			<div class="flex justify-center flex-wrap" id="sway-screenshots">
-				<a href="sway.png"
+				<a href="screenshots/sway/screen1.png"
 					 data-pswp-width="1920"
-					 data-pswp-height="979"
+					 data-pswp-height="980"
 					 target="_blank">
-					<img style="display: inline" src="sway.png" alt="" height="244px" width="480" />
+					<img class="m-4 h-[24wh] w-[48vw] lg:h-[16wh] lg:w-[32vw] xl:h-[8wh] xl:w-[16vw]" src="screenshots/sway/screen1.png" alt="" />
 				</a>
-				<a href="sway.png"
+				<a href="screenshots/sway/screen2.png"
 					 data-pswp-width="1920"
-					 data-pswp-height="979"
+					 data-pswp-height="980"
 					 target="_blank">
-					<img style="display: inline" src="sway.png" alt="" height="244px" width="480" />
+					<img class="m-4 h-[24wh] w-[48vw] lg:h-[16wh] lg:w-[32vw] xl:h-[8wh] xl:w-[16vw]" src="screenshots/sway/screen2.png" alt="" />
+				</a>
+				<a href="screenshots/sway/screen3.png"
+					 data-pswp-width="1920"
+					 data-pswp-height="980"
+					 target="_blank">
+					<img class="m-4 h-[24wh] w-[48vw] lg:h-[16wh] lg:w-[32vw] xl:h-[8wh] xl:w-[16vw]" src="screenshots/sway/screen3.png" alt="" />
 				</a>
 			</div>
 		</div>
@@ -115,7 +121,7 @@
 </div>
 
 <div>
-	<div class="flex flex-col lg:flex-row p-8">
+	<div class="flex flex-col xl:flex-row p-8">
 		<div class="flex-1 m-5">
 			<h1 class="font-bold text-3xl mb-3">TileOS River BETA</h1>
 			<p>TileOS River Edtion featuring River - a minimalistic and lightweight dynamic Wayland compositor. It is designed to be simple, efficient, and easy to use, making it a great choice for users looking for a streamlined window management experience. River automatically arranges windows in a tiled layout, maximizing screen space and allowing users to easily switch between applications. It has a very simple configuration and low resource consumption, сombined with awesome Catppuccin color scheme, Waybar panel and apps from NWG project (such as nwg-drawer, nwg-look, etc) it provides powerful, easy to use and very flexible desktop.</p>
@@ -148,7 +154,26 @@
 			</div>
 		</div>
 		<div class="flex-1 m-5">
-			<img alt="" src="river.png">
+			<div class="flex justify-center flex-wrap" id="sway-screenshots">
+				<a href="screenshots/river/screen4.png"
+					 data-pswp-width="1920"
+					 data-pswp-height="980"
+					 target="_blank">
+					<img class="m-4 h-[24wh] w-[48vw] lg:h-[16wh] lg:w-[32vw] xl:h-[8wh] xl:w-[16vw]" src="screenshots/river/screen4.png" alt="" />
+				</a>
+				<a href="screenshots/river/screen5.png"
+					 data-pswp-width="1920"
+					 data-pswp-height="980"
+					 target="_blank">
+					<img class="m-4 h-[24wh] w-[48vw] lg:h-[16wh] lg:w-[32vw] xl:h-[8wh] xl:w-[16vw]" src="screenshots/river/screen5.png" alt="" />
+				</a>
+				<a href="screenshots/river/screen6.png"
+					 data-pswp-width="1920"
+					 data-pswp-height="980"
+					 target="_blank">
+					<img class="m-4 h-[24wh] w-[48vw] lg:h-[16wh] lg:w-[32vw] xl:h-[8wh] xl:w-[16vw]" src="screenshots/river/screen6.png" alt="" />
+				</a>
+			</div>
 		</div>
 	</div>
 </div>