diff --git a/scss/clear-typography.scss b/scss/clear-typography.scss index 9372587..b9fa2a0 100644 --- a/scss/clear-typography.scss +++ b/scss/clear-typography.scss @@ -29,10 +29,6 @@ } } -// Don't change this one, it's just to -// make code more readable -$lineheight: 1rem; - html { font-family: var(--font-family); text-align: left; @@ -108,7 +104,7 @@ a { li { - margin-left: $lineheight; + margin-left: 1rem; } ::selection, ::-moz-selection { @@ -121,54 +117,57 @@ hr { border-bottom: 1px solid var(--border-color); } +code, mark { - border-radius: 0.2em; - padding:0 $lineheight/4 0 $lineheight/4; - + background-color:var(--well-color); + padding: 5px; + border-radius: 3px; +} + +mark { background-color: var(--accent-color-back); - color: inherit; +} + +pre, code { + font-family: var(--font-family-monospace); } /* ------------------ TITLES ------------------- */ -@mixin title($size, $weight) { - font-size: $size; - font-weight: $weight; -} - h1, h2, h3, h4, h5, h6 { text-align: left; line-height: 1; - font-weight:400; + font-weight:700; } h1 { - @include title(2.3333333rem, 700); + font-size: 3rem; } h2 { - @include title(2rem, 700); + font-size: 2.33rem; } h3 { - @include title(1.5rem, 700); + font-size: 1.75rem; } h4 { - @include title(1.5rem, 600); + font-size: 1.5rem; } h5 { - @include title(1.333333rem, 600); + font-size: 1.25rem; } h6 { - @include title(1.1rem, 600); + font-size: 1rem; + font-weight: 800; } /* ------------------ HR ------------------- */ -/* ------------------ QUOTE ------------------- */ +/* ------------------ blocks ------------------- */ blockquote, pre, @@ -183,16 +182,6 @@ details { border-left: 6px solid var(--accent-color); } -pre, code { - font-family: var(--font-family-monospace); -} - -code { - background-color:var(--well-color); - padding: 5px; - border-radius: 3px; -} - /* ------------------ SPECIAL STYLING ------------------- */