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

tailwind refact

Browse Source
This commit is contained in:
mr.zero
2026-03-03 16:20:01 +01:00
parent 115a5cd2a0
commit 1f990658b5
6 changed files with 120 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/src/layouts/Layout.astro
+4
View File
@@ -1,3 +1,7 @@
---
import '../styles/global.css';
---
<!doctype html>
<html lang="en">
<head>
apps/frontend/src/pages/catalog.astro
+6 -4
View File
@@ -9,12 +9,14 @@ const softwares = json.softwares;
---
<Layout>
<header class="text-center py-16 bg-gradient-to-r from-purple-600 to-indigo-600 text-white">
<h1 class="text-5xl font-bold mb-4">Our Games</h1>
<p class="text-xl max-w-xl mx-auto">Discover games made for TIC-80 and other platforms, with versions playable directly in your browser!</p>
<header class="hero-section-gradient from-purple-600 to-indigo-600 py-16">
<div class="hero-container">
<h1 class="hero-title">Our Games</h1>
<p class="hero-subtitle text-purple-50">Discover games made for TIC-80 and other platforms, with versions playable directly in your browser!</p>
</div>
</header>
<main class="max-w-6xl mx-auto py-12 px-4 grid grid-cols-1 gap-8">
<main class="main-container py-12 px-4 grid grid-cols-1 gap-8 mt-0">
{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 pr-28 sm:pr-6">
apps/frontend/src/pages/code.astro
+9 -9
View File
@@ -117,23 +117,23 @@ const recentCommits = allCommits.slice(0, 20);
---
<Layout>
<header class="text-center py-20 bg-gradient-to-r from-teal-600 to-green-600 text-white">
<div class="max-w-4xl mx-auto px-4">
<h1 class="text-5xl md:text-6xl font-extrabold mb-6">Codebase</h1>
<p class="text-xl md:text-2xl text-teal-50 mb-10 leading-relaxed">
<header class="hero-section-gradient from-teal-600 to-green-600 py-20">
<div class="hero-container max-w-4xl">
<h1 class="hero-title">Codebase</h1>
<p class="hero-subtitle text-teal-50 mb-10">
Explore our collection of open-source projects, study our source code, and contribute to our independent game development tools.
</p>
<a
href="https://git.teletype.hu"
target="_blank"
class="inline-flex items-center gap-3 bg-white text-teal-700 px-8 py-4 rounded-xl hover:bg-teal-50 transition-all font-bold shadow-xl hover:scale-105 active:scale-95"
class="btn-hero-teal"
>
Open Gitea
</a>
</div>
</header>
<main class="max-w-6xl mx-auto py-12 px-4">
<main class="main-container">
{error && (
<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-8" role="alert">
<strong class="font-bold">Error!</strong>
@@ -142,9 +142,9 @@ const recentCommits = allCommits.slice(0, 20);
)}
{!error && publicRepos.length > 0 && (
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-16">
<div class="card-grid mb-16">
{publicRepos.map((repo) => (
<div class="bg-white shadow-lg rounded-lg p-4">
<div class="card-base">
<h3 class="text-xl font-semibold mb-2">
<a href={repo.html_url} target="_blank" class="text-blue-600 hover:text-blue-800">
{repo.owner.login}/{repo.name}
@@ -166,7 +166,7 @@ const recentCommits = allCommits.slice(0, 20);
<div class="space-y-4 mb-12">
{recentCommits.map((commit) => (
<div class="bg-white shadow-lg rounded-lg p-4 flex items-center space-x-4">
<div class="bg-white shadow-lg rounded-lg p-4 flex items-center space-x-4 border border-gray-100">
<div class="flex-shrink-0 text-3xl">
🚀
</div>
apps/frontend/src/pages/index.astro
+16 -16
View File
@@ -67,27 +67,27 @@ try {
<Layout>
<div class="bg-gray-50 min-h-screen pb-20">
<!-- Header Section (Inspired by News) -->
<header class="relative overflow-hidden bg-slate-900 py-24 text-white">
<!-- Header Section -->
<header class="hero-section-slate">
<div class="absolute inset-0 opacity-30">
<div class="absolute -top-24 -left-24 h-96 w-96 rounded-full bg-indigo-600 blur-3xl"></div>
<div class="absolute -bottom-24 -right-24 h-96 w-96 rounded-full bg-purple-600 blur-3xl"></div>
<div class="hero-decor-blob -top-24 -left-24 h-96 w-96 bg-indigo-600"></div>
<div class="hero-decor-blob -bottom-24 -right-24 h-96 w-96 bg-purple-600"></div>
</div>
<div class="relative max-w-5xl mx-auto px-4 text-center">
<div class="inline-block px-3 py-1 rounded-full bg-indigo-500/20 border border-indigo-400/30 text-indigo-300 text-sm font-medium mb-6 backdrop-blur-sm">
<div class="hero-container">
<div class="hero-badge">
Welcome to
</div>
<h1 class="text-5xl md:text-6xl font-extrabold tracking-tight mb-6">
<h1 class="hero-title">
Teletype <span class="text-transparent bg-clip-text bg-gradient-to-r from-violet-400 to-fuchsia-400">Games</span>
</h1>
<p class="text-lg md:text-xl text-slate-300 max-w-2xl mx-auto leading-relaxed">
<p class="hero-subtitle">
Teletype Games is an independent game development community built on creative freedom, equality, and an open-source mindset. Our goal is to create experimental and full-fledged games with short development cycles.
</p>
</div>
</header>
<main class="max-w-6xl mx-auto px-4 -mt-12 relative z-10">
<main class="main-container max-w-6xl">
<!-- Countdown Section -->
{nextEvent && (
<section class="mb-12">
@@ -116,39 +116,39 @@ try {
)}
<!-- Navigation Grid -->
<section class="grid grid-cols-1 md:grid-cols-3 gap-8">
<section class="card-grid">
<!-- Catalog Section -->
<div class="group bg-white p-8 rounded-2xl border border-gray-200 shadow-sm hover:shadow-xl hover:border-indigo-300 transition-all duration-300 flex flex-col h-full">
<div class="group card-interactive flex flex-col h-full">
<div class="w-14 h-14 bg-purple-50 rounded-xl flex items-center justify-center mb-6 group-hover:bg-purple-100 transition-colors">
<span class="text-3xl">🎮</span>
</div>
<h2 class="text-2xl font-bold text-gray-900 mb-3">Catalog</h2>
<p class="text-gray-600 mb-6 flex-grow leading-relaxed">Here you can find our games. Discover our creations for TIC-80 and other platforms, many of which you can try directly in your browser.</p>
<a href="/catalog" class="inline-flex items-center justify-center bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-8 rounded-xl transition-all shadow-lg hover:shadow-purple-200">
<a href="/catalog" class="btn-primary bg-purple-600 hover:bg-purple-700 text-white hover:shadow-purple-200">
Browse Games
</a>
</div>
<!-- Wiki Section -->
<div class="group bg-white p-8 rounded-2xl border border-gray-200 shadow-sm hover:shadow-xl hover:border-green-300 transition-all duration-300 flex flex-col h-full">
<div class="group card-interactive flex flex-col h-full">
<div class="w-14 h-14 bg-green-50 rounded-xl flex items-center justify-center mb-6 group-hover:bg-green-100 transition-colors">
<span class="text-3xl">📚</span>
</div>
<h2 class="text-2xl font-bold text-gray-900 mb-3">Wiki</h2>
<p class="text-gray-600 mb-6 flex-grow leading-relaxed">We gather our public interest development knowledge here. Read through technical descriptions and development logs.</p>
<a href="https://wiki.teletype.hu" target="_blank" rel="noopener noreferrer" class="inline-flex items-center justify-center bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-8 rounded-xl transition-all shadow-lg hover:shadow-green-200">
<a href="https://wiki.teletype.hu" target="_blank" rel="noopener noreferrer" class="btn-primary bg-green-600 hover:bg-green-700 text-white hover:shadow-green-200">
Knowledge Base
</a>
</div>
<!-- Git Section -->
<div class="group bg-white p-8 rounded-2xl border border-gray-200 shadow-sm hover:shadow-xl hover:border-slate-300 transition-all duration-300 flex flex-col h-full">
<div class="group card-interactive flex flex-col h-full">
<div class="w-14 h-14 bg-slate-50 rounded-xl flex items-center justify-center mb-6 group-hover:bg-slate-100 transition-colors">
<span class="text-3xl">💻</span>
</div>
<h2 class="text-2xl font-bold text-gray-900 mb-3">Git Repos</h2>
<p class="text-gray-600 mb-6 flex-grow leading-relaxed">All our projects are open source. Browse our code, study our solutions, or even participate in the development.</p>
<a href="https://git.teletype.hu" target="_blank" rel="noopener noreferrer" class="inline-flex items-center justify-center bg-slate-800 hover:bg-slate-900 text-white font-bold py-3 px-8 rounded-xl transition-all shadow-lg hover:shadow-slate-200">
<a href="https://git.teletype.hu" target="_blank" rel="noopener noreferrer" class="btn-primary bg-slate-800 hover:bg-slate-900 text-white hover:shadow-slate-200">
Gitea
</a>
</div>
apps/frontend/src/pages/news.astro
+11 -11
View File
@@ -95,34 +95,34 @@ function timeAgo(dateStr: string): string {
<Layout>
<div class="bg-gray-50 min-h-screen pb-20">
<header class="relative overflow-hidden bg-slate-900 py-24 text-white">
<header class="hero-section-slate">
<!-- Decorative background elements -->
<div class="absolute inset-0 opacity-30">
<div class="absolute -top-24 -left-24 h-96 w-96 rounded-full bg-indigo-600 blur-3xl"></div>
<div class="absolute -bottom-24 -right-24 h-96 w-96 rounded-full bg-purple-600 blur-3xl"></div>
<div class="hero-decor-blob -top-24 -left-24 h-96 w-96 bg-indigo-600"></div>
<div class="hero-decor-blob -bottom-24 -right-24 h-96 w-96 bg-purple-600"></div>
</div>
<div class="relative max-w-5xl mx-auto px-4 text-center">
<div class="inline-block px-3 py-1 rounded-full bg-indigo-500/20 border border-indigo-400/30 text-indigo-300 text-sm font-medium mb-6 backdrop-blur-sm">
<div class="hero-container">
<div class="hero-badge">
Latest Updates
</div>
<h1 class="text-5xl md:text-6xl font-extrabold tracking-tight mb-6">
<h1 class="hero-title">
Wiki <span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400">News</span>
</h1>
<p class="text-lg md:text-xl text-slate-300 max-w-2xl mx-auto leading-relaxed mb-10">
<p class="hero-subtitle mb-10">
The latest documentation, technical guides, and development logs from our knowledge base.
</p>
<a
href={WIKIJS_BASE_URL}
target="_blank"
class="inline-flex items-center gap-3 bg-white text-indigo-900 px-8 py-4 rounded-xl hover:bg-indigo-50 transition-all font-bold shadow-xl hover:scale-105 active:scale-95"
class="btn-hero-indigo"
>
Knowledge Base
</a>
</div>
</header>
<main class="max-w-7xl mx-auto px-4 -mt-12 relative z-10">
<main class="main-container">
{error && (
<div class="bg-red-50 border-l-4 border-red-500 p-6 rounded-r-xl shadow-lg mb-12 flex items-start gap-4" role="alert">
@@ -143,7 +143,7 @@ function timeAgo(dateStr: string): string {
)}
{!error && recentPages.length > 0 && (
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="card-grid">
{recentPages.map((page) => {
const pageUrl = `${WIKIJS_BASE_URL}/${page.locale}/${page.path}`;
const isNew = (new Date().getTime() - new Date(page.createdAt).getTime()) < 7 * 24 * 60 * 60 * 1000;
@@ -152,7 +152,7 @@ function timeAgo(dateStr: string): string {
<a
href={pageUrl}
target="_blank"
class="group flex flex-col bg-white rounded-2xl border border-gray-200 p-6 shadow-sm hover:shadow-xl hover:border-indigo-300 transition-all duration-300 ease-out hover:-translate-y-1"
class="group card-interactive flex flex-col"
>
<div class="flex items-center justify-end mb-4">
<div class="flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-gray-400">
apps/frontend/src/styles/global.css
+74
View File
@@ -0,0 +1,74 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
/* Hero Section */
.hero-section {
@apply relative overflow-hidden py-24 text-white text-center;
}
.hero-section-gradient {
@apply hero-section bg-gradient-to-r;
}
.hero-section-slate {
@apply hero-section bg-slate-900;
}
.hero-container {
@apply relative max-w-5xl mx-auto px-4 z-10;
}
.hero-badge {
@apply inline-block px-3 py-1 rounded-full bg-indigo-500/20 border border-indigo-400/30 text-indigo-300 text-sm font-medium mb-6 backdrop-blur-sm;
}
.hero-title {
@apply text-5xl md:text-6xl font-extrabold tracking-tight mb-6;
}
.hero-subtitle {
@apply text-lg md:text-xl text-slate-300 max-w-2xl mx-auto leading-relaxed;
}
/* Buttons */
.btn-hero {
@apply inline-flex items-center gap-3 bg-white px-8 py-4 rounded-xl transition-all font-bold shadow-xl hover:scale-105 active:scale-95;
}
.btn-hero-teal {
@apply btn-hero text-teal-700 hover:bg-teal-50;
}
.btn-hero-indigo {
@apply btn-hero text-indigo-900 hover:bg-indigo-50;
}
.btn-primary {
@apply inline-flex items-center justify-center font-bold py-3 px-8 rounded-xl transition-all shadow-lg;
}
/* Grid and Containers */
.main-container {
@apply max-w-7xl mx-auto px-4 -mt-12 relative z-10;
}
.card-grid {
@apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
}
/* Cards */
.card-base {
@apply bg-white rounded-2xl border border-gray-200 p-6 shadow-sm;
}
.card-interactive {
@apply card-base hover:shadow-xl transition-all duration-300 ease-out hover:-translate-y-1;
}
/* Decorative Background Elements */
.hero-decor-blob {
@apply absolute rounded-full blur-3xl opacity-30;
}
}