From cf6922c77a701e048a64069d621abd3d8247e8c9 Mon Sep 17 00:00:00 2001
From: ION606 <ion606@protonmail.com>
Date: Mon, 17 Feb 2025 22:18:29 -0500
Subject: [PATCH] added mobile layout

---
 app/static/styles.css   | 42 +++++++++++++++++++++++---------
 app/templates/base.html | 53 ++++++++++++++++++++++++++++++++++-------
 app/templates/home.html | 30 +++++++++++++++++++++--
 3 files changed, 104 insertions(+), 21 deletions(-)
diff --git a/app/static/styles.css b/app/static/styles.css
index 94fdc91..a550819 100644
--- a/app/static/styles.css
+++ b/app/static/styles.css
@@ -319,24 +319,44 @@ button:hover,
 }
 
 #editor-container {
-    width: 100%;
-    height: 400px;
-    border: 1px solid #ddd;
-    margin-top: 20px;
-    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
-    transform: translateY(-100%);
-    opacity: 0;
-    display: none; /* Initially hidden */
+	width: 100%;
+	height: 400px;
+	border: 1px solid #ddd;
+	margin-top: 20px;
+	transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
+	transform: translateY(-100%);
+	opacity: 0;
+	display: none;
+	/* Initially hidden */
 }
 
 #editor-container.visible {
-    transform: translateY(0);
-    opacity: 1;
-    display: block; /* Display when visible */
+	transform: translateY(0);
+	opacity: 1;
+	display: block;
+	/* Display when visible */
 }
 
 @media (max-width: 768px) {
 	.file-grid {
 		grid-template-columns: repeat(2, 1fr);
 	}
+
+	.container {
+		padding: 10px;
+	}
+
+	.navbar {
+		flex-direction: column;
+		align-items: flex-start;
+	}
+
+	.navbar a {
+		margin: 5px 0;
+	}
+
+	.site-card {
+		padding: 15px;
+		margin-bottom: 10px;
+	}
 }
\ No newline at end of file
diff --git a/app/templates/base.html b/app/templates/base.html
index fd73dcf..1383944 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -47,20 +47,57 @@
 			});
 		});
 	</script>
+
+	<style>
+		/* collapsible navbar */
+		.navbar-links {
+			display: flex;
+			align-items: center;
+			gap: 1rem;
+		}
+
+		.navbar-toggle {
+			display: none;
+			font-size: 1.5rem;
+			background: none;
+			border: none;
+			color: var(--nav-text);
+			cursor: pointer;
+		}
+
+		@media (max-width: 768px) {
+			.navbar-links {
+				display: none;
+				flex-direction: column;
+				width: 100%;
+			}
+
+			.navbar-links.active {
+				display: flex;
+			}
+
+			.navbar-toggle {
+				display: block;
+			}
+		}
+	</style>
 </head>
 
 <body>
 	<nav class="navbar">
 		<div class="container">
 			<a href="{{ url_for('main.home', _external=True) }}">Home</a>
-			{% if current_user.is_authenticated %}
-			<a href="{{ url_for('main.dashboard', _external=True) }}">Dashboard</a>
-			<a href="{{ url_for('main.logout', _external=True) }}">Logout</a>
-			{% else %}
-			<a href="{{ url_for('main.login', _external=True) }}">Login</a>
-			<a href="{{ url_for('main.register', _external=True) }}">Register</a>
-			{% endif %}
-			<button id="theme-toggle" class="btn">Toggle Dark Mode</button>
+			<button id="nav-toggle" class="navbar-toggle">&#9776;</button>
+			<div id="navbar-links" class="navbar-links">
+				{% if current_user.is_authenticated %}
+				<a href="{{ url_for('main.dashboard', _external=True) }}">Dashboard</a>
+				<a href="{{ url_for('main.logout', _external=True) }}">Logout</a>
+				{% else %}
+				<a href="{{ url_for('main.login', _external=True) }}">Login</a>
+				<a href="{{ url_for('main.register', _external=True) }}">Register</a>
+				{% endif %}
+				<button id="theme-toggle" class="btn">Toggle Dark Mode</button>
+			</div>
 		</div>
 	</nav>
 
diff --git a/app/templates/home.html b/app/templates/home.html
index 7f7ab9f..0294e76 100644
--- a/app/templates/home.html
+++ b/app/templates/home.html
@@ -169,6 +169,33 @@
 		text-align: center;
 		color: var(--nav-text);
 	}
+
+	@media (max-width: 768px) {
+		header {
+			padding: 40px 10px;
+		}
+
+		.main-container {
+			margin: 20px auto;
+			padding: 10px;
+		}
+
+		.feature-list {
+			flex-direction: column;
+			align-items: center;
+		}
+
+		.feature {
+			width: 90%;
+			max-width: 300px;
+			margin: 10px auto;
+		}
+
+		footer {
+			padding: 15px;
+			font-size: 0.9rem;
+		}
+	}
 </style>
 
 <header>
@@ -209,9 +236,8 @@
 	</div>
 
 	<div class="cta-section">
-		<h2>Get Started Now</h2>
+		<a href="{{ url_for('main.register') }}" class="btn">Get Started Now</a>
 		<p>No signup required. Upload your first site and go live instantly!</p>
-		<a href="{{ url_for('main.dashboard') }}" class="btn">Upload Your Site</a>
 	</div>
 </div>
 
