First steps towards new forum design.

This commit is contained in:
Dominik Picheta 2014-10-29 22:12:05 +00:00
commit 4de7e58511
19 changed files with 736 additions and 859 deletions

View file

@ -13,43 +13,61 @@
# #
# result = "" # result = ""
# count = 0 # count = 0
<table id="threads"> <div id="talk-heads">
<tr> <div class="topic"><div>Topic</div></div>
<th>Topics</th> <div class="reply"><div>Last</div></div>
<th>Author</th> <div class="detail"><div>Details</div></div>
<th>Posts</th> <div class="author"><div>Author</div></div>
<th>Views</th> </div>
<th>Last reply</th> <div id="talk-threads">
</tr>
# for row in rows(db, query, $((c.pageNum-1) * ThreadsPerPage), $ThreadsPerPage): # for row in rows(db, query, $((c.pageNum-1) * ThreadsPerPage), $ThreadsPerPage):
# inc(count) # inc(count)
<tr> <div>
<td class="topic"> <div class="topic">
${UrlButton(c, xmlEncode(%name), c.genThreadUrl(threadid = %threadid))} <div>
${genPagenumLocalNav(c, (%threadid).parseInt)} ${UrlButton(c, xmlEncode(%name), c.genThreadUrl(threadid = %threadid))}
</td> ${genPagenumLocalNav(c, (%threadid).parseInt)}
#let authorName = getValue(db, sql("select name from person where id = " & </div>
# "(select author from post where id = " & </div>
# "(select min(id) from post where thread = ?))"), %threadId)
#let profileUrl = c.req.makeUri("profile/", false) & xmlEncode(authorName)
<td class="author"><a href="$profileUrl">${authorName}</a></td>
# let posts = getValue(db, sql"select count(*) from post where thread = ?", %threadId)
<td class="posts">$posts</td>
<td class="views">${xmlEncode(%views)}</td>
#let latestReplyAuthor = getValue(db, sql("select name from person where id = " & #let latestReplyAuthor = getValue(db, sql("select name from person where id = " &
# "(select author from post where id = " & # "(select author from post where id = " &
# "(select max(id) from post where thread = ?))"), %threadId) # "(select max(id) from post where thread = ?))"), %threadId)
#let latestReplyDate = getValue(db, sql("SELECT strftime('%s', " & #let latestReplyDate = getValue(db, sql("SELECT strftime('%s', " &
# "(select creation from post where id = (select max(id) from post where thread = ?)))"), %threadId) # "(select creation from post where id = (select max(id) from post where thread = ?)))"), %threadId)
<td class="lastreply"> #let timeStr = formatTimestamp(latestReplyDate.parseInt())
<span>${formatTimestamp(latestReplyDate.parseInt())}</span><br/> #let replyProfileUrl = c.req.makeUri("profile/", false) &
#let replyProfileUrl = c.req.makeUri("profile/", false) & # xmlEncode(latestReplyAuthor)
# xmlEncode(latestReplyAuthor) <div class="reply">
<span><a href="$replyProfileUrl">${latestReplyAuthor}</a></span> <div>
</td> <a href="$replyProfileUrl" title="$timeStr">$latestReplyAuthor</a>
</tr> </div>
</div>
# let posts = getValue(db, sql"select count(*) from post where thread = ?", %threadId)
<div class="detail">
<div><div>${xmlEncode(%views)}</div></div>
<div><div>$posts</div></div>
</div>
#let authorName = getValue(db, sql("select name from person where id = " &
# "(select author from post where id = " &
# "(select min(id) from post where thread = ?))"), %threadId)
#let profileUrl = c.req.makeUri("profile/", false) & xmlEncode(authorName)
<div class="author">
<div><a href="$profileUrl">$authorName</a></div>
</div>
</div>
# end for # end for
</table>
<div>
<div class="topic"><div><a href="http://reign-studios.net/philipwitte/nim/forum-thread.htm">Cannot generate code for N (static[int]) in template</a></div></div>
<div class="reply"><div><a href="#" title="Mon, 29 Sep 2014 23:11 UTC">marcianx</a></div></div>
<div class="detail"><div><div>135</div></div><div><div>8</div></div></div>
<div class="author"><div><a href="#">marcianx</a></div></div>
</div>
</div>
#end proc #end proc
# #
# #
@ -205,38 +223,14 @@
# #
#proc genListOnline(c: var TForumData, stats: TForumStats): string = #proc genListOnline(c: var TForumData, stats: TForumStats): string =
# result = "" # result = ""
<div id="whoisonline"> # var active: seq[string] = @[]
<div class="wioHeader"> # for i in stats.activeUsers:
<span>Who is online?<span> # active.add(i.nick)
</div> # end for
<div class="content"> # let profileUrl = c.req.makeUri("profile/", false) &
<span>Out of ${stats.totalUsers} users ${stats.activeUsers.len} are online${if stats.activeUsers.len == 0: "." else: ":"} # xmlEncode(stats.newestMember.nick)
#for index, usr in stats.activeUsers: <span class="forum-user-info" title="${active.join(", ")}">
# let profileHref = """<a href="""" & c.req.makeUri("profile/", false) & <b>${stats.activeUsers.len}</b> of <b>${stats.totalUsers}</b> users online</span> &nbsp;|&nbsp;
# xmlEncode(usr.nick) & """">""" <b>${stats.totalThreads}</b> threads &nbsp;|&nbsp; <b>${stats.totalPosts}</b> posts &nbsp;|&nbsp;
# let hrefEnd = """</a>""" newest member: <a href="$profileUrl">${stats.newestMember.nick}</a>
# if usr.isAdmin:
#if index != 0: result.add ','
#end if
#result.add("""<span class="user admin"> """ & profileHref &
# usr.nick & hrefEnd & """</span>""")
# else:
#if index != 0: result.add ','
#end if
#result.add("""<span class="user"> """ & profileHref &
# usr.nick & hrefEnd & """</span>""")
# end if
#end for
</span>
<hr/>
#if stats.newestMember.nick != "":
#let profileUrl = c.req.makeUri("profile/", false) &
# xmlEncode(stats.newestMember.nick)
<span>Total threads: ${stats.totalThreads} | Total posts: ${stats.totalPosts} | Newest member: <a href="$profileUrl">${stats.newestMember.nick}</a></span>
#else:
<span>Total threads: ${stats.totalThreads} | Total posts: ${stats.totalPosts}</span>
#end if
</div>
</div>
#end proc #end proc

View file

@ -485,7 +485,7 @@ proc genPagenumNav(c: var TForumData, stats: TForumStats): string =
nextUrl = c.req.makeUri("/page/" & $(c.pageNum+1)) nextUrl = c.req.makeUri("/page/" & $(c.pageNum+1))
else: else:
firstUrl = c.req.makeUri("/t/" & $c.threadId) firstUrl = c.req.makeUri("/t/" & $c.threadId)
if c.pageNum == 1: if c.pageNum == 1:
prevUrl = firstUrl prevUrl = firstUrl
else: else:
prevUrl = c.req.makeUri(firstUrl & "/" & $(c.pageNum-1)) prevUrl = c.req.makeUri(firstUrl & "/" & $(c.pageNum-1))
@ -499,26 +499,13 @@ proc genPagenumNav(c: var TForumData, stats: TForumStats): string =
var firstTag = "" var firstTag = ""
var prevTag = "" var prevTag = ""
if c.pageNum == 1: if c.pageNum == 1:
firstTag = span("First") firstTag = span("<<")
prevTag = span("Prev") prevTag = span("<••")
else: else:
firstTag = htmlgen.a(href=firstUrl, "First") firstTag = htmlgen.a(href=firstUrl, "<<")
prevTag = htmlgen.a(href=prevUrl, "Prev") prevTag = htmlgen.a(href=prevUrl, "<••")
result.add(htmlgen.`div`(class = "left", result.add(firstTag)
firstTag, result.add(prevTag)
prevTag))
# Right
var lastTag = ""
var nextTag = ""
if c.pageNum == totalPages:
lastTag = span("Last")
nextTag = span("Next")
else:
lastTag = htmlgen.a(href=lastUrl, "Last")
nextTag = htmlgen.a(href=nextUrl, "Next")
result.add(htmlgen.`div`(class = "right",
nextTag,
lastTag))
# Numbers # Numbers
var pages = "" # Tags var pages = "" # Tags
@ -533,10 +520,19 @@ proc genPagenumNav(c: var TForumData, stats: TForumStats): string =
pageUrl = c.req.makeUri(firstUrl & "/" & $(i)) pageUrl = c.req.makeUri(firstUrl & "/" & $(i))
pages.add(htmlgen.a(href = pageUrl, $(i))) pages.add(htmlgen.a(href = pageUrl, $(i)))
result.add(htmlgen.`div`(class = "middle", result.add(pages)
pages))
result = htmlgen.`div`(id = "pagenumbers", result) # Right
var lastTag = ""
var nextTag = ""
if c.pageNum == totalPages:
lastTag = span(">>")
nextTag = span("••>")
else:
lastTag = htmlgen.a(href=lastUrl, ">>")
nextTag = htmlgen.a(href=nextUrl, "••>")
result.add(lastTag)
result.add(nextTag)
proc gatherTotalPostsByID(c: var TForumData, thrid: int): int = proc gatherTotalPostsByID(c: var TForumData, thrid: int): int =
## Gets the total post count of a thread. ## Gets the total post count of a thread.

163
main.tmpl
View file

@ -11,76 +11,109 @@
<html lang="en"> <html lang="en">
<head> <head>
<title>${xmlEncode(title)}</title> <title>${xmlEncode(title)}</title>
<link rel="stylesheet" href="${c.req.makeUri("css/normalize.css", absolute = false)}"> <link rel="stylesheet" href="${c.req.makeUri("css/style.css", absolute = false)}">
<link rel="stylesheet" href="${c.req.makeUri("css/style.css", absolute = false)}">${additional_headers} <link rel="shortcut icon" href="${c.req.makeUri("favicon.ico", absolute = false)}">${additional_headers}
<meta charset="UTF-8"> <meta charset="UTF-8">
</head> </head>
<body> <body>
<div id="wrapper"> <!--- #head --->
#let frontQuery = c.req.makeUri("/") #let frontQuery = c.req.makeUri("/")
<div id="nimbtn"> <header id="head" class="forum">
<a href="${frontQuery}">Forum</a> <div class="wide-layout tall">
<div id="head-logo"></div>
<a id="head-logo-link" href="home.htm"></a>
<nav id="head-links">
<a href="http://nim-lang.org/">home</a>
<a href="http://nim-lang.org/">docs</a>
<a href="http://nim-lang.org/">learn</a>
<a href="${frontQuery}" class="active">forum</a>
<a href="#">download</a>
<a href="#">faq</a>
</nav>
</div> </div>
</header>
<!--- #neck --->
<section id="neck">
<div class="wide-layout tall">
<div style="right: 131px;" id="glow-arrow" class="forum"></div>
</div>
</section>
<!--- #body --->
<section id="body" class="forum">
<div id="body-border"></div>
<div id="body-border-left"></div>
<div id="body-border-right"></div>
<div id="body-border-bottom"></div>
<div id="glow-line"></div>
<div id="glow-line-bottom"></div>
<div class="talk-layout">
<article id="content">
${content}
#if c.isThreadsList:
<div id="talk-info">
<div class="info">
<div>
#if c.loggedIn:
#let profileUrl = c.req.makeUri("profile/", false) &
# xmlEncode(c.username)
<span>Welcome <a href="$profileUrl">${c.username}!</a></span>
&nbsp;|&nbsp;
<!--<a href="$profileUrl">${genGravatar(c.email, 26)}</a>-->
#end if
${c.genListOnline(stats)}
</div>
</div>
<div class="user">
<div>
#if c.loggedIn:
<a href="${frontQuery}newthread">new thread</a>
&nbsp;|&nbsp;
<a href="${frontQuery}logout">logout</a>
#else:
<a href="${frontQuery}login">login</a>
&nbsp;|&nbsp;
<a href="${frontQuery}register">register</a>
#end if
</div>
</div>
</div>
#end if
<div id="talk-nav">
${genPagenumNav(c, stats)}
</div>
</article>
</div>
</section>
<!--- #foot --->
<footer id="foot" class="forum">
<div class="talk-layout tall">
<div id="foot-links">
<div>
<h4>Documentation</h4>
<a href="http://reign-studios.net/philipwitte/nim/docs.htm">Stable Documentation</a>
<a href="http://reign-studios.net/philipwitte/nim/docs.htm">Development Documentation</a>
<a href="https://github.com/Araq/Nimrod">Github Issues &amp; Requests</a>
</div>
<div>
<h4>Community</h4>
<a href="http://reign-studios.net/philipwitte/nim/forum.htm">User Forum</a>
<a href="http://webchat.freenode.net/?channels=nimlang">Online IRC</a>
<a href="http://build.nimrod-lang.org/irclogs/">IRC Logs</a>
</div>
</div>
<div id="foot-legal">
<h4>Written in Nim - Powered by <a href="#">Jester</a></h4>
Web Design by <a href="#">Philip Witte</a> &amp; <a href="#">Dominik Picheta</a><br>
Copyright © 2014 - <a href="#">Andreas Rumpf</a> &amp; <a href="#">Contributors</a>
</div>
</div>
</footer>
<div id="header"> <script src="${frontQuery}js/arrow.js"></script>
<span>Nimrod's <a href="http://nimrod-lang.org/">homepage</a></span> <script src="${frontQuery}js/forum.js"></script>
<span><a href="http://nimrod-lang.org/documentation.html">stable docs</a></span>
<span><a href="http://build.nimrod-lang.org/docs/overview.html">development docs</a></span>
<span><a href="https://github.com/Araq/Nimrod/issues">github issues</a></span>
#if c.loggedIn:
<a href="${frontQuery}logout" class="right">Logout</a>
#let profileUrl = c.req.makeUri("profile/", false) &
# xmlEncode(c.username)
<span id="welcome"><a href="${profileUrl}">$c.username</a></span>
<a href="$profileUrl">${genGravatar(c.email, 26)}</a>
#else:
<a href="${frontQuery}register" class="right">Register</a>
<a href="${frontQuery}login" class="right">Login</a>
#end if
</div>
<div id="topbar">
${c.genActionMenu}
</div>
<div id="content">
$content
<span style="color:red">$c.errorMsg</span>
</div>
#if c.req.pathInfo.normalizeUri notin noPageNums:
${c.genPagenumNav(stats)}
#end if
<div id="topbar">
${c.genActionMenu}
</div>
#if c.isThreadsList:
${c.genListOnline(stats)}
#end if
#if showRssLinks:
<span id="rss">
<a href="${c.req.makeUri("/threadActivity.xml")}"
><img
src="${c.req.makeUri("/images/Feed-icon.svg", absolute = false)}"
class="rssfeed"
>Thread activity</a>
<a href="${c.req.makeUri("/postActivity.xml")}"
><img
src="${c.req.makeUri("/images/Feed-icon.svg", absolute = false)}"
class="rssfeed"
>Posts activity</a>
</span>
#end if
<div id="footerPush"></div>
</div>
<div id="footer">
<span>Written in <a href="http://nimrod-lang.org/">Nimrod</a> using <a href="https://github.com/dom96/jester">Jester</a></span>
<span> | <a href="https://github.com/nimrod-code/nimforum">Fork on Github</a></span>
<span> | User contributions licensed under <a href="http://creativecommons.org/licenses/by-sa/3.0/">cc-wiki</a> with <a href="/license">attribution required</a></span>
<span style="float:right;">Generated in ${int((epochTime()-c.startTime)*1000.0)}ms</span>
</div>
</body> </body>
</html> </html>
#end proc #end proc

12
public/css/arrow.js Normal file
View file

@ -0,0 +1,12 @@
"use strict";
function positionGlowArrow() {
var headLinks = document.getElementById("head-links");
var activeLink = headLinks.getElementsByClassName("active")[0]
if (activeLink == undefined || activeLink == null)
return;
var offset = (headLinks.offsetWidth - activeLink.offsetLeft) - (activeLink.offsetWidth / 2) - 133;
var glowArrow = document.getElementById("glow-arrow");
glowArrow.style.right = offset + "px";
}

5
public/css/forum.js Normal file
View file

@ -0,0 +1,5 @@
"use strict";
window.onload = function() {
positionGlowArrow();
};

View file

@ -1,284 +0,0 @@
/*
* HTML5 Boilerplate
*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*
* Detailed information about this CSS: h5bp.com/css
*
* ==|== normalize ==========================================================
*/
/* =============================================================================
HTML5 display definitions
========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
/* =============================================================================
Base
========================================================================== */
/*
* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
* 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
*/
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: sans-serif; color: #222; }
body { margin: 0; font-size: 1em; line-height: 1.4; }
/* =============================================================================
Links
========================================================================== */
a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }
/* =============================================================================
Typography
========================================================================== */
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* =============================================================================
Lists
========================================================================== */
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
/* =============================================================================
Embedded content
========================================================================== */
/*
* 1. Improve image quality when scaled in IE7: h5bp.com/d
* 2. Remove the gap between images and borders on image containers: h5bp.com/i/440
*/
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
/*
* Correct overflow not hidden in IE9
*/
svg:not(:root) { overflow: hidden; }
/* =============================================================================
Figures
========================================================================== */
figure { margin: 0; }
/* =============================================================================
Forms
========================================================================== */
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }
/*
* 1. Correct color not inheriting in IE6/7/8/9
* 2. Correct alignment displayed oddly in IE6/7
*/
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
/*
* 1. Correct font-size not inheriting in all browsers
* 2. Remove margins in FF3/4 S5 Chrome
* 3. Define consistent vertical alignment display in all browsers
*/
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
/*
* 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
*/
button, input { line-height: normal; }
/*
* 1. Display hand cursor for clickable form elements
* 2. Allow styling of clickable form elements in iOS
* 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
*/
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
/*
* Re-set default cursor for disabled elements
*/
button[disabled], input[disabled] { cursor: default; }
/*
* Consistent box sizing and appearance
*/
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
/*
* Remove inner padding and border in FF3/4: h5bp.com/l
*/
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
/*
* 1. Remove default vertical scrollbar in IE6/7/8/9
* 2. Allow only vertical resizing
*/
textarea { overflow: auto; vertical-align: top; resize: vertical; }
/* Colors for form validity */
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }
/* =============================================================================
Tables
========================================================================== */
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
/* =============================================================================
Chrome Frame Prompt
========================================================================== */
.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }
/* ==|== primary styles =====================================================
Author:
========================================================================== */
/* ==|== media queries ======================================================
EXAMPLE Media Query for Responsive Design.
This example overrides the primary ('mobile first') styles
Modify as content requires.
========================================================================== */
@media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
}
/* ==|== non-semantic helper classes ========================================
Please define your styles before this section.
========================================================================== */
/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }
/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
/* ==|== print styles =======================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@media print {
* { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
}

View file

@ -1,425 +1,529 @@
html, body {
height: 100%;
}
#wrapper { * { cursor:default; }
min-height: 100%; a, a * { cursor:pointer; }
height: auto !important;
height: 100%; html { margin:0; overflow-x:auto; }
margin: 0 auto -21pt; /* the bottom margin is the negative value of the footer's height */ body {
} overflow-x:hidden;
min-width:1030px;
div#header { margin:0;
background-color: #3d3d3d; font:13pt "arial";
color: #ffffff; background:#152534 url("/images/bg.jpg") no-repeat fixed center top; }
padding-top: 3pt;
padding-bottom: 3pt; pre { color:#5997AF;}
} pre, pre * { cursor:text; }
pre .cmt { color:#6D6D6D; font-style:italic; }
div#header span#welcome { pre .kwd { color:#43A8CF; font-weight:bold; }
float: right; pre .typ { color:#128B7D; font-weight:bold; }
padding: 0; pre .atr { color:#128B7D; font-weight:bold; font-style:italic; }
padding-right: 7pt; pre .def { color:#CAD6E4; font-weight:bold; font-style:italic; }
} pre .prg { color:#854D6A; font-weight:bold; font-style:italic; }
div#header img { pre .val { color:#8AB647; font-style:italic; }
float: right; pre .tab { border-left:1px dotted rgba(67,168,207,0.4); }
margin-top: -2pt; pre .end { background:url("/images/tabEnd.png") no-repeat left bottom; }
padding-right: 7pt;
} .tall { height:100%; }
.pre { padding:0 5px; font:11pt monospace; background:rgba(255,255,255,.15); border-radius:3px; }
div#header span, #nimbtn span {
margin: 0; .page-layout { margin:0 auto; width:1000px; }
padding: 5pt; .docs-layout { margin:0 40px; }
} .talk-layout { margin:0 40px; }
.wide-layout { margin:0 auto; }
div#header a.right, #nimbtn a {
float: right; #head { height:100px; background:url("/images/head.png") repeat-x bottom; }
#head.docs { margin-left:280px; background:rgba(0,0,0,.25) url("/images/head-fade.png") no-repeat right top; }
color: #ffffff; #head > div { position:relative }
margin-right: 6pt;
} #head-logo {
position:absolute;
div#header a { left:-390px;
color: #ffffff; top:0;
} width:917px;
height:268px;
div#header a:visited, #nimbtn a:visited { pointer-events:none;
color: #ffffff; background:url("/images/logo.png") no-repeat; }
} #head.docs #head-logo { left:-381px; position:fixed; }
#head.forum #head-logo { left:-370px; }
div#header a:hover, #nimbtn a:hover {
text-decoration: none; #head-logo-link {
} position:absolute;
display:block;
#nimbtn a { top:10px;
margin-left: 6pt; left:10px;
} width:236px;
height:85px; }
#nimbtn { #head.docs #head-logo-link { left:-260px; }
float: left; #head.forum #head-logo-link { left:30px; }
background-color: #2a2a2a;
color: #ffffff; #head-links { position:absolute; right:0; bottom:13px; }
padding-top: 3pt; #head.docs #head-links,
padding-bottom: 3pt; #head.forum #head-links { right:20px; }
} #head-links > a {
display:block;
#content { float:left;
margin: 5pt; padding:10px 25px 25px 25px;
} color:rgba(255,255,255,.5);
font-size:14pt;
#content table#threads { text-decoration:none;
width: 100%; letter-spacing:1px;
border-collapse: separate; background:url("/images/head-link.png") no-repeat center bottom;
text-align: center; transition:
border: #ffffff solid 1px; color 0.3s ease-in-out,
font-size: 10pt; text-shadow 0.4s ease-in-out; }
} #head-links > a:hover,
#head-links > a.active {
#content table#threads th { color:#1cb3ec;
background-color: #5D5D5D; text-shadow:0 0 4px rgba(28,179,236,.8);
background: -moz-linear-gradient(top, #5D5D5D, #4D4D4D); background-image:url("/images/head-link_hover.png"); }
background: -webkit-linear-gradient(top, #5D5D5D, #4d4d4d);
background: -o-linear-gradient(top, #5D5D5D, #4d4d4d); #head-banner { width:200px; height:100px; background:#000; }
color: #ffffff;
border-bottom: #2d2d2d solid 2px; #neck { z-index:0; height:40px; }
border-right: #2d2d2d solid 1px; #neck.home { height:370px; }
} #neck > div { position:relative }
#content table#threads tr:nth-child(even) { #glow-arrow {
background-color: #eee; position:absolute;
} top:-9px;
left:0;
#content table#threads td { right:-16px;
vertical-align: middle; height:48px;
border-right: #9d9d9d solid 1px; background:url("/images/glow-arrow.png") no-repeat right; }
border-bottom: #9d9d9d solid 1px; glow-arrow.docs { left:280px; }
}
#glow-line-vert {
#content table#threads>tbody>tr>td:first-child { position:fixed;
border-left: #9d9d9d solid 1px; top:100px;
left:280px;
} width:3px;
height:844px;
#content table#threads>tbody>tr>td:last-child { background:url("/images/glow-line-vert.png") no-repeat; }
border-right: #9d9d9d solid 1px;
} #slideshow { position:absolute; top:10px; left:10px; width:700px; }
#slideshow > div { visibility:hidden; opacity:0; position:absolute; transition:visibility 0s linear 1s, opacity 1s ease-in-out; }
#content table#threads td:hover { #slideshow > div.active { visibility:visible; opacity:1; transition-delay:0s; }
border-right-color: #9d9d9d; #slideshow > div.init { transition-delay:0s; }
} #slideshow-nav { z-index:3; position:absolute; top:110px;; right:-12px; }
#slideshow-nav > div { margin:5px 0; width:23px; height:23px; background:url("/images/slideshow-nav.png") no-repeat; }
#content table#threads td.topic { #slideshow-nav > div:hover { background-image:url("/images/slideshow-nav_active.png"); opacity:0.5; }
text-align: left; #slideshow-nav > div.active { background-image:url("/images/slideshow-nav_active.png"); opacity:1; }
padding: 5pt;
} #slide0 { margin:30px 0 0 10px; }
#content table#threads td.author { #slide0 > div { float:left; width:320px; font:10pt monospace; }
width: 10%; #slide0 > div:first-child { margin:0 40px 0 0; }
} #slide0 > div > h2 { margin:0 0 5px 0; color:rgba(162,198,223,.78); }
#content table#threads td.posts { #slide0 > div > pre {
width: 10%; margin:0;
} padding:15px 10px;
#content table#threads td.views { line-height:14pt;
width: 10%; background:rgba(0,0,0,.4);
} border-left:8px solid rgba(0,0,0,.3);
#content table#threads td.lastreply { box-shadow:1px 2px 16px rgba(28,180,236,.4); }
width: 15%;
} #slide1 { margin-top:50px; }
#slide1 > p {
span#rss { padding:40px 20px 0 20px;
margin: 5pt; font-style:italic;
font-size: 9pt; color:rgba(162,198,223,.78);
} letter-spacing:1px;
line-height:25pt;
img.rssfeed { background:url("/images/quotes.png") top left no-repeat; }
width: 1em; #slide1 > div {
height: 1em; float:right;
padding-right:3pt; margin-right:40px;
margin-top:-1pt; font-style:italic;
font-weight:bold;
} color:rgba(93,155,199,.44); }
#whoisonline { #sidebar {
margin: 5pt; z-index:2;
font-size: 9pt; position:absolute;
} top:5px; right:0;
width:275px;
#whoisonline .wioHeader { height:726px;
background-color: #5D5D5D; padding:210px 0 0 0;
background: -moz-linear-gradient(top, #5D5D5D, #4D4D4D); background:url("/images/sidebar.png") no-repeat; }
background: -webkit-linear-gradient(top, #5D5D5D, #4d4d4d); #sidebar > h3 { margin:0 30px 0 30px; color:rgba(255,255,255,.5); }
background: -o-linear-gradient(top, #5D5D5D, #4d4d4d); #sidebar > h3.blue { color:rgba(28,180,236,.5); }
color: #ffffff; #sidebar-links,
border-bottom: #2d2d2d solid 1px; #sidebar-news {
padding: 3px; margin:10px 30px 50px 30px;
padding-left: 5pt; padding:10px 0;
} background:rgba(0,0,0,.6); }
#sidebar-links { box-shadow:1px 2px 12px rgba(255,255,255,.4); }
#whoisonline .content { #sidebar-news { box-shadow:1px 2px 12px rgba(28,180,236,.6); }
border: #9d9d9d solid 1px; #sidebar-links > a {
border-top: #2D2D2D solid 1px; display:block;
padding: 5pt; margin-left:15px;
} padding:12px 20px 12px 45px;
font-weight:bold;
#whoisonline .content hr { text-decoration:none;
margin-top: 5pt; letter-spacing:1px;
margin-bottom: 5pt; color:rgba(255,255,255,.4);
} transition:
color 0.1s ease-in-out,
#footerPush { text-shadow 0.2s ease-in-out; }
height: 24pt; #sidebar-news > a { transition: color 0.3s ease-in-out; }
} #sidebar-news > a > h4 { transition: color 0.1s ease-in-out, text-shadow 0.2s ease-in-out; }
#sidebar-links > a:hover { color:#fff; text-shadow:0 0 6px #fff; }
#footer { #sidebar-news > a { display:block; padding:15px; color:rgba(255,255,255,.4); text-decoration:none; }
background-color: #5D5D5D; #sidebar-news > a > h4 { margin:0 0 5px 0; color:rgba(28,180,236,.5); }
background: -moz-linear-gradient(top, #5D5D5D, #4D4D4D); #sidebar-news > a:hover > h4 { margin:0 0 5px 0; color:rgba(28,180,236,.8); text-shadow:0 0 6px rgba(28,180,236,.6); }
background: -webkit-linear-gradient(top, #5D5D5D, #4d4d4d); #sidebar-news > a:hover { color:rgba(255,255,255,1); }
background: -o-linear-gradient(top, #5D5D5D, #4d4d4d); #sidebar-news > a.blue { color:rgba(28,180,236,.5); font-weight:bold; }
color: #ffffff; #sidebar-news > a.blue:hover { color:#fff; }
padding-top: 1.5pt; #links-forum { background:url("/images/more-links_forum.png") no-repeat left center; }
padding-bottom: 1.5pt; #links-github { background:url("/images/more-links_github.png") no-repeat left center; }
padding-left: 5px; #links-editors { background:url("/images/more-links_editors.png") no-repeat left center; }
padding-right: 5px; #links-nimbuild { background:url("/images/more-links_nimbuild.png") no-repeat left center; }
height: 18pt;
} #overview-bg {
position:fixed;
#footer a:link, #footer a:visited { top:0;
color: #ffffff; bottom:0;
} left:0;
width:280px;
#footer a:hover { background:rgba(0,0,0,0.25); }
text-decoration: none; #overview {
} z-index:3;
position:fixed;
#topbar { overflow:auto;
margin: 5pt; top:115px;
} bottom:20px;
left:20px;
div#topbar span#rss { width:245px; }
float: right; #overview::-webkit-scrollbar { width:5px; }
padding: 0; #overview::-webkit-scrollbar-track { border-radius:2px; background:rgba(255,255,255,.03); }
padding-right: 7pt; #overview::-webkit-scrollbar-thumb { border-radius:2px; background:rgba(28,179,236,.5); }
} #overview > div { overflow:auto; margin-bottom:40px; }
#overview a {
#content .post { display:block;
border: #4d4d4d solid 2px; padding:0 10px;
width: 100%; margin:2px 5px 2px 0;
margin-bottom: 5pt; color:rgba(255,255,255,.6);
} background:rgba(255,255,255,0.03);
border-radius:2px;
#content .post th { letter-spacing:1px;
background-color: #5D5D5D; text-decoration:none; }
background: -moz-linear-gradient(top, #5D5D5D, #4D4D4D); #overview a:hover { color:#fff; background:rgba(255,255,255,0.05); }
background: -webkit-linear-gradient(top, #5D5D5D, #4d4d4d); #overview > .types a { border-left:2px solid rgba(28,179,236,.4); }
background: -o-linear-gradient(top, #5D5D5D, #4d4d4d); #overview > .procs a { border-left:2px solid rgba(255,223,53,.4); }
color: #ffffff; #overview > .iters a { border-left:2px solid rgba(255,134,53,.4); }
padding-left: 5pt; #overview > div > h4 {
padding-right: 5pt; margin:0 5px 10px 0;
padding-top: 3pt; padding:5px 10px;
padding-bottom: 3pt; letter-spacing:1px;
text-align: left; color:#fff;
font-size: 9pt; border-left:2px solid #fff;
} border-radius:2px;
background:rgba(255,255,255,0.1); }
#content .post .left { #overview > .types h4 { color:#1cb3ec; border-color:#1cb3ec; }
border-left: #4d4d4d solid 2px; #overview > .procs h4 { color:#ffdf35; border-color:#ffdf35; }
background-color: #eee; #overview > .iters h4 { color:#ff8635; border-color:#ff8635; }
padding: 7pt; #overview h5 {
width: 15%; color:rgba(28,179,236,.6);
height: auto; margin:10px 0 5px 0;
} padding:5px 5px;
letter-spacing:1px; }
#content .post .left hr {
margin: 0; #body { z-index:1; position:relative; background:rgba(220,231,248,.6); }
margin-bottom: 5pt; #body.docs { margin:0 40px 20px 320px; }
margin-top: 2pt; #body.forum { margin:0 40px 20px 40px; }
}
#body-border {
#content .post .content { position:absolute;
padding: 6pt; top:-25px;
} left:0;
right:0;
div#replywrapper { height:35px;
width: 70%; background:rgba(0,0,0,.25); }
margin-left: auto;
margin-right: auto; #body-border-left {
border: #4d4d4d solid 2px; position:absolute;
} left:-25px;
top:-25px;
div#replywrapper div#replytop { bottom:-25px;
background-color: #5D5D5D; width:35px;
background: -moz-linear-gradient(top, #5D5D5D, #4D4D4D); background:rgba(0,0,0,.25); }
background: -webkit-linear-gradient(top, #5D5D5D, #4d4d4d);
background: -o-linear-gradient(top, #5D5D5D, #4d4d4d); #body-border-right {
font-size: 9pt; position:absolute;
color: #ffffff; right:-25px;
padding: 5pt; top:-25px;
bottom:-25px;
} width:35px;
background:rgba(0,0,0,.25); }
div#replywrapper form textarea {
width: 99%; #body-border-bottom {
} position:absolute;
left:10px;
div#replywrapper form > input:first-child { right:10px;
width: 80%; bottom:-25px;
} height:35px;
background:rgba(0,0,0,.25); }
div#replywrapper form {
padding: 8pt; #body.docs #body-border,
} #body.forum #body-border { left:10px; right:10px; }
div#pagenumbers { #glow-line {
font-size: 11pt; position:absolute;
height: 21px; top:-27px;
margin: 5.9pt; left:100px;
padding: 2pt; right:-25px;
padding-left: 4pt; height:3px;
padding-right: 4pt; background:url("/images/glow-line.png") no-repeat left; }
border-top: 1px solid #9d9d9d; #glow-line-bottom {
border-bottom: 1px solid #9d9d9d; position:absolute;
background-color: #eee; bottom:-27px;
} left:-25px;
right:100px;
div#pagenumbers div.left { height:3px;
float: left; background:url("/images/glow-line2.png") no-repeat right; }
}
#content { padding:40px 0; line-height:150%; }
div#pagenumbers div.middle { #content.page { width:680px; min-height:800px; padding-left:20px; }
text-align: center; #content h1 { font-size:20pt; letter-spacing:1px; color:rgba(0,0,0,.75); }
} #content h2 { font-size:16pt; letter-spacing:1px; color:rgba(0,0,0,.7); margin-top:40px; }
#content p { text-align:justify; color:rgba(0,0,0,.8); }
div#pagenumbers div.middle a, div#pagenumbers div.middle span { #content a { color:#CEDAE9; text-decoration:none; }
padding-right: 4pt; #content a:hover { color:#fff; }
} #content ul { padding-left:20px; }
#content li { margin-bottom:10px; text-align:justify; }
div#pagenumbers div.middle span {
font-weight: bold; #body.docs #content > div { margin-top:40px; padding-top:40px; border-top:1px dashed rgba(0,0,0,.25); }
} #body.docs #content > div:first-child { margin-top:0; padding-top:0; border:none; }
#body.docs #content > div > h3 {
div#pagenumbers div.left span, div#pagenumbers div.left a { color:#fff;
padding-right: 8pt; margin:0 0 10px 0;
} padding:10px 20px;
letter-spacing:1px;
div#pagenumbers div.right span, div#pagenumbers div.right a { border-left:8px solid #fff;
padding-left: 8pt; border-radius:3px;
} background:rgba(0,0,0,.7);
box-shadow:1px 3px 12px rgba(0,0,0,.4); }
#body.docs #content > #types-wrap > h3 { color:#1cb3ec; border-color:#1cb3ec; }
div#pagenumbers div.right { #body.docs #content > #procs-wrap > h3 { color:#ffdf35; border-color:#ffdf35; }
float: right; #body.docs #content > #iters-wrap > h3 { color:#ff8635; border-color:#ff8635; }
} #body.docs #content > div > div > div {
overflow:auto;
#content #threads .localnums { margin:10px 0;
display: inline; border-left:8px solid #fff;
float: right; border-radius:3px;
border-top: 1px solid #9d9d9d; background:rgba(0,0,0,.1); }
border-bottom: 1px solid #9d9d9d; #body.docs #content > #types-wrap > div > div { border-color:rgba(28,179,236,.5); }
padding-left: 4pt; #body.docs #content > #procs-wrap > div > div { border-color:rgba(255,223,53,.5); }
padding-right: 4pt; #body.docs #content > #iters-wrap > div > div { border-color:rgba(255,134,53,.5); }
} #body.docs #content > #procs-wrap > div > div.overload-head { margin-bottom:0; }
#body.docs #content > #procs-wrap > div > div.overload-tail { margin-top:0; border-top:1px dashed rgba(255,223,53,.5); }
#content #threads .localnums a:first-child { #body.docs #content > #procs-wrap > div > div.overload { margin-top:0; margin-bottom:0; border-top:1px dashed rgba(255,223,53,.5); }
padding-left: 0; #body.docs #content > #iters-wrap > div > div.overload-head { margin-bottom:0; }
} #body.docs #content > #iters-wrap > div > div.overload-tail { margin-top:0; border-top:1px dashed rgba(255,134,53,.5); }
#body.docs #content > #iters-wrap > div > div.overload { margin-top:0; margin-bottom:0; border-top:1px dashed rgba(255,134,53,.5); }
#content #threads .localnums a { #body.docs #content > div > div > p { margin:20px 10px 10px 10px; }
padding-left: 6pt;
text-decoration: none; #body.docs #content > div > div > div > div { float:left; }
} #body.docs #content > div > div > div > div.head { width:60%; }
#body.docs #content > div > div > div > div.data { width:40%; }
#content #threads .localnums span {
padding-left: 3pt; #body.docs #content > h1 > .symbol {
margin-right: -3pt; padding:0 8px;
} border-radius:5px;
background:rgba(206,218,233,.4); }
#profile {
margin-left: 1.30em; #body.docs #content > div > div > div > div.head > .sign {
} margin:0 10px 5px 10px;
padding:10px 10px 0 10px;
#profile #left { font-weight:bold;
width: 250px; border-bottom:1px dashed rgba(0,0,0,.25); }
} #body.docs #content > div > div > div > div.head > .desc {
padding:0 20px 10px 20px;
#profile #left #info table th { color:rgba(0,0,0,.75); }
text-align: left; #body.docs #content > div > #types > div > div.head > .sign > .symbol {
padding-right: 0.5em; padding:0 5px;
} border-radius:3px;
background:rgba(28,179,236,.4); }
#profile #left #info table { #body.docs #content > div > #procs > div > div.head > .sign > .symbol {
font-size: 10.5pt; padding:0 5px;
} border-radius:3px;
background:rgba(255,223,53,.3); }
#body.docs #content > div > #iters > div > div.head > .sign > .symbol {
#profile #left #avatar { padding:0 5px;
border-bottom: 2px solid #6d6d6d; border-radius:3px;
padding-bottom: 0.75em; background:rgba(255,134,53,.3); }
margin-bottom: 0.50em;
} #body.docs #content > div > div > div > div.data > div {
margin:0 20px 5px 10px;
/* For RST nimrod syntax highlighter */ padding:10px 0 0 10px;
span.DecNumber {color: blue} font-style:italic;
span.BinNumber {color: blue} color:rgba(0,0,0,.6);
span.HexNumber {color: blue} border-bottom:1px dashed rgba(0,0,0,.25); }
span.OctNumber {color: blue} #body.docs #content > div > div > div > div.data > ul { margin:0; padding:0 10px; }
span.FloatNumber {color: blue} #body.docs #content > div > div > div > div.data > ul:last-child { margin-bottom:5px; padding-bottom:10px; }
span.Identifier {color: black} #body.docs #content > div > div > div > div.data > ul .symbol { padding:0 5px; border-radius:3px; background:rgba(23,192,23,.25); }
span.Keyword {font-weight: bold} #body.docs #content > div > div > div > div.data > ul.pragmas .symbol { background:rgba(106,50,145,.25); }
span.StringLit {color: blue} #body.docs #content > div > div > div > div.data > ul > li { margin:0; padding:0 10px; list-style:none; }
span.LongStringLit {color: blue}
span.CharLit {color: blue} #body.docs #content pre {
span.EscapeSequence {color: black} overflow:auto;
span.Operator {color: black} margin:10px 0;
span.Punctation {color: black} padding:15px 10px;
span.Comment, span.LongComment {font-style:italic; color: green} font-size:10pt;
span.RegularExpression {color: DarkViolet} font-style:normal;
span.TagStart {color: DarkViolet} line-height:14pt;
span.TagEnd {color: DarkViolet} background:rgba(0,0,0,.75);
span.Key {color: blue} border-left:8px solid rgba(0,0,0,.3); }
span.Value {color: black}
span.RawData {color: blue} #docs-sort { float:right; font-size:75%; }
span.Assembler {color: blue} #docs-sort > a {
span.Preprocessor {color: DarkViolet} cursor:default;
span.Directive {color: DarkViolet} margin:0 0 0 10px;
span.Command, span.Rule, span.Hyperlink, span.Label, span.Reference, padding:2px 10px;
span.Other {color: black} border-radius:5px;
color:rgba(0,0,0,.25);
/* Buttons */ background:rgba(0,0,0,.1);
a.button { box-shadow:inset 0 1px 8px rgba(0,0,0,.4); }
border-radius: 2px 2px 2px 2px; #docs-sort > a:hover,
background: -moz-linear-gradient(top, #f7f7f7, #ebebeb); #docs-sort > a.active { color:#000; background:rgba(0,0,0,.2); }
background: -webkit-linear-gradient(top, #f7f7f7, #ebebeb);
background: -o-linear-gradient(top, #f7f7f7, #ebebeb); #talk-heads { overflow:auto; margin:0 8px 0 8px; }
text-decoration: none; #talk-heads > div { float:left; font-size:120%; font-weight:bold; }
color: #3d3d3d; #talk-heads > .topic { width:55%; }
padding: 5px; #talk-heads > .detail { width:15%; }
border: solid 1px #9d9d9d; #talk-heads > .author { width:15%; }
display: inline-block; #talk-heads > .reply { width:15%; }
position: relative; #talk-heads > div > div { margin:0 10px 10px 10px; padding:0 10px 10px 10px; border-bottom:1px dashed rgba(0,0,0,0.4); }
text-align: center; #talk-heads > .topic > div { margin-left:0; }
font-size: small; #talk-heads > .author > div { margin-right:0; }
}
#talk-thread > div,
a.button.left { #talk-threads > div {
border-top-right-radius: 0; position:relative;
border-bottom-right-radius: 0; margin:5px 0;
} overflow:auto;
border-radius:3px;
a.button.middle { border:8px solid rgba(0,0,0,.8);
border-radius: 0; border-top:none;
border-left: 0; border-bottom:none;
} background:rgba(0,0,0,0.1); }
#talk-thread > div:nth-child(odd) { background:rgba(255,255,255,0.1); }
a.button.right { #talk-threads > div:nth-child(odd) { background:rgba(0,0,0,0.2); }
border-top-left-radius: 0; #talk-thread > div > div,
border-bottom-left-radius: 0; #talk-threads > div > div { float:left; }
border-left: 0; #talk-thread > div > div > div,
} #talk-threads > div > div > div { margin:10px 20px; }
#talk-threads > div > .topic { width:55%; }
a.button:hover { #talk-threads > div > .reply { width:15%; overflow:hidden; }
background: -moz-linear-gradient(top, #0099c7, #0294C1); #talk-threads > div > .detail { width:15%; overflow:hidden; }
background: -webkit-linear-gradient(top, #0099c7, #0294C1); #talk-thread > div > .author,
background: -o-linear-gradient(top, #0099c7, #0294C1); #talk-threads > div > .author {
border: solid 1px #077A9C; position:absolute;
color: #ffffff; right:0;
} top:0;
bottom:0;
width:15%;
overflow:hidden;
background:rgba(0,0,0,0.8); }
#talk-thread > div > .author a,
#talk-threads > div > .author a { color:#1cb3ec !important; }
#talk-thread > div > .author a:hover,
#talk-threads > div > .author a:hover { color:#fff !important; }
#talk-threads > div > .topic .pages { float:right; }
#talk-threads > div > .topic > div > a { font-weight:bold; }
#talk-threads > div > .detail > div { float:left; margin:0; }
#talk-threads > div > .detail > div > div { margin-left:20px; padding:10px 10px 10px 22px; }
#talk-threads > div > .detail > div { width:50%; }
#talk-threads > div > .detail > div:first-child > div { background:url("/images/forum-views.png") no-repeat left; }
#talk-threads > div > .detail > div:last-child > div { background:url("/images/forum-posts.png") no-repeat left; }
#talk-thread > div { margin:20px 0; min-height:150px; box-shadow:1px 3px 12px rgba(0,0,0,.4) }
#talk-thread > div > .author > div > .avatar { margin-top:20px; }
#talk-thread > div > .author > div > .avatar > img { box-shadow:0 0 12px #1cb3ec; }
#talk-thread > div > .author > div > .name { }
#talk-thread > div > .topic { width:85%; padding-bottom:10px; }
#talk-thread > div > .topic pre {
overflow:auto;
margin:0;
padding:15px 10px;
font-size:10pt;
font-style:normal;
line-height:14pt;
background:rgba(0,0,0,.75);
border-left:8px solid rgba(0,0,0,.3); }
#talk-head,
#talk-info {
overflow:auto;
border-radius:3px;
border:8px solid rgba(0,0,0,.2);
border-top:none;
border-bottom:none;
background:rgba(0,0,0,0.1); }
#talk-head { margin-bottom:20px; }
#talk-info { margin-top:20px; }
#talk-head > div,
#talk-info > div { float:left; }
#talk-head > .info,
#talk-info > .info { width:80%; }
#talk-head > .user,
#talk-info > .user { width:20%; background:rgba(0,0,0,.2); }
#talk-info > .user > div > .reply { font-weight:bold; padding-left:22px; background:url("/images/forum-reply.png") no-repeat left; }
#talk-head > div > div,
#talk-info > div > div { padding:5px 20px; }
#talk-head > .detail > div { float:left; margin:0; }
#talk-head > .detail > div > div { padding-left:22px; }
#talk-head > .detail > div:first-child > div { background:url("/images/forum-views.png") no-repeat left; }
#talk-head > .detail > div:last-child > div { background:url("/images/forum-posts.png") no-repeat left; }
#talk-nav { margin:20px 8px 0 8px; padding-top:10px; border-top:1px dashed rgba(0,0,0,0.4); text-align:center; }
#talk-nav > a.active { text-decoration:underline !important; }
.standout {
padding:5px 30px;
margin-bottom:20px;
border:8px solid rgba(0,0,0,.8);
border-right-width:16px;
border-top-width:0;
border-bottom-width:0;
border-radius:3px;
background:rgba(0,0,0,0.1);
box-shadow:1px 3px 12px rgba(0,0,0,.4); }
.standout h3 { margin-bottom:10px; padding-bottom:10px; border-bottom:1px dashed rgba(0,0,0,.8); }
.standout li { margin:0 !important; padding-top:10px; border-top:1px dashed rgba(0,0,0,.2); }
.standout ul { padding-bottom:5px; }
.standout ul.tools { list-style:url("/images/docs-tools.png"); }
.standout ul.library { list-style:url("/images/docs-library.png"); }
.standout ul.internal { list-style:url("/images/docs-internal.png"); }
.standout ul.tutorial { list-style:url("/images/docs-tutorial.png"); }
.standout ul.example { list-style:url("/images/docs-example.png"); }
.standout li:first-child { padding-top:0; border-top:none; }
.standout li p { margin:0 0 10px 0 !important; line-height:130%; }
.standout li > a { font-weight:bold; }
.forum-user-info,
.forum-user-info * { cursor:help }
#foot { height:150px; position:relative; top:-10px; letter-spacing:1px; }
#foot.home { background:url("/images/foot.png") repeat-x top; height:200px; }
#foot.docs { margin-left:320px; margin-right:40px; }
#foot.forum { margin-left:40px; margin-right:40px; }
#foot > div { position:relative; }
#foot.home > div { width:960px; }
#foot h4 { font-size:11pt; color:rgba(255,255,255,.4); margin:40px 0 6px 0; }
#foot a:hover { color:#fff; }
#foot-links { float:left; }
#foot-links > div { float:left; padding:0 40px 0 0; line-height:120%; }
#foot-links a { display:block; font-size:10pt; color:rgba(255,255,255,.3); text-decoration:none; }
#foot-legal { float:right; font-size:10pt; color:rgba(255,255,255,.3); line-height:150%; text-align:right; }
#foot-legal a { color:inherit; text-decoration:none; }
#foot-legal > h4 > a { color:inherit; }
#mascot {
z-index:2;
position:absolute;
top:-340px;
right:25px;
width:202px;
height:319px;
background:url("/images/mascot.png") no-repeat; }

BIN
public/images/bg.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 93 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 206 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 424 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.5 KiB

BIN
public/images/glow-line.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
public/images/head-link.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 203 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 799 B

BIN
public/images/head.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 171 B

BIN
public/images/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 114 KiB

12
public/js/arrow.js Normal file
View file

@ -0,0 +1,12 @@
"use strict";
function positionGlowArrow() {
var headLinks = document.getElementById("head-links");
var activeLink = headLinks.getElementsByClassName("active")[0]
if (activeLink == undefined || activeLink == null)
return;
var offset = (headLinks.offsetWidth - activeLink.offsetLeft) - (activeLink.offsetWidth / 2) - 133;
var glowArrow = document.getElementById("glow-arrow");
glowArrow.style.right = offset + "px";
}

5
public/js/forum.js Normal file
View file

@ -0,0 +1,5 @@
"use strict";
window.onload = function() {
positionGlowArrow();
};