From 58a6da1d94593872910754a7f158c399c39207d5 Mon Sep 17 00:00:00 2001
From: Simon C <simonc@linux.com>
Date: Mon, 24 Apr 2023 23:15:13 +0200
Subject: [PATCH] feat: Modification du design

---
 README.md                      |   4 +
 scripts/fetchData.js           |  21 ++++-
 src/assets/base.css            |  22 ++++-
 src/components/Question.vue    | 130 +++++++++++++++++++------
 src/components/Score.vue       | 118 ++++++++++++++++-------
 src/components/ScoreHeader.vue |   9 +-
 src/components/ScoresList.vue  | 167 ++++++++++++++++++++++-----------
 7 files changed, 343 insertions(+), 128 deletions(-)

diff --git a/README.md b/README.md
index 89b4bd3..aac3380 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,10 @@
 
 Vous trouverez ici le code source de l'application de Scores de [Ceiba Conseil](https://www.ceiba-conseil.com/).
 
+## Information
+
+- Les emojis ont été pris depuis le site https://twemoji-cheatsheet.vercel.app/
+
 ## Recommended IDE Setup
 
 [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-typescript-vue-plugin).
diff --git a/scripts/fetchData.js b/scripts/fetchData.js
index 5c45ab5..d69c915 100644
--- a/scripts/fetchData.js
+++ b/scripts/fetchData.js
@@ -47,12 +47,27 @@ async function fetchData() {
   const url = `/items/scores?${fields
     .map((item) => `fields[]=${item}`)
     .join("&")}`;
-  const data = (await fetchJSONApi(url)).data;
-  await fs.writeFile("./src/data.json", JSON.stringify(data), "utf8");
+  const scores = (await fetchJSONApi(url)).data;
+  await fs.writeFile("./src/data.json", JSON.stringify(scores), "utf8");
 
   const folder = "public/answers";
   if (!existsSync(folder)) mkdirSync(folder);
-  for (const score of data) {
+  for (const score of scores) {
+    const uuid_score = score.image;
+    if (uuid_score) {
+      console.log(`Score image : ${folder}/${uuid_score}`);
+      const response = await fetchAsset(uuid_score);
+      try {
+        const thumbnail = sharp().resize({ height: 200 }).webp();
+        await streamPipeline(
+          response.body,
+          thumbnail,
+          createWriteStream(`${folder}/${uuid_score}.webp`)
+        );
+      } catch (err) {
+        console.log(err);
+      }
+    }
     for (const question of score.questions) {
       for (const answer of question.questions_id.answers) {
         const uuid = answer.answers_id.image;
diff --git a/src/assets/base.css b/src/assets/base.css
index 5bd4f85..6dc337d 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -12,21 +12,35 @@
 
 /* semantic color variables for this project */
 :root, body.theme-light {
+  --color-header-background: var(--color-green);
+  --color-header-text: var(--color-white);
   --color-background: var(--color-white);
   --color-text: var(--color-black);
-  --color-highlight: var(--color-green);
-  --header-size: var(--header-size-small);
+  --color-highlight-background: var(--color-green);
+  --color-highlight-text: var(--color-white);
+  --color-highlight-text-invert: var(--color-black);
+  --header-size: var(--header-size-small)
 }
 
 body.theme-dark {
+  --color-header-background: var(--color-green);
+  --color-header-text: var(--color-black);
   --color-background: var(--color-black);
   --color-text: var(--color-white);
+  --color-highlight-background: var(--color-green);
+  --color-highlight-text: var(--color-black);
+  --color-highlight-text-invert: var(--color-white);
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
+    --color-header-background: var(--color-green);
+    --color-header-text: var(--color-black);
     --color-background: var(--color-black);
     --color-text: var(--color-white);
+    --color-highlight-background: var(--color-green);
+    --color-highlight-text: var(--color-black);
+    --color-highlight-text-invert: var(--color-white);
   }
 }
 
@@ -51,6 +65,10 @@ html, body, #app {
   padding: 0;
 }
 
+#app {
+  min-width: 320px;
+}
+
 body {
   color: var(--color-text);
   background: var(--color-background);
diff --git a/src/components/Question.vue b/src/components/Question.vue
index 658c470..4685473 100644
--- a/src/components/Question.vue
+++ b/src/components/Question.vue
@@ -30,54 +30,120 @@ function slideMove(splide, newIndex) {
 
 <template>
   <div class="main">
-    <div class="top">
+    <div class="center">
       <legend>{{ question.title }}</legend>
+
+      <div class="images">
+        <template v-if="question.answers">
+          <Splide
+            @splide:move="slideMove"
+            class="answers"
+            :id="`question_${question.id}`"
+            ref="slides"
+          >
+            <SplideSlide
+              v-for="answer in question.answers"
+              :key="answer.id"
+              @click="$emit('nextQuestion')"
+            >
+              <img height="200" :src="`/answers/${answer.image}.webp`" />
+            </SplideSlide>
+          </Splide>
+        </template>
+      </div>
+
       <template v-if="question.answers">
-        <div class="choice" v-for="answer in question.answers" :key="answer.id">
-          <label>
+        <ul class="choices">
+          <li
+            class="choice"
+            v-for="answer in question.answers"
+            :key="answer.id"
+          >
             <input
               type="radio"
               :data-answerId="answer.id"
               :name="`question_${question.id}`"
+              :id="`question_${question.id}_answer_${answer.id}`"
               :value="answer.weight"
               v-model="answerWeight"
               @change="selectAnswer(answer)"
               @click="nextQuestion"
             />
-            {{ answer.title }}
-          </label>
-        </div>
-      </template>
-    </div>
-    <div class="bottom">
-      <template v-if="question.answers">
-        <Splide
-          @splide:move="slideMove"
-          class="answers"
-          :id="`question_${question.id}`"
-          ref="slides"
-        >
-          <SplideSlide
-            v-for="answer in question.answers"
-            :key="answer.id"
-            @click="$emit('nextQuestion')"
-          >
-            <img height="200" :src="`/answers/${answer.image}.webp`" />
-          </SplideSlide>
-        </Splide>
+            <label :for="`question_${question.id}_answer_${answer.id}`">
+              {{ answer.title }}
+            </label>
+          </li>
+        </ul>
       </template>
     </div>
   </div>
 </template>
 
 <style lang="sass">
+.splide__arrow
+  background: transparent
+  border: 3px solid var(--color-green)
+  width: 3rem
+  height: 3rem
+  opacity: 1
+
+  svg
+    fill: var(--color-green)
+    height: 1.6rem
+    width: 1.6rem
 .splide__pagination
   bottom: -1.5em
+.splide__pagination__page
+  width: .7rem
+  height: .7rem
+  background: var(--color-green)
+
+  &.is-active
+    background: var(--color-green)
 </style>
 
 <style lang="sass" scoped>
-input[type=radio]
-  margin-right: .5rem
+
+legend
+  text-align: center
+  font-size: 1.4rem
+  line-height: 2rem
+  margin: 1rem
+
+.choices
+  list-style-type: none
+  text-align: left
+  display: inline-block
+  padding-left: 0
+
+  input[type=radio]
+    display: none
+
+    & + label
+      position: relative
+      padding-left: 2rem
+    & + label::before,
+    & + label::after
+      display: block
+      position: absolute
+      box-sizing: border-box
+      content:''
+      border-radius: 1rem
+    & + label::before
+      bottom: 0
+      left: 0
+      background-color: var(--color-green)
+      width: 1rem
+      height: 1rem
+    & + label::after
+      bottom: 3px
+      left: 3px
+      width: calc(1rem - 6px)
+      height: calc(1rem - 6px)
+    &:checked + label::before
+      background-color: white
+    &:checked + label::after
+      background-color: var(--color-green)
 
 .main
   height: 100%
@@ -87,11 +153,19 @@ input[type=radio]
   justify-content: space-around
   align-items: center
 
-  .bottom
+  .center
+    width: 100%
+    text-align: center
+
+  .images
+    margin: 3rem auto
     width: 400px
     max-width: 100%
     min-width: 280px
 
+  h2
+    font-size: 2rem
+
 .answers
   text-align: center
 
@@ -99,6 +173,6 @@ input[type=radio]
   .main
     flex-direction: row
 
-    .bottom
+    .images
       max-width: 50%
 </style>
diff --git a/src/components/Score.vue b/src/components/Score.vue
index c79eea6..7c57745 100644
--- a/src/components/Score.vue
+++ b/src/components/Score.vue
@@ -105,7 +105,10 @@ function answerSelected(question, answerWeight) {
 }
 
 function nextQuestion() {
-  setTimeout(() => slides.value.go(">"), 100);
+  setTimeout(() => {
+    slides.value.go(">");
+    console.log(slides);
+  }, 100);
 }
 </script>
 
@@ -132,23 +135,34 @@ function nextQuestion() {
         @nextQuestion="nextQuestion"
       />
     </SplideSlide>
-    <SplideSlide class="latest">
+    <SplideSlide class="latest" id="details">
       <template v-if="displayScoreResult && result">
-        <ul>
-          <li>score : {{ scoreSum }}</li>
-          <li>pde : {{ result.pde }}</li>
-          <li>pde_qtra : {{ result.pde_qtra }}</li>
-          <li>effets : {{ result.effets }}</li>
-          <li>facteur : {{ result.facteur }}</li>
-        </ul>
-        <div class="gradient">
-          <div
-            v-for="(item, index) in [...Array(7).keys()]"
-            :class="{ active: result && result.pde_qtra === index + 1 }"
-            :key="item"
-          >
-            {{ index + 1 }}
+        <div>
+          <h2 class="center">Probabilité d'échec</h2>
+          <h2 class="center">{{ result.pde_qtra }}</h2>
+          <div class="gradient">
+            <div
+              v-for="(item, index) in [...Array(7).keys()]"
+              :class="{ active: result && result.pde_qtra === index + 1 }"
+              :key="item"
+            >
+              {{ index + 1 }}
+            </div>
           </div>
+          <div class="details">
+            <p>Rappel des paramètres choisis :</p>
+            <ul>
+              <li v-for="question in questions" :key="question.id">
+                {{ question.title }} :
+                {{
+                  question.answers.find(
+                    (answer) => answer.weight === question.weight
+                  ).title
+                }}
+              </li>
+            </ul>
+          </div>
+          <button>Partager</button>
         </div>
       </template>
       <template v-else>
@@ -181,6 +195,8 @@ function nextQuestion() {
 </template>
 
 <style lang="sass" scoped>
+.center
+  text-align: center
 .noscore
   display: flex
   justify-content: center
@@ -205,7 +221,6 @@ function nextQuestion() {
 
 
 .splide__slide
-  background: transparent
   position: relative
   padding: 1rem
 
@@ -222,42 +237,77 @@ label
   padding: .3rem
 
 .latest
-  background-color: var(--color-green)
-  color: var(--color-black)
+  background-color: var(--color-highlight-background)
+  color: var(--color-highlight-text)
+  text-align: center
+  display: flex
+  align-items: center
+  justify-content: center
+
+  h2
+    font-size: 2rem
+    font-weight: bold
+    & + h2
+      line-height: 2rem
+      font-size: 2.6rem
+
+  ul
+    text-align: left
+    padding-left: 1.5rem
+    list-style-type: disc
+
+  .details
+    text-align: left
+    font-size: 1.1rem
+    border: 1px solid var(--color-highlight-text)
+    background: var(--color-text)
+    margin: 1rem
+    padding: 1rem
 
 .gradient
-  width: calc(100% - 2rem)
   padding: 0 1rem
   height: 3rem
   background-image: linear-gradient(to right, red, red, rgb(255, 255, 0), rgb(255, 255, 0), green, green)
   display: flex
-  margin: 2.5rem 0
+  margin: 2.5rem auto
   align-items: center
   border-radius: 3px
-  position: absolute
-  bottom: 0
+  max-width: 30rem
+  text-shadow: 1px 1px 4px var(--color-highlight-text-invert),-1px -1px 4px var(--color-highlight-text-invert), -1px 1px 4px var(--color-highlight-text-invert), 1px -1px 4px var(--color-highlight-text-invert)
+  color: var(--color-highlight-text)
 
   div
     width: calc(100%/7)
     text-align: center
     align-self: center
+    font-weight: bold
 
   .active
-    border: 1px solid black
-    border-radius: 3px
-    height: 200%
-    font-weight: bold
-    display: flex
-    align-items: center
-    justify-content: center
     position: relative
 
-    &::before
-      content: "PdE\AQTRA"
+    &:before
+      content: ""
+      border: 1px solid var(--color-highlight-text)
+      border-radius: 3px
+      top: -2.8rem
+      bottom: -1.5rem
       position: absolute
-      font-size: .5rem
-      top: 0
+      width: 100%
+      font-weight: bold
+      display: flex
+      align-items: center
+      justify-content: center
+
+    &::after
+      content: "PdE"
+      position: absolute
+      font-size: 1rem
+      top: -2rem
+      bottom: -1.5rem
+      left: 0
+      right: 0
       line-height: .7rem
+      text-shadow: none
 
 .splide__arrows
   position: inherit
diff --git a/src/components/ScoreHeader.vue b/src/components/ScoreHeader.vue
index 895320f..b02c36c 100644
--- a/src/components/ScoreHeader.vue
+++ b/src/components/ScoreHeader.vue
@@ -20,11 +20,12 @@ defineProps({
 header {
   height: var(--header-size);
   position: fixed;
-  background: var(--color-green);
+  background: var(--color-header-background);
+  color: var(--color-header-text);
   width: 100%;
   z-index: 1;
   top: 0;
-  border-bottom: 1px solid var(--color-text);
+  border-bottom: 1px solid var(--color-header-text);
   display: flex;
   align-items: center;
   align-content: center;
@@ -39,14 +40,14 @@ a {
   align-items: center;
   text-align: center;
   align-content: center;
-  border-right: 1px solid var(--color-text);
+  border-right: 1px solid var(--color-header-text);
   text-decoration: none;
 }
 
 p {
   margin: 0 auto;
   font-size: 2rem;
-  color: var(--color-text);
+  color: var(--color-header-text);
 }
 
 h1 {
diff --git a/src/components/ScoresList.vue b/src/components/ScoresList.vue
index 5906a66..5144488 100644
--- a/src/components/ScoresList.vue
+++ b/src/components/ScoresList.vue
@@ -27,37 +27,117 @@ function getTranslation(translations, key) {
         @click="store.switchTheme"
         title="Thème de votre système"
       >
-        🌓
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
+          <path
+            fill="#FFD983"
+            d="M18 0v36c9.941 0 18-8.059 18-18S27.941 0 18 0z"
+          />
+          <path
+            fill="#66757F"
+            d="M0 18c0 9.941 8.059 18 18 18V0C8.059 0 0 8.059 0 18z"
+          />
+          <circle fill="#FFCC4D" cx="25.5" cy="8.5" r="3.5" />
+          <circle fill="#5B6876" cx="12" cy="16" r="3" />
+          <circle fill="#5B6876" cx="13.5" cy="27.5" r="3.5" />
+          <circle fill="#5B6876" cx="15" cy="6" r="2" />
+          <circle fill="#FFCC4D" cx="33" cy="18" r="1" />
+          <circle fill="#5B6876" cx="6" cy="9" r="1" />
+          <circle fill="#FFCC4D" cx="21" cy="31" r="1" />
+          <circle fill="#5B6876" cx="4" cy="19" r="2" />
+          <circle fill="#FFCC4D" cx="26" cy="23" r="2" />
+        </svg>
       </li>
       <li
         v-if="store.theme == 'dark'"
         @click="store.switchTheme"
         title="Thème sombre"
       >
-        🌑
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
+          <circle fill="#66757F" cx="18" cy="18" r="18" />
+          <g fill="#5B6876">
+            <circle cx="10.5" cy="8.5" r="3.5" />
+            <circle cx="20" cy="16" r="3" />
+            <circle cx="21.5" cy="27.5" r="3.5" />
+            <circle cx="21" cy="6" r="2" />
+            <circle cx="3" cy="18" r="1" />
+            <circle cx="30" cy="9" r="1" />
+            <circle cx="15" cy="31" r="1" />
+            <circle cx="32" cy="19" r="2" />
+            <circle cx="10" cy="23" r="2" />
+          </g>
+        </svg>
       </li>
       <li
         v-if="store.theme == 'light'"
         @click="store.switchTheme"
         title="Thème clair"
       >
-        🌞
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
+          <circle fill="#FFD983" cx="18" cy="18" r="18" />
+          <g fill="#FFCC4D">
+            <circle cx="10.5" cy="8.5" r="3.5" />
+            <circle cx="20" cy="17" r="3" />
+            <circle cx="24.5" cy="28.5" r="3.5" />
+            <circle cx="22" cy="5" r="2" />
+            <circle cx="3" cy="18" r="1" />
+            <circle cx="30" cy="9" r="1" />
+            <circle cx="15" cy="31" r="1" />
+            <circle cx="32" cy="19" r="2" />
+            <circle cx="10" cy="23" r="2" />
+          </g>
+        </svg>
       </li>
     </ul>
     <h1>Scores Ceiba</h1>
     <ul>
-      <li v-if="store.language == 'fr-FR'" @click="store.switchLanguage">🇫🇷</li>
-      <li v-if="store.language == 'en-US'" @click="store.switchLanguage">🇺🇸</li>
+      <li v-if="store.language == 'fr-FR'" @click="store.switchLanguage">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
+          <path
+            fill="#ED2939"
+            d="M36 27c0 2.209-1.791 4-4 4h-8V5h8c2.209 0 4 1.791 4 4v18z"
+          />
+          <path
+            fill="#002495"
+            d="M4 5C1.791 5 0 6.791 0 9v18c0 2.209 1.791 4 4 4h8V5H4z"
+          />
+          <path fill="#EEE" d="M12 5h12v26H12z" />
+        </svg>
+      </li>
+      <li v-if="store.language == 'en-US'" @click="store.switchLanguage">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
+          <path
+            fill="#B22334"
+            d="M35.445 7C34.752 5.809 33.477 5 32 5H18v2h17.445zM0 25h36v2H0zm18-8h18v2H18zm0-4h18v2H18zM0 21h36v2H0zm4 10h28c1.477 0 2.752-.809 3.445-2H.555c.693 1.191 1.968 2 3.445 2zM18 9h18v2H18z"
+          />
+          <path
+            fill="#EEE"
+            d="M.068 27.679c.017.093.036.186.059.277.026.101.058.198.092.296.089.259.197.509.333.743L.555 29h34.89l.002-.004c.135-.233.243-.483.332-.741.034-.099.067-.198.093-.301.023-.09.042-.182.059-.275.041-.22.069-.446.069-.679H0c0 .233.028.458.068.679zM0 23h36v2H0zm0-4v2h36v-2H18zm18-4h18v2H18zm0-4h18v2H18zM0 9c0-.233.03-.457.068-.679C.028 8.542 0 8.767 0 9zm.555-2l-.003.005L.555 7zM.128 8.044c.025-.102.06-.199.092-.297-.034.098-.066.196-.092.297zM18 9h18c0-.233-.028-.459-.069-.68-.017-.092-.035-.184-.059-.274-.027-.103-.059-.203-.094-.302-.089-.258-.197-.507-.332-.74.001-.001 0-.003-.001-.004H18v2z"
+          />
+          <path fill="#3C3B6E" d="M18 5H4C1.791 5 0 6.791 0 9v10h18V5z" />
+          <path
+            fill="#FFF"
+            d="M2.001 7.726l.618.449-.236.725L3 8.452l.618.448-.236-.725L4 7.726h-.764L3 7l-.235.726zm2 2l.618.449-.236.725.617-.448.618.448-.236-.725L6 9.726h-.764L5 9l-.235.726zm4 0l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L9 9l-.235.726zm4 0l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L13 9l-.235.726zm-8 4l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L5 13l-.235.726zm4 0l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L9 13l-.235.726zm4 0l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L13 13l-.235.726zm-6-6l.618.449-.236.725L7 8.452l.618.448-.236-.725L8 7.726h-.764L7 7l-.235.726zm4 0l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L11 7l-.235.726zm4 0l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L15 7l-.235.726zm-12 4l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L3 11l-.235.726zM6.383 12.9L7 12.452l.618.448-.236-.725.618-.449h-.764L7 11l-.235.726h-.764l.618.449zm3.618-1.174l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L11 11l-.235.726zm4 0l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L15 11l-.235.726zm-12 4l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L3 15l-.235.726zM6.383 16.9L7 16.452l.618.448-.236-.725.618-.449h-.764L7 15l-.235.726h-.764l.618.449zm3.618-1.174l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L11 15l-.235.726zm4 0l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L15 15l-.235.726z"
+          />
+        </svg>
+      </li>
     </ul>
   </header>
   <main>
     <div class="container" v-if="scores">
       <ul>
-        <li v-for="score in scores" :key="score.id" :id="`score_${score.id}`">
-          <router-link :to="{ name: 'score', params: { id: score.id } }">{{
-            getTranslation(score.translations, "languages_id").title
-          }}</router-link>
-        </li>
+        <template v-for="(score, index) in scores" :key="score.id">
+          <li v-if="index % 2 === 0">
+            <img height="200" :src="`/answers/${score.image}.webp`" />
+          </li>
+          <li>
+            <router-link :to="{ name: 'score', params: { id: score.id } }">{{
+              getTranslation(score.translations, "languages_id").title
+            }}</router-link>
+          </li>
+          <li v-if="index % 2 !== 0">
+            <img height="200" :src="`/answers/${score.image}.webp`" />
+          </li>
+        </template>
       </ul>
     </div>
   </main>
@@ -70,8 +150,9 @@ header
   display: flex
   justify-content: space-around
   align-items: center
-  border-bottom: 2px solid var(--color-text)
-  background: var(--color-green)
+  border-bottom: 2px solid var(--color-header-text)
+  color: var(--color-header-text)
+  background: var(--color-header-background)
 
   h1
     text-align: center
@@ -83,6 +164,8 @@ header
     list-style: none
     text-align: center
     font-size: 1.5rem
+    width: 1.5rem
+    height: 2rem
 
     a
       text-decoration: none
@@ -99,62 +182,31 @@ main
   justify-content: center
   align-items: center
   overflow: hidden
-  background-color: var(--color-highlight)
+  background-color: var(--color-background)
 
 .container
-  position: relative
-  width: 100%
-  max-width: 440px
-  max-height: 100%
-  padding-top: calc(100% / (724 / 1136))
-
-  @media only screen and (min-width: 472px)
-    padding-top: 0
-    width: 440px
-    height: calc(440px * 1136 / 724)
-
   ul
     margin: 0
     padding: 0
     list-style: none
-
-    position: absolute
-    top: 0
-    left: 0
-    bottom: 0
-    right: 0
-
-    background-image: url(/arbre.webp)
-    background-position: center
-    background-repeat: no-repeat
-    background-size: contain
-
-    border-radius: 10px
+    display: flex
+    flex-wrap: wrap
+    justify-content: center
+    max-width: 404px
 
     li
-      display: none
+      height: 202px
+      width: 202px
+      max-width: 50%
+      border: 1px solid var(--color-green)
 
-      background: rgba(0, 0, 0, .5)
-      border-radius: 10px
-      position: absolute
-      border: 2px solid var(--color-text)
-
-      &#score_1
-        display: flex
-        top: 40%
-        bottom: 35%
-        left: 20%
-        right: 20%
-
-      &#score_6
-        display: flex
-        top: 72%
-        bottom: 5%
-        left: 6%
-        right: 6%
+    img
+      border: 2px solid var(--color-background)
+      max-width: 100%
 
     a
-      color: var(--color-text)
+      font-size: 2rem
+      color: var(--color-green)
       display: block
       width: 100%
       height: 100%
@@ -162,4 +214,5 @@ main
       align-items: center
       justify-content: center
       text-align: center
+      padding: 1rem
 </style>