Adjustments to code and blockquote styles.

redesign/nimforum.scss

@@ -2,7 +2,8 @@
 // https://picturepan2.github.io/spectre/getting-started.html#installation
 // Define variables to override default ones
 $primary-color: #f99c19;
-// $dark-color: #17181f;
+$body-font-color: #292929;
+$dark-color: #525252;
 $label-color: #7cd2ff;
 $secondary-btn-color: #f1f1f1;
 
@@ -180,7 +181,7 @@ $views-color: #545d70;
 
 .post-title {
   margin-bottom: $control-padding-y*2;
-
+  color: lighten($body-font-color, 20%);
   .post-username {
     font-weight: bold;
     display: inline-block;
@@ -229,3 +230,22 @@ $views-color: #545d70;
     color: #f783ac;
   }
 }
+
+blockquote {
+  border-left: 0.2rem solid darken($bg-color, 10%);
+  background-color: $bg-color;
+
+  .detail {
+    margin-bottom: $control-padding-y;
+    color: lighten($body-font-color, 20%);
+  }
+}
+
+.quote-avatar {
+  @extend .avatar;
+  @extend .avatar-sm;
+}
+
+.quote-link {
+  float: right;
+}

redesign/thread.html

@@ -121,6 +121,67 @@
           </div>
         </div>
 
+
+        <div class="post">
+          <div class="post-icon">
+            <figure class="post-avatar">
+              <img src="https://www.gravatar.com/avatar/1d180d9e0368472144840049b3d79448?s=80&d=identicon" alt="Avatar">
+            </figure>
+          </div>
+          <div class="post-main">
+            <div class="post-title">
+              <div class="post-username">
+                dom96 <i class="fas fa-shield-alt"></i> <i class="fas fa-chess-king"></i><!-- Random idea, allow to specify any icon class -->
+              </div>
+              <div class="post-time">32m</div>
+            </div>
+            <div class="post-content">
+              <p>Let us test this new design a bit, <i>shall we?</i></p>
+              <pre class="code" data-lang="Nim"><code>proc hello(x: int) =
+  echo("Hello ", x)
+
+42.hello()</code></pre>
+
+<p>The greatest function ever written is <code>hello</code>.</p>
+<blockquote>
+  <p>Designing websites is often a pain.</p>
+  <blockquote>Multi-level baby!</blockquote></blockquote>
+<p>True that.</p>
+<p>I also want to be able to support more detailed quoting:</p>
+<blockquote>
+  <div class="detail">
+    <figure class="quote-avatar">
+      <img src="https://www.gravatar.com/avatar/ad1ada3bea74a6afab83d2e40da1dcf3?s=30&d=identicon" alt="Avatar">
+    </figure>
+    <span class="quote-username">Araq:</span>
+    <span class="quote-link"><i class="fas fa-arrow-up"></i></span>
+  </div>
+  Unix is a cancer.
+</blockquote>
+<p>We also want to be able to highlight user mentions:</p>
+<p>Please let <a class="user-mention" href="#">@Araq</a> know that this forum is awesome.</p>
+            </div>
+            <div class="post-buttons">
+              <div class="like-button">
+                <button class="btn">
+                  <i class="far fa-heart"></i>
+                </button>
+              </div>
+              <div class="flag-button">
+                <button class="btn">
+                  <i class="far fa-flag"></i>
+                </button>
+              </div>
+              <div class="reply-button">
+                <button class="btn">
+                  <i class="fas fa-reply"></i>
+                  Reply
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
       </div>
     </section>