various style improvements

components/BadgeSection.vue

@@ -290,7 +290,7 @@ const cols = [
   justify-content: flex-start;
   margin: 12px 0;
   padding: 12px 6px;
-  border: solid 1px rgba(var(--v-theme-on-primary), 0.8);
+  border: solid 1px rgba(var(--v-theme-on-background), 0.2);
   border-radius: 16px;
   flex: 1;
 

components/Cursus.vue

@@ -42,7 +42,7 @@
     margin: 32px auto;
 
     td {
-      padding: 4px 16px !important;
+      padding: 7px 16px !important;
     }
   }
 </style>

lang/fr.json

@@ -3,7 +3,7 @@
   "x_years_experience": "{years} ans d'expérience",
   "x_years": "{years} ans",
   "intro_short": "Ingénieur de formation, développeur fullstack, avec expérience managériale, système et PO.",
-  "intro_part_1": "Depuis 2011, mon parcours professionnel m'a permis de développer des compétences très variées, tant d'un point de vue technique : développement, administration système, QA et intégration continue, gestion de bases de données, moteurs de recherche..., que d'un point de vue managérial : encadrement, tutorat, management agile, intelligence collective, animation de réunion.",
+  "intro_part_1": "Depuis 2011, mon parcours professionnel m'a permis de développer des compétences très variées, tant d'un point de vue technique: développement, administration système, QA et intégration continue, gestion de bases de données, moteurs de recherche..., que d'un point de vue managérial: encadrement, tutorat, management agile, intelligence collective, animation de réunion.",
   "intro_part_2": "J'ai été amené à travailler avec des services de natures diverses: services des eaux, gestion des déchets, travaux ruraux, conservatoires et écoles de musique, réseaux telecom.",
   "intro_part_3": "J'accorde beaucoup d'importance au développement d'un esprit d'équipe, à l'amélioration continue, et à la réalisation d'un travail abouti, testé, documenté.",
   "intro_part_4": "Je maintiens actuellement les librairies opensource <a href='https://github.com/olinox14/path-php' target='_blank'>Path-PHP</a> et <a href='https://github.com/olinox14/xdice' target='_blank'>xdice</a>, et suis l'auteur de la librairie (non-maintenue) <a href='https://github.com/olinox14/FullMd' target='_blank'>FullMD</a>.",
@@ -14,7 +14,7 @@
   "Find me on Stackoverflow": "Retrouvez moi sur Stackoverflow",
   "Find me on LinkedIn": "Retrouvez moi sur LinkedIn",
   "Find me on Codingame": "Retrouvez moi sur Codingame",
-  "Competences": "Competences",
+  "Competences": "Compétences",
   "Cursus": "Cursus",
   "Contact": "Contact",
   "cursus_prepa": "Classe préparatoire (Physique-Chimie)",

pages/index.vue

@@ -14,7 +14,7 @@
     </h2>
   </div>
 
-  <div class="introduction">
+  <v-card class="introduction">
     <div>
       {{ $t('intro_short') }}
     </div>
@@ -22,7 +22,7 @@
     <div v-html="$t('intro_part_4')" />
 
     <v-expand-transition>
-      <div v-if="showLongIntro">
+      <div v-if="showLongIntro" class="long-intro">
         <div>
           {{ $t('intro_part_1') }}
         </div>
@@ -51,7 +51,7 @@
       {{ $t('find_me_on')}}
     </h5>
 
-    <div class="logos mt-3">
+    <div class="logos mt-2">
       <BannerLogo
         href="https://github.com/olinox14"
         :img="theme.global.name.value === 'light' ? '/images/logos/github_large_light.png' : '/images/logos/github_large_dark.png'"
@@ -78,7 +78,7 @@
         :alt="i18n.t('Find me on Codingame')"
       />
     </div>
-  </div>
+  </v-card>
 
   <div class="content">
     <div class="badges">
@@ -128,6 +128,7 @@ const showLongIntro: Ref<boolean> = ref(false)
   align-items: center;
   text-align: center;
   padding: 20px;
+  color: rgb(var(--v-theme-on-background));
 
   h2 {
     margin: 18px 0 36px 0;
@@ -136,20 +137,19 @@ const showLongIntro: Ref<boolean> = ref(false)
 }
 
 .introduction {
-  text-align: justify;
   padding: 36px 64px;
   border-radius: 6px;
-  background: rgb(var(--v-theme-primary-alt));
-  margin-bottom: 36px;
-  border: solid 1px rgb(var(--v-theme-on-primary-alt));
-  color: rgb(var(--v-theme-on-primary-alt));
+  text-align: justify;
+  margin: 0 auto;
+  width: 100%;
 
   :deep(a) {
     color: rgb(var(--v-theme-on-primary-alt--clickable));
   }
 
   div {
-    margin-bottom: 16px;
+    max-width: 900px;
+    margin: 0 auto 16px auto;
   }
 
   .v-btn {

plugins/vuetify.ts

@@ -44,8 +44,8 @@ interface Theme {
 export const lightTheme: Theme = {
   dark: false,
   colors: {
-    'background': '#eef1f7',
-    'on-background': '#000000',
+    'background': '#ffffff',
+    'on-background': '#1a1a1a',
 
     'code-background': '#f6f8fa',
     'on-code-background': '#000000',
@@ -56,8 +56,8 @@ export const lightTheme: Theme = {
     'primary': '#334467',
     'on-primary': '#ffffff',
 
-    'primary-alt': '#657fb3',
-    'on-primary-alt': '#777777',
+    'primary-alt': '#ffffff',
+    'on-primary-alt': '#1a1a1a',
 
     'secondary': '#ced0e4',
     'on-secondary': '#f5f5f5',
@@ -91,7 +91,7 @@ export const darkTheme: Theme = {
   dark: true,
   colors: {
     'background': '#1a1a1a',
-    'on-background': '#ffffff',
+    'on-background': '#e6e6e6',
 
     'code-background': '#161b22',
     'on-code-background': '#ffffff',