nav con branding

TODO.md

@@ -1,2 +0,0 @@
-Paginate hace cosas raras, debe tener encuenta props para saber en que pagina esta
-por que si no ocurren cosas raras al hacer next

src/components/Nav.jsx

@@ -5,7 +5,7 @@ export class Nav extends React.Component {
     render() {
         return (
             <nav className='nav'>
-                <Link to='/'><h1>MusicList</h1></Link>
+                <Link to='/'><h1 className='branding'>MusicList</h1></Link>
                 <ul className='nav-links'>
                     <li className='link'><Link to='/login'>Iniciar Sesion</Link></li>
                     <li className='link'><Link to='/signup'>Registrate</Link></li>

src/styles/main.css

@@ -12,16 +12,16 @@
 
 /*Modificacion basica de elementos*/
 body {
-    max-width: 75em;
+    max-width: 75rem;
     margin: 0 auto;
-    padding: 0 1em;
+    padding: 0 1rem;
     font-family: sans-serif;
     color: var(--black);
 }
 
 input {
     border: 1px var(--gray-2) solid;
-    padding: .3em;
+    padding: .3rem;
 }
 
 button {
@@ -45,27 +45,36 @@ a:hover, button.link:hover {
     text-decoration: underline;
 }
 
+h1, h2, h3, h4 {
+    margin-top: .5rem;
+    margin-bottom: .2rem;
+}
+
 /*Navbar*/
 .nav {
     display: flex;
-    min-height: 3.25em;
+    min-height: 3.25rem;
     position: relative;
     justify-content: space-between;
     align-items: center;
 }
 
+.nav .branding {
+   margin: 0;
+}
+
 .nav-links {
     display: flex;
 }
 
 .nav-links .link {
-    margin-left: 1em;
+    margin-left: 1rem;
 }
 
 /*Pagination*/
 ul.pagination {
     display: flex;
-    margin: 1em auto;
+    margin: 1rem auto;
     justify-content: center;
 }
 
@@ -76,7 +85,7 @@ ul.pagination {
 .page-link {
     color: var(--black);
     text-decoration: none;
-    padding: 0 1em;
+    padding: 0 1rem;
 }
 
 .page-item.active {
@@ -107,11 +116,10 @@ ul.pagination {
 ul.entity_list {
     display: flex;
     flex-direction: column;
-    margin-top: 1em;
 }
 
 li.entity {
-    height: 4em;
+    height: 4rem;
     border: 1px var(--gray-2) solid;
 }
 
@@ -127,7 +135,7 @@ li.entity a {
     display: flex;
 
     height: 100%;
-    padding-left: 1em;
+    padding-left: 1rem;
     text-decoration: none;
     color: var(--black);
 
@@ -136,7 +144,7 @@ li.entity a {
 }
 
 li.entity a .small {
-    font-size: .8em;
+    font-size: .8rem;
     color: var(--gray-3);
 }