From 780563d6bd190a8400d35b9c25802a9cfa937b7d Mon Sep 17 00:00:00 2001
From: "nicolas.marsal" <nicolas.marsal@sundayapp.com>
Date: Mon, 1 Aug 2022 22:46:14 +0200
Subject: [PATCH] feat: externalize css

---
 src/App.vue                                   |  15 +-
 src/assets/main.css                           | 199 ++++++++++++++++++
 src/components/common/LeftSection.vue         |  47 +----
 src/components/common/RightSection.vue        |  45 +---
 src/components/education/EducationItem.vue    |  36 +---
 src/components/experiences/MyExperiences.vue  |  68 ++----
 .../informations/FirstNameAndLastName.vue     |   3 +-
 src/components/informations/MyHobbies.vue     |   4 +-
 .../informations/MyInformations.vue           |  30 +--
 src/components/informations/MyLanguages.vue   |   6 +-
 .../informations/MyPresentation.vue           |   2 +-
 11 files changed, 249 insertions(+), 206 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3a320f6..f569633 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,13 +8,13 @@ import MyExperiences from "@/components/experiences/MyExperiences.vue";
 import WordCloud from "@/components/common/WordCloud.vue";
 import LeftSection from "@/components/common/LeftSection.vue";
 import MyPresentation from "@/components/informations/MyPresentation.vue";
+import FirstNameAndLastName from "@/components/informations/FirstNameAndLastName.vue";
 </script>
 
 <template>
   <div class="main">
     <div class="left">
-      <div class="first-name">{{ informations.firstName }}</div>
-      <div class="last-name">{{ informations.lastName }}</div>
+      <FirstNameAndLastName />
       <MyInformations />
       <LeftSection :title="$t('section.skills')">
         <div
@@ -62,17 +62,6 @@ export default defineComponent({
   height: 100%;
 }
 
-.first-name {
-  font-size: 36px;
-  text-align: left;
-  padding-left: 16px;
-}
-.last-name {
-  font-size: 40px;
-  text-align: right;
-  margin-right: 16px;
-}
-
 .title {
   font-size: 40px;
   text-align: center;
diff --git a/src/assets/main.css b/src/assets/main.css
index ca4ed53..3529151 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -3,3 +3,202 @@
     flex-direction: row;
     justify-content: center;
 }
+
+.left-section-wrapper {
+    display: flex;
+    flex-direction: column;
+    /*margin-bottom: 14px;*/
+}
+.left-section-title {
+    font-size: 24px;
+    font-weight: bolder;
+    font-variant: small-caps;
+    text-transform: capitalize;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    padding-left: 8px;
+    text-align: center;
+    width: auto;
+}
+.left-section-title::before,
+.left-section-title::after {
+    content: "";
+    border-top: 1px solid gray;
+    width: 100%;
+}
+
+.left-section-title::before {
+    margin-right: 12px;
+}
+
+.left-section-title::after {
+    margin-left: 12px;
+}
+.left-section-body {
+    flex: 1;
+    padding: 8px 16px;
+}
+
+.right-section-wrapper {
+    display: flex;
+    flex-direction: column;
+}
+.right-section-title {
+    font-size: 24px;
+    font-weight: bolder;
+    font-variant: small-caps;
+    text-transform: capitalize;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    padding-right: 8px;
+    text-align: center;
+    width: auto;
+}
+.right-section-title::before,
+.right-section-title::after {
+    content: "";
+    border-top: 1px solid gray;
+    width: 100%;
+}
+
+.right-section-title::before {
+    margin-right: 12px;
+}
+
+.right-section-title::after {
+    margin-left: 12px;
+}
+.right-section-body {
+    flex: 1;
+}
+
+.education-item-wrapper {
+    margin-bottom: 16px;
+}
+.education-item-year,
+.education-item-degree {
+    font-size: 16px;
+}
+.education-item-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+.education-item-body {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    font-size: 14px;
+}
+.education-item-location {
+    font-style: italic;
+}
+
+.my-experiences-experience {
+    margin-left: 20px;
+    margin-right: 20px;
+}
+.my-experiences-experience:first-child {
+    padding-top: 10px;
+}
+.my-experiences-experience:nth-child(n + 2) {
+    padding-top: 20px;
+}
+.my-experiences-mission {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+.my-experiences-missions {
+    margin-top: 8px;
+    margin-bottom: 8px;
+    font-size: 14px;
+}
+.my-experiences-mission:nth-child(n + 2) {
+    padding-top: 8px;
+}
+.my-experiences-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: baseline;
+    border-bottom: 1px solid lightgray;
+}
+.my-experiences-role {
+    flex-basis: 0;
+    flex-grow: 2;
+    text-align: center;
+    font-size: 18px;
+}
+.my-experiences-company {
+    font-size: 16px;
+    margin-right: auto;
+    flex-basis: 0;
+    flex-grow: 1;
+}
+.my-experiences-date {
+    font-style: italic;
+    font-size: 14px;
+    margin-left: auto;
+    flex-basis: 0;
+    flex-grow: 1;
+    text-align: right;
+}
+
+.my-experiences-mission-skills {
+    flex: 1 1;
+    font-size: 12px
+}
+
+.my-experiences-mission-description{
+    flex: 3 1;
+}
+.first-name {
+    font-size: 36px;
+    text-align: left;
+    padding-left: 16px;
+}
+.last-name {
+    font-size: 40px;
+    text-align: right;
+    margin-right: 16px;
+}
+
+.hobby {
+    font-size: 16px;
+}
+
+.my-informations-line {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    align-items: center;
+    font-size: 15px;
+    margin-bottom: 6px;
+}
+
+.my-informations-address {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    flex-direction: column;
+}
+
+.my-languages-line {
+}
+
+.my-presentation {
+    padding-left: 20px;
+    padding-top: 20px;
+    padding-bottom: 8px;
+    padding-right: 20px;
+    font-size: 14px;
+}
diff --git a/src/components/common/LeftSection.vue b/src/components/common/LeftSection.vue
index 8740062..5cbea61 100644
--- a/src/components/common/LeftSection.vue
+++ b/src/components/common/LeftSection.vue
@@ -5,53 +5,14 @@ defineProps<{
 </script>
 
 <template>
-  <div class="wrapper">
-    <div class="title">
+  <div class="left-section-wrapper">
+    <div class="left-section-title">
       {{ title }}
     </div>
-    <div class="body">
+    <div class="left-section-body">
       <slot></slot>
     </div>
   </div>
 </template>
 
-<style scoped>
-.wrapper {
-  display: flex;
-  flex-direction: column;
-  /*margin-bottom: 14px;*/
-}
-.title {
-  font-size: 24px;
-  font-weight: bolder;
-  font-variant: small-caps;
-  text-transform: capitalize;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding-top: 8px;
-  padding-bottom: 8px;
-  padding-left: 8px;
-  text-align: center;
-  width: auto;
-}
-.title::before,
-.title::after {
-  content: "";
-  border-top: 1px solid gray;
-  width: 100%;
-}
-
-.title::before {
-  margin-right: 12px;
-}
-
-.title::after {
-  margin-left: 12px;
-}
-.body {
-  flex: 1;
-  padding: 8px 16px;
-}
-</style>
+<style scoped></style>
diff --git a/src/components/common/RightSection.vue b/src/components/common/RightSection.vue
index 50caec4..9cd5a5b 100644
--- a/src/components/common/RightSection.vue
+++ b/src/components/common/RightSection.vue
@@ -5,51 +5,14 @@ defineProps<{
 </script>
 
 <template>
-  <div class="wrapper">
-    <div class="title">
+  <div class="right-section-wrapper">
+    <div class="right-section-title">
       {{ title }}
     </div>
-    <div class="body">
+    <div class="right-section-body">
       <slot></slot>
     </div>
   </div>
 </template>
 
-<style scoped>
-.wrapper {
-  display: flex;
-  flex-direction: column;
-}
-.title {
-  font-size: 24px;
-  font-weight: bolder;
-  font-variant: small-caps;
-  text-transform: capitalize;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding-top: 8px;
-  padding-bottom: 8px;
-  padding-right: 8px;
-  text-align: center;
-  width: auto;
-}
-.title::before,
-.title::after {
-  content: "";
-  border-top: 1px solid gray;
-  width: 100%;
-}
-
-.title::before {
-  margin-right: 12px;
-}
-
-.title::after {
-  margin-left: 12px;
-}
-.body {
-  flex: 1;
-}
-</style>
+<style scoped></style>
diff --git a/src/components/education/EducationItem.vue b/src/components/education/EducationItem.vue
index afb2b85..5f56f39 100644
--- a/src/components/education/EducationItem.vue
+++ b/src/components/education/EducationItem.vue
@@ -5,14 +5,16 @@ defineProps<{
 }>();
 </script>
 <template>
-  <div class="wrapper">
-    <div class="header">
-      <div class="year">{{ data.year }}</div>
-      <div class="degree">{{ data.degree }}</div>
+  <div class="education-item-wrapper">
+    <div class="education-item-header">
+      <div class="education-item-year">{{ data.year }}</div>
+      <div class="education-item-degree">{{ data.degree }}</div>
     </div>
-    <div class="body">
-      <div class="title">{{ data.title }}</div>
-      <div class="location">{{ data.school }} - {{ data.location }}</div>
+    <div class="education-item-body">
+      <div class="education-item-title">{{ data.title }}</div>
+      <div class="education-item-location">
+        {{ data.school }} - {{ data.location }}
+      </div>
     </div>
   </div>
 </template>
@@ -23,22 +25,4 @@ export default {
 };
 </script>
 
-<style scoped>
-.wrapper {
-  margin-bottom: 16px;
-}
-.year,
-.degree {
-  font-size: 18px;
-}
-.header {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-.body {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-}
-</style>
+<style scoped></style>
diff --git a/src/components/experiences/MyExperiences.vue b/src/components/experiences/MyExperiences.vue
index a4f34f0..41bd841 100644
--- a/src/components/experiences/MyExperiences.vue
+++ b/src/components/experiences/MyExperiences.vue
@@ -4,32 +4,32 @@ import RightSection from "@/components/common/RightSection.vue";
 
 <template>
   <RightSection :title="$t('section.experiences')">
-    <div class="experiences">
+    <div class="my-experiences">
       <div
-        class="experience"
+        class="my-experiences-experience"
         v-for="experience in experiences"
         :key="experience.company"
       >
-        <div class="header">
-          <div class="company">
+        <div class="my-experiences-header">
+          <div class="my-experiences-company">
             {{ experience.company }}
           </div>
-          <div class="role">{{ experience.role }}</div>
-          <div class="date">
+          <div class="my-experiences-role">{{ experience.role }}</div>
+          <div class="my-experiences-date">
             {{ experience.startAt }} - {{ experience.endAt }}
           </div>
         </div>
-        <div class="missions">
+        <div class="my-experiences-missions">
           <div
-            class="mission"
+            class="my-experiences-mission"
             v-for="mission in experience.missions"
             :key="mission.description"
-            style="display: flex; flex-direction: row; align-items: center"
+            style=""
           >
-            <div style="flex: 1 1; font-size: 12px">
+            <div class="my-experiences-mission-skills">
               {{ mission.skills.map((s) => s.name).join(", ") }}
             </div>
-            <div style="flex: 3 1">
+            <div class="my-experiences-mission-description" style="">
               {{ mission.description }}
             </div>
           </div>
@@ -53,48 +53,4 @@ export default defineComponent({
 });
 </script>
 
-<style scoped>
-.experience {
-  margin-left: 20px;
-}
-.experience:first-child {
-  padding-top: 10px;
-}
-.experience:nth-child(n + 2) {
-  padding-top: 20px;
-}
-.missions {
-  margin: 8px;
-}
-.mission:nth-child(n + 2) {
-  padding-top: 8px;
-}
-.header {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: baseline;
-  border-bottom: 1px solid lightgray;
-}
-.role {
-  font-size: larger;
-  flex-basis: 0;
-  flex-grow: 2;
-  text-align: center;
-  font-size: 22px;
-}
-.company {
-  font-size: large;
-  margin-right: auto;
-  flex-basis: 0;
-  flex-grow: 1;
-}
-.date {
-  font-style: italic;
-  font-size: small;
-  margin-left: auto;
-  flex-basis: 0;
-  flex-grow: 1;
-  text-align: right;
-}
-</style>
+<style scoped></style>
diff --git a/src/components/informations/FirstNameAndLastName.vue b/src/components/informations/FirstNameAndLastName.vue
index 3df76c6..6bd0be1 100644
--- a/src/components/informations/FirstNameAndLastName.vue
+++ b/src/components/informations/FirstNameAndLastName.vue
@@ -1,5 +1,6 @@
 <template>
-  <div>{{ infos.firstName }} {{ infos.lastName }} !</div>
+  <div class="first-name">{{ infos.firstName }}</div>
+  <div class="last-name">{{ infos.lastName }}</div>
 </template>
 
 <script>
diff --git a/src/components/informations/MyHobbies.vue b/src/components/informations/MyHobbies.vue
index a522836..46fa104 100644
--- a/src/components/informations/MyHobbies.vue
+++ b/src/components/informations/MyHobbies.vue
@@ -4,7 +4,9 @@ import LeftSection from "@/components/common/LeftSection.vue";
 
 <template>
   <LeftSection :title="$t('section.hobbies')">
-    <div v-for="hobby in infos.hobbies" :key="hobby">{{ hobby }}</div>
+    <div v-for="hobby in infos.hobbies" :key="hobby" class="hobby">
+      {{ hobby }}
+    </div>
   </LeftSection>
 </template>
 
diff --git a/src/components/informations/MyInformations.vue b/src/components/informations/MyInformations.vue
index ed245d9..3bf2fc7 100644
--- a/src/components/informations/MyInformations.vue
+++ b/src/components/informations/MyInformations.vue
@@ -4,25 +4,25 @@ import LeftSection from "@/components/common/LeftSection.vue";
 
 <template>
   <LeftSection :title="$t('section.information')">
-    <div class="line">
+    <div class="my-informations-line">
       <font-awesome-icon icon="fa-solid fa-at" />
       <div>{{ infos.email }}</div>
     </div>
-    <div class="line">
+    <div class="my-informations-line">
       <font-awesome-icon icon="fa-solid fa-house-chimney" />
-      <div class="address">
+      <div class="my-informations-address">
         <div v-for="line in infos.address" :key="line">{{ line }}</div>
       </div>
     </div>
-    <div class="line">
+    <div class="my-informations-line">
       <font-awesome-icon icon="fa-solid fa-phone" />
       <div>{{ infos.phoneNumber }}</div>
     </div>
-    <div class="line">
+    <div class="my-informations-line">
       <div></div>
       <div>{{ $t("age", { age: age() }) }}</div>
     </div>
-    <div class="line"></div>
+    <div class="my-informations-line"></div>
   </LeftSection>
 </template>
 
@@ -43,20 +43,4 @@ export default {
 };
 </script>
 
-<style scoped>
-.line {
-  display: flex;
-  justify-content: space-between;
-  flex-direction: row;
-  align-items: center;
-  font-size: 18px;
-  margin-bottom: 6px;
-}
-
-.address {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
-  flex-direction: column;
-}
-</style>
+<style scoped></style>
diff --git a/src/components/informations/MyLanguages.vue b/src/components/informations/MyLanguages.vue
index 6a92827..c8d7c0a 100644
--- a/src/components/informations/MyLanguages.vue
+++ b/src/components/informations/MyLanguages.vue
@@ -3,7 +3,11 @@ import LeftSection from "@/components/common/LeftSection.vue";
 </script>
 <template>
   <LeftSection :title="$t('section.languages')">
-    <div v-for="language in infos.languages" :key="language.name">
+    <div
+      v-for="language in infos.languages"
+      :key="language.name"
+      class="my-languages-line"
+    >
       {{ language.name }}: {{ language.level }}
     </div>
   </LeftSection>
diff --git a/src/components/informations/MyPresentation.vue b/src/components/informations/MyPresentation.vue
index c41f630..5a82781 100644
--- a/src/components/informations/MyPresentation.vue
+++ b/src/components/informations/MyPresentation.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="padding-left: 20px; padding-top: 20px; padding-bottom: 8px">
+  <div class="my-presentation">
     {{ presentation }}
   </div>
 </template>