Narrow page layout for better readability

Replace max-w-7xl (1280px) with max-w-5xl (1024px) across all templates
for a more centered, focused content width.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
directlx 2026-03-01 07:49:52 -05:00
parent f8626ee987
commit ac182c2aca
7 changed files with 21 additions and 21 deletions

View File

@ -10,7 +10,7 @@
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[400px] pointer-events-none"
style="background: radial-gradient(ellipse, rgba(92,184,44,0.1) 0%, transparent 70%); filter: blur(40px);"></div>
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="relative max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="badge badge-primary mb-6">Our Story</div>
<h1 class="text-5xl md:text-6xl font-extrabold mb-6 leading-tight" style="font-family: 'Syne', sans-serif; color: #f1f0ff;">
About <span class="gradient-text">DirectLX</span>
@ -23,7 +23,7 @@
<!-- Story + Values -->
<section class="py-20" style="background: #0a0a14;">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-14 items-start">
<div>
<h2 class="text-3xl font-bold mb-6" style="font-family: 'Syne', sans-serif; color: #f1f0ff;">Our Story</h2>
@ -73,7 +73,7 @@
<!-- Team -->
<section class="py-20 relative">
<div class="absolute inset-0 dot-grid opacity-20 pointer-events-none"></div>
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="relative max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-14">
<div class="badge badge-primary mb-5">The Team</div>
<h2 class="text-3xl font-bold" style="font-family: 'Syne', sans-serif; color: #f1f0ff;">Meet the people<br><span class="gradient-text">behind the code</span></h2>

View File

@ -15,7 +15,7 @@
<!-- Navigation -->
<nav class="sticky top-0 z-50 border-b" style="background: rgba(7,7,15,0.85); backdrop-filter: blur(20px); border-color: rgba(255,255,255,0.06);">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<a href="{{ url_for('index') }}" class="flex items-center gap-3 group">
@ -64,7 +64,7 @@
<!-- Flash Messages -->
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4 w-full">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 mt-4 w-full">
{% for category, message in messages %}
<div class="p-4 rounded-xl mb-2 text-sm font-medium
{% if category == 'error' %}border border-red-500/30 bg-red-500/10 text-red-300
@ -84,7 +84,7 @@
<!-- Footer -->
<footer style="background: #0a0a14; border-top: 1px solid rgba(255,255,255,0.06);">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-14">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-14">
<div class="grid grid-cols-1 md:grid-cols-4 gap-10">
<div class="col-span-1 md:col-span-2">
<img src="{{ url_for('static', filename='images/directLX_small.png') }}" alt="DirectLX" class="h-9 mb-5 opacity-80">

View File

@ -10,7 +10,7 @@
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[350px] pointer-events-none"
style="background: radial-gradient(ellipse, rgba(92,184,44,0.1) 0%, transparent 70%); filter: blur(40px);"></div>
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="relative max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="badge badge-primary mb-6">Blog</div>
<h1 class="text-5xl md:text-6xl font-extrabold mb-5 leading-tight" style="font-family: 'Syne', sans-serif; color: #f1f0ff;">
Insights &amp; <span class="gradient-text">Ideas</span>
@ -39,7 +39,7 @@
<!-- Blog Posts -->
<section class="py-16 pb-28" style="background: #0a0a14;">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div id="blog-posts">
{% include "blog/partials/post_list.html" %}
</div>

View File

@ -10,7 +10,7 @@
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[400px] pointer-events-none"
style="background: radial-gradient(ellipse, rgba(92,184,44,0.1) 0%, transparent 70%); filter: blur(40px);"></div>
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="relative max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="badge badge-primary mb-6">Get in Touch</div>
<h1 class="text-5xl md:text-6xl font-extrabold mb-6 leading-tight" style="font-family: 'Syne', sans-serif; color: #f1f0ff;">
Let's <span class="gradient-text">talk</span>

View File

@ -10,7 +10,7 @@
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[350px] pointer-events-none"
style="background: radial-gradient(ellipse, rgba(92,184,44,0.1) 0%, transparent 70%); filter: blur(40px);"></div>
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="relative max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="badge badge-accent mb-6">Community</div>
<h1 class="text-5xl md:text-6xl font-extrabold mb-5 leading-tight" style="font-family: 'Syne', sans-serif; color: #f1f0ff;">
Community <span class="gradient-text">Forum</span>

View File

@ -18,7 +18,7 @@
<!-- Dot grid -->
<div class="absolute inset-0 dot-grid opacity-40 pointer-events-none"></div>
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 text-center">
<div class="relative max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-24 text-center">
<!-- Pre-heading badge -->
<div class="inline-flex items-center gap-2 badge badge-primary mb-8">
<svg class="w-3 h-3 text-primary-400" fill="currentColor" viewBox="0 0 8 8">
@ -78,7 +78,7 @@
<!-- Features Section -->
<section class="py-24 relative">
<div class="absolute inset-0 dot-grid opacity-20 pointer-events-none"></div>
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="relative max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<div class="badge badge-primary mb-5">Why DirectLX</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4" style="font-family: 'Syne', sans-serif; color: #f1f0ff;">
@ -137,7 +137,7 @@
<!-- Latest Blog Posts -->
<section class="py-24" style="background: #0a0a14;">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-end mb-12">
<div>
<div class="badge badge-primary mb-4">From the Blog</div>

View File

@ -10,7 +10,7 @@
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-[700px] h-[400px] pointer-events-none"
style="background: radial-gradient(ellipse, rgba(92,184,44,0.1) 0%, transparent 70%); filter: blur(40px);"></div>
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="relative max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="badge badge-primary mb-6">What We Do</div>
<h1 class="text-5xl md:text-6xl font-extrabold mb-6 leading-tight" style="font-family: 'Syne', sans-serif; color: #f1f0ff;">
Our <span class="gradient-text">Services</span>
@ -23,7 +23,7 @@
<!-- Services Grid -->
<section class="py-20" style="background: #0a0a14;">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
{% set services = [
@ -31,28 +31,28 @@
'icon': 'M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9',
'title': 'Web Development',
'desc': 'Modern, responsive websites and web applications built with the latest technologies. From simple landing pages to complex enterprise platforms.',
'items': ['Custom web applications', 'E-commerce solutions', 'Progressive Web Apps (PWAs)'],
'features': ['Custom web applications', 'E-commerce solutions', 'Progressive Web Apps (PWAs)'],
'accent': 'primary'
},
{
'icon': 'M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z',
'title': 'API Development',
'desc': 'Robust, scalable APIs that power your applications and enable seamless integrations with third-party services.',
'items': ['RESTful API design', 'GraphQL implementations', 'Third-party integrations'],
'features': ['RESTful API design', 'GraphQL implementations', 'Third-party integrations'],
'accent': 'accent'
},
{
'icon': 'M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z',
'title': 'Cloud Solutions',
'desc': 'Leverage the power of cloud computing with our expertise in AWS, Azure, and Google Cloud Platform.',
'items': ['Cloud architecture design', 'Migration services', 'DevOps & CI/CD pipelines'],
'features': ['Cloud architecture design', 'Migration services', 'DevOps & CI/CD pipelines'],
'accent': 'accent'
},
{
'icon': 'M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z',
'title': 'Technical Consulting',
'desc': 'Expert guidance on technology strategy, architecture decisions, and best practices for your development team.',
'items': ['Technology assessment', 'Code reviews & audits', 'Team training'],
'features': ['Technology assessment', 'Code reviews & audits', 'Team training'],
'accent': 'primary'
},
] %}
@ -68,7 +68,7 @@
<h3 class="text-xl font-bold mb-3" style="font-family: 'Syne', sans-serif; color: #f1f0ff;">{{ svc.title }}</h3>
<p class="text-sm leading-relaxed mb-6" style="color: #8b8ca8;">{{ svc.desc }}</p>
<ul class="space-y-2.5">
{% for item in svc.items %}
{% for item in svc.features %}
<li class="flex items-center gap-3 text-sm" style="color: #c4c2d4;">
<div class="w-1.5 h-1.5 rounded-full flex-shrink-0 {% if svc.accent == 'accent' %}bg-accent-400{% else %}bg-primary-400{% endif %}"></div>
{{ item }}
@ -85,7 +85,7 @@
<!-- Process -->
<section class="py-24 relative">
<div class="absolute inset-0 dot-grid opacity-20 pointer-events-none"></div>
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="relative max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<div class="badge badge-primary mb-5">How We Work</div>
<h2 class="text-3xl font-bold" style="font-family: 'Syne', sans-serif; color: #f1f0ff;">