tools/teletypegames
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mobile fixes

Browse Source
This commit is contained in:
mr.zero
2026-03-03 08:26:38 +01:00
parent 1c36f8135a
commit d5c9a22844
2 changed files with 30 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/src/layouts/Layout.astro
+28 -6
View File
@@ -9,19 +9,41 @@
<title>Teletype Games</title>
</head>
<body>
<header class="bg-gray-800 text-white p-4 flex justify-between items-center">
<header class="bg-gray-800 text-white p-4 flex justify-between items-center relative">
<a href="/" class="text-xl font-bold">Teletype Games</a>
<nav>
<a href="/" class="p-2">Home</a>
<a href="/catalog" class="p-2">Catalog</a>
<a href="/news" class="p-2">News</a>
<a href="/code" class="p-2">Code</a>
<!-- Desktop Navigation -->
<nav class="hidden md:flex space-x-4">
<a href="/" class="p-2 hover:text-purple-300 transition-colors duration-200">Home</a>
<a href="/catalog" class="p-2 hover:text-purple-300 transition-colors duration-200">Catalog</a>
<a href="/news" class="p-2 hover:text-purple-300 transition-colors duration-200">News</a>
<a href="/code" class="p-2 hover:text-purple-300 transition-colors duration-200">Code</a>
</nav>
<!-- Hamburger Button (Mobile only) -->
<button id="menu-toggle" class="md:hidden p-2 focus:outline-none focus:ring-2 focus:ring-purple-500 rounded-md">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
<!-- Mobile Navigation -->
<nav id="mobile-menu" class="hidden md:hidden absolute top-full left-0 w-full bg-gray-800 flex-col items-center py-4 space-y-2 z-50">
<a href="/" class="block p-2 w-full text-center hover:bg-gray-700 transition-colors duration-200">Home</a>
<a href="/catalog" class="block p-2 w-full text-center hover:bg-gray-700 transition-colors duration-200">Catalog</a>
<a href="/news" class="block p-2 w-full text-center hover:bg-gray-700 transition-colors duration-200">News</a>
<a href="/code" class="block p-2 w-full text-center hover:bg-gray-700 transition-colors duration-200">Code</a>
</nav>
</header>
<main>
<slot />
</main>
</body>
<script is:inline>
document.getElementById('menu-toggle').addEventListener('click', () => {
document.getElementById('mobile-menu').classList.toggle('hidden');
});
</script>
</html>
<style>
apps/frontend/src/pages/catalog.astro
+2 -2
View File
@@ -17,7 +17,7 @@ const softwares = json.softwares;
<main class="max-w-6xl mx-auto py-12 px-4 grid grid-cols-1 gap-8">
{softwares.map(({ software, releases, latestRelease }) => (
<div class="bg-white shadow-lg relative rounded-xl overflow-hidden hover:shadow-2xl transition-shadow duration-300">
<div class="p-6">
<div class="p-6 pr-28 sm:pr-6">
<h2 class="text-2xl font-semibold mb-2">{software.title}</h2>
<p class="text-gray-600 mb-4">{software.desc}</p>
<div class="text-sm text-gray-500 mb-4">
@@ -27,7 +27,7 @@ const softwares = json.softwares;
{/* New section for latest release buttons */}
{latestRelease && (
<div class="absolute top-4 right-4 flex gap-1 z-10">
<div class="absolute top-4 right-4 flex flex-col sm:flex-row gap-1 z-10">
{latestRelease.htmlFolderPath ? (
<a href={BASE + latestRelease.htmlFolderPath} target="_blank" class="inline-block bg-purple-600 hover:bg-purple-700 text-white font-bold py-1 px-2 rounded-lg text-sm transition-colors">▶ Play</a>
) : (