diff options
| author | Danilo M. <danix@danix.xyz> | 2026-04-28 13:06:49 +0200 |
|---|---|---|
| committer | Danilo M. <danix@danix.xyz> | 2026-04-28 13:06:49 +0200 |
| commit | 346f48df3950901be42ee2b8d23350ad3ac925f5 (patch) | |
| tree | 2c58c74273d622fb0550d2768ce12b4f444508ad | |
| parent | 2bb102971ce560e5e72fc5dca53916f94570efa7 (diff) | |
| download | danixxyz-theme-346f48df3950901be42ee2b8d23350ad3ac925f5.tar.gz danixxyz-theme-346f48df3950901be42ee2b8d23350ad3ac925f5.zip | |
feat: adaptive repo grid with CSS auto-fit and :only-child centering
| -rw-r--r-- | assets/css/main.css | 15 | ||||
| -rw-r--r-- | layouts/repository/single.html | 4 |
2 files changed, 17 insertions, 2 deletions
diff --git a/assets/css/main.css b/assets/css/main.css index ab41a7d..8921966 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -584,6 +584,21 @@ html.theme-light picture img[src="/images/default_thumbnail_dark.png"] { } /* ===================== + Repository Grid + ===================== */ + + .repo-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 1.5rem; + } + + .repo-card:only-child { + max-width: 50%; + margin-inline: auto; + } + + /* ===================== Timeline Layout ===================== */ diff --git a/layouts/repository/single.html b/layouts/repository/single.html index ce2c305..0d6ee83 100644 --- a/layouts/repository/single.html +++ b/layouts/repository/single.html @@ -28,9 +28,9 @@ <section class="mt-16"> <h2 class="text-3xl font-bold mb-8">{{ i18n "githubReposTitle" }}</h2> - <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> + <div class="repo-grid"> {{ range $.Site.Data.repos.repos }} - <div class="border border-border rounded-lg overflow-hidden hover:shadow-lg transition-shadow"> + <div class="repo-card border border-border rounded-lg overflow-hidden hover:shadow-lg transition-shadow"> <!-- Card Image --> <img src="{{ .image }}" |