feat: abstract

Signed-off-by: Corentin Thomasset <corentin.thomasset74@gmail.com>

src/components/Abstract.vue

@@ -0,0 +1,48 @@
+<template>
+    <div>
+        <h2>Hello, World!</h2>
+        <p class="text-justify">
+            Welcome to <strong>IT-Tools</strong>! This wonderful website, originally created with ❤ by
+            <a href="//corentin-thomasset.fr">Corentin Thomasset</a>, aggregate a set of useful tools
+            that every developer may need once in a while.
+        </p>
+
+
+        <v-row>
+            <v-col cols="12" lg="6" md="12">
+                <h2>A tool is missing?</h2>
+                <p class="text-justify">
+                    If you need a tool that is not currently not present here, and you think can be
+                    relevant, you are welcome to submit a feature request <a
+                        href="//github.com/CorentinTh/it-tools/issues/new?assignees=CorentinTh&labels=enhancement&template=feature_request.md&title=%5BFEAT%5D%20My%20feature">here</a>.
+                </p>
+            </v-col>
+            <v-col cols="12" lg="6" md="12">
+                <h2>Found a bug?</h2>
+                <p class="text-justify">
+                    If you found a bug, or something broken that doesn't work as expected, please fill a bug report here <a
+                        href="//github.com/CorentinTh/it-tools/issues/new?assignees=CorentinTh&labels=bug&template=bug_report.md&title=%5BBUG%5D%20My%20bug">here</a>.
+                </p>
+            </v-col>
+        </v-row>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "Abstract"
+    }
+</script>
+
+<style scoped lang="less">
+    a {
+        border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
+        text-decoration: none;
+        color: inherit !important;
+
+        &:hover {
+            color: #4CAF50 !important;
+            border-bottom: 1px solid;
+        }
+    }
+</style>

src/routes/About.vue

@@ -1,5 +1,17 @@
 <template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
+  <v-card class="single-card">
+    <v-card-title>About</v-card-title>
+    <v-card-text><Abstract /></v-card-text>
+  </v-card>
 </template>
+
+<script>
+  import Abstract from "../components/Abstract";
+
+  export default {
+    name: "About",
+    components : {
+      Abstract
+    },
+  }
+</script>

src/routes/Home.vue

@@ -1,5 +1,18 @@
 <template>
-    <v-card class="single-card">
+    <div>
+        <v-row justify="center" align="center">
+            <v-col cols="12" lg="5" md="12">
+                <v-card>
+                    <v-card-title>IT-Tools</v-card-title>
+                    <v-card-text class="description">
+                        <Abstract />
+                    </v-card-text>
+                </v-card>
+            </v-col>
+        </v-row>
+        <v-row justify="center" align="center">
+            <v-col cols="12" lg="8" md="12">
+                <v-card class="card-auto">
                     <v-card-text>
                         <div class="card-wrapper ">
                             <div v-for="item in items" :key="item.text" class="pa-2">
@@ -13,13 +26,20 @@
                         </div>
                     </v-card-text>
                 </v-card>
+            </v-col>
+        </v-row>
+    </div>
 </template>
 
 <script>
     import {toolsComponentsFlat} from "../router";
+    import Abstract from "../components/Abstract";
 
     export default {
         name: 'Home',
+        components : {
+            Abstract
+        },
         data: () => ({
             items: toolsComponentsFlat
         })
@@ -27,25 +47,33 @@
 </script>
 
 <style lang="less" scoped>
+    .card-auto {
+        width: auto;
+    }
+
     .card-wrapper {
         display: flex;
         flex-wrap: wrap;
-        justify-content: center;
 
         div {
-            flex: 1 1 33%;
+            flex: 0 1 20%;
 
+            @media only screen and (max-width: 800px) {
+                flex: 0 1 33%;
+            }
             @media only screen and (max-width: 620px) {
                 flex: 0 1 50%;
             }
-            @media only screen and (max-width: 450px) {
+            @media only screen and (max-width: 420px) {
                 flex: 0 1 220px;
+                margin: auto;
             }
             @media only screen and (max-width: 300px) {
                 flex: 0 1 100%;
             }
 
             .card-element {
+                width: 100%;
                 border-radius: 24px 4px !important;
                 color: #ffffff !important;
                 font-weight: bold !important;
@@ -60,25 +88,29 @@
                     opacity: 0.9;
                 }
 
+                .v-card__text {
+                    padding: 16px 10px;
+                }
+
                 .v-icon {
-                    font-size: 50px;
+                    font-size: 40px;
                     color: #ffffff;
-                    margin: 15px 0;
+                    margin: 10px 0;
                     transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
 
                 }
 
                 .item-title {
+                    overflow-wrap: anywhere;
                     display: flex;
                     justify-content: center;
                     align-items: center;
-                    font-size: 18px;
+                    font-size: 16px;
                     line-height: 22px;
                     height: 44px;
                     opacity: 1;
                     color: #ffffff;
                     transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
-
                 }
             }
         }