updated styling in homepage

FAIRsharing · Feb 28, 2025 · 54cd73a · 54cd73a
1 parent 1ea8dd2
commit 54cd73a
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 15 deletions.
diff --git a/src/components/Home/CategoryBlock.vue b/src/components/Home/CategoryBlock.vue
@@ -18,10 +18,10 @@
           >
             <div
               style="height: 136px"
-              class="d-flex justify-center"
+              class="d-flex justify-center pt-4"
             >
               <v-icon
-                size="80"
+                size="90"
                 color="white"
                 style="opacity: .7"
               >
@@ -66,7 +66,6 @@
               width="400"
               height="100"
               :src="customIcons.values[blockCategories.secondColumn.icon].icon"
-              contain
             />
             <v-card-title class="d-inline">
               {{ blockCategories.secondColumn.title }}
@@ -104,7 +103,7 @@
           >
             <div
               style="height: 136px"
-              class="d-flex justify-center"
+              class="d-flex justify-center pt-4"
             >
               <v-icon
                 size="90"

diff --git a/src/components/Home/CommunityBlock.vue b/src/components/Home/CommunityBlock.vue
@@ -19,12 +19,13 @@
           >
             <div
               style="height: 136px"
-              class="d-flex justify-center"
+              class="d-flex justify-center align-center"
             >
               <v-icon
                 size="80"
                 color="white"
                 style="opacity: .7"
+                class="d-inline-flex"
               >
                 {{ customIcons.values[communityBlock.firstColumn.icon].icon }}
               </v-icon>
@@ -66,12 +67,13 @@
           >
             <div
               style="height: 136px"
-              class="d-flex justify-center"
+              class="d-flex justify-center align-center"
             >
               <v-icon
                 size="80"
                 color="white"
                 style="opacity: .7"
+                class="d-inline-flex"
               >
                 {{ customIcons.values[communityBlock.secondColumn.icon].icon }}
               </v-icon>

diff --git a/src/components/Navigation/Footer.vue b/src/components/Navigation/Footer.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-row class="white--text pt-5 footer-container justify-center">
+  <v-row class="text-white pt-5 footer-container justify-center">
     <!--  Footer Blocks  -->
     <v-col
       v-for="(block,index) in footerData"
@@ -54,7 +54,7 @@
         <Icon
           class="pt-2"
           item="arrowUp"
-          size="small"
+          size="x-small"
           wrapper-class=""
           color="white"
         />
@@ -91,7 +91,7 @@ import Icon from "@/components/Icon"
 import footerData from '@/data/footerData.json'
 
 export default {
-  name: "Footer",
+  name: "FooterComp",
   components: { Icon },
   data: () => {
     return {
@@ -125,7 +125,8 @@ li {
   border-bottom: 30px solid #27aae1;
   position: absolute;
   top: -59px;
-  left: 48%;
+  left: auto;
+  right: auto;
   #arrow-up {
     position: absolute;
     left: -7px;

diff --git a/src/plugins/icons.js b/src/plugins/icons.js
@@ -50,7 +50,7 @@ const customIcons = {
     },
     arrowUp: {
       type: "icon",
-      icon: "fa-chevron-up",
+      icon: "fas fa-chevron-up",
     },
     data_access: {
       type: "icon",
@@ -227,7 +227,7 @@ const customIcons = {
     },
     recommended: {
       type: "icon",
-      icon: "fa-thumbs-up",
+      icon: "fas fa-thumbs-up",
     },
     video: {
       type: "icon",
@@ -239,7 +239,7 @@ const customIcons = {
     },
     educational: {
       type: "icon",
-      icon: "fa-graduation-cap",
+      icon: "fas fa-graduation-cap",
     },
     api: {
       type: "icon",
@@ -287,11 +287,11 @@ const customIcons = {
     },
     users: {
       type: "icon",
-      icon: "fa-users",
+      icon: "fas fa-users",
     },
     collaborators: {
       type: "icon",
-      icon: "fa-users-cog",
+      icon: "fas fa-users-cog",
     },
     info: {
       type: "icon",