Se modificó la pantalla de carga y media querys 450px

Adrastea966 · Nov 4, 2023 · bdde006 · bdde006
1 parent cf02c2b
commit bdde006
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 20 deletions.
diff --git a/public/video.mp4 b/public/video.mp4
diff --git a/src/App.css b/src/App.css
@@ -25,6 +25,11 @@ ol {
     list-style: none;
 }
 
+li {
+    font-size: 18px;
+    margin-bottom: 10px;
+}
+
 a {
     text-decoration: none;
     color: inherit;
@@ -42,23 +47,13 @@ a {
     justify-content: center;
     align-items: center;
     z-index: 9999;
+    animation: fadeOut 0.5s ease-in-out 5.5s forwards;
 }
 
 .App.loading-screen {
     visibility: hidden;
 }
 
-.loading-screen {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: white;
-    z-index: 9999;
-    animation: fadeOut 0.5s ease-in-out 5.5s forwards;
-}
-
 @keyframes fadeOut {
     from {
         opacity: 1;
@@ -127,11 +122,6 @@ button:hover {
     transform: rotate(20deg);
 }
 
-li {
-    font-size: 18px;
-    margin-bottom: 10px;
-}
-
 .App {
     display: flex;
     flex-direction: column;
@@ -317,4 +307,8 @@ li {
         justify-content: center;
     }
 
+    .ideas-items-contenedor {
+        min-height: 280px;
+    }
+
 }
diff --git a/src/App.js b/src/App.js
@@ -9,16 +9,14 @@ const App = () => {
   const [warningMessage, setWarningMessage] = useState('');
   const [showWarning, setShowWarning] = useState(false);
 
-  // Cargar ideas desde el almacenamiento local al iniciar la aplicación
   useEffect(() => {
     const savedIdeas = JSON.parse(localStorage.getItem('ideas')) || [];
     setIdeas(savedIdeas);
-  }, []); // Este efecto se ejecuta solo una vez al iniciar la aplicación
+  }, []); 
 
-  // Guardar ideas en el almacenamiento local cada vez que el estado de ideas cambie
   useEffect(() => {
     localStorage.setItem('ideas', JSON.stringify(ideas));
-  }, [ideas]); // Este efecto se ejecuta cada vez que el estado 'ideas' cambia
+  }, [ideas]); 
 
   const handleInputChange = (event) => {
     setInputValue(event.target.value);
@@ -85,6 +83,7 @@ const App = () => {
 
   return (
     <div className={`App ${isLoading ? 'loading' : ''}`}>
+     <img src="../../logo-twister.svg" alt="Logo" className="logo-twister" />
       {isLoading && <div className="loading-screen">  <video autoPlay loop muted className="background-video">
         <source src="../video.mp4" type="video/mp4" />
       </video> </div>}