diff options
author | Rasmus Dahlberg <rasmus@mullvad.net> | 2022-03-27 22:48:48 +0200 |
---|---|---|
committer | Rasmus Dahlberg <rasmus@mullvad.net> | 2022-03-27 22:48:48 +0200 |
commit | db6ad1e00ea255fdae9306ab3133debcbd4d1732 (patch) | |
tree | 9c81317478b99220868baa42463fdeafd80f5e9d /hugo/assets | |
parent | dcf08e5f695afe5cf0b84f1131e0c2599ae229ad (diff) |
update source of www.sigsum.org
New template, font, colors, and logo. A few edits to text, chunking it
up under a few different pages that can be navigated.
Diffstat (limited to 'hugo/assets')
-rw-r--r-- | hugo/assets/sass/researcher.scss | 183 |
1 files changed, 183 insertions, 0 deletions
diff --git a/hugo/assets/sass/researcher.scss b/hugo/assets/sass/researcher.scss new file mode 100644 index 0000000..37e4234 --- /dev/null +++ b/hugo/assets/sass/researcher.scss @@ -0,0 +1,183 @@ +@font-face { + font-family: 'Outfit'; + font-style: normal; + font-weight: 300; + src: local(''), + url('../fonts/outfit-v4-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ + url('../fonts/outfit-v4-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} + +// Sizes +$max-width: {{ .Param "style.pageWidth" | default "750px;" }}; +$avatar-size: {{ .Param "style.avatarSize" | default "90px;" }}; + +// Colors +$white: {{ .Param "style.colorWhite" | default "#ffffff" }}; +$black: {{ .Param "style.colorBlack" | default "#222222" }}; +$blue: {{ .Param "style.colorRed" | default "#6B60E3" }}; +$orange: {{ .Param "style.colorOrange" | default "#DB4D2C" }}; +$darkOrange: {{ .Param "style.colorRed" | default "#581303" }}; +$gray: {{ .Param "style.colorGray" | default "#FAF9F5" }}; +$darkGray: {{ .Param "style.colorDarkGray" | default "#333333" }}; + +// Font +$font-family: {{ .Param "style.fontFamily" | default "Inconsolata" }}; + +// Margins +$y-small: 0.6rem; +$y-medium: 1.0rem; + +// Placeholders +%link-default { + color: $blue; + text-decoration: none; + & * { + color: $blue; + } + &:hover { + color: $blue; + 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: $font-family; + line-height: 1.2; +} +.container { + max-width: $max-width; +} +.navbar-brand { + @extend %link-dark; + font-size: 2rem; +} +.nav-link { + @extend %link-default; +} +#content { + a { + @extend %link-default; + } + p { + margin-bottom: $y-small; + } + h1, h2, h3, h4, h5, h6 { + font-size: medium; + font-weight: bold; + margin: $y-medium 0 $y-small 0; + color: $darkGray; + } + @for $i from 1 through 4 { + h#{$i} { + font-size: 1.2rem + 0.2 * (4 - $i); + } + } + img { + display: block; + margin: $y-medium auto; + max-width: 100%; + } + .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; + padding-left: 2rem; + & > li { + display: table-row; + } + & > li:before { + content: "[" counter(list, decimal) "] "; + counter-increment: list; + display: table-cell; + text-align: right; + padding-right: .5em; + } + } + .container > ol, .footnotes > ol { + padding-left: 0; + } + ul { + list-style: inside; + padding-left: 2rem; + & > li { + list-style-position: outside; + margin-left: 1em; + } + } + .container > ul, .footnotes > ul { + padding-left: 0; + } + table { + margin: $y-medium auto; + width: 100%; + & th { + @extend %table-cell; + font-weight: bold; + } + & td { + @extend %table-cell; + } + & tr:nth-child(2n) { + background-color: #f8f8f8; + } + } + blockquote { + border-left: 4px solid; + font-style: italic; + margin: $y-medium 0; + padding: 8px 8px; + color: $orange; + } + pre{ + color: $darkOrange; + } + code { + color: $black; + background-color: #f8f8f8; + border: 1px solid #cccccc; + border-radius: 10%; + padding: 0px 4px; + } + pre code { + all: unset; + } + .highlight { + margin: $y-medium auto; + & > pre { + padding: 8px 8px; + } + } + b, strong { + color: $darkGray; + } +} +#footer { + a { + @extend %link-dark; + color: $darkGray; + } +} |