Agregada vista de artista

src/styles/main.scss

@@ -1,15 +1,21 @@
 @import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
-/* Colorscheme */
+/* Variables */
 :root {
-  --white: hsl(0, 0%, 99%);
-  --gray-1: hsl(0, 0%, 95%);
-  --gray-2: hsl(0, 0%, 85%);
-  --gray-3: hsl(0, 0%, 80%);
-  --gray-4: hsl(0, 0%, 30%);
-  --black: hsl(0, 0%, 20%);
-
+  --white: hsl(20, 20%, 98%);
+  --gray-1: hsl(20, 20%, 95%);
+  --gray-2: hsl(20, 20%, 85%);
+  --gray-3: hsl(20, 20%, 80%);
+  --gray-4: hsl(20, 20%, 30%);
+  --black: hsl(20, 20%, 20%);
   --accent: hsl(354, 81%, 56%);
+
+  --font-1: 4.209em;
+  --font-2: 3.157em;
+  --font-3: 2.369em;
+  --font-4: 1.777em;
+  --font-5: 1.333em;
+  --font-6: 0.75em;
 }
 
 /* Modificación básica de elementos*/
@@ -22,6 +28,7 @@ body {
   overflow-y: scroll;
   line-height: 1.65;
   font-size: 100%;
+  background-color: var(--white);
 }
 
 p {
@@ -30,7 +37,7 @@ p {
 
 input {
   border: 1px var(--gray-2) solid;
-  padding: .3em;
+  padding: .3em .5em;
 }
 
 button {
@@ -60,18 +67,40 @@ h1, h2, h3, h4, h5 {
 
 h1 {
   margin-top: 0;
-  font-size: 4.209em;
+  font-size: var(--font-1);
 }
 
-h2 {font-size: 3.157em;}
+h2 {font-size: var(--font-2);}
 
-h3 {font-size: 2.369em;}
+h3 {font-size: var(--font-3);}
 
-h4 {font-size: 1.777em;}
+h4 {font-size: var(--font-4);}
 
-h5 {font-size: 1.333em;}
+h5 {font-size: var(--font-5);}
 
-small, .text_small {font-size: 0.75em;}
+small, .text_small {font-size: var(--font-6);}
+
+button.button {
+  border: 3px solid var(--accent);
+  background-color: var(--white);
+  padding: .5em 1em;
+
+  font-weight: 500;
+  font-size: var(--font-5);
+  color: var(--accent);
+
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--gray-1);
+    transition: .3s;
+  }
+}
+
+figure {
+  height: 100%;
+  width: 100%;
+}
 
 /* Navbar */
 .nav {
@@ -169,6 +198,12 @@ ul.entity_list {
     border-bottom: 2px var(--gray-1) solid;
     margin-bottom: 1em;
 
+    .cover-container {
+      width: 200px;
+      height: 200px;
+      margin: 1em;
+    }
+
     &:last-child {
       margin-bottom: auto;
     }
@@ -208,18 +243,6 @@ ul.entity_list {
     height: 14em;
 
     a {
-      .coverart {
-        object-fit: cover;
-        width: 200px;
-        height: 200px;
-        margin: 1em;
-        border: 1px solid var(--gray-2);
-
-        &.loading {
-          display: none;
-        }
-      }
-
       .release-date {
         display: inline-block;
         font-size: .7em;
@@ -238,24 +261,126 @@ ul.entity_list {
   }
 }
 
+
+.cover-caption {
+  height: 250px;
+  width: 250px;
+
+  figcaption {
+    position: relative;
+    display: none;
+    z-index: 2;
+    height: 0;
+    background-color: var(--accent);
+    color: var(--white);
+    font-weight: 600;
+    padding: 1em;
+    opacity: 0;
+    overflow: hidden;
+  }
+
+  &:hover {
+    figcaption{
+      display: block;
+      animation: slidein 300ms ease-in-out both;
+
+      @keyframes slidein {
+        to{
+          height: 80px;
+          transform: translateY(-80px);
+          opacity: 100;
+        }
+      }
+    }
+  }
+}
+
+.coverart {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  border: 1px solid var(--gray-2);
+
+  &.loading {
+    display: none;
+  }
+}
+
 /* Tabs */
 ul.tabs {
-  display: flex;
-  align-items: stretch;
-  border-bottom: 2px var(--gray-1) solid;
-  margin: 1rem 0;
+      display: flex;
+      align-items: stretch;
+      border-bottom: 2px var(--gray-1) solid;
+      margin: 1rem 0;
 
-  li.tab {
-    padding: .5rem 1em;
-    margin-bottom: -2px;
-    cursor: pointer;
+      li.tab {
+      padding: .5rem 1em;
+      margin-bottom: -2px;
+      cursor: pointer;
 
-    &:hover {
+      &:hover {
       border-bottom: 2px var(--gray-2) solid;
-    }
+      }
 
-    &.selected {
+      &.selected {
       border-bottom: 2px var(--accent) solid;
+      }
+      }
+      }
+
+/* Artists */
+.artist-view {
+  .artist{
+    .title {
+      h1 { margin-bottom: 0}
+      h4 { margin-top: 0; margin-bottom: .5em }
+      max-width: 60%;
+    }
+    .button {
+      margin-bottom: 1em;
+    }
+    .tags {
+      display:flex;
+      flex-wrap: wrap;
+      li {
+        border-bottom: 3px solid var(--accent);
+        margin-right: 1em;
+        line-height: 1;
+        margin-bottom: .5em;
+        font-weight: 500;
+      }
+      margin-bottom: 3em;
+    }
+  }
+
+  .discs {
+    .discs-list {
+      display: grid;
+      grid-auto-rows: 250px;
+      gap: 30px;
+      justify-content: start;
+      align-content: start;
+
+      $grid-width: 250px;
+      $grid-gap: 16px;
+
+
+      @for $x from 1 to 5 {
+        @media (min-width: $grid-width * $x + $grid-gap * $x ) {
+          grid-template-columns: repeat($x, auto);
+        }
+      }
+
+      @media (min-width: $grid-width * 4 + $grid-gap * 4 ) {
+        justify-content: space-between;
+        align-content: space-between;
+      }
+
+
+      .cover-container {
+        width: 250px;
+        height: 250px;
+      }
     }
   }
 }
@@ -282,3 +407,15 @@ ul.tabs {
 *[hidden] {
  visibility: hidden;
 }
+
+.space-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  @media (max-width: 767px) {
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}