diff --git a/src/styles/main.scss b/src/styles/main.scss index e6d3307..a1ea741 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,3 +1,5 @@ +@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 */ :root { --white: hsl(0, 0%, 99%); @@ -12,17 +14,23 @@ /* Modificación básica de elementos*/ body { - max-width: 75rem; + max-width: 75em; margin: 0 auto; - padding: 0 1rem 4rem 1rem; - font-family: sans-serif; + padding: 0 1rem 4rem 1em; + font-family: "Work Sans", sans-serif; color: var(--black); overflow-y: scroll; + line-height: 1.65; + font-size: 100%; +} + +p { + margin-bottom: 1.15em; } input { border: 1px var(--gray-2) solid; - padding: .3rem; + padding: .3em; } button { @@ -46,28 +54,43 @@ a, button.link { } } -h1, h2, h3, h4 { - margin-top: 1rem; - margin-bottom: 1rem; +h1, h2, h3, h4, h5 { + line-height: 1.15; } +h1 { + margin-top: 0; + font-size: 4.209em; +} + +h2 {font-size: 3.157em;} + +h3 {font-size: 2.369em;} + +h4 {font-size: 1.777em;} + +h5 {font-size: 1.333em;} + +small, .text_small {font-size: 0.75em;} + /* Navbar */ .nav { display: flex; - min-height: 3.25rem; + min-height: 3.25em; position: relative; justify-content: space-between; align-items: center; .branding { margin: 0; + font-size: 1.777em; } .nav-links { display: flex; .link { - margin-left: 1rem; + margin-left: 1em; } } } @@ -83,19 +106,19 @@ ul.pagination { } .page-item { - height: 2.5rem; + height: 2.5em; text-align: center; &.left, &.right { - width: 7rem; + width: 7em; } .page-link { display: inline-block; height: 100%; - margin-right: .4rem; - padding: .75rem 1rem; + margin-right: .4em; + padding: .75rem 1em; color: var(--black); text-decoration: none; @@ -118,7 +141,7 @@ ul.pagination { } .spacing { - margin: auto 1rem; + margin: auto 1em; font-weight: normal; } } @@ -144,7 +167,7 @@ ul.entity_list { li.artist, li.disc, li.song { border-bottom: 2px var(--gray-1) solid; - margin-bottom: 1rem; + margin-bottom: 1em; &:last-child { margin-bottom: auto; @@ -166,11 +189,11 @@ ul.entity_list { display: flex; flex-direction: column; justify-content: center; - padding-left: 1rem; + padding-left: 1em; .small { color: var(--gray-4); - font-size: .8rem; + font-size: .8em; } } @@ -178,18 +201,18 @@ ul.entity_list { } li.artist { - height: 4rem; + height: 4em; } li.disc { - height: 14rem; + height: 14em; a { .coverart { object-fit: cover; width: 200px; height: 200px; - margin: 1rem; + margin: 1em; border: 1px solid var(--gray-2); &.loading { @@ -199,11 +222,11 @@ ul.entity_list { .release-date { display: inline-block; - font-size: .7rem; + font-size: .7em; background-color: var(--gray-4);; color: var(--white); - padding: .1rem .5rem; - border-radius: .25rem; + padding: .1rem .5em; + border-radius: .25em; text-align: center; line-height: 1; } @@ -211,7 +234,7 @@ ul.entity_list { } li.song { - height: 4rem; + height: 4em; } } @@ -223,7 +246,7 @@ ul.tabs { margin: 1rem 0; li.tab { - padding: .5rem 1rem; + padding: .5rem 1em; margin-bottom: -2px; cursor: pointer; diff --git a/src/styles/reset.css b/src/styles/reset.css index 87ba61f..950b471 100644 --- a/src/styles/reset.css +++ b/src/styles/reset.css @@ -33,7 +33,7 @@ dd { body { min-height: 100vh; scroll-behavior: smooth; - text-rendering: optimizeSpeed; + text-rendering: optimizeLegibility; line-height: 1.5; }