✨ ajout du mode noel

package.json

@@ -20,6 +20,8 @@
     "laravel-mix": "^6.0.38",
     "lodash": "^4.17.19",
     "postcss": "^8.2.9",
+    "postcss-loader": "^6.2.1",
+    "postcss-preset-env": "^7.0.1",
     "prettier": "^2.3.1",
     "prettier-standard": "^16.4.1"
   },

postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: [
+    require('tailwindcss'),
+    require('autoprefixer'),
+    require('postcss-preset-env')
+  ]
+}

public/mix-manifest.json

@@ -1,4 +1,4 @@
 {
-    "/js/app.js": "/js/app.js?id=9abd09e80a5426001802",
-    "/css/app.css": "/css/app.css?id=f51b72c7337e6b57d1c3"
+    "/js/app.js": "/js/app.js?id=24a959e67d1d9798dd27",
+    "/css/app.css": "/css/app.css?id=3d37c76c8d0d8755f341"
 }

resources/css/app.css

@@ -12,6 +12,8 @@
 @import "torchlight.css";
 @import "toc.css";
 @import "media-library.css";
+/*@import "rain.css";*/
+@import "christmas.css";
 
 :root {
   --brand-laravel: #FF2D20;

resources/css/base.css

@@ -1,3 +1,7 @@
+html, body {
+  height: 100%;
+}
+
 input {
   width: 100%;
 }

resources/css/rain.css

@@ -0,0 +1,117 @@
+.rain {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+}
+
+.rain.back-row {
+  display: none;
+  z-index: 1;
+  bottom: 60px;
+  opacity: 0.5;
+}
+
+body.back-row-toggle .rain.back-row {
+  display: block;
+}
+
+.drop {
+  position: absolute;
+  bottom: 100%;
+  width: 15px;
+  height: 120px;
+  pointer-events: none;
+  animation: drop 0.5s linear infinite;
+}
+
+@keyframes drop {
+  0% {
+    transform: translateY(0vh);
+  }
+  75% {
+    transform: translateY(90vh);
+  }
+  100% {
+    transform: translateY(90vh);
+  }
+}
+
+.stem {
+  width: 1px;
+  height: 60%;
+  margin-left: 7px;
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25));
+  animation: stem 0.5s linear infinite;
+}
+
+@keyframes stem {
+  0% {
+    opacity: 1;
+  }
+  65% {
+    opacity: 1;
+  }
+  75% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.splat {
+  width: 15px;
+  height: 10px;
+  border-top: 2px dotted rgba(255, 255, 255, 0.5);
+  border-radius: 50%;
+  opacity: 1;
+  transform: scale(0);
+  animation: splat 0.5s linear infinite;
+  display: none;
+}
+
+body.splat-toggle .splat {
+  display: block;
+}
+
+@keyframes splat {
+  0% {
+    opacity: 1;
+    transform: scale(0);
+  }
+  80% {
+    opacity: 1;
+    transform: scale(0);
+  }
+  90% {
+    opacity: 0.5;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.5);
+  }
+}
+
+.splat-toggle {
+  top: 20px;
+}
+
+.back-row-toggle {
+  top: 90px;
+  line-height: 12px;
+}
+
+.single-toggle {
+  top: 160px;
+}
+
+body.single-toggle .drop {
+  display: none;
+}
+
+body.single-toggle .drop:nth-child(10) {
+  display: block;
+}

resources/js/app.js

@@ -6,6 +6,7 @@ import './elements'
 import './helpers'
 import './editor'
 import './scrollspy'
+// import './rain'
 
 // Add Alpine to window object.
 window.Alpine = Alpine;

resources/js/rain.js

@@ -0,0 +1,46 @@
+import { $ } from '@helpers/dom'
+
+let makeItRain = function() {
+  //clear out everything
+  $('.rain').innerHTML = '';
+
+  let increment = 0;
+  let drops = "";
+  let backDrops = "";
+
+  while (increment < 100) {
+    //couple random numbers to use for various randomizations
+    //random number between 98 and 1
+    let randoHundo = (Math.floor(Math.random() * (98 - 1 + 1) + 1));
+    //random number between 5 and 2
+    let randoFiver = (Math.floor(Math.random() * (5 - 2 + 1) + 2));
+    //increment
+    increment += randoFiver;
+    //add in a new raindrop with various randomizations to certain CSS properties
+    drops += '<div class="drop" style="left: ' + increment + '%; bottom: ' + (randoFiver + randoFiver - 1 + 100) + '%; animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"><div class="stem" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div><div class="splat" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div></div>';
+    backDrops += '<div class="drop" style="right: ' + increment + '%; bottom: ' + (randoFiver + randoFiver - 1 + 100) + '%; animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"><div class="stem" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div><div class="splat" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div></div>';
+  }
+
+  $('.rain.front-row').innerHTML += drops;
+  $('.rain.back-row').innerHTML += backDrops;
+}
+
+/*$('.splat-toggle.toggle').addEventListener('click', function() {
+  $('body').classList.toggle('splat-toggle');
+  $('.splat-toggle.toggle').classList.toggle('active');
+  makeItRain();
+});
+
+$('.back-row-toggle.toggle').addEventListener('click', function() {
+  $('body').classList.toggle('back-row-toggle');
+  $('.back-row-toggle.toggle').classList.toggle('active');
+  makeItRain();
+});
+
+$('.single-toggle.toggle').addEventListener('click', function() {
+  $('body').classList.toggle('single-toggle');
+  $('.single-toggle.toggle').classList.toggle('active');
+  makeItRain();
+});*/
+
+makeItRain();

resources/views/auth/login.blade.php

@@ -40,7 +40,7 @@
                 </div>
 
                 <div>
-                    <button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
+                    <button type="submit" class="button group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                         <span class="absolute left-0 inset-y-0 flex items-center pl-3">
                             <x-heroicon-s-lock-closed class="h-5 w-5 text-green-500 group-hover:text-green-400" />
                         </span>

resources/views/components/button.blade.php

@@ -1,11 +1,11 @@
 @props(['link' => null])
 
 @if($link)
-    <a href="{{ $link }}" {{ $attributes->merge(['class' => 'inline-flex items-center justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-body focus:ring-green-500']) }}>
+    <a href="{{ $link }}" {{ $attributes->merge(['class' => 'button inline-flex items-center justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-body focus:ring-green-500']) }}>
         {{ $slot }}
     </a>
 @else
-    <button {{ $attributes->merge(['class' => 'inline-flex items-center justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-body focus:ring-green-500']) }}>
+    <button {{ $attributes->merge(['class' => 'button inline-flex items-center justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-body focus:ring-green-500']) }}>
         {{ $slot }}
     </button>
 @endif

resources/views/components/default-button.blade.php

@@ -1,11 +1,11 @@
 @props(['link' => null])
 
 @if($link)
-    <a href="{{ $link }}" {{ $attributes->merge(['class' => 'inline-flex justify-center py-2 px-4 border border-skin-base rounded-md shadow-sm bg-skin-button text-sm text-skin-base hover:bg-skin-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-body focus:ring-green-500']) }}>
+    <a href="{{ $link }}" {{ $attributes->merge(['class' => 'button inline-flex justify-center py-2 px-4 border border-skin-base rounded-md shadow-sm bg-skin-button text-sm text-skin-base hover:bg-skin-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-body focus:ring-green-500']) }}>
         {{ $slot }}
     </a>
 @else
-    <button {{ $attributes->merge(['class' => 'inline-flex justify-center py-2 px-4 border border-skin-base rounded-md shadow-sm bg-skin-button text-sm text-skin-base hover:bg-skin-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-body focus:ring-green-500']) }}>
+    <button {{ $attributes->merge(['class' => 'button inline-flex justify-center py-2 px-4 border border-skin-base rounded-md shadow-sm bg-skin-button text-sm text-skin-base hover:bg-skin-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-body focus:ring-green-500']) }}>
         {{ $slot }}
     </button>
 @endif

resources/views/components/rain.blade.php

@@ -0,0 +1,2 @@
+<div class="rain front-row"></div>
+<div class="rain back-row"></div>

resources/views/layouts/master.blade.php

@@ -47,7 +47,16 @@
 </head>
 <body class="antialiased font-mono bg-skin-body">
 
-    @yield('content')
+    <div class="relative overflow-hidden min-h-full">
+        <div class="snow"></div>
+
+        @yield('content')
+    </div>
+
+
+    <div class="guirlande h-[120px] -top-8" style="background: url('{{ asset('/images/guirlande1.png') }}') repeat-x 300% top"></div>
+    <div class="guirlande top-[-75px]" style="background: url('{{ asset('/images/guirlande2.png') }}') repeat-x 70% top"></div>
+    <div class="guirlande top-[-50px]" style="background: url('{{ asset('/images/guirlande3.png') }}') repeat-x 10% top"></div>
 
     <x-notifications z-index="z-50" />