feat: nicer styling of repositories and repositories lists

content/.vuepress/components/GitRepos/GithubRepository.vue

@@ -1,13 +1,17 @@
 <template>
-  <div class="githubRepo flex-col rounded-corners">
+  <div class="githubRepo flex-row flex-space-between gap-1rem rounded-corners">
-    <h4>{{ props.repo.name }}</h4>
+    <div class="flex-col info">
-    <div class="flex-row space-between">
+      <h3>{{ props.repo.name }}</h3>
-      <p>{{ props.repo.description }}</p>
+      <div>
-      <div class="gap-1rem flex-end">
+        <p>
-        <p>Stars: {{ repo.stargazers_count }}</p>
+          {{ props.repo.description }}
-        <p>Forks: {{ repo.forks_count }}</p>
+        </p>
       </div>
     </div>
+    <div class="flex-col flex-start gap-1rem stats">
+      <p>Stars: {{ repo.stargazers_count }}</p>
+      <p>Forks: {{ repo.forks_count }}</p>
+    </div>
   </div>
 </template>
 
@@ -24,8 +28,20 @@ const props = defineProps({
 @import '../../styles/classes.less';
 
 .githubRepo {
-  max-width: 35rem;
+  width: 35rem;
   padding: 3rem;
-  background-color: @nord3;
+  background-color: @nord4;
+
+  html.dark & {
+    background-color: @nord3;
+  }
+
+  .info {
+    max-width: 30rem;
+  }
+
+  .stats {
+    width: 4rem;
+  }
 }
 </style>

content/.vuepress/components/GitRepos/ListRepositories.vue

@@ -1,6 +1,13 @@
 <template>
   <ApiLoader :url="fetchUrl" @dataLoaded="filterRepos">
-    <GithubRepository :repo="repo" type="repositories" v-for="repo in repos" />
+    <div class="flex-col gap-1rem list-repos">
+      <GithubRepository
+        :repo="repo"
+        type="repositories"
+        v-for="repo in repos"
+        class="center"
+      />
+    </div>
   </ApiLoader>
 </template>
 
@@ -47,4 +54,10 @@ const filterRepos = (response: GithubRepo[]) => {
 };
 </script>
 
-<style lang="less"></style>
+<style lang="less">
+@import '../../styles/classes.less';
+
+.list-repos {
+  margin: 2rem auto;
+}
+</style>

content/.vuepress/styles/classes.less

@@ -18,15 +18,26 @@ each(range(5), {
   flex-direction: row;
 }
 
-@flex-justifications: flex-start, flex-end, center, space-between, space-around,
+@flex-justifications-prefixed: flex-start, flex-end;
-  space-evenly;
+each(@flex-justifications-prefixed, {
-each(@flex-justifications, {
   .@{value} {
     .flex();
     justify-content: @value;
   }
 });
 
+@flex-justifications: center, space-between, space-around, space-evenly;
+each(@flex-justifications, {
+  .flex-@{value} {
+    .flex();
+    justify-content: @value;
+  }
+});
+
 .rounded-corners {
-  border-radius: 1rem;
+  border-radius: 0.3rem;
+}
+
+.center {
+  margin: 0 auto;
 }