diff options
Diffstat (limited to 'assets/sass')
| -rw-r--r-- | assets/sass/researcher.scss | 130 | ||||
| -rw-r--r-- | assets/sass/variables.scss | 26 |
2 files changed, 78 insertions, 78 deletions
diff --git a/assets/sass/researcher.scss b/assets/sass/researcher.scss index 1631f1c..d7837d3 100644 --- a/assets/sass/researcher.scss +++ b/assets/sass/researcher.scss @@ -1,8 +1,43 @@ @import "variables"; +// Internal variables +$y-small: 0.6rem; +$y-medium: 1.0rem; + +// Placeholders +%link-default { + color: $red; + text-decoration: none; + & * { + color: $red; + } + &:hover { + color: $red; + text-decoration: underline; + } +} +%link-dark { + color: $black; + text-decoration: none; + & * { + color: $black; + } + &:hover { + color: $black; + text-decoration: underline; + } +} +%table-cell { + border: 1px solid #cccccc; + padding: 6px 12px; + text-align: left; +} + +// Style * { + color: $black; font-family: "Inconsolata"; - line-height: normal; + line-height: 1.2; } .container { max-width: $max-width; @@ -18,23 +53,13 @@ a { @extend %link-default; } - blockquote { - border-left: 4px solid; - font-style: italic; - margin: $margin-y 0; - padding: 8px 8px; - & p { - margin: 0; - } - } - code { - color: $green; + p { + margin-bottom: $y-small; } h1, h2, h3, h4, h5, h6 { font-size: medium; font-weight: bold; - line-height: normal; - margin: 1.2rem 0 0.8rem 0; + margin: $y-medium 0 $y-small 0; } @for $i from 1 through 4 { h#{$i} { @@ -43,61 +68,60 @@ } img { display: block; - margin: $margin-y auto; + margin: $y-medium auto; } - div > ol { - padding-left: 0; + .avatar > img { + border-radius: 50%; + float: right; + margin: -8px 0 0 16px; + height: $avatar-size; + width: $avatar-size; } ol { counter-reset: list; list-style: none; - & > li { - margin: 4px 0; - &:before { - content: "[" counter(list, decimal) "] "; - counter-increment: list; - } - } - } - pre code { - color: inherit; - } - div > ul { padding-left: 0; + & > li:before { + content: "[" counter(list, decimal) "] "; + counter-increment: list; + } } ul { list-style: inside; - & > li { - margin: 4px 0; - } + padding-left: 0; } table { - margin: $margin-y auto; + margin: $y-medium auto; width: 100%; - & tr { - background-color: white; - border: 1px solid #cccccc; - & td { - @extend %table-cell; - } - & th { - @extend %table-cell; - font-weight: bold; - } - &:nth-child(2n) { - background-color: #f8f8f8; - } + & th { + @extend %table-cell; + font-weight: bold; + } + & td { + @extend %table-cell; + } + & tr:nth-child(2n) { + background-color: #f8f8f8; } } - .avatar > img { - border-radius: 50%; - float: right; - margin: -8px 0 0 16px; - height: $avatar-size; - width: $avatar-size; + blockquote { + border-left: 4px solid; + font-style: italic; + margin: $y-medium 0; + padding: 8px 8px; + } + code { + color: $black; + background-color: #f8f8f8; + border: 1px solid #cccccc; + border-radius: 10%; + padding: 0px 4px; + } + pre code { + all: unset; } .highlight { - margin: $margin-y auto; + margin: $y-medium auto; & > pre { padding: 8px 8px; } diff --git a/assets/sass/variables.scss b/assets/sass/variables.scss index 923eaba..637e37a 100644 --- a/assets/sass/variables.scss +++ b/assets/sass/variables.scss @@ -1,31 +1,7 @@ // Sizes $max-width: 750px; -$margin-y: 16px; $avatar-size: 90px; // Colors -$green: #28a745; +$black: #222222; $red: #dc3545; - -// Placeholders -%link-default { - color: $red; - text-decoration: none; - &:hover { - color: $red; - text-decoration: underline; - } -} -%link-dark { - color: inherit; - text-decoration: none; - &:hover { - color: inherit; - text-decoration: underline; - } -} -%table-cell { - border: 1px solid #cccccc; - padding: 6px 12px; - text-align: left; -} |