style fixes

app.vue

@@ -3,16 +3,18 @@
     <v-app>
       <a id="top" />
 
-      <header>
-        <Topbar />
-      </header>
+      <div class="body">
+        <header>
+          <Topbar />
+        </header>
 
-      <NuxtPage />
+        <NuxtPage />
 
-      <BackToTheTop />
+        <BackToTheTop />
 
-      <v-footer no-gutters :height="36">
-      </v-footer>
+        <v-footer no-gutters :height="36">
+        </v-footer>
+      </div>
     </v-app>
   </NuxtLayout>
 </template>

components/Badge.vue

@@ -1,7 +1,6 @@
 <template>
   <v-card>
     <v-img
-      height="64px"
       :src="img"
       :alt="title"
     />
@@ -27,5 +26,13 @@ defineProps({
 </script>
 
 <style scoped lang="scss">
+  .v-card {
+    height: 148px;
+    width: 128px;
+    padding: 18px;
 
+    .v-img {
+      height: 48px;
+    }
+  }
 </style>

pages/index.vue

@@ -14,41 +14,53 @@
 
   <div class="badges">
     <h2>Languages</h2>
-    <Badge title="Python" img="images/logos/python.svg" />
-    <Badge title="PHP" img="/images/logos/php.svg" />
-    <Badge title="Node.js" img="/images/logos/node-light.svg" />
-    <Badge title="C#" img="/images/logos/csharp.png" />
+    <div class="badges-section">
+      <Badge title="Python" img="images/logos/python.svg" />
+      <Badge title="PHP" img="/images/logos/php.svg" />
+      <Badge title="Node.js" img="/images/logos/node-light.svg" />
+      <Badge title="C#" img="/images/logos/csharp.png" />
+    </div>
 
     <h2>Frameworks</h2>
-    <Badge title="Symfony" img="/images/logos/symfony.svg" />
-    <Badge title="Vue.js" img="/images/logos/vue.png" />
-    <Badge title="Nuxt.js" img="/images/logos/nuxt.svg" />
-    <Badge title="Django" img="/images/logos/django-light.svg" />
-    <Badge title=".Net" img="/images/logos/dotnet.svg" />
-    <Badge title="Jquery" img="/images/logos/jquery.png" />
+    <div class="badges-section">
+      <Badge title="Symfony" img="/images/logos/symfony.svg" />
+      <Badge title="Vue.js" img="/images/logos/vue.png" />
+      <Badge title="Nuxt.js" img="/images/logos/nuxt.svg" />
+      <Badge title="Django" img="/images/logos/django-light.svg" />
+      <Badge title=".Net" img="/images/logos/dotnet.svg" />
+      <Badge title="Jquery" img="/images/logos/jquery.png" />
+    </div>
 
     <h2>DBs and search-engines</h2>
-    <Badge title="Mysql" img="/images/logos/mysql.png" />
-    <Badge title="MariaDb" img="/images/logos/mariadb.svg" />
-    <Badge title="Postgresql" img="/images/logos/postgresql.png" />
-    <Badge title="SQL-Server" img="/images/logos/sql-server.svg" />
-    <Badge title="Sqlite" img="/images/logos/sqlite.png" />
-    <Badge title="ElasticSearch" img="/images/logos/elasticsearch.svg" />
-    <Badge title="Solr" img="/images/logos/solr.png" />
+    <div class="badges-section">
+      <Badge title="Mysql" img="/images/logos/mysql.png" />
+      <Badge title="MariaDb" img="/images/logos/mariadb.svg" />
+      <Badge title="Postgresql" img="/images/logos/postgresql.png" />
+      <Badge title="SQL-Server" img="/images/logos/sql-server.svg" />
+      <Badge title="Sqlite" img="/images/logos/sqlite.png" />
+      <Badge title="ElasticSearch" img="/images/logos/elasticsearch.svg" />
+      <Badge title="Solr" img="/images/logos/solr.png" />
+    </div>
 
     <h2>Devops</h2>
-    <Badge title="Docker" img="/images/logos/docker.svg" />
-    <Badge title="Gitlab CI" img="/images/logos/gitlab.svg" />
-    <Badge title="Github Actions" img="/images/logos/github-light.svg" />
-    <Badge title="Jenkins" img="/images/logos/jenkins.png" />
+    <div class="badges-section">
+      <Badge title="Docker" img="/images/logos/docker.svg" />
+      <Badge title="Gitlab CI" img="/images/logos/gitlab.svg" />
+      <Badge title="Github Actions" img="/images/logos/github-light.svg" />
+      <Badge title="Jenkins" img="/images/logos/jenkins.png" />
+    </div>
 
     <h2>CMS</h2>
-    <Badge title="Typo3" img="/images/logos/typo3.png" />
-    <Badge title="Wordpress" img="/images/logos/wordpress.png" />
+    <div class="badges-section">
+      <Badge title="Typo3" img="/images/logos/typo3.png" />
+      <Badge title="Wordpress" img="/images/logos/wordpress.png" />
+    </div>
 
     <h2>Other</h2>
-    <Badge title="Mercure (SSE)" img="/images/logos/mercure.svg" />
-    <Badge title="Nextcloud" img="/images/logos/nextcloud.svg" />
+    <div class="badges-section">
+      <Badge title="Mercure (SSE)" img="/images/logos/mercure.svg" />
+      <Badge title="Nextcloud" img="/images/logos/nextcloud.svg" />
+    </div>
   </div>
 </template>
 
@@ -64,4 +76,19 @@
   align-items: center;
   padding: 20px;
 }
+
+.badges {
+
+}
+
+.badges-section {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+
+  .v-card {
+    margin: 24px;
+  }
+}
 </style>