Fix typography in dark

This commit is contained in:
2020-12-13 19:37:08 +01:00
parent c6e6aaa41f
commit 8e89c954e9
19 changed files with 107 additions and 100 deletions

View File

@@ -1,5 +1,5 @@
<template>
<ul class="list-disc ml-10 text-gray-800 dark:text-dark-900 text-xl">
<ul class="list-disc ml-10 text-gray-600 dark:text-dark-100 text-xl">
<slot/>
</ul>
</template>

View File

@@ -7,7 +7,7 @@
<span v-else class="inline absolute rounded-full h-4 w-4 bg-gray-500"></span>
</div>
<div class="leading-7">
<p class="text-base dark:text-dark-900 text-gray-800 leading-6">{{ formatDate(begin) }} - {{ formatDate(end) }} <span class="px-3">|</span> {{location}}</p>
<p class="text-base dark:text-dark-100 text-gray-800 leading-6">{{ formatDate(begin) }} - {{ formatDate(end) }} <span class="px-3">|</span> {{location}}</p>
<h1 class="text-2xl font-bold">{{ $t(title) }}</h1>
<h2 class="text-xl">{{ company }}</h2>
</div>

View File

@@ -24,10 +24,11 @@
<span class="link">Mail</span>
</a>
</p>
<span class="inline dark:text-dark-900 text-gray-600 text-xs">
<span class="inline dark:text-dark-200 text-gray-600 text-xs">
{{ $t('footer.links_click') }}
</span>
</div>
<br class="md:hidden"/>
<p>
{{ $t('footer.credits') }}
<a class="font-semibold" target="_blank" href="https://nuxtjs.org">

View File

@@ -7,7 +7,7 @@
<span v-else class="inline absolute rounded-full h-4 w-4 bg-gray-500"></span>
</div>
<div class="leading-7">
<p class="text-base dark:text-dark-900 text-gray-800 leading-6">{{ formatDate(begin) }} - {{ formatDate(end) }} <span class="px-3">|</span> {{location}}</p>
<p class="text-base dark:text-dark-100 text-gray-800 leading-6">{{ formatDate(begin) }} - {{ formatDate(end) }} <span class="px-3">|</span> {{location}}</p>
<h1 class="text-2xl font-bold">{{ $t(title) }}</h1>
<h2 class="text-xl">{{ $t(description) }}</h2>
</div>

View File

@@ -1,5 +1,5 @@
<template>
<header class="dark:bg-dark-200 dark:text-white fixed z-50 top-0 left-0 bg-white header tracking-wider w-full h-16 lg:h-24 duration-500" :class="scrollPosition > 50 ? ' shadow-md dark:shadow-white' : ''">
<header class="dark:bg-dark-900 dark:text-white fixed z-50 top-0 left-0 bg-white header tracking-wider w-full h-16 lg:h-24 duration-500" :class="scrollPosition > 50 ? ' shadow-md dark:shadow-white' : ''">
<div class="header-container z-index-50 flex justify-between items-center h-full px-5 xl:px-64">
<nuxt-link to="/">
<div class="left text-2xl font-bold cursor-pointer border-b-2 border-opacity-0 dark:border-opacity-0 dark:hover:border-opacity-100 hover:border-opacity-100 border-black dark:border-white border-solid duration-500">
@@ -56,7 +56,7 @@
</nuxt-link>
</ul>
</div>
<ul class="dark:text-white dark:bg-dark-200 text-sm z-50 bg-white md:hidden fixed bottom-0 left-0 w-full flex items-center justify-around h-20 border-t border-gray-200 border-solid navbar-bottom-items">
<ul class="dark:text-white dark:bg-dark-800 text-sm z-50 bg-white md:hidden fixed bottom-0 left-0 w-full flex items-center justify-around h-20 border-t border-gray-200 border-solid navbar-bottom-items">
<nuxt-link to="/" class="w-1/5 red">
<li class="font-bold flex flex-col items-center justify-center">
<svg class="inline-block" height="20" width="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -119,8 +119,9 @@ export default {
updateScroll() {
this.scrollPosition = window.scrollY
},
changeLanguage(lang) {
async changeLanguage(lang) {
this.$i18n.setLocale(lang)
await this.$router.push('/')
},
},
mounted() {

View File

@@ -8,7 +8,7 @@
{{ $t(title) }}
<slot />
</h1>
<p class="w-5/6 text-gray-900 dark:text-dark-900 text-justify duration-300">{{ $t(description) }}</p>
<p class="w-5/6 text-gray-900 dark:text-dark-100 text-justify duration-300">{{ $t(description) }}</p>
</div>
<div class="mr-10 arrow duration-300">
<svg class="inline icon" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -46,7 +46,7 @@ export default {
<style scoped lang="scss">
.home-link:hover {
p {
@apply dark:text-dark-200;
@apply dark:text-dark-800;
}
.arrow {

View File

@@ -10,12 +10,12 @@
>{{ title }}</p>
<p
class="text-lg italic text-justify leading-5"
:class="lightBg ? 'text-gray-900':'text-dark-900'"
:class="lightBg ? 'text-gray-900':'text-dark-100'"
>{{ description }}</p>
</div>
<div
class="flex justify-between mt-8 items-end"
:class="lightBg ? 'text-gray-900':'text-dark-900'"
:class="lightBg ? 'text-gray-900':'text-dark-100'"
>
<div>
<div>{{formatDate}}</div>

View File

@@ -1,5 +1,5 @@
<template>
<div class="mb-3 mr-3 p-1 md:p-2 h-48 w-48 border-gray-900 dark:border-dark-800 border-2 duration-300 rounded-3xl hover:bg-opacity-25" :class="'hover:bg-'+color+'-400'">
<div class="mb-3 mr-3 p-1 md:p-2 h-48 w-48 border-gray-900 dark:border-dark-200 border-2 duration-300 rounded-3xl hover:bg-opacity-25" :class="'hover:bg-'+color+'-400'">
<div class="w-full h-full flex flex-col justify-center items-center">
<div>
<img class="rounded-sm" alt="Skill Img" :src="require(`@/assets/img/skills/${cover}.png`)">

View File

@@ -1,5 +1,5 @@
<template>
<div class="mb-3 mr-3 p-1 md:p-2 h-64 w-64 border-gray-900 dark:border-dark-800 border-2 duration-300 rounded-3xl hover:bg-opacity-25 hover:scale-105 transform cursor-pointer" :class="'hover:bg-'+color+ '-600'">
<div class="mb-3 mr-3 p-1 md:p-2 h-64 w-64 border-gray-900 dark:border-dark-200 border-2 duration-300 rounded-3xl hover:bg-opacity-25 hover:scale-105 transform cursor-pointer" :class="'hover:bg-'+color+ '-600'">
<div class="w-full h-full flex flex-col justify-center items-center">
<div class="text-center">
<img alt="Project Img" class="rounded-md" width="150" :src="'http://localhost:5555/files/' + cover">

View File

@@ -1,5 +1,5 @@
<template>
<div class="m-2 p-1 md:p-2 h-48 w-48 border-gray-900 dark:border-dark-800 border-2 duration-300 rounded-3xl hover:bg-opacity-25" :class="'hover:bg-'+color+'-600'">
<div class="m-2 p-1 md:p-2 h-48 w-48 border-gray-900 dark:border-dark-200 border-2 duration-300 rounded-3xl hover:bg-opacity-25" :class="'hover:bg-'+color+'-600'">
<div class="w-full h-full flex flex-col justify-center items-center">
<div>
<img class="rounded-sm" alt="Skill Img" :src="require(`@/assets/img/skills/${cover}.png`)">