Add sass files

3 files changed, 129 insertions, 0 deletions

diff --git a/assets/sass/researcher.scss b/assets/sass/researcher.scss
new file mode 100644
index 0000000..8acca57
--- /dev/null
+++ b/assets/sass/researcher.scss
@@ -0,0 +1,34 @@
+@import "variables";
+@import "typography";
+
+* {
+    color: $dark;
+    font-family: "Inconsolata";
+    line-height: normal;
+}
+h1, h2, h3, h4, h5, h6 {
+    font-size: medium;
+    font-weight: bold;
+    line-height: normal;
+    margin: 1.2rem 0 0.8rem 0;
+}
+@for $i from 1 through 4 {
+    h#{$i} {
+        font-size: 1.2rem + 0.2 * (4 - $i);
+    }
+}
+.container {
+    max-width: $max-width;
+}
+.navbar-brand {
+    @extend %link-dark;
+    font-size: 2rem;
+}
+.nav-link {
+    @extend %link-default;
+}
+footer {
+    a {
+        @extend %link-dark;
+    }
+}
diff --git a/assets/sass/typography.scss b/assets/sass/typography.scss
new file mode 100644
index 0000000..a1427c4
--- /dev/null
+++ b/assets/sass/typography.scss
@@ -0,0 +1,66 @@
+@import "variables";
+
+#content {
+    a {
+        @extend %link-default;
+    }
+    ol {
+        counter-reset: list;
+        list-style: none;
+        padding-left: 0;
+        & > li {
+            padding-left: 4ch;
+            text-indent: -4ch;
+            margin: 4px 0;
+            &:before {
+                content: "[" counter(list, decimal) "] ";
+                counter-increment: list;
+            }
+        }
+    }
+    ul {
+        list-style: inside;
+        padding-left: 0;
+        & > li {
+            margin: 4px 0;
+        }
+    }
+    blockquote {
+        border-left: 4px solid;
+        font-style: italic;
+        margin: $margin-y 0;
+        padding: 8px 8px;
+        & p {
+            margin: 0;
+        }
+    }
+    .avatar {
+        border-radius: 50%;
+        float: right;
+        margin: -8px 0 0 16px;
+        height: $avatar-size;
+        width: $avatar-size;
+    }
+    img {
+        display: block;
+        margin: $margin-y auto;
+    }
+    table {
+        margin: $margin-y 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;
+            }
+        }
+    }
+}
diff --git a/assets/sass/variables.scss b/assets/sass/variables.scss
new file mode 100644
index 0000000..6defa80
--- /dev/null
+++ b/assets/sass/variables.scss
@@ -0,0 +1,29 @@
+// Variables
+$max-width: 750px;
+$avatar-size: 90px;
+$margin-y: 16px;
+$red: #ff0f00;
+$dark: #000000;
+
+// Placeholders
+%link-default {
+    color: $red;
+    text-decoration: none;
+    &:hover {
+        color: $red;
+        text-decoration: underline;
+    }
+}
+%link-dark {
+    color: $dark;
+    text-decoration: none;
+    &:hover {
+        color: $dark;
+        text-decoration: underline;
+    }
+}
+%table-cell {
+    border: 1px solid #cccccc;
+    padding: 6px 12px;
+    text-align: left;
+}