Tweaks (#15)

* tweaked font size * containing icons
angus-websites · Dec 23, 2023 · f07d82f · f07d82f
1 parent f0cd38d
commit f07d82f
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/components/TextSection.vue b/components/TextSection.vue
@@ -1,5 +1,5 @@
 <template>
-  <p class="text-base font-semibold tracking-tight text-evening-sea-800 dark:text-blade-200">
+  <p class="text-base font-medium  tracking-tight text-evening-sea-800 dark:text-blade-200">
     {{ title }}
   </p>
   <p class="mt-2 text-sm text-lunar-900/80 dark:text-lunar-200/70">

diff --git a/components/project/ProjectShow.vue b/components/project/ProjectShow.vue
@@ -78,20 +78,21 @@
             <h3 class="text-sm font-semibold text-lunar-700 dark:text-aro-200">Tech stack</h3>
             <div class="my-10 grid grid-cols-4 gap-5">
               <div v-for="skill in project.stack" class="mx-auto flex flex-col items-center space-y-3">
-                <div :class="'w-10 h-10 xs:w-14 xs:h-14 flex flex-col justify-center transition-opacity duration-200 ease-in-out'"
+                <div :class="'w-10 h-10 xs:w-14 xs:h-14 flex flex-col overflow-hidden justify-center transition-opacity duration-200 ease-in-out'"
                 >
                   <!-- Regular icon with conditional classes -->
                   <img
                       :src="getFullUrl(skill.value.icon.url)"
                       :alt="skill.value.icon.alt"
                       :class="skill.value.icon_dark_mode ? 'dark:hidden' : ''"
+                      class="max-w-full max-h-full object-contain"
                   />
                   <!-- Dark icon (only if provided) -->
                   <img
                       v-if="skill.value.icon_dark_mode"
                       :src="getFullUrl(skill.value.icon_dark_mode.url)"
                       :alt="skill.value.icon_dark_mode.alt"
-                      class="hidden dark:inline-block"
+                      class="hidden dark:inline-block max-w-full max-h-full object-contain"
                   />
                 </div>
                 <p class="text-sm text-lunar-800 dark:text-lunar-100">

diff --git a/components/skills/SkillCard.vue b/components/skills/SkillCard.vue
@@ -6,22 +6,24 @@
   >
     <div class="flex-1 p-5">
 
-      <div :class="'w-10 h-10 xs:w-14 xs:h-14 flex flex-col justify-center transition-opacity ' + (isHovered ? ' opacity-100' : ' opacity-90 dark:opacity-90')"
+      <div :class="'w-10 h-10 xs:w-14 xs:h-14 flex flex-col justify-center transition-opacity overflow-hidden ' + (isHovered ? ' opacity-100' : ' opacity-90 dark:opacity-90')"
       >
         <!-- Regular icon with conditional classes -->
         <img
             :src="getIconUrl(skill.icon.url)"
             :alt="skill.icon.alt"
             :class="skill.icon_dark_mode ? 'dark:hidden' : ''"
+            class="max-w-full max-h-full object-contain"
         />
         <!-- Dark icon (only if provided) -->
         <img
             v-if="skill.icon_dark_mode"
             :src="getIconUrl(skill.icon_dark_mode.url)"
             :alt="skill.icon_dark_mode.alt"
-            class="hidden dark:inline-block"
+            class="hidden dark:inline-block max-w-full max-h-full object-contain"
         />
       </div>
+
     </div>
     <div
         :class="'w-full p-1 transition-opacity ' + (isHovered ? ' opacity-100' : ' opacity-0')"