style(frontend): 💄 Make the website wider in pc

Author: AlexDeveloperUwU

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
   "conventionalCommits.scopes": [
-    "ui"
+    "frontend",
+    "backend"
   ]
 }

public/css/main.css

@@ -1,5 +1,5 @@
 <main class="container mx-auto mt-10 flex-grow px-8 sm:px-16 md:px-24 lg:px-32 hidden">
-  <section class="mx-auto mt-10 max-w-4xl text-left">
+  <section class="mx-auto mt-10 max-w-6xl text-left">
     <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
       <div class="p-6">
         <h3 class="mb-4 text-2xl font-bold text-white flex items-center">
@@ -21,7 +21,7 @@
     </div>
   </section>
 
-  <section id="formSection" class="mx-auto mt-10 max-w-4xl text-left">
+  <section id="formSection" class="mx-auto mt-10 max-w-6xl text-left">
     <div id="addEventFormContainer" class="bg-gray-800 rounded-lg overflow-hidden shadow-lg hidden">
       <div class="p-6">
         <h3 class="mb-4 text-2xl font-bold text-white flex items-center">

views/admin/calendar.ejs

@@ -1,5 +1,5 @@
 <main class="container mx-auto mt-10 flex-grow px-8 sm:px-16 md:px-24 lg:px-32 hidden">
-  <section class="mx-auto mt-10 max-w-4xl text-left">
+  <section class="mx-auto mt-10 max-w-6xl text-left">
     <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
       <div class="p-6">
         <h3 class="mb-4 text-2xl font-bold text-white flex items-center">

views/admin/index.ejs

@@ -1,5 +1,5 @@
 <main class="container mx-auto mt-10 flex-grow px-8 sm:px-16 lg:px-24 hidden">
-  <section class="mx-auto mt-10 max-w-4xl text-left">
+  <section class="mx-auto mt-10 max-w-6xl text-left">
     <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
       <div class="p-6">
         <h3 class="mb-4 text-2xl font-bold text-white flex items-center">

views/admin/linkcutter.ejs

@@ -1,6 +1,6 @@
-<main class="container mx-auto mt-10 flex-grow px-8 sm:px-24 lg:px-64 hidden">
+<main class="container mx-auto mt-10 flex-grow px-8 sm:px-24 lg:px-32 xl:px-48 hidden">
   <!-- Sección Un poco sobre mí -->
-  <section class="mx-auto mt-10 max-w-4xl text-left">
+  <section class="mx-auto mt-10 max-w-6xl text-left">
     <div class="items-left flex flex-col">
       <div class="items-left flex text-left">
         <div class="relative">
@@ -14,7 +14,7 @@
     </div>
   </section>
   <!-- Sección Un poco sobre mí -->
-  <section class="mx-auto mt-10 max-w-4xl text-left">
+  <section class="mx-auto mt-10 max-w-6xl text-left">
     <h3 class="mb-4 text-2xl font-bold flex items-center">
       <i class="fas fa-user mr-3 text-gray-300"></i>
       Un poco sobre mí
@@ -39,7 +39,7 @@
   </section>
 
   <!-- Sección Mis Estudios -->
-  <section class="mx-auto mt-10 max-w-4xl text-left">
+  <section class="mx-auto mt-10 max-w-6xl text-left">
     <h3 class="mb-4 text-2xl font-bold flex items-center">
       <i class="fas fa-graduation-cap mr-3 text-gray-300"></i>
       Mis Estudios
@@ -65,7 +65,7 @@
   </section>
 
   <!-- Sección idiomas -->
-  <section class="mx-auto mt-10 max-w-4xl text-left">
+  <section class="mx-auto mt-10 max-w-6xl text-left">
     <h3 class="mb-4 text-2xl font-bold flex items-center">
       <i class="fas fa-language mr-3 text-gray-300"></i>
       Idiomas
@@ -96,7 +96,7 @@
   </section>
 
   <!-- Sección Certificados y Reconocimientos -->
-  <section class="mx-auto mt-10 max-w-4xl text-left">
+  <section class="mx-auto mt-10 max-w-6xl text-left">
     <h3 class="mb-4 text-2xl font-bold flex items-center">
       <i class="fas fa-certificate mr-3 text-gray-300"></i>
       Certificados y Reconocimientos
@@ -134,7 +134,7 @@
   </section>
 
   <!-- Sección Tech Stack -->
-  <section class="mx-auto mt-10 max-w-4xl text-left">
+  <section class="mx-auto mt-10 max-w-6xl text-left">
     <h3 class="mb-4 text-2xl font-bold flex items-center">
       <i class="fas fa-tools mr-3 text-gray-300"></i>
       Mi Tech Stack
@@ -152,7 +152,7 @@
   </section>
 
   <!-- Sección Mis conocimientos -->
-  <section class="mx-auto mt-10 max-w-4xl text-left">
+  <section class="mx-auto mt-10 max-w-6xl text-left">
     <h3 class="mb-4 text-2xl font-bold flex items-center">
       <i class="fas fa-tools mr-3 text-gray-300"></i>
       Conocimientos
@@ -202,7 +202,7 @@
       </div>
     </div>
   </section>
-  <section class="mx-auto mt-10 max-w-4xl text-left">
+  <section class="mx-auto mt-10 max-w-6xl text-left">
     <h3 class="mb-4 text-2xl font-bold flex items-center">
       <i class="fas fa-info-circle mr-3 text-gray-300"></i>
       Informaciones extras

views/content/aboutme.ejs

@@ -1,5 +1,5 @@
-<main class="container mx-auto mt-10 flex-grow px-8 sm:px-24 lg:px-64 hidden">
-  <section class="mx-auto mt-10 max-w-4xl text-left">
+<main class="container mx-auto mt-10 flex-grow px-8 sm:px-24 lg:px-32 xl:px-48 hidden">
+  <section class="mx-auto mt-10 max-w-6xl text-left">
     <div class="items-left flex flex-col">
       <div class="items-left flex text-left">
         <div class="relative">
@@ -34,7 +34,7 @@
         </div>
       </div>
     </div>
-    <p class="mx-auto mt-10 max-w-4xl text-left font-agrandir">¡Hola! Soy Alex, un apasionado programador, gamer y streamer en mi tiempo libre. Principalmente desarrollo páginas web y despliego servidores de diversos tipos, aunque también he creado aplicaciones de escritorio. Tengo una especial afición por experimentar con Node.js y otras tecnologías. Paso muchas horas en mi ordenador, trabajando en varios proyectos, siempre acompañado de mi café y mi entusiasmo por aprender y descubrir cosas nuevas!</p>
+    <p class="mx-auto mt-10 max-w-6xl text-left font-agrandir">¡Hola! Soy Alex, un apasionado programador, gamer y streamer en mi tiempo libre. Principalmente desarrollo páginas web y despliego servidores de diversos tipos, aunque también he creado aplicaciones de escritorio. Tengo una especial afición por experimentar con Node.js y otras tecnologías. Paso muchas horas en mi ordenador, trabajando en varios proyectos, siempre acompañado de mi café y mi entusiasmo por aprender y descubrir cosas nuevas!</p>
     <br>
     <a href="/?view=aboutme" class="block rounded-lg bg-gray-800 p-6 hover:bg-blue-700">
       <div class="flex items-center">
@@ -46,15 +46,15 @@
       </div>
     </a>
   </section>
-  <section class="mx-auto mt-10 max-w-4xl text-left">
+  <section class="mx-auto mt-10 max-w-6xl text-left">
     <h3 class="mb-4 text-2xl font-bold flex items-center">
       <i class="fab fa-github mr-3 text-gray-300"></i>
       Proyectos
     </h3>
     <div id="projects-container" class="space-y-4">
     </div>
   </section>
-  <section class="mx-auto mt-10 max-w-4xl text-left">
+  <section class="mx-auto mt-10 max-w-6xl text-left">
     <h3 class="mb-4 text-2xl font-bold flex items-center">
       <i class="fas fa-share-alt mr-3 text-gray-300"></i>
       Plataformas de contenido
@@ -89,7 +89,7 @@
       </a>
     </div>
   </section>
-  <section id="calendarSectionId" class="mx-auto mt-10 max-w-4xl text-left">
+  <section id="calendarSectionId" class="mx-auto mt-10 max-w-6xl text-left">
     <h3 class="mb-4 text-2xl font-bold flex items-center">
       <i class="fas fa-calendar mr-3 text-gray-300"></i>
       Calendario
@@ -117,7 +117,7 @@
       </div>
     </div>
   </section>
-  <section class="mx-auto mt-10 max-w-4xl text-left">
+  <section class="mx-auto mt-10 max-w-6xl text-left">
     <h3 class="mb-4 text-2xl font-bold flex items-center">
       <i class="fas fa-folder-open mr-3 text-gray-300"></i>
       Contenido adicional
@@ -136,7 +136,7 @@
       </a>
     </div>
   </section>
-  <section class="mx-auto mt-10 max-w-4xl text-left">
+  <section class="mx-auto mt-10 max-w-6xl text-left">
     <h3 class="mb-4 text-2xl font-bold text-white flex items-center">
       <i class="fas fa-envelope mr-3 text-gray-300"></i>
       Contacta conmigo

views/content/index.ejs

@@ -1,5 +1,5 @@
-<main class="container mx-auto mt-10 flex-grow px-8 sm:px-24 lg:px-64 hidden">
-  <section class="mx-auto mt-10 max-w-4xl text-left">
+<main class="container mx-auto mt-10 flex-grow px-8 sm:px-24 lg:px-32 xl:px-48 hidden">
+  <section class="mx-auto mt-10 max-w-6xl text-left">
     <h3 class="mb-4 text-2xl font-bold flex items-center">
       <i class="fa-brands fa-kickstarter-k mr-3 text-gray-300"></i>
       Directos en Kick

views/content/kick.ejs

@@ -1,5 +1,5 @@
-<main class="container mx-auto mt-10 flex-grow px-8 sm:px-24 lg:px-64 hidden">
-  <section class="mx-auto mt-10 max-w-4xl text-left">
+<main class="container mx-auto mt-10 flex-grow px-8 sm:px-24 lg:px-32 xl:px-48 hidden">
+  <section class="mx-auto mt-10 max-w-6xl text-left">
     <div class="items-left flex flex-col">
       <div class="items-left flex text-left">
         <div class="relative">
@@ -12,7 +12,7 @@
       </div>
     </div>
   </section>
-  <section class="mx-auto mt-10 max-w-4xl text-left">
+  <section class="mx-auto mt-10 max-w-6xl text-left">
     <h3 class="mb-4 text-2xl font-bold flex items-center">
       <i class="fas fa-code mr-3 text-gray-300"></i>
       Desarrollo
@@ -38,7 +38,7 @@
       </a>
     </div>
   </section>
-  <section class="mx-auto mt-10 max-w-4xl text-left">
+  <section class="mx-auto mt-10 max-w-6xl text-left">
     <h3 class="mb-4 text-2xl font-bold flex items-center">
       <i class="fas fa-share-alt mr-3 text-gray-300"></i>
       Redes Sociales
@@ -73,7 +73,7 @@
       </a>
     </div>
   </section>
-  <section class="mx-auto mt-10 max-w-4xl text-left">
+  <section class="mx-auto mt-10 max-w-6xl text-left">
     <h3 class="mb-4 text-2xl font-bold flex items-center">
       <i class="fas fa-clapperboard mr-3 text-gray-300"></i>
       Plataformas de contenido

views/content/links.ejs

@@ -1,5 +1,5 @@
-<main class="container mx-auto mt-10 flex-grow px-8 sm:px-24 lg:px-64 hidden">
-  <section class="mx-auto mt-10 max-w-4xl text-left">
+<main class="container mx-auto mt-10 flex-grow px-8 sm:px-24 lg:px-32 xl:px-48 hidden">
+  <section class="mx-auto mt-10 max-w-6xl text-left">
     <h3 class="mb-4 text-2xl font-bold flex items-center">
       <i class="fab fa-twitch mr-3 text-gray-300"></i>
       Directos en Twitch

views/content/twitch.ejs

@@ -1,5 +1,5 @@
-<main class="container mx-auto mt-10 flex-grow px-8 sm:px-24 lg:px-64 hidden">
-  <section class="mx-auto mt-10 max-w-4xl text-left">
+<main class="container mx-auto mt-10 flex-grow px-8 sm:px-24 lg:px-32 xl:px-48 hidden">
+  <section class="mx-auto mt-10 max-w-6xl text-left">
     <h3 class="mb-4 text-2xl font-bold flex items-center">
       <i class="fab fa-youtube mr-3 text-gray-300 text-3xl"></i>
       Mis vídeos de YouTube

views/content/youtube.ejs

@@ -1,5 +1,5 @@
-<main class="container mx-auto mt-10 flex-grow px-8 sm:px-24 lg:px-64 hidden">
-  <section class="mx-auto mt-10 max-w-4xl text-left">
+<main class="container mx-auto mt-10 flex-grow px-8 sm:px-24 lg:px-32 xl:px-48 hidden">
+  <section class="mx-auto mt-10 max-w-6xl text-left">
     <h3 class="mb-4 text-2xl font-bold text-red-500 flex items-center">
       <i class="fa-solid fa-exclamation-triangle mr-3 text-red-400"></i>
       Error 401 - No autorizado

views/errors/401.ejs

@@ -1,5 +1,5 @@
-<main class="container mx-auto mt-10 flex-grow px-8 sm:px-24 lg:px-64 hidden">
-  <section class="mx-auto mt-10 max-w-4xl text-left">
+<main class="container mx-auto mt-10 flex-grow px-8 sm:px-24 lg:px-32 xl:px-48 hidden">
+  <section class="mx-auto mt-10 max-w-6xl text-left">
     <h3 class="mb-4 text-2xl font-bold text-red-500 flex items-center">
       <i class="fa-solid fa-exclamation-circle mr-3 text-red-400"></i>
       Error 403 - Acceso denegado

views/errors/403.ejs

@@ -1,5 +1,5 @@
-<main class="container mx-auto mt-10 flex-grow px-8 sm:px-24 lg:px-64 hidden">
-  <section class="mx-auto mt-10 max-w-4xl text-left">
+<main class="container mx-auto mt-10 flex-grow px-8 sm:px-24 lg:px-32 xl:px-48 hidden">
+  <section class="mx-auto mt-10 max-w-6xl text-left">
     <h3 class="mb-4 text-2xl font-bold text-red-500 flex items-center">
       <i class="fa-solid fa-magnifying-glass-minus mr-3 text-red-400"></i>
       Error 404 - Página no encontrada

views/errors/404.ejs

@@ -1,5 +1,5 @@
-<main class="container mx-auto mt-10 flex-grow px-8 sm:px-24 lg:px-64 hidden">
-  <section class="mx-auto mt-10 max-w-4xl text-left">
+<main class="container mx-auto mt-10 flex-grow px-8 sm:px-24 lg:px-32 xl:px-48 hidden">
+  <section class="mx-auto mt-10 max-w-6xl text-left">
     <h3 class="mb-4 text-2xl font-bold text-red-500 flex items-center">
       <i class="fa-solid fa-server mr-3 text-red-400"></i>
       Error 500 - Error interno del servidor

views/errors/500.ejs

@@ -1,5 +1,5 @@
-<main class="container mx-auto mt-10 flex-grow px-8 sm:px-24 lg:px-64 hidden">
-  <section class="mx-auto mt-10 max-w-4xl text-left">
+<main class="container mx-auto mt-10 flex-grow px-8 sm:px-24 lg:px-32 xl:px-48 hidden">
+  <section class="mx-auto mt-10 max-w-6xl text-left">
     <h3 class="mb-4 text-2xl font-bold text-yellow-500 flex items-center">
       <i class="fa-solid fa-globe mr-3 text-yellow-400"></i>
       Error 502 - Bad Gateway

views/errors/502.ejs

@@ -1,5 +1,5 @@
-<main class="container mx-auto mt-10 flex-grow px-8 sm:px-24 lg:px-64 hidden">
-  <section class="mx-auto mt-10 max-w-4xl text-left">
+<main class="container mx-auto mt-10 flex-grow px-8 sm:px-24 lg:px-32 xl:px-48 hidden">
+  <section class="mx-auto mt-10 max-w-6xl text-left">
     <h3 class="mb-4 text-2xl font-bold text-red-500 flex items-center">
       <i class="fa-solid fa-wrench mr-3 text-red-400"></i>
       Error 503 - Servicio no disponible

views/errors/503.ejs

@@ -1,5 +1,5 @@
-<main class="container mx-auto mt-10 flex-grow px-8 sm:px-24 lg:px-64 hidden">
-  <section class="mx-auto mt-10 max-w-4xl text-left">
+<main class="container mx-auto mt-10 flex-grow px-8 sm:px-24 lg:px-32 xl:px-48 hidden">
+  <section class="mx-auto mt-10 max-w-6xl text-left">
     <h3 class="mb-4 text-2xl font-bold flex items-center">
       <i class="fas fa-info-circle mr-3 text-gray-300"></i>
       Contenido adicional

views/extras/index.ejs

@@ -1,5 +1,5 @@
-<main class="container mx-auto mt-10 flex-grow px-8 sm:px-24 lg:px-64 hidden">
-  <section class="mx-auto mt-10 max-w-4xl text-left">
+<main class="container mx-auto mt-10 flex-grow px-8 sm:px-24 lg:px-32 xl:px-48 hidden">
+  <section class="mx-auto mt-10 max-w-6xl text-left">
     <h3 class="mb-4 text-2xl font-bold flex items-center">
       <i class="fas fa-tachometer-alt mr-3 text-gray-300"></i>
       Status Page
@@ -19,15 +19,15 @@
       </div>
     </div>
   </section>
-  <section class="mx-auto mt-10 max-w-4xl text-left">
+  <section class="mx-auto mt-10 max-w-6xl text-left">
     <h3 class="mb-4 text-2xl font-bold flex items-center">
       <i class="fas fa-tachometer-alt mr-3 text-gray-300"></i>
       Estado de mis servidores
     </h3>
     <div class="space-y-4" id="server-status-container">
     </div>
   </section>
-  <section class="mx-auto mt-10 max-w-4xl text-left">
+  <section class="mx-auto mt-10 max-w-6xl text-left">
     <h3 class="mb-4 text-2xl font-bold flex items-center">
       <i class="fas fa-tachometer-alt mr-3 text-gray-300"></i>
       Estado de mis páginas web

views/extras/status.ejs

@@ -1,5 +1,5 @@
-<main class="container mx-auto mt-10 flex-grow px-8 sm:px-24 lg:px-64 hidden">
-  <section class="mx-auto mt-10 max-w-4xl text-left">
+<main class="container mx-auto mt-10 flex-grow px-8 sm:px-24 lg:px-32 xl:px-48 hidden">
+  <section class="mx-auto mt-10 max-w-6xl text-left">
     <h3 class="mb-4 text-2xl font-bold flex items-center">
       <i class="fas fa-briefcase mr-3 text-gray-300"></i>
       Mi timeline de trabajo
@@ -14,7 +14,7 @@
     </div>
   </section>
 
-  <section class="mx-auto mt-10 max-w-4xl text-left">
+  <section class="mx-auto mt-10 max-w-6xl text-left">
     <h3 class="mb-4 text-2xl font-bold flex items-center">
       <i class="fas fa-calendar-week mr-3 text-gray-300"></i>
       Consulta del timeline