Discos!

src/styles/main.scss

@@ -0,0 +1,209 @@
+/*Colorscheme*/
+:root {
+  --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%);
+
+  --accent: hsl(354, 81%, 56%);
+}
+
+
+/*Modificacion basica de elementos*/
+body {
+  max-width: 75rem;
+  margin: 0 auto;
+  padding: 0 1rem;
+  font-family: sans-serif;
+  color: var(--black);
+  overflow-y: scroll;
+}
+
+input {
+  border: 1px var(--gray-2) solid;
+  padding: .3rem;
+}
+
+button {
+  border: 1px var(--gray-2) solid;
+}
+
+button.link {
+  display: inline;
+  border: none;
+  background-color: inherit;
+  padding: 0;
+  cursor: pointer;
+}
+
+a, button.link {
+  color: var(--accent);
+  text-decoration: none;
+}
+
+a:hover, button.link:hover {
+  text-decoration: underline;
+}
+
+h1, h2, h3, h4 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+img {
+}
+
+/*Navbar*/
+.nav {
+  display: flex;
+  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: 1rem;
+}
+
+/*Pagination*/
+ul.pagination {
+  display: flex;
+  margin: 1rem auto;
+  justify-content: center;
+}
+
+.page-item {
+  border: 1px solid var(--gray-2);
+}
+
+.page-link {
+  color: var(--black);
+  text-decoration: none;
+  padding: 0 1rem;
+}
+
+@media (max-width: 767px) {
+  .page-link {
+    padding: 0 .4rem;
+  }
+}
+
+.page-item.active {
+  background-color: var(--accent);
+}
+
+.page-item.active a {
+  color: white;
+}
+
+
+/*Input with icon*/
+.input-with-icon {
+  display: flex;
+}
+
+.input-with-icon input {
+  border-right: none;
+}
+
+.input-with-icon button {
+  border-left: none;
+  background: white;
+}
+
+
+/*Lista de entidades*/
+ul.entity_list {
+  display: flex;
+  flex-direction: column;
+
+  li.artist, li.disc {
+    border: 1px var(--gray-2) solid;
+
+    &:not(:first-child) {
+      border-top: none;
+    }
+
+    &:hover {
+      background-color: var(--gray-1)
+    }
+
+    a {
+      display: flex;
+      text-decoration: none;
+      color: var(--black);
+      align-items: center;
+
+      .description {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding-left: 1rem;
+
+        .small {
+          color: var(--gray-3);
+          font-size: .8rem;
+        }
+      }
+
+    }
+  }
+
+  li.artist {
+    a {
+      height: 4rem;
+    }
+  }
+
+  li.disc {
+
+    a {
+      height: 14rem;
+
+      .coverart {
+        object-fit: cover;
+        width: 200px;
+        height: 200px;
+        margin: 1rem;
+      }
+    }
+  }
+}
+
+
+/* Tabs */
+ul.tabs {
+  display: flex;
+  align-items: stretch;
+  border-bottom: 2px var(--gray-1) solid;
+  margin: 1rem 0;
+}
+
+ul.tabs li.tab {
+  padding: .5rem 1rem;
+  margin-bottom: -2px;
+  cursor: pointer;
+}
+
+ul.tabs li.tab:hover {
+  border-bottom: 2px var(--gray-2) solid;
+}
+
+ul.tabs li.tab.selected {
+  border-bottom: 2px var(--accent) solid;
+}
+
+/*Utils*/
+.full-width {
+  width: 100%;
+}