From e77c879f488cdc267c85438d54eb88e805efdc0b Mon Sep 17 00:00:00 2001
From: realtradam <github@tradam.dev>
Date: Thu, 20 Jun 2024 11:53:13 -0400
Subject: start adding mobile breakpoints

---
 src/components/Layout.tsx | 4 ++--
 tailwind.config.js        | 7 +++++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 3d3747d..6daf865 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -12,7 +12,7 @@ export default function Layout ({userData}: userData)
 	return (
 	<>
 		<div id="page" className="star flex flex-row min-h-screen max-h-screen bg-amber-400 text-stone-950 text-xl bg-star bg-repeat bg-[length:170px_170px]">
-			<div id="sidebar" className="flex flex-row shrink-0 grow-0 h-vh w-64 items-top bg-stone-800">
+			<div id="sidebar" className="dsm:hidden flex flex-row shrink-0 grow-0 h-vh w-64 items-top bg-stone-800">
 				<nav id="sidebar-content" dir="rtl" className="text-stone-50 p-6 w-full h-screen overflow-y-auto overflow-x-hidden">
 		<div dir='ltr'>
 					{ userData.name ? <div className="flex items-end gap-2 pb-2"> <div className="text-xs"> Logged in as: </div> <div>{userData.name}</div> </div> : <a href="" onClick={loginLink} className="pb-2"> Login with Github </a> }
@@ -45,7 +45,7 @@ export default function Layout ({userData}: userData)
 				</div>
 			</div>
 			<div id="radial-wrap" className="shrink w-full max-h-vh h-vh overflow-auto overflow-x-hidden">
-				<div id="content" className="flex justify-center items-center w-full p-20">	<Outlet /> </div>
+				<div id="content" className="flex justify-center items-center w-full p-20 dsm:px-4">	<Outlet /> </div>
 			</div>
 		</div>
 		</>
diff --git a/tailwind.config.js b/tailwind.config.js
index 1e61280..74d0251 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,6 +5,13 @@ export default {
 		'./src/**/*.{js,ts,jsx,tsx}',
 	],
 	theme: {
+		screens: {
+			'dsm': {'max':'640px'},
+			'dmd': {'max':'768px'},
+			'dlg': {'max':'1024px'},
+			'dxl': {'max':'1280px'},
+			'd2xl': {'max':'1536px'}
+		},
 		extend: {
 			backgroundImage: {
 				'star': "url('/star.png')",
-- 
cgit v1.2.3