Merge pull request #12 from Dev2Forge/develop

tutosrive · web-flow · commit 006359a9d145 · 2025-07-14T13:25:25.000-05:00
Fix responsive layout
diff --git a/docs/assets/css/index.css b/docs/assets/css/index.css
@@ -1,71 +1,84 @@
 hr {
-    margin: 20px 0 !important;
+  margin: 20px 0 !important;
 }
 
 h1 {
-    text-align: center;
-    font-size: xx-large;
+  text-align: center;
+  font-size: xx-large;
 }
 
 code {
-    background-color: #2c2c2c;
-    padding: 2px 4px;
-    border-radius: 4px;
-    font-family: 'Courier New', Courier, monospace;
-    user-select: all;
+  background-color: #2c2c2c;
+  color: rgb(166, 255, 0);
+  padding: 2px 4px;
+  border-radius: 4px;
+  font-family: 'Courier New', Courier, monospace;
+  user-select: all;
+  overflow-x: scroll;
+}
+
+pre,
+code {
+  overflow: scroll;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+pre::-webkit-scrollbar {
+  display: none;
 }
 
 #description h2 {
-    text-align: center;
-    font-size: x-large;
-    margin-bottom: 15px;
+  text-align: center;
+  font-size: x-large;
+  margin-bottom: 15px;
 }
 
 #title-page::after {
-    content: 'org';
-    font-size: small;
+  content: 'org';
+  font-size: small;
 }
 
 .thumbnail-dev2forge {
-    width: 80vh;
+  width: 80vh;
 }
 
 #carrusel-repos::-webkit-scrollbar {
-    display: none;
+  display: none;
 }
 #carrusel-repos {
-    scrollbar-width: none;
-    -ms-overflow-style: none;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
 }
 .no-scrollbar::-webkit-scrollbar {
-    display: none;
+  display: none;
 }
 .no-scrollbar {
-    scrollbar-width: none;
-    -ms-overflow-style: none;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
 }
 .btn-repo-link {
-    border-radius: 200px;
-    padding: 5px 10px;
-    color: #2563eb;
-    text-decoration: none;
-    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
-    border: 1.5px solid #93c5fd;
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  border-radius: 200px;
+  padding: 5px 10px;
+  color: #2563eb;
+  text-decoration: none;
+  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
+  border: 1.5px solid #93c5fd;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .btn-repo-link:hover {
-    background-color: #2563eb;
-    color: #fff;
-    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.18);
-    transform: scale(1.12);
+  background-color: #2563eb;
+  color: #fff;
+  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.18);
+  transform: scale(1.12);
 }
 .btn-repo-link img {
-    filter: none;
-    transition: filter 0.2s;
+  filter: none;
+  transition: filter 0.2s;
 }
 .btn-repo-link:hover img {
-    filter: brightness(0) invert(1);
+  filter: brightness(0) invert(1);
 }
diff --git a/docs/index.html b/docs/index.html
@@ -66,7 +66,7 @@
       }
     </script>
   </head>
-  <body class="bg-white dark:bg-gray-900 dark:text-gray-100 text-gray-800 transition-colors duration-300 min-h-screen flex flex-col dark">
+  <body class="w-[98vw] p-0 overflow-x-hidden bg-white dark:bg-gray-900 dark:text-gray-100 text-gray-800 transition-colors duration-300 dark">
     <!-- Header -->
     <header class="w-full flex justify-between items-center p-6 flex-shrink-0">
       <div class="w-full text-center">
@@ -75,7 +75,7 @@ <h1 class="text-3xl font-bold inline" id="title-head"></h1>
     </header>
 
     <!-- Main Content -->
-    <main class="flex-1 flex flex-col items-center w-full px-6 pb-12">
+    <main class="px-6 pb-12 word-wrap no-scrollbar">
       <!-- Repos -->
       <section id="carrusel-repos" class="h-100 grid grid-rows-1 grid-flow-col gap-4 overflow-x-auto snap-x snap-mandatory w-full py-4">
         <!-- Repos will be injected here -->
