layout styles applied and merge

social-network/src/App.css

@@ -5,8 +5,15 @@
   text-align: center;
 }
 
-*{
-  margin:0;
+* {
+  margin: 0;
   padding: 0;
   box-sizing: border-box;
-}
+}
+
+/* Media queries para pantallas más pequeñas */
+@media (max-width: 768px) {
+  #root {
+    padding: 1rem;
+  }
+}

social-network/src/assets/styles/components/layout/footer.css

@@ -3,10 +3,9 @@
   padding: 20px;
   background-color: #fff;
   border-top: 1px solid #ddd;
-  width: calc(100% - 250px);
-  margin-left: 250px;
-  position: fixed;
-  bottom: 0;
+  width: 100%; 
+  position: relative; 
+  bottom: 0; 
   color: #4a4a4a;
   box-sizing: border-box;
 }

social-network/src/assets/styles/components/layout/header.css

@@ -8,8 +8,7 @@
   position: fixed;
   top: 0;
   left: 0;
-  width: calc(100% - 250px);
-  margin-left: 250px;
+  width: 100%; 
   z-index: 1000;
 }
 
@@ -35,7 +34,7 @@
 }
 
 .icon {
-  color: #fc7753;
+  color: #ff69b4;
   font-size: 24px;
   cursor: pointer;
   transition: color 0.3s;
@@ -44,3 +43,24 @@
 .icon:hover {
   color: #555;
 }
+
+/* Media queries para pantallas más pequeñas */
+@media (max-width: 768px) {
+  .header {
+    padding: 10px 20px;
+    width: 100%; 
+  }
+
+  .logo h1 {
+    font-size: 20px;
+  }
+
+  .nav-icons .icon {
+    font-size: 20px;
+  }
+}
+
+/* Asegura espacio suficiente para el contenido debajo del header */
+main {
+  padding-top: 70px; 
+}

social-network/src/assets/styles/components/layout/layout.css

@@ -1,100 +1,29 @@
-.main-content {
-    margin-left: 250px;
-    padding: 20px;
-    width: calc(100% - 250px);
-    box-sizing: border-box;
-  }
-
-  .post-input {
-    display: flex;
-    align-items: center;
-    margin-bottom: 20px;
-  }
-
-  .post-input input {
-    flex-grow: 1;
-    padding: 10px;
-    border: 1px solid #ddd;
-    border-radius: 20px;
-    margin-right: 10px;
-  }
-
-  .post-input button {
-    background-color: #ff69b4;
-    color: white;
-    border: none;
-    padding: 10px 20px;
-    border-radius: 20px;
-    cursor: pointer;
-  }
-
-  .post-input button:hover {
-    background-color: #ff4081;
-  }
-
-  .post {
-    background-color: #fff;
-    padding: 20px;
-    border-radius: 8px;
-    margin-bottom: 20px;
-    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
-  }
-
-  .user-info {
-    display: flex;
-    align-items: center;
-    margin-bottom: 10px;
-  }
-
-  .user-avatar {
-    width: 40px;
-    height: 40px;
-    background-color: #ddd;
-    border-radius: 50%;
-    margin-right: 10px;
-  }
-
-  .user-name {
-    font-weight: bold;
-    margin-right: 10px;
-  }
-
-  .post-time {
-    color: #888;
-  }
-
-  .post-content {
-    margin-bottom: 10px;
-  }
-
-  .hashtags {
-    color: #ff6347;
-  }
-
-  .post-image-placeholder {
-    width: 100%;
-    height: 200px;
-    background-color: #f0f0f0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 10px;
-  }
-
-  .post-actions {
-    display: flex;
-    justify-content: space-around;
-  }
-
-  .post-actions button {
-    background: none;
-    border: none;
-    color: #888;
-    cursor: pointer;
-    font-weight: bold;
-  }
-
-  .post-actions button:hover {
-    color: #ff4081;
-  }
-
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+
+
+.sidebar {
+  width: 250px; 
+  padding: 20px;
+  position: fixed; /* Fija la sidebar */
+  height: 100%;
+  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+}
+
+
+main {
+  margin-left: 250px; /* Compensar el ancho de la sidebar */
+  padding: 20px;
+  background-color: transparent; /* Mantener el fondo transparente */
+  min-height: 100vh; /* Altura mínima del contenedor */
+}
+
+
+.layout {
+  background: none; /* Elimina cualquier fondo adicional */
+}

social-network/src/assets/styles/components/layout/postInput.css

@@ -0,0 +1,63 @@
+.main-content {
+  margin-left: 250px; /* Mantiene el margen a la izquierda para el sidebar */
+  padding: 80px 20px 20px; /* Añade padding superior para distanciar del header */
+  width: calc(100% - 250px);
+  max-width: 1200px; 
+  box-sizing: border-box;
+}
+
+.post-input {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  width: 100%; 
+  max-width: 900px; 
+  margin: 0 auto 20px; 
+}
+
+.post-input input {
+  flex-grow: 1; 
+  width: 85%; 
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 20px;
+  margin-right: 10px;
+  font-size: 16px; 
+}
+
+.post-input button {
+  background-color: #ff69b4;
+  color: white;
+  border: none;
+  padding: 10px 30px; 
+  border-radius: 20px;
+  cursor: pointer;
+  font-size: 16px; 
+}
+
+.post-input button:hover {
+  background-color: #ff4081;
+}
+
+/* Media queries para pantallas más pequeñas */
+@media (max-width: 768px) {
+  .main-content {
+    margin-left: 0;
+    width: 100%;
+    padding: 60px 20px 20px; 
+  }
+
+  .post-input {
+    flex-direction: column; 
+    align-items: stretch; 
+  }
+
+  .post-input input {
+    margin-right: 0; 
+    margin-bottom: 10px; 
+  }
+
+  .post-input button {
+    width: 100%; 
+  }
+}