WIP

src/assets/base.css

@@ -8,6 +8,7 @@
 
   --header-size-small: 64px;
   --header-size-big: 128px;
+  --header-size: var(--header-size-small);
 }
 
 /* semantic color variables for this project */
@@ -19,7 +20,6 @@
   --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 {
@@ -44,7 +44,7 @@ body.theme-dark {
   }
 }
 
-@media (min-width: 1024px) {
+@media (min-height: 800px) {
   :root {
     --header-size: var(--header-size-big);
   }

src/components/Question.vue

@@ -93,6 +93,7 @@ function slideMove(splide, newIndex) {
     width: 1.6rem
 .splide__pagination
   bottom: -1.5em
+  display: none
 .splide__pagination__page
   width: .7rem
   height: .7rem
@@ -108,7 +109,7 @@ legend
   text-align: center
   font-size: 1.4rem
   line-height: 2rem
-  margin: 1rem
+  font-weight: bold
 
 .choices
   list-style-type: none
@@ -116,12 +117,15 @@ legend
   display: inline-block
   padding-left: 0
 
+  label
+    cursor: pointer
+
   input[type=radio]
     display: none
 
     & + label
       position: relative
-      padding-left: 2rem
+      padding: .2rem .2rem .2rem 2rem
     & + label::before,
     & + label::after
       display: block
@@ -130,20 +134,22 @@ legend
       content:''
       border-radius: 1rem
     & + label::before
-      bottom: 0
+      bottom: .3rem
       left: 0
       background-color: var(--color-green)
       width: 1rem
       height: 1rem
     & + label::after
-      bottom: 3px
+      bottom: calc(3px + .3rem)
       left: 3px
       width: calc(1rem - 6px)
       height: calc(1rem - 6px)
+    &:checked + label
+      text-shadow: -0.06ex 0 0 currentColor, 0.06ex 0 0 currentColor
     &:checked + label::before
-      background-color: white
-    &:checked + label::after
       background-color: var(--color-green)
+    &:checked + label::after
+      background-color: white
 
 .main
   height: 100%
@@ -163,6 +169,9 @@ legend
     max-width: 100%
     min-width: 280px
 
+    @media (max-height: 600px)
+      margin: 1rem auto
+
   h2
     font-size: 2rem
 

src/components/Score.vue

@@ -9,6 +9,7 @@ import { Splide, SplideSlide } from "@splidejs/vue-splide";
 import Question from "./Question.vue";
 import "@splidejs/splide/dist/css/splide.min.css";
 import ScoreHeader from "./ScoreHeader.vue";
+import html2canvas from "html2canvas";
 
 const props = defineProps({
   id: {
@@ -110,6 +111,16 @@ function nextQuestion() {
     console.log(slides);
   }, 100);
 }
+
+async function share() {
+  console.log(document.querySelector(".latest"));
+  const canvas = await html2canvas(document.querySelector("html"));
+  let anchor = document.createElement("a");
+  anchor.download = "download.png";
+  anchor.href = canvas.toDataURL("image/png");
+  anchor.click();
+  anchor.remove();
+}
 </script>
 
 <template>
@@ -135,7 +146,7 @@ function nextQuestion() {
         @nextQuestion="nextQuestion"
       />
     </SplideSlide>
-    <SplideSlide class="latest" id="details">
+    <SplideSlide class="latest">
       <template v-if="displayScoreResult && result">
         <div>
           <h2 class="center">Probabilité d'échec</h2>
@@ -162,7 +173,7 @@ function nextQuestion() {
               </li>
             </ul>
           </div>
-          <button>Partager</button>
+          <button @click="() => share()">Partager</button>
         </div>
       </template>
       <template v-else>
@@ -251,17 +262,23 @@ label
       line-height: 2rem
       font-size: 2.6rem
 
+    @media (max-height: 600px)
+      font-size: 1.5rem
+      & + h2
+        font-size: 2rem
+
   ul
     text-align: left
     padding-left: 1.5rem
     list-style-type: disc
 
   .details
-    text-align: left
-    font-size: 1.1rem
+    text-align: left !important
+    font-family: serif
+    font-size: .9rem
+    line-height: normal
+    background: var(--color-highlight-background)
     border: 1px solid var(--color-highlight-text)
-    background: var(--color-text)
-    margin: 1rem
     padding: 1rem
 
 .gradient

src/components/ScoresList.vue

@@ -123,6 +123,7 @@ function getTranslation(translations, key) {
     </ul>
   </header>
   <main>
+    <img src="/homepage.webp" class="homeImage" />
     <div class="container" v-if="scores">
       <ul>
         <template v-for="(score, index) in scores" :key="score.id">
@@ -177,14 +178,27 @@ header
 main
   width: 100%
   height: calc(100% - var(--header-size))
-  padding: 1rem
+  background-color: var(--color-background)
+  overflow-x: hidden
+  overflow-y: auto
+  text-align: center
+
+  .homeImage
+    height: 30vh
+    width: calc(100% + 2rem)
+    padding: 0
+    max-width: 600px
+    object-fit: cover
+    margin-left: -1rem
+    margin: 0 auto
+
+.container
   display: flex
   justify-content: center
   align-items: center
   overflow: hidden
-  background-color: var(--color-background)
+  padding: 1rem
 
-.container
   ul
     margin: 0
     padding: 0
@@ -193,6 +207,7 @@ main
     flex-wrap: wrap
     justify-content: center
     max-width: 404px
+    border: 1px solid var(--color-green)
 
     li
       height: 202px
@@ -206,6 +221,7 @@ main
 
     a
       font-size: 2rem
+      line-height: 2rem
       color: var(--color-green)
       display: block
       width: 100%
@@ -215,4 +231,5 @@ main
       justify-content: center
       text-align: center
       padding: 1rem
+      text-decoration: none
 </style>