diff --git a/layouts/partials/vendor.html b/layouts/partials/vendor.html
index 9210cc57..cb074675 100644
--- a/layouts/partials/vendor.html
+++ b/layouts/partials/vendor.html
@@ -117,3 +117,32 @@
     src="{{ $youtubeLiteLib.RelPermalink }}"
     integrity="{{ $youtubeLiteLib.Data.Integrity }}"></script>
 {{ end }}
+
+{{/* Repo cards */}}
+{{ $repoCards := slice "github" "gitea" "hugging-face" "codeberg" "forgejo" }}
+{{ $hasRepoCards := false }}
+{{ range $repoCards }}
+  {{ if $.Page.HasShortcode . }}
+    {{ $hasRepoCards = true }}
+  {{ end }}
+{{ end }}
+
+{{ if $hasRepoCards }}
+  {{ $repoColors := site.Data.repoColors }}
+  {{ $cssRules := slice }}
+
+  {{/* default color */}}
+  {{ $cssRules = $cssRules | append ".language-dot[data-language=\"default\"] { background-color: #0077b6; }" }}
+
+  {{/* Hugging Face model color */}}
+  {{ $cssRules = $cssRules | append ".language-dot[data-language=\"model\"] { background-color: #ff6b35; }" }}
+
+  {{ range $lang, $color := $repoColors }}
+    {{ $cssRules = $cssRules | append (printf ".language-dot[data-language=\"%s\"] { background-color: %s; }" $lang $color) }}
+  {{ end }}
+
+  {{ $repoCardCss := resources.FromString "css/repo-cards.css" (delimit $cssRules "\n")
+    | minify | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512")
+  }}
+  <link rel="stylesheet" href="{{ $repoCardCss.RelPermalink }}" integrity="{{ $repoCardCss.Data.Integrity }}">
+{{ end }}
diff --git a/layouts/shortcodes/codeberg.html b/layouts/shortcodes/codeberg.html
index 3b6b04aa..50db132c 100644
--- a/layouts/shortcodes/codeberg.html
+++ b/layouts/shortcodes/codeberg.html
@@ -33,12 +33,7 @@
         </p>
 
         <div class="m-0 mt-2 flex items-center">
-          {{ $languageDotColor := cond .language (index $repoColors .language) "#0077b6" }}
-          {{ $css := resources.FromString (printf "css/%s.css" $id) (printf ".language-dot-%s{background-color:%s}" $id $languageDotColor)
-            | minify | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512")
-          }}
-          <link rel="stylesheet" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}">
-          <span class="mr-1 inline-block h-3 w-3 rounded-full language-dot-{{ $id }}"></span>
+          <span class="mr-1 inline-block h-3 w-3 rounded-full language-dot" data-language="{{ .language | default "default" }}"></span>
           <div class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
             {{ if .language }}{{ .language }}{{ else }}null{{ end }}
           </div>
diff --git a/layouts/shortcodes/forgejo.html b/layouts/shortcodes/forgejo.html
index f4fa8e7b..a6395a3c 100644
--- a/layouts/shortcodes/forgejo.html
+++ b/layouts/shortcodes/forgejo.html
@@ -33,12 +33,7 @@
         </p>
 
         <div class="m-0 mt-2 flex items-center">
-          {{ $languageDotColor := cond .language (index $repoColors .language) "#0077b6" }}
-          {{ $css := resources.FromString (printf "css/%s.css" $id) (printf ".language-dot-%s{background-color:%s}" $id $languageDotColor)
-            | minify | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512")
-          }}
-          <link rel="stylesheet" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}">
-          <span class="mr-1 inline-block h-3 w-3 rounded-full language-dot-{{ $id }}"></span>
+          <span class="mr-1 inline-block h-3 w-3 rounded-full language-dot" data-language="{{ .language | default "default" }}"></span>
           <div class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
             {{ if .language }}{{ .language }}{{ else }}null{{ end }}
           </div>
diff --git a/layouts/shortcodes/gitea.html b/layouts/shortcodes/gitea.html
index c91e9a02..3175fa99 100644
--- a/layouts/shortcodes/gitea.html
+++ b/layouts/shortcodes/gitea.html
@@ -33,12 +33,7 @@
         </p>
 
         <div class="m-0 mt-2 flex items-center">
-          {{ $languageDotColor := cond .language (index $repoColors .language) "#0077b6" }}
-          {{ $css := resources.FromString (printf "css/%s.css" $id) (printf ".language-dot-%s{background-color:%s}" $id $languageDotColor)
-            | minify | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512")
-          }}
-          <link rel="stylesheet" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}">
-          <span class="mr-1 inline-block h-3 w-3 rounded-full language-dot-{{ $id }}"></span>
+          <span class="mr-1 inline-block h-3 w-3 rounded-full language-dot" data-language="{{ .language | default "default" }}"></span>
           <div class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
             {{ if .language }}{{ .language }}{{ else }}null{{ end }}
           </div>
diff --git a/layouts/shortcodes/github.html b/layouts/shortcodes/github.html
index e5a1df7f..c3a5dcec 100644
--- a/layouts/shortcodes/github.html
+++ b/layouts/shortcodes/github.html
@@ -46,12 +46,7 @@
           </p>
 
           <div class="m-0 mt-2 flex items-center">
-            {{ $languageDotColor := cond .language (index $repoColors .language) "#0077b6" }}
-            {{ $css := resources.FromString (printf "css/%s.css" $id) (printf ".language-dot-%s{background-color:%s}" $id $languageDotColor)
-              | minify | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512")
-            }}
-            <link rel="stylesheet" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}">
-            <span class="mr-1 inline-block h-3 w-3 rounded-full language-dot-{{ $id }}"></span>
+            <span class="mr-1 inline-block h-3 w-3 rounded-full language-dot" data-language="{{ .language | default "default" }}"></span>
             <div class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
               {{ if .language }}{{ .language }}{{ else }}null{{ end }}
             </div>
diff --git a/layouts/shortcodes/huggingface.html b/layouts/shortcodes/huggingface.html
index fe883c29..03e6bf04 100644
--- a/layouts/shortcodes/huggingface.html
+++ b/layouts/shortcodes/huggingface.html
@@ -53,12 +53,7 @@
 
 
           <div class="m-0 mt-2 flex items-center">
-            {{ $languageDotColor := cond (eq $type "model") "#ff6b35" "#0077b6" }}
-            {{ $css := resources.FromString (printf "css/%s.css" $id) (printf ".language-dot-%s{background-color:%s}" $id $languageDotColor)
-              | minify | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512")
-            }}
-            <link rel="stylesheet" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}">
-            <span class="mr-1 inline-block h-3 w-3 rounded-full language-dot-{{ $id }}"></span>
+            <span class="mr-1 inline-block h-3 w-3 rounded-full language-dot" data-language="{{ cond (eq $type "model") "model" "default" }}"></span>
             <div class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
               {{ if eq $type "model" }}
                 {{ if .pipeline_tag }}{{ .pipeline_tag }}{{ else }}model{{ end }}