feat: externalize css

3 years ago · 780563d6bd
11 changed files with 249 additions and 206 deletions
--- 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;
--- 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;
+}
--- 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>
--- 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>
--- 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="education-item-body">
+      <div class="education-item-title">{{ data.title }}</div>
+      <div class="education-item-location">
+        {{ data.school }} - {{ data.location }}
      </div>
-    <div class="body">
-      <div class="title">{{ data.title }}</div>
-      <div class="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>
--- 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>
--- 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>
--- 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>

--- 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>
--- 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>
--- 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>