Adding responsive

HE-Arc · Dec 15, 2023 · cfa9e16 · cfa9e16
1 parent 29b130e
commit cfa9e16
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 26 deletions.
diff --git a/resources/css/app.scss b/resources/css/app.scss
@@ -16,7 +16,7 @@ body {
 
 #bg-bricks {
     background: url("../../public/img/bricks.png"), $background;
-    background-size: 100%;
+    background-size: 300%;
     position: absolute;
     top: 0;
     right: 0;
@@ -65,15 +65,14 @@ h2 {
 
 .neon-text-effect-magenta {
     color: white;
-    -webkit-text-stroke: 1px;
+    -webkit-text-stroke: 0px;
     -webkit-text-stroke-color: $magenta;
-    text-shadow: 0 .4rem 3px rgba(0, 0, 0, .5), 0 0 10px $magenta, 0 0 20px $magenta, 0 0 30px $magenta, 0 0 40px $magenta, 0 0 70px $magenta, 0 0 80px $magenta, 0 0 100px $magenta, 0 0 150px $magenta;
-
+    text-shadow: 0 .4rem 3px rgba(0, 0, 0, .5), 0 0 10px $magenta, 0 0 20px $magenta, 0 0 30px $magenta, 0 0 40px $magenta, 0 0 70px $magenta, 0 0 80px $magenta;
 }
 
 .neon-text-effect-cyan {
     color: white;
-    -webkit-text-stroke: 1px;
+    -webkit-text-stroke: 0px;
     -webkit-text-stroke-color: $cyan;
     text-shadow: 0 .4rem 3px rgba(0, 0, 0, .5), 0 0 10px $cyan, 0 0 20px $cyan, 0 0 30px $cyan, 0 0 40px $cyan;
 }
@@ -92,12 +91,15 @@ h2 {
     outline-offset: -5px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     color: white;
+
     &::placeholder {
         color: white;
     }
+
     &:active {
         @extend .neon-effect-cyan;
     }
+
     &:focus {
         @extend .neon-effect-cyan;
     }
@@ -115,30 +117,31 @@ h2 {
     border-radius: 2.5rem;
 }
 
-.btn
-{
-    padding : 0.75rem 1.25rem;
+.btn {
+    padding: 0.75rem 1.25rem;
     border-radius: 2.5rem;
     outline: 2px solid white;
     outline-offset: -3px;
     transition: all .3s ease-in-out;
     background: none;
 }
-.btn-cyan
-{
+
+.btn-cyan {
     border: 4px solid cyan;
     box-shadow: 0 .3rem 2px rgba(0, 0, 0, .5), 0 0 10px $cyan, 0 0 10px $cyan, 0 0 10px $cyan, inset 0 0 10px $cyan, inset 0 0 10px $cyan, inset 0 0 10px $cyan;
-    &:hover{
+
+    &:hover {
         cursor: pointer;
         background-color: $cyan;
         color: $background;
     }
 }
-.btn-magenta
-{
+
+.btn-magenta {
     border: 4px solid $magenta;
     box-shadow: 0 .3rem 2px rgba(0, 0, 0, .5), 0 0 10px $magenta, 0 0 10px $magenta, 0 0 10px $magenta, inset 0 0 10px $magenta, inset 0 0 10px $magenta, inset 0 0 10px $magenta;
-    &:hover{
+
+    &:hover {
         cursor: pointer;
         background-color: $magenta;
         color: $background;
@@ -149,6 +152,7 @@ header {
     display: flex;
     justify-content: center;
     align-items: center;
+    margin-top: 4rem;
 
     .header-container {
         display: flex;
@@ -163,13 +167,14 @@ header {
 
         #main-title {
             font-family: $neon-font;
-            font-size: 7.75rem;
+            font-size: 3rem;
             text-align: center;
         }
 
         #subtitle {
             font-family: $secondary-neon-font;
-            font-size: 1.75rem;
+            font-size: 0.65rem;
+            display: none;
             position: absolute;
             right: 0;
             bottom: 0;
@@ -215,8 +220,8 @@ header {
             -webkit-text-stroke-color: $magenta;
             text-shadow: 0 .4rem 3px rgba(0, 0, 0, .5), 0 0 10px $magenta, 0 0 20px $magenta, 0 0 30px $magenta, 0 0 40px $magenta, 0 0 70px $magenta, 0 0 80px $magenta, 0 0 100px $magenta, 0 0 150px $magenta;
         }
-        &.closeNavBtn
-        {
+
+        &.closeNavBtn {
             font-size: 2.5rem;
         }
     }
@@ -232,6 +237,7 @@ header {
         cursor: pointer;
     }
 }
+
 .icon-burger {
     div {
         width: 30px;
@@ -266,10 +272,10 @@ header {
 /*****    SUCCESS     *****/
 /**************************/
 .success-container {
-    .nb-tries
-    {
+    .nb-tries {
         margin-top: 1rem;
     }
+
     margin-bottom: 3.125rem;
 
     .music-container {
@@ -295,8 +301,8 @@ header {
             background-color: $background;
         }
     }
-    .button-container
-    {
+
+    .button-container {
         display: flex;
         align-items: center;
         justify-content: center;
@@ -310,11 +316,12 @@ header {
 /**************************/
 
 .stats-container {
-    .stats{
+    .stats {
         padding: 1.5rem 1.75rem;
         display: grid;
         grid-template-columns: 3fr 2fr;
         row-gap: 1rem;
+
         span:nth-child(even) {
             text-align: right;
         }
@@ -325,20 +332,74 @@ header {
 /***** MEDIA QUERIES  *****/
 /**************************/
 @media (min-width: 576px) {
+    #bg-bricks {
+        background-size: 200%;
+    }
+    header {
+        margin-top: 0;
+        .title-container {
+            #main-title {
+                font-size: 5rem;
+            }
+
+            #subtitle {
+                display: inline;
+                font-size: 1.125rem;
+            }
+        }
+    }
 
     .container {
         max-width: 540px;
     }
+
     .small-container {
         max-width: 420px;
     }
+
+    .neon-text-effect-magenta {
+        -webkit-text-stroke: 0px;
+        -webkit-text-stroke-color: $magenta;
+        text-shadow: 0 .4rem 3px rgba(0, 0, 0, .5), 0 0 10px $magenta, 0 0 20px $magenta, 0 0 30px $magenta, 0 0 40px $magenta, 0 0 70px $magenta, 0 0 80px $magenta;
+    }
+
+    .neon-text-effect-cyan {
+        -webkit-text-stroke: 0px;
+        -webkit-text-stroke-color: $cyan;
+        text-shadow: 0 .4rem 3px rgba(0, 0, 0, .5), 0 0 10px $cyan, 0 0 20px $cyan, 0 0 30px $cyan, 0 0 40px $cyan;
+    }
 }
 
 @media (min-width: 768px) {
+    #bg-bricks {
+        background-size: 100%;
+    }
+    header .title-container {
+        #main-title {
+            font-size: 7.75rem;
+        }
+
+        #subtitle {
+            font-size: 1.75rem;
+        }
+    }
+
     .container {
         max-width: 720px;
     }
 
+    .neon-text-effect-magenta {
+        -webkit-text-stroke: 1px;
+        -webkit-text-stroke-color: $magenta;
+        text-shadow: 0 .4rem 3px rgba(0, 0, 0, .5), 0 0 10px $magenta, 0 0 20px $magenta, 0 0 30px $magenta, 0 0 40px $magenta, 0 0 70px $magenta, 0 0 80px $magenta, 0 0 100px $magenta, 0 0 150px $magenta;
+    }
+
+    .neon-text-effect-cyan {
+        -webkit-text-stroke: 1px;
+        -webkit-text-stroke-color: $cyan;
+        text-shadow: 0 .4rem 3px rgba(0, 0, 0, .5), 0 0 10px $cyan, 0 0 20px $cyan, 0 0 30px $cyan, 0 0 40px $cyan;
+    }
+
 }
 
 
@@ -391,7 +452,8 @@ header {
         position: relative;
         z-index: 1;
         border: 7px solid cyan;
-        border-radius: 20px; /* Ajustez la valeur selon vos préférences */
+        border-radius: 20px;
+        /* Ajustez la valeur selon vos préférences */
         padding: 8px 12px;
         background: none;
         color: #4a5568;
@@ -405,4 +467,3 @@ header {
         }
     }
 }
-
diff --git a/resources/js/components/comparaison.vue b/resources/js/components/comparaison.vue
@@ -342,7 +342,8 @@ watch(data, (proxyObject) => {
 }
 
 .criterions {
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr;
     justify-content: space-between;
     align-items: center;
     margin-top: 20px;
@@ -363,4 +364,16 @@ watch(data, (proxyObject) => {
     justify-content: center;
     margin-top: 40px;
 }
+@media (min-width: 576px) {
+    .criterions
+    {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+@media (min-width: 768px) {
+    .criterions
+    {
+        grid-template-columns: repeat(5, 1fr);
+    }
+}
 </style>