diff options
| -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 }}" |