diff --git a/src/index.jsx b/src/index.jsx
index 590584c..b67afd5 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -16,11 +16,14 @@ const Main = (props) => (
)
-const NoRoute = () => (
-
-
Esa pagina no existe
-
-)
+const NoRoute = (props) => {
+ return (
+
+
Esa pagina no existe
+
+
+ );
+}
const App = () => (
diff --git a/src/styles/main.css b/src/styles/main.css
index e188b61..deb0b49 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -1,9 +1,11 @@
:root {
- --light-gray: hsl(0, 0%, 95%);
- --gray: hsl(0, 0%, 85%);
- --dark-gray: hsl(0, 0%, 30%);
+ --white: hsl(0, 0%, 99%);
+ --gray-1: hsl(0, 0%, 95%);
+ --gray-2: hsl(0, 0%, 85%);
+ --gray-3: hsl(0, 0%, 30%);
--black: hsl(0, 0%, 20%);
- --emerald: hsl(138, 70%, 60%);
+
+ --red: hsl(354, 81%, 56%);
}
body {
@@ -15,19 +17,31 @@ body {
}
input {
- border: 1px var(--gray) solid;
+ border: 1px var(--gray-2) solid;
padding: .3em;
}
button {
- border: 1px var(--gray) solid;
+ border: 1px var(--gray-2) solid;
}
-a {
- color: var(--emerald);
+button.link {
+ display: inline;
+ border: none;
+ background-color: inherit;
+ padding: 0;
+ cursor: pointer;
+}
+
+a, button.link {
+ color: var(--red);
text-decoration: none;
}
+a:hover, button.link:hover {
+ text-decoration: underline;
+}
+
.nav {
display: flex;
min-height: 3.25em;
@@ -51,7 +65,7 @@ ul.pagination {
}
.page-item {
- border: 1px solid var(--gray);
+ border: 1px solid var(--gray-2);
}
.page-link {
@@ -61,8 +75,9 @@ ul.pagination {
}
.page-item.active {
- background-color: var(--emerald);
+ background-color: var(--red);
}
+
.page-item.active a {
color: white;
}
@@ -84,7 +99,6 @@ ul.pagination {
background: white;
}
-
ul.entity_list {
display: flex;
flex-direction: column;
@@ -93,7 +107,7 @@ ul.entity_list {
li.entity {
height: 4em;
- border: 1px var(--gray) solid;
+ border: 1px var(--gray-2) solid;
}
li.entity:not(:first-child) {
@@ -101,7 +115,7 @@ li.entity:not(:first-child) {
}
li.entity:hover {
- background-color: var(--light-gray)
+ background-color: var(--gray-1)
}
li.entity a {
@@ -118,6 +132,6 @@ li.entity a {
li.entity a .small {
font-size: .8em;
- color: var(--dark-gray);
+ color: var(--gray-3);
}