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

Initial thread design.

Browse source
This commit is contained in:
Dominik Picheta 2018-05-08 16:02:43 +01:00
commit e51b74a017
2 changed files with 226 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

102
redesign/nimforum.scss
View file

@ -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;
border-color: darken($filter-color, 5%);
color: invert($filter-color);
background: $secondary-btn-color;
border-color: darken($secondary-btn-color, 5%);
color: invert($secondary-btn-color);
margin-right: $control-padding-x*2;
}
@ -133,4 +133,96 @@ $views-color: #545d70;
border-right: 0.3rem solid transparent;
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;
}
}

129
redesign/thread.html Normal file
View file

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