Initial thread design.

redesign/nimforum.scss

@@ -2,9 +2,9 @@
 // https://picturepan2.github.io/spectre/getting-started.html#installation
 // Define variables to override default ones
 $primary-color: #f99c19;
-// $dark-color: #3e396b;
+// $dark-color: #17181f;
 $label-color: #7cd2ff;
-$filter-color: #f1f1f1;
+$secondary-btn-color: #f1f1f1;
 
 // Define nav bar colours.
 $navbar-color: #17181f;
@@ -69,9 +69,9 @@ $logo-height: $navbar-height - 20px;
   margin-bottom: $control-padding-y*2;
 
   .dropdown > .btn {
-    background: $filter-color;
+    background: $secondary-btn-color;
-    border-color: darken($filter-color, 5%);
+    border-color: darken($secondary-btn-color, 5%);
-    color: invert($filter-color);
+    color: invert($secondary-btn-color);
 
     margin-right: $control-padding-x*2;
   }
@@ -134,3 +134,95 @@ $views-color: #545d70;
   border-bottom: 0.6rem solid #98c766;
   display: inline-block;
 }
+
+// - Thread view
+.title {
+  margin-top: $control-padding-y*2;
+  margin-bottom: $control-padding-y*2;
+
+  p {
+    font-size: 1.4rem;
+    font-weight: bold;
+
+    color: darken($dark-color, 20%);
+
+    margin: 0;
+  }
+}
+
+.posts {
+  @extend .grid-sm;
+  @extend .container;
+  margin: 0;
+}
+
+.post {
+  @extend .tile;
+}
+
+.post-icon {
+  @extend .tile-icon;
+}
+
+.post-avatar {
+  @extend .avatar;
+  @extend .avatar-xl;
+}
+
+.post-main {
+  @extend .tile-content;
+
+  margin-bottom: $control-padding-y-lg*2;
+}
+
+.post-title {
+  margin-bottom: $control-padding-y*2;
+
+  .post-username {
+    font-weight: bold;
+    display: inline-block;
+  }
+
+  .post-time {
+    float: right;
+  }
+}
+
+.post-content {
+
+}
+
+.post-buttons {
+  float: right;
+
+  > div {
+    display: inline-block;
+  }
+
+  .btn {
+    background: transparent;
+    border-color: transparent;
+    color: darken($secondary-btn-color, 40%);
+
+    margin: 0;
+    margin-left: $control-padding-y-sm;
+  }
+
+  .btn:hover {
+    background: $secondary-btn-color;
+    border-color: darken($secondary-btn-color, 5%);
+    color: invert($secondary-btn-color);
+  }
+
+  .btn:focus {
+    @include control-shadow(darken($secondary-btn-color, 50%));
+  }
+
+  .btn:active {
+    box-shadow: inset 0 0 .4rem .01rem darken($secondary-btn-color, 80%);
+  }
+
+  .like-button i {
+    color: #f783ac;
+  }
+}

redesign/thread.html

@@ -0,0 +1,129 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="x-ua-compatible" content="ie=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <title>The Nim programming language forum</title>
+
+  <link rel="stylesheet" href="nimforum.css">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">
+  <link rel="icon" href="images/favicon.png">
+</head>
+
+<body>
+    <header id="main-navbar">
+      <div class="navbar container grid-xl">
+        <section class="navbar-section">
+          <a href="#">
+            <img src="images/crown.png"
+                 id="img-logo"/>
+          </a>
+        </section>
+        <section class="navbar-section">
+          <div class="input-group input-inline">
+            <input class="form-input input-sm" type="text" placeholder="search">
+          </div>
+          <button class="btn btn-primary btn-sm"><i class="fas fa-user-plus"></i> Sign up</button>
+          <button class="btn btn-primary btn-sm"><i class="fas fa-sign-in-alt"></i> Log in</button>
+        </section>
+      </div>
+    </header>
+
+    <section class="container grid-xl">
+      <div class="title">
+        <p>Lexers and parsers in nim</p>
+        <div class="triangle"></div> community
+      </div>
+      <div class="posts">
+        <div class="post">
+          <div class="post-icon">
+            <figure class="post-avatar">
+              <img src="https://www.gravatar.com/avatar/aa81bb8117f158b6d9e6f3f174092573?s=80&amp;d=identicon" alt="Avatar">
+            </figure>
+          </div>
+          <div class="post-main">
+            <div class="post-title">
+              <div class="post-username">
+                ErikCampobadal
+              </div>
+              <div class="post-time">44m</div>
+            </div>
+            <div class="post-content">
+              <p>Hey! I'm willing to create a programming language using nim.</p>
+
+<p>It's an educational project. Been reading about compilers for weeks now and I started using tools like flex and bison for lexer and parser. I know nim have a parsing library but nowhere near that level.</p>
+
+<p>There is an old post (2014) with a similar question so I'm bringing that back a few years later. Is there anything anyone know that could speed up the process of developing a programing language using nim? (I can have c code if needed ofc)</p>
+            </div>
+            <div class="post-buttons">
+              <div class="like-button">
+                <button class="btn">
+                  <span class="like-count">2</span>
+                  <i class="fas 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 class="post">
+          <div class="post-icon">
+            <figure class="post-avatar">
+              <img src="https://www.gravatar.com/avatar/bfa46cf3ac91fcf26792ff824983e07e?s=80&d=identicon" alt="Avatar">
+            </figure>
+          </div>
+          <div class="post-main">
+            <div class="post-title">
+              <div class="post-username">
+                twetzel59
+              </div>
+              <div class="post-time">44m</div>
+            </div>
+            <div class="post-content">
+              <p>Wow, I was just reading about the compilation pipeline today!</p>
+
+<p>I suppose you could use at least the lexing part from a generator like <tt>flex</tt>, not so sure about using AST generators <b>easily</b> (it's possible).</p>
+
+<p>Is your language complicated enough to warrant a parser generator or could you just use a custom parser?</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>
+
+</body>
+
+</html>