From 44cdbe4531fb84576ff78228be82aa8e9cb9a5bc Mon Sep 17 00:00:00 2001
From: June Hansen <44864244+Kahera@users.noreply.github.com>
Date: Tue, 26 Dec 2023 20:15:18 +0100
Subject: [PATCH] fixed various minor visual things, including color on
 dropdown button, visuals on about me on extremely small screens and making
 icon buttons not load bigger than they should be

---
 src/App.vue                          |  2 +-
 src/components/ButtonComponent.vue   | 11 ++--
 src/components/DropdownComponent.vue |  6 +-
 src/components/NavbarComponent.vue   | 18 +++---
 src/views/About/AboutView.vue        |  2 +-
 tailwind.config.js                   | 95 +++++++++++++++-------------
 6 files changed, 71 insertions(+), 63 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a3a8599..8793543 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,7 +9,7 @@ import NavbarComponent from './components/NavbarComponent.vue';
   <NavbarComponent />
 
   <!-- Main page content -->
-  <main class="mx-auto w-10/12 mb-8 md:w-4/5 mt-6 lg:mt-20">
+  <main class="mx-auto max-sm:mx-4 sm:w-10/12 mb-8 md:w-4/5 mt-6 lg:mt-20">
     <RouterView />
   </main>
 </template>
diff --git a/src/components/ButtonComponent.vue b/src/components/ButtonComponent.vue
index d819767..7c2cd76 100644
--- a/src/components/ButtonComponent.vue
+++ b/src/components/ButtonComponent.vue
@@ -51,7 +51,7 @@ const background = computed(() => {
     switch (props.color) {
         case 'primary':
             if (props.type == 'soft') return 'bg-primary/40';
-            return 'bg-primary-hover-bg';
+            return 'primary-hover-bg';
         case 'secondary':
             if (props.type == 'soft') return 'bg-secondary/40';
             return 'secondary-hover-bg';
@@ -150,11 +150,10 @@ const buttonSize = computed(() => {
     switch (props.size) {
         case 'sm':
             return 'px-2 text-sm';
-        case 'md':
-            return 'px-3 py-1 text-base';
-        case 'lg':
+         case 'lg':
             return 'px-3 py-2 text-lg';
-        default: return 'px-3 py-1 text-base';
+         case 'md':
+         default: return 'px-3 py-1 text-base';
     }
 });
 
@@ -174,7 +173,7 @@ const iconSize = computed(() => {
 <template>
   <button
     class="btn flex justify-center space-x-2"
-    :class="[{ 'flex-row-reverse space-x-reverse': iconPosition == 'right' }, background, textColor, border, buttonSize, rounded]"
+    :class="[{ 'flex-row-reverse space-x-reverse': iconPosition == 'right', 'w-[56px] min-w-fit': icon != ''}, background, textColor, border, buttonSize, rounded]"
   >
     <transition
       name="fade"
diff --git a/src/components/DropdownComponent.vue b/src/components/DropdownComponent.vue
index b9520bb..f937a64 100644
--- a/src/components/DropdownComponent.vue
+++ b/src/components/DropdownComponent.vue
@@ -10,6 +10,10 @@ defineProps({
     buttonType: {
         type: String as PropType<'outline' | 'solid'>,
         default: 'outline'
+    },
+    buttonSize: {
+        type: String as PropType<'sm' | 'md' | 'lg'>,
+        default: 'md'
     }
 });
 
@@ -39,7 +43,7 @@ onUnmounted(() => {
     <Button
       class="dropdown-btn"
       :type="'solid'"
-      :size="'lg'"
+      :size="buttonSize"
       :icon="dropdownOpen ? 'close' : 'menu'"
       @click="toggleDropdown()"
     />
diff --git a/src/components/NavbarComponent.vue b/src/components/NavbarComponent.vue
index 2d4c0c2..aa9d554 100644
--- a/src/components/NavbarComponent.vue
+++ b/src/components/NavbarComponent.vue
@@ -29,18 +29,18 @@ function getNavIcon(name: string | undefined) {
 </script>
 
 <template>
-  <header class="flex items-center space-x-4 md:space-x-8 mx-4 md:mx-6 my-2 md:my-4">
+  <header class="flex items-center space-x-4 md:space-x-8 mx-4 md:mx-6 my-3 md:my-4">
     <!-- Logo home-link -->
     <RouterLink
       to="/"
-      class="flex sm:space-x-4 md:space-x-6 max-md:grow"
+      class="flex space-x-4 md:space-x-6 max-md:grow"
     >
       <img
         alt="{{ $t('common.JuneIcon') }}"
         src="@/assets/images/Kahera.webp"
-        class="max-h-12 max-sm:hidden"
+        class="max-h-12 max-xs:hidden"
       >
-      <h1 class="text-center my-auto sm:text-4xl primary-hover-text">
+      <h1 class="text-center my-auto text-xl xxs:text-2xl md:text-3xl lg:text-4xl primary-hover-text">
         {{ $t('common.JuneHansen') }}
       </h1>
     </RouterLink>
@@ -65,15 +65,15 @@ function getNavIcon(name: string | undefined) {
       :size="'lg'"
       :icon="darkModeStore.darkMode ? 'light_mode' : 'dark_mode'"
       class="max-md:hidden focus:outline-1 focus:outline-primary-light"
-      @click=" darkModeStore.toggle()"
+      @click="darkModeStore.toggle()"
     />
-
     <!-- Dropdown navigation for smaller screens -->
     <nav class="md:hidden">
       <!-- Dropdown on small screens, link list on larger -->
       <Dropdown
         :position="'right'"
-        :button-type="'solid'"
+        :button-type="'outline'"
+        :button-size="'lg'"
       >
         <RouterLink
           v-for="route in $router.getRoutes().filter(x => x.name != 'home')"
@@ -81,8 +81,8 @@ function getNavIcon(name: string | undefined) {
           class="flex space-x-2"
           :to="route.path"
         >
-          <span class="font-icon align-middle">{{ getNavIcon(route.name?.toString()) }}</span>
-          <span class="align-middle">{{ $t('pages.' + route.name?.toString()) }}</span>
+          <span class="font-icon align-bottom">{{ getNavIcon(route.name?.toString()) }}</span>
+          <span>{{ $t('pages.' + route.name?.toString()) }}</span>
         </RouterLink>
         <button
           class="w-full"
diff --git a/src/views/About/AboutView.vue b/src/views/About/AboutView.vue
index 375fcd8..d40de6d 100644
--- a/src/views/About/AboutView.vue
+++ b/src/views/About/AboutView.vue
@@ -20,7 +20,7 @@ function updateData() {
 <template>
   <div class="max-w-lg mx-auto">
     <!-- About me -->
-    <div class="w-2/5 -ml-10 md:-ml-20 lg:-ml-28">
+    <div class="w-2/5 max-xxs:hidden -ml-6 sm:-ml-10 md:-ml-20 lg:-ml-28">
       <!-- Popup image -->
       <div class="image-container m-6 float-left relative w-full aspect-[1/1.15] flex items-end rounded-b-full overflow-clip transform transition-transform duration-250 ease-linear hover:scale-105">
         <img
diff --git a/tailwind.config.js b/tailwind.config.js
index e994e16..b5f5b66 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,4 +1,5 @@
 import { gray, green, yellow, red, transparent } from 'tailwindcss/colors';
+import defaultTheme from 'tailwindcss/defaultTheme';
 
 /** @type {import('tailwindcss').Config} */
 // eslint-disable-next-line no-undef
@@ -8,50 +9,54 @@ export const content = [
   "./src/**/*.{vue,js,ts,jsx,tsx}",
 ]
 export const theme = {
-  fontFamily: {
-    'sans': ['Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif'],
-    'display': ['"Merienda"'],
-    'mono': ['ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace'],
-    'icon': ['"Material Symbols Outlined"']
-  },
-  colors: {
-    transparent: transparent,
-    primary: {
-      lightest: "rgb(var(--color-primary-lightest) / <alpha-value>)",
-      lighter: "rgb(var(--color-primary-lighter) / <alpha-value>)",
-      light: "rgb(var(--color-primary-light) / <alpha-value>)",
-      DEFAULT: "rgb(var(--color-primary) / <alpha-value>)",
-      dark: "rgb(var(--color-primary-dark) / <alpha-value>)",
-      darker: "rgb(var(--color-primary-darker) / <alpha-value>)",
-      darkest: "rgb(var(--color-primary-darkest) / <alpha-value>)",
-    },
-    secondary: {
-      lightest: "rgb(var(--color-secondary-lightest) / <alpha-value>)",
-      light: "rgb(var(--color-secondary-light) / <alpha-value>)",
-      DEFAULT: "rgb(var(--color-secondary) / <alpha-value>)",
-      dark: "rgb(var(--color-secondary-dark) / <alpha-value>)",
-      darker: "rgb(var(--color-secondary-darker) / <alpha-value>)",
-      darkest: "rgb(var(--color-secondary-darkest) / <alpha-value>)",
-    },
-    accent: {
-      lightest: "rgb(var(--color-accent-lightest) / <alpha-value>)",
-      lighter: "rgb(var(--color-accent-lighter) / <alpha-value>)",
-      light: "rgb(var(--color-accent-light) / <alpha-value>)",
-      DEFAULT: "rgb(var(--color-accent) / <alpha-value>)",
-      dark: "rgb(var(--color-accent-dark) / <alpha-value>)",
-      darker: "rgb(var(--color-accent-darker) / <alpha-value>)",
-      darkest: "rgb(var(--color-accent-darkest) / <alpha-value>)",
-    },
-    neutral: gray,
-    success: green[500],
-    warning: yellow[500],
-    danger: red[500]
-  },
-  extend: {
-   transitionDuration: {
-      '250': '250ms',
-    }
-  },
+   screens: {
+      'xxs': '320px',
+      'xs': '475px',
+      ...defaultTheme.screens,
+   },
+   fontFamily: {
+      'sans': ['Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif'],
+      'display': ['"Merienda"'],
+      'mono': ['ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace'],
+      'icon': ['"Material Symbols Outlined"']
+   },
+   colors: {
+      transparent: transparent,
+      primary: {
+         lightest: "rgb(var(--color-primary-lightest) / <alpha-value>)",
+         lighter: "rgb(var(--color-primary-lighter) / <alpha-value>)",
+         light: "rgb(var(--color-primary-light) / <alpha-value>)",
+         DEFAULT: "rgb(var(--color-primary) / <alpha-value>)",
+         dark: "rgb(var(--color-primary-dark) / <alpha-value>)",
+         darker: "rgb(var(--color-primary-darker) / <alpha-value>)",
+         darkest: "rgb(var(--color-primary-darkest) / <alpha-value>)",
+      },
+      secondary: {
+         lightest: "rgb(var(--color-secondary-lightest) / <alpha-value>)",
+         light: "rgb(var(--color-secondary-light) / <alpha-value>)",
+         DEFAULT: "rgb(var(--color-secondary) / <alpha-value>)",
+         dark: "rgb(var(--color-secondary-dark) / <alpha-value>)",
+         darker: "rgb(var(--color-secondary-darker) / <alpha-value>)",
+         darkest: "rgb(var(--color-secondary-darkest) / <alpha-value>)",
+      },
+      accent: {
+         lightest: "rgb(var(--color-accent-lightest) / <alpha-value>)",
+         lighter: "rgb(var(--color-accent-lighter) / <alpha-value>)",
+         light: "rgb(var(--color-accent-light) / <alpha-value>)",
+         DEFAULT: "rgb(var(--color-accent) / <alpha-value>)",
+         dark: "rgb(var(--color-accent-dark) / <alpha-value>)",
+         darker: "rgb(var(--color-accent-darker) / <alpha-value>)",
+         darkest: "rgb(var(--color-accent-darkest) / <alpha-value>)",
+      },
+      neutral: gray,
+      success: green[500],
+      warning: yellow[500],
+      danger: red[500]
+   },
+   extend: {
+      transitionDuration: {
+         '250': '250ms',
+      }
+   },
 }
 export const plugins = []
-