jyapayne/nimforum
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adjustments to code and blockquote styles.

Browse source
This commit is contained in:
Dominik Picheta 2018-05-08 16:54:35 +01:00
commit f4a1a97ccf
2 changed files with 83 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

24
redesign/nimforum.scss
View file

@ -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;
@ -228,4 +229,23 @@ $views-color: #545d70;
.like-button i {
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;
}

61
redesign/thread.html
View file

@ -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>