Skip to content

Commit

Permalink
fixed various minor visual things, including color on dropdown button…
Browse files Browse the repository at this point in the history 
…, visuals on about me on extremely small screens and making icon buttons not load bigger than they should be
  • Loading branch information
@Kahera
Kahera committed Dec 26, 2023
1 parent 0545c09 commit 44cdbe4
Show file tree
Hide file tree
Showing 6 changed files with 71 additions and 63 deletions.
2 changes: 1 addition & 1 deletion src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
11 changes: 5 additions & 6 deletions src/components/ButtonComponent.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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';
}
});
Expand All @@ -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"
Expand Down
6 changes: 5 additions & 1 deletion src/components/DropdownComponent.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@ defineProps({
buttonType: {
type: String as PropType<'outline' | 'solid'>,
default: 'outline'
},
buttonSize: {
type: String as PropType<'sm' | 'md' | 'lg'>,
default: 'md'
}
});
Expand Down Expand Up @@ -39,7 +43,7 @@ onUnmounted(() => {
<Button
class="dropdown-btn"
:type="'solid'"
:size="'lg'"
:size="buttonSize"
:icon="dropdownOpen ? 'close' : 'menu'"
@click="toggleDropdown()"
/>
Expand Down
18 changes: 9 additions & 9 deletions src/components/NavbarComponent.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -65,24 +65,24 @@ 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')"
:key="route.path"
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"
Expand Down
2 changes: 1 addition & 1 deletion src/views/About/AboutView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
95 changes: 50 additions & 45 deletions tailwind.config.js
View file
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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 = []

0 comments on commit 44cdbe4

Please sign in to comment.