Skip to content

Commit 6d6b8a4

Browse files
pingsweptpingswept
committed
Add topbar, first cut at post layout
1 parent e389f3e commit 6d6b8a4

File tree

8 files changed

+211
-22
lines changed

8 files changed

+211
-22
lines changed

‎assets/css/.sass-cache/a4bada99fe7212e971ade75b88d692ec8d8418a4/rascal.scssc‎

4.21 KB
Binary file not shown.

‎assets/css/.sass-cache/a4bada99fe7212e971ade75b88d692ec8d8418a4/test.scssc‎

1.26 KB
Binary file not shown.

‎assets/css/rascal.css‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
body {
2+
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
3+
font-size: 16px;
4+
line-height: 1.0em;
5+
background-color: #e7e8e9;
6+
}
7+
.site-head {
8+
margin-bottom: 0px;
9+
}
10+
.post {
11+
max-width: 820px;
12+
background-color: #f5f5f5;
13+
margin-top: 0px;
14+
padding-top: 60px;
15+
}
16+
ul.nav li {
17+
display: inline;
18+
list-style-type: none;
19+
}
20+
.nav {
21+
position: relative;
22+
left: 0;
23+
display: block;
24+
float: left;
25+
margin: 23px 10px 0 0;
26+
padding-left: 0px;
27+
}
28+
.brand {
29+
display: inline;
30+
float: left;
31+
padding: 8px 20px 12px;
32+
margin-left: -20px;
33+
}
34+
.navbar-fill .container {
35+
width: 80%;
36+
max-width: 940px;
37+
margin-left: auto;
38+
margin-right: auto;
39+
}
40+
.navbar-fill {
41+
width: 100%;
42+
background: #414243;
43+
color: #e7e8e9;
44+
float: left;
45+
}
46+
ul.nav li a {
47+
padding-top: 23px;
48+
padding-right: 16px;
49+
padding-left: 20px;
50+
padding-bottom: 14px;
51+
font-size: 20px;
52+
line-height: 20px;
53+
color: #bfc2c4;
54+
text-decoration: none;
55+
}
56+
ul.nav li a:hover {
57+
color: #e7e8e9;
58+
}
59+
div.center-column {
60+
margin-left: auto;
61+
margin-right: auto;
62+
width: 80%;
63+
max-width: 940px;
64+
background-color: #f5f5f5;
65+
}

‎assets/css/rascal.less‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
@rascal-red: #C6433C;
2+
@rascal-red-light: @rascal-red + #222;
3+
@rascal-red-extra-light: @rascal-red + #444;
4+
@rascal-red-super-light: #FFC7C0;
5+
@rascal-dark: @rascal-red - #222;
6+
@rascal-gray: #414243;
7+
@rascal-white: #E7E8E9;
8+
@rascal-complement: #51A8CB;
9+
@rascal-forum-bg: #CCCCCC;
10+
@rascal-dark-blue: #475373;
11+
@rascal-bright-white: #F5F5F5;
12+
13+
body {
14+
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
15+
font-size: 16px;
16+
line-height: 1.0em;
17+
background-color: @rascal-white;
18+
}
19+
20+
.site-head {
21+
margin-bottom: 0px;
22+
}
23+
24+
.post {
25+
max-width: 820px;
26+
background-color: @rascal-bright-white;
27+
margin-top: 0px;
28+
padding-top: 60px;
29+
}
30+
31+
ul.nav li {
32+
display: inline;
33+
list-style-type: none;
34+
}
35+
36+
.nav {
37+
position: relative;
38+
left: 0;
39+
display: block;
40+
float: left;
41+
margin: 23px 10px 0 0;
42+
padding-left: 0px;
43+
}
44+
45+
.brand {
46+
display: inline;
47+
float: left;
48+
padding: 8px 20px 12px;
49+
margin-left: -20px;
50+
}
51+
52+
.navbar-fill .container {
53+
width: 80%;
54+
max-width: 940px;
55+
margin-left: auto;
56+
margin-right: auto;
57+
}
58+
59+
.navbar-fill {
60+
width: 100%;
61+
background: @rascal-gray;
62+
color: @rascal-white;
63+
float: left;
64+
}
65+
66+
ul.nav li a {
67+
padding-top: 23px;
68+
padding-right: 16px;
69+
padding-left: 20px;
70+
padding-bottom: 14px;
71+
font-size: 20px;
72+
line-height: 20px;
73+
color: darken(@rascal-white, 15);
74+
text-decoration: none;
75+
}
76+
77+
ul.nav li a:hover {
78+
color: @rascal-white;
79+
}
80+
81+
div.center-column {
82+
margin-left: auto;
83+
margin-right: auto;
84+
width: 80%;
85+
max-width: 940px;
86+
background-color: @rascal-bright-white;
87+
}

‎assets/js/jquery-2.1.0.min.js‎

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/js/less-1.1.5.min.js‎

Lines changed: 16 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎default.hbs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@
1616
<link rel="shortcut icon" href="{{asset "favicon.ico"}}">
1717

1818
{{! Styles'n'Scripts }}
19+
<script type="text/javascript" src="{{asset "js/jquery-2.1.0.min.js"}}"></script>
1920
<link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}" />
21+
<link rel="stylesheet" href="{{asset "css/rascal.css"}}" />
2022
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Noto+Serif:400,700,400italic|Open+Sans:700,400" />
2123

2224
{{! Ghost outputs important style and meta data with this tag }}

‎index.hbs‎

Lines changed: 37 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,35 +5,50 @@
55

66
{{! The big featured header on the homepage, with the site logo and description }}
77
<header class="site-head" {{#if @blog.cover}}style="background-image: url({{@blog.cover}})"{{/if}}>
8-
<div class="vertical">
9-
<div class="site-head-content inner">
10-
{{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}}
11-
<h1 class="blog-title">{{@blog.title}}</h1>
12-
<h2 class="blog-description">{{@blog.description}}</h2>
8+
<div class="navbar-fill">
9+
<div class="container">
10+
<a class="brand" href="/"><img src="http://rascalmicro.com/img/rm-logo-words-only-light.png"></a>
11+
<ul class="nav">
12+
<li class="active"><a href="http://store.rascalmicro.com">Store</a></li>
13+
<li><a href="/about.htm">About</a></li>
14+
<li><a href="/blog/">Blog</a></li>
15+
<li><a href="/forum/">Forum</a></li>
16+
<li><a href="/docs/">Docs</a></li>
17+
</ul>
1318
</div>
1419
</div>
20+
<script type="text/javascript">
21+
function activateNavbar() { // From https://gist.github.com/1362111, but with the regex tweaked
22+
var path = location.pathname.replace (/^(\/.+?\/).+$/, '$1');
23+
$('ul.nav li').removeClass("active");
24+
$('ul.nav a[href="' + path + '"]').parent().addClass("active");
25+
}
26+
$(function(){
27+
activateNavbar();
28+
})
29+
</script>
1530
</header>
1631

1732
{{! The main content area on the homepage }}
1833
<main class="content" role="main">
34+
<div class="center-column">
35+
{{! Each post will be output using this markup }}
36+
{{#foreach posts}}
1937

20-
{{! Each post will be output using this markup }}
21-
{{#foreach posts}}
38+
<article class="{{post_class}}">
39+
<header class="post-header">
40+
<span class="post-meta"><time datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMM YYYY"}}</time> {{tags prefix="on "}}</span>
41+
<h2 class="post-title"><a href="{{url}}">{{{title}}}</a></h2>
2242

23-
<article class="{{post_class}}">
24-
<header class="post-header">
25-
<span class="post-meta"><time datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMM YYYY"}}</time> {{tags prefix="on "}}</span>
26-
<h2 class="post-title"><a href="{{url}}">{{{title}}}</a></h2>
43+
</header>
44+
<section class="post-excerpt">
45+
<p>{{excerpt}}&hellip;</p>
46+
</section>
47+
</article>
2748

28-
</header>
29-
<section class="post-excerpt">
30-
<p>{{excerpt}}&hellip;</p>
31-
</section>
32-
</article>
49+
{{/foreach}}
3350

34-
{{/foreach}}
35-
36-
{{!! After all the posts, we have the previous/next pagination links }}
37-
{{pagination}}
38-
39-
</main>
51+
{{!! After all the posts, we have the previous/next pagination links }}
52+
{{pagination}}
53+
</div>
54+
</main>

0 commit comments

Comments
 (0)