aboutsummaryrefslogtreecommitdiff
path: root/hugo/assets
diff options
context:
space:
mode:
authorRasmus Dahlberg <rasmus@mullvad.net>2022-03-27 22:48:48 +0200
committerRasmus Dahlberg <rasmus@mullvad.net>2022-03-27 22:48:48 +0200
commitdb6ad1e00ea255fdae9306ab3133debcbd4d1732 (patch)
tree9c81317478b99220868baa42463fdeafd80f5e9d /hugo/assets
parentdcf08e5f695afe5cf0b84f1131e0c2599ae229ad (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.scss183
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;
+ }
+}