aboutsummaryrefslogtreecommitdiff
path: root/assets/sass
diff options
context:
space:
mode:
authorOlivier Roques <olivier@oroques.dev>2020-11-21 23:56:15 +0100
committerOlivier Roques <olivier@oroques.dev>2020-11-22 13:10:35 +0100
commit5932c9799566a621572c8cd96697a8005e5e0bb7 (patch)
tree0dd53725283868d8b9d7978d0a68c593bd404e17 /assets/sass
parentabc4a6c4231ba92f6ae6f8a2a2b22166a70b9dbd (diff)
Improve and clean SCSS
Diffstat (limited to 'assets/sass')
-rw-r--r--assets/sass/researcher.scss130
-rw-r--r--assets/sass/variables.scss26
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;
-}