Move to SASS

2020-03-23 21:01:32 +00:00 · 2020-03-23 21:01:32 +00:00 · 47c7cf1aa4
commit 47c7cf1aa4
parent 3ab7ab54b4
11 changed files with 1136 additions and 562 deletions
--- a/Website/wwwroot/css/blog.scss
+++ b/Website/wwwroot/css/blog.scss
@ -0,0 +1,157 @@
+@import "colours.scss";
+
+.blog-post {
+    &__image-container {
+        max-width: 100%;
+        padding: 10px;
+        background: $Grey-200;
+        display: inline-block;
+        margin: auto;
+        text-align: center;
+        border-radius: 4px;
+
+        &--container {
+            text-align: center;
+        }
+
+        &--image {
+            max-width: 100%;
+        }
+
+        &--tagline {
+            margin-top: 10px;
+            display: block;
+        }
+    }
+
+    :not(pre)>code {
+        padding: 2px;
+        background: $Grey-200;
+        border-radius: 2px;
+        border: 1px solid $Grey-400;
+    }
+
+    pre>code {
+        border-left: 4px solid $primary;
+        margin-bottom: 10px;
+        overflow: auto;
+        padding: 6px;
+        padding-left: 10px;
+        tab-size: 4;
+        -moz-tab-size: 4;
+
+        /**
+		 * Obsidian style
+		 * ported by Alexander Marenin (http://github.com/ioncreature)
+		 */
+        display: block;
+        overflow-x: auto;
+        background: #282b2e;
+        color: #e0e2e4;
+
+        .hljs-keyword,
+        .hljs-selector-tag,
+        .hljs-literal,
+        .hljs-selector-id {
+            color: #93c763;
+        }
+
+        .hljs-number {
+            color: #ffcd22;
+        }
+
+        .hljs-attribute {
+            color: #668bb0;
+        }
+
+        .hljs-code,
+        .hljs-class .hljs-title,
+        .hljs-section {
+            color: white;
+        }
+
+        .hljs-regexp,
+        .hljs-link {
+            color: #d39745;
+        }
+
+        .hljs-meta {
+            color: #557182;
+        }
+
+        .hljs-tag,
+        .hljs-name,
+        .hljs-bullet,
+        .hljs-subst,
+        .hljs-emphasis,
+        .hljs-type,
+        .hljs-built_in,
+        .hljs-selector-attr,
+        .hljs-selector-pseudo,
+        .hljs-addition,
+        .hljs-variable,
+        .hljs-template-tag,
+        .hljs-template-variable {
+            color: #8cbbad;
+        }
+
+        .hljs-string,
+        .hljs-symbol {
+            color: #ec7600;
+        }
+
+        .hljs-comment,
+        .hljs-quote,
+        .hljs-deletion {
+            color: #818e96;
+        }
+
+        .hljs-selector-class {
+            color: #A082BD
+        }
+
+        .hljs-keyword,
+        .hljs-selector-tag,
+        .hljs-literal,
+        .hljs-doctag,
+        .hljs-title,
+        .hljs-section,
+        .hljs-type,
+        .hljs-name,
+        .hljs-strong {
+            font-weight: bold;
+        }
+    }
+}
+
+.blog-navigation {
+    display: flex;
+    justify-content: space-between;
+
+    &__next {
+        margin-left: auto;
+    }
+}
+
+.edit-form {
+    &__title {
+        display: flex;
+
+        &__label {
+            flex: 0 0 auto;
+            margin-right: 5px;
+        }
+
+        &__input {
+            flex: 1 1 auto;
+        }
+    }
+}
+
+.post-list {
+    border-collapse: collapse;
+
+    &__post:hover {
+        background: $Grey-300;
+    }
+}