aodhan/character-browser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign gallery grid layout and update CSS across all index pages

Browse Source 
Increase card density with more columns per breakpoint (2→6 across sm/xl).
Refactor style.css for consistent card sizing, spacing, and responsive layout.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Aodhan Collins
2026-03-04 21:43:40 +00:00
parent 27d2a70867
commit 9b143e65b1
10 changed files with 328 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
templates/actions/index.html
View File

@@ -47,7 +47,7 @@
</div>
</div>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
{% for action in actions %}
<div class="col" id="card-{{ action.slug }}">
<div class="card h-100 character-card" onclick="window.location.href='/action/{{ action.slug }}'">

2
templates/checkpoints/index.html
View File

@@ -44,7 +44,7 @@
</div>
</div>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
{% for ckpt in checkpoints %}
<div class="col" id="card-{{ ckpt.slug }}">
<div class="card h-100 character-card" onclick="window.location.href='/checkpoint/{{ ckpt.slug }}'">

2
templates/detailers/index.html
View File

@@ -47,7 +47,7 @@
</div>
</div>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
{% for detailer in detailers %}
<div class="col" id="card-{{ detailer.slug }}">
<div class="card h-100 character-card" onclick="window.location.href='/detailer/{{ detailer.slug }}'">

2
templates/index.html
View File

@@ -39,7 +39,7 @@
</div>
</div>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
{% for char in characters %}
<div class="col" id="card-{{ char.slug }}">
<div class="card h-100 character-card" onclick="window.location.href='/character/{{ char.slug }}'">

2
templates/layout.html
View File

@@ -6,7 +6,7 @@
<title>GAZE</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="{{ url_for('static', filename='style.css') }}" rel="stylesheet">
</head>

2
templates/looks/index.html
View File

@@ -47,7 +47,7 @@
</div>
</div>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
{% for look in looks %}
<div class="col" id="card-{{ look.slug }}">
<div class="card h-100 character-card" onclick="window.location.href='{{ url_for('look_detail', slug=look.slug) }}'">

2
templates/outfits/index.html
View File

@@ -47,7 +47,7 @@
</div>
</div>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
{% for outfit in outfits %}
<div class="col" id="card-{{ outfit.slug }}">
<div class="card h-100 character-card" onclick="window.location.href='/outfit/{{ outfit.slug }}'">

2
templates/scenes/index.html
View File

@@ -47,7 +47,7 @@
</div>
</div>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
{% for scene in scenes %}
<div class="col" id="card-{{ scene.slug }}">
<div class="card h-100 character-card" onclick="window.location.href='/scene/{{ scene.slug }}'">

2
templates/styles/index.html
View File

@@ -47,7 +47,7 @@
</div>
</div>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
{% for style in styles %}
<div class="col" id="card-{{ style.slug }}">
<div class="card h-100 character-card" onclick="window.location.href='/style/{{ style.slug }}'">