User page structure

app/assets/stylesheets/components/matrix.css

@@ -1,6 +1,6 @@
 canvas {
     display: none;
-    position:absolute;
+    position: absolute;
     top:0;
     left:0;
     z-index: -1;

app/assets/stylesheets/components/pagy.css

@@ -6,15 +6,23 @@
 .pagy-nav .page.active,
 .pagy-nav .page.prev.disabled,
 .pagy-nav .page.next.disabled {
-  @apply block rounded-lg px-3 py-1 text-sm text-gray-500 font-semibold bg-gray-200;
+  @apply block rounded-lg text-sm font-semibold;
   &:hover{
-    @apply bg-gray-300;
+    @apply bg-gray-200;
   }
   &:active{
     @apply bg-gray-400 text-white;
   }
 }
 
+.pagy-nav .page a {
+  @apply px-3 py-1;
+}
+
+.pagy-nav .page.active {
+  @apply text-white;
+}
+
 .pagy-nav .page.prev.disabled,
 .pagy-nav .page.next.disabled {
   @apply text-gray-400 cursor-default;

app/assets/stylesheets/components/splash.css

@@ -10,6 +10,7 @@
     align-items: center;
     flex-direction: column;
     padding: 2em;
+    overflow: hidden;
 }
 
 /*.hero:before {*/
@@ -35,18 +36,20 @@
 }
 
 .hero .container {
-
+    margin-bottom: 25%;
 }
 
 .hero h2 {
     /*text-transform: uppercase;*/
+    display: none;
     font-weight: bold;
-    font-size: 2em;
+    font-size: 1.8em;
     line-height: 1em;
     width: 100%;
-    padding: 25px;
-    margin-top: 50vh;
-    margin-bottom: 0;
+    padding: 0;
+    /*margin-top: 50vh;*/
+    /*margin-bottom: 0;*/
+    position: fixed;
 }
 
 @media screen(sm) {
@@ -58,9 +61,11 @@
         content: "";
     }
     .hero h2 {
+        display: inline-block;
         font-size: 4em;
         width: 38%;
-        margin-top: 0;
-        margin-bottom: 100px;
+        padding: 25px;
+        /*margin-top: 0;*/
+        /*margin-bottom: 100px;*/
     }
 }

app/components/admin/container_component.rb

@@ -1,7 +1,7 @@
 module Admin
   class ContainerComponent < ApplicationComponent
     def call
-      tag.div content, class: "container overflow-hidden max-w-5xl pt-24 pb-0 mx-auto flex flex-col justify-center sm:px-6 lg:px-8"
+      tag.div content, class: "container overflow-hidden pt-24 pb-0 mx-auto flex flex-col justify-center"
     end
   end
 end

app/components/admin/content_component.rb

@@ -7,7 +7,7 @@ def initialize(width: "max-w-5xl")
     end
 
     def call
-      tag.div class: class_names("w-full mx-auto mt-8", width) do
+      tag.div class: class_names("w-full mx-auto mt-8") do
         tag.div content, class: "px-4 sm:px-6 lg:px-8"
       end
     end

app/components/developers/card_component.html.erb

@@ -34,7 +34,7 @@
             <%= render Developers::SpecialtiesComponent.new(developer.specialties) %>
         </div>
       </div>
-      <%= button_to t('home.show.devs.hire'), developer, method: :get, class: "bg-red-600 text-white hover:bg-red-800 py-3 w-full" %>
+      <%= button_to t('home.show.devs.hire'), developer, method: :get, class: "bg-red-600 text-white hover:bg-red-800 py-3 w-full after:absolute after:inset-0" %>
     </div>
   </div>
 </div>

app/javascript/src/matrix.js

@@ -8,7 +8,7 @@ var canvas = document.getElementById( 'canvas' ),
     charArr = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'],
     maxCharCount = 100,
     fallingCharArr = [],
-    fontSize = 10,
+    fontSize = 12,
     maxColums = cw/(fontSize);
 canvas.width = canvas2.width = cw;
 canvas.height = canvas2.height = ch;

app/views/admin/users/_search.html.erb

@@ -1,11 +1,11 @@
 <%= form_with url: admin_users_path, method: :get do |form| %>
-  <div class="max-w-sm">
+  <div class="max-w-lg">
     <%= form.label :query, t(".help"), class: "block text-sm font-medium text-red-950" %>
-    <div class="mt-1 flex rounded-md shadow-sm">
+    <div class="mt-2 flex shadow-sm">
       <div class="relative flex items-stretch flex-grow focus-within:z-10">
-        <%= form.text_field :query, value: query, placeholder: "Awesome Developer", autocomplete: "off", autofocus: true, class: "focus:ring-red-500 focus:border-gray-500 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300" %>
+        <%= form.text_field :query, value: query, placeholder: "Awesome Developer", autocomplete: "off", autofocus: true, class: "focus:ring-red-500 focus:border-gray-500 block w-full rounded-none sm:text-sm border-gray-300" %>
       </div>
-      <%= form.button type: "submit", class: "-ml-px relative inline-flex items-center space-x-2 px-4 py-2 border border-gray-300 text-sm font-medium rounded-r-md text-red-950 bg-red-50 hover:bg-red-100 focus:outline-none focus:ring-1 focus:ring-red-500 focus:border-gray-500" do %>
+      <%= form.button type: "submit", class: "-ml-px relative inline-flex items-center space-x-2 px-4 py-2 border border-gray-300 text-sm font-medium text-red-950 bg-red-50 hover:bg-red-100 focus:outline-none focus:ring-1 focus:ring-red-500 focus:border-gray-500" do %>
         <%= inline_svg_tag "icons/solid/search.svg", class: "h-5 w-5 text-red-400", aria_hidden: true %>
         <span><%= t(".cta") %></span>
       <% end %>

app/views/home/show.html.erb

@@ -3,7 +3,7 @@
 <section class="hero">
   <canvas id="canvas">Quebec Devs. Les meilleurs developpeurs sont ici.</canvas>
   <canvas id="canvas2">Quebec Devs. Les meilleurs developpeurs sont ici.</canvas>
-  <div class="container fixed">
+  <div class="container">
     <h2><%= t("home.show.hero") %></h2>
   </div>
 </section>