diff options
| -rw-r--r-- | assets/sass/researcher.scss | 130 | ||||
| -rw-r--r-- | assets/sass/variables.scss | 26 | ||||
| -rw-r--r-- | exampleSite/content/about.md | 27 |
3 files changed, 100 insertions, 83 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; -} diff --git a/exampleSite/content/about.md b/exampleSite/content/about.md index 187c530..04cf0d4 100644 --- a/exampleSite/content/about.md +++ b/exampleSite/content/about.md @@ -6,11 +6,18 @@ title = "About" {{< figure class="avatar" src="/avatar.jpg" >}} -This is a Hugo based resume template. You can find the full source code on [GitHub](https://github.com/ojroques/hugo-researcher). +This is a Hugo based resume template. You can find the full source code on +[GitHub](https://github.com/ojroques/hugo-researcher). ## Research Interest -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam finibus ipsum ac erat aliquam dapibus. Vestibulum vehicula placerat ex, a consectetur odio pharetra quis. Mauris id urna ante. Fusce pharetra diam ac nisi aliquet, vel egestas ex iaculis. Pellentesque laoreet cursus tellus sed pellentesque. Praesent a rhoncus elit. Nunc ipsum nisl, consequat sit amet pretium quis, gravida id ipsum. +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam finibus ipsum +ac erat aliquam dapibus. Vestibulum vehicula placerat ex, a consectetur odio +pharetra quis[^1]. Mauris id urna ante. + +Fusce pharetra diam ac nisi aliquet, velegestas ex iaculis. Pellentesque +laoreet cursus tellus sed pellentesque. Praesent a rhoncus elit[^2]. Nunc +ipsum nisl, consequat sit amet pretium quis, gravida id ipsum. ## Publications @@ -22,7 +29,7 @@ In chronological order: This is a [link](http://google.com). Something *italics* and something **bold**. -Here is a table +Here is a table: Year | Award | Category -----|-------|-------- @@ -30,15 +37,25 @@ Year | Award | Category 2015 | BAFTA | Nominated for Best Leading Actor for Sherlock 2014 | Satellite | Won Best Actor miniseries or television film -Here is a horizontal rule +Here is a horizontal rule: --- -Here is a blockquote +Here is a blockquote: > To a great mind, nothing is little +Here is a `code` block: + +```python +def is_elementary(): + return True +``` + ## References * Foo Bar: Head of Department, Placeholder Names, Lorem * John Doe: Associate Professor, Department of Computer Science, Ipsum + +[^1]: This is the first footnote. +[^2]: This is the second footnote. |