diff --git a/src/components/Artist.jsx b/src/components/Artist.jsx
index 3524e80..5f2181b 100644
--- a/src/components/Artist.jsx
+++ b/src/components/Artist.jsx
@@ -122,7 +122,7 @@ export const ArtistView = (props) => {
return (
);
}
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 25323fc..88fb4a8 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -16,6 +16,8 @@
--font-4: 1.777em;
--font-5: 1.333em;
--font-6: 0.75em;
+
+ --line-width: 2px;
}
/* Modificación básica de elementos*/
@@ -91,7 +93,7 @@ small, .text_small {
}
button.button {
- border: 3px solid var(--accent);
+ border: var(--line-width) solid var(--accent);
background-color: var(--white);
padding: .5em 1em;
@@ -170,11 +172,11 @@ ul.pagination {
&.active {
color: var(--accent);
- border-bottom: 2px solid var(--accent);
+ border-bottom: var(--line-width) solid var(--accent);
}
&:hover:not(.active) {
- border-bottom: 2px solid var(--accent);
+ border-bottom: var(--line-width) solid var(--accent);
}
&:focus {
@@ -209,7 +211,7 @@ ul.entity_list {
flex-direction: column;
li.artist, li.disc, li.song {
- border-bottom: 2px var(--gray-1) solid;
+ border-bottom: var(--line-width) var(--gray-1) solid;
margin-bottom: 1em;
.cover-container {
@@ -224,7 +226,7 @@ ul.entity_list {
&:hover {
background-color: var(--gray-1);
- border-bottom: 2px var(--accent) solid;
+ border-bottom: var(--line-width) var(--accent) solid;
}
a {
@@ -281,11 +283,18 @@ ul.entity_list {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
- border-bottom: 3px solid var(--accent);
margin-top: .5em;
line-height: 1;
font-weight: 500;
max-width: 250px;
+
+ &:after {
+ display: block;
+ content: '';
+ border-bottom: solid var(--line-width) var(--accent);
+ transition: width 250ms ease-in-out;
+ width: 0;
+ }
}
}
@@ -304,7 +313,7 @@ ul.entity_list {
ul.tabs {
display: flex;
align-items: stretch;
- border-bottom: 2px var(--gray-1) solid;
+ border-bottom: var(--line-width) var(--gray-1) solid;
margin: 1rem 0;
li.tab {
@@ -313,11 +322,11 @@ ul.tabs {
cursor: pointer;
&:hover {
- border-bottom: 2px var(--gray-2) solid;
+ border-bottom: var(--line-width) var(--gray-2) solid;
}
&.selected {
- border-bottom: 2px var(--accent) solid;
+ border-bottom: var(--line-width) var(--accent) solid;
}
}
}
@@ -347,7 +356,7 @@ ul.tabs {
flex-wrap: wrap;
li {
- border-bottom: 3px solid var(--accent);
+ border-bottom: var(--line-width) solid var(--accent);
margin-right: 1em;
line-height: 1;
margin-bottom: .5em;
@@ -384,6 +393,12 @@ ul.tabs {
height: 250px;
cursor: pointer;
+
+ &:hover{
+ .cover-caption figcaption:after {
+ width: 100%;
+ }
+ }
}
margin-bottom: 3em;