From 29b130e508da7bcd2c15032bb382a5498858a860 Mon Sep 17 00:00:00 2001 From: Plumey Simon Date: Fri, 15 Dec 2023 10:07:44 +0100 Subject: [PATCH 1/2] Refactoring css --- public/favicon.ico | Bin 0 -> 4286 bytes resources/css/app.scss | 72 +++++------------- resources/css/variables.scss | 2 +- resources/js/components/search-bar.vue | 2 +- resources/views/auth/login.blade.php | 14 ++-- resources/views/auth/register.blade.php | 14 ++-- .../views/components/primary-button.blade.php | 2 +- .../views/components/text-input.blade.php | 2 +- resources/views/game/success.blade.php | 4 +- 9 files changed, 40 insertions(+), 72 deletions(-) diff --git a/public/favicon.ico b/public/favicon.ico index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..6d4fce1153a89458d88dac3bf8520ce15bf0f105 100644 GIT binary patch literal 4286 zcmeHJdr(x@89#S-VR;II0xCv~j~GM17s1D*lm_ScT3JdnEHkPpj#@HMJiC7jPD8JWeEz+{9Vi7->sW0@piChcKO&wtzkGE^O65Y?{x zGX0Ojp{j%72mbnp@vpTWiaGejA;ZD9K4O0^9X7a9Fdh*|^c%avZ^eBqoSbem-Wjp& z0UmyLm{}gALyE>Gv6dSVVTRTNy{=57##={Y*8L zbiq;4AL!rG7iiDFs@2UoIdCMb`gkk5kOMtt9E*Hw$1f-DzWm#;{nclM=H&=Q@;Ti< za^6UJ{mMs+>U<~DYdxfMxRcsb|n3`EuOFs*e12#anS#*7Erc zZK>L*WvMNJQngpy?&j@zSF{t8-s?EeTB-&YINvmtb!lf;G;8lAz0-D$we4~wTVL)g z_}0;z)#V!~wX2=$Zp%$k4ZqAr3I{HyU-WhvZlCw(sb;al4fnPo+?@TD*S4Zh`Zl)*Uq008uo!!5 zbqb=@3iT=JhO5$nrg@E?ccYG-BR*BvviA?v>1$6l zO>J~KN^P22=9BEDR_*GeZDQY~-tNIwPM?@_SC)2oVOi3vS#vGu$?rnLj89Dzm*-)? zT*N97*lS_P8XjGLaGt5DNKk){BHpI{SeE-M`p~}i3NB@z$Ja$S;o9odq*AXHllf_> z(A#a>WW}xY4#m3EtT;3Kxm4kWyiA8s*W9ayxVlr;hKdK^TyKN9$b?TGski+}e|*1HXGx`8h`|K1V+uufMnI2L zQHN(JH$#04xpe*{awEdjL5BQ@;pJ@2ri zKRdzR-E)T3AHHH}y<}e4BT~*nEOl#AC2?S7ujZ*7*09UZwdeRfU-V{o<9bfJcKXqJ z51l2hx&Kc%E&CF0TKspZ zA>&iA@v*=8&Mj+^uV-K5=6q9NsLX|7g0sl(x93_tQoi?VB=b|qWuu!d5*7@3$O+K?! z?sbag?m^!ck4r8W?Mj)iPc4zU)IzD9XUk224CMr7_=0?MzJFJL-xx1Yjon8zy2veHDdp;8 zgjF;ypfi0L?)!gCFy?_V4~%)>zx4oqpzT}vQt*%oV(%!JMlxX^b-je(4JU};EyK@@ LdR+K{#cBGV(RhuM literal 0 HcmV?d00001 diff --git a/resources/css/app.scss b/resources/css/app.scss index 3cd71f5..f22a90d 100644 --- a/resources/css/app.scss +++ b/resources/css/app.scss @@ -52,6 +52,11 @@ h5 { font-size: 1.2rem; } +.instructions { + text-align: center; + margin-bottom: 1rem; +} + h2 { margin-top: 2.5rem; margin-bottom: 1.25rem; @@ -75,7 +80,7 @@ h2 { .neon-effect-cyan { background: none; - border: 7px solid cyan; + border: 7px solid $cyan; outline: 3px solid white; outline-offset: -5px; 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; @@ -83,10 +88,19 @@ h2 { .neon-effect-cyan-off { background: none; - border: 7px solid cyan; - outline: 2px solid rgb(0, 0, 0); + border: 7px solid $cyan-off; 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; + } } .neon-effect-magenta { @@ -108,6 +122,7 @@ h2 { outline: 2px solid white; outline-offset: -3px; transition: all .3s ease-in-out; + background: none; } .btn-cyan { @@ -116,7 +131,7 @@ h2 { &:hover{ cursor: pointer; background-color: $cyan; - color: $cyan-off; + color: $background; } } .btn-magenta @@ -126,7 +141,7 @@ h2 { &:hover{ cursor: pointer; background-color: $magenta; - color: $magenta-off; + color: $background; } } @@ -245,11 +260,6 @@ header { .vue-container { margin-top: 1.5rem; margin-bottom: 3.125rem; - - .instructions { - text-align: center; - margin-bottom: 1rem; - } } /**************************/ @@ -372,48 +382,6 @@ header { /**************************/ /******* Component *******/ /**************************/ -// TODO duplication ? -.neon-effect-cyan { - background: none; - border: 7px solid cyan; - outline: 3px solid white; - outline-offset: -5px; - 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; -} - -.neon-effect-magenta { - background: none; - border: 7px solid magenta; - outline: 3px solid white; - outline-offset: -5px; - 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; -} - -.rounded-input { - border-radius: 20px; - padding: 8px 12px; - background-color: transparent; - color: #ffffff; - - // Style par défaut - @extend .neon-effect-cyan-off; - - // Style pour l'état :active - &:active { - @extend .neon-effect-cyan; - } - - // Style pour l'état :focus - &:focus { - @extend .neon-effect-cyan; - } - - // Style pour l'état :hover - &:hover { - @extend .neon-effect-cyan; - } -} - .tamerecestautrechose { position: relative; diff --git a/resources/css/variables.scss b/resources/css/variables.scss index f851b90..de976d7 100644 --- a/resources/css/variables.scss +++ b/resources/css/variables.scss @@ -1,7 +1,7 @@ $magenta: #FA00FF; $magenta-off: #550B5E; $cyan: #00D1FF; -$cyan-off: #0B5E5E; +$cyan-off: #125e87; $background: #05010B; diff --git a/resources/js/components/search-bar.vue b/resources/js/components/search-bar.vue index e955c87..8be4699 100644 --- a/resources/js/components/search-bar.vue +++ b/resources/js/components/search-bar.vue @@ -36,7 +36,7 @@ async function sendProposition(songId) { -
  • "{{ song.track_name }}" de {{ song.artist_name }}, diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php index c6055d5..da36c1a 100644 --- a/resources/views/auth/login.blade.php +++ b/resources/views/auth/login.blade.php @@ -2,7 +2,7 @@ @extends('layout.app') @section('content') -
    +

    Connectez-vous avec votre email et mot de passe

    @@ -19,7 +19,7 @@
    - +
    @if (Route::has('password.request')) - - {{ __('Forgot your password?') }} + + {{ __('Mot de passe oublié?') }} @endif - - {{ __('Log in') }} + + {{ __('Se connecter') }}
    diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php index cc25cd5..3999c07 100644 --- a/resources/views/auth/register.blade.php +++ b/resources/views/auth/register.blade.php @@ -2,13 +2,13 @@ @extends('layout.app') @section('content') -
    +
    @csrf
    - +
    @@ -22,7 +22,7 @@
    - +
    - + - {{ __('Already registered?') }} + {{ __('Déjà enregistré?') }} - - {{ __('Register') }} + + {{ __('S\'inscrire') }}
    diff --git a/resources/views/components/primary-button.blade.php b/resources/views/components/primary-button.blade.php index 99bf389..180d28c 100644 --- a/resources/views/components/primary-button.blade.php +++ b/resources/views/components/primary-button.blade.php @@ -1,3 +1,3 @@ - diff --git a/resources/views/components/text-input.blade.php b/resources/views/components/text-input.blade.php index 8ca468e..37123cc 100644 --- a/resources/views/components/text-input.blade.php +++ b/resources/views/components/text-input.blade.php @@ -1,7 +1,7 @@ @props(['disabled' => false]) @php -$roundedInputClasses = 'border border-blue-500 bg-transparent text-gray-300 shadow-sm rounded-input'; +$roundedInputClasses = 'border border-blue-500 bg-transparent text-gray-300 shadow-sm neon-effect-cyan-off rounded'; @endphp merge(['class' => $roundedInputClasses]) !!}> diff --git a/resources/views/game/success.blade.php b/resources/views/game/success.blade.php index 447c624..07b3c55 100644 --- a/resources/views/game/success.blade.php +++ b/resources/views/game/success.blade.php @@ -5,8 +5,8 @@
    -

    Success

    - Well Done! +

    Succès

    + Bien joué!
    From cfa9e1624731d9a971c77b77672c6f8dfc8ea368 Mon Sep 17 00:00:00 2001 From: Plumey Simon Date: Fri, 15 Dec 2023 18:06:30 +0100 Subject: [PATCH 2/2] Adding responsive --- resources/css/app.scss | 111 ++++++++++++++++++------ resources/js/components/comparaison.vue | 15 +++- 2 files changed, 100 insertions(+), 26 deletions(-) diff --git a/resources/css/app.scss b/resources/css/app.scss index f22a90d..c7fd880 100644 --- 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 index 69515fb..4721351 100644 --- 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); + } +}