Skip to content

Commit c619bb9

Browse files
t413t413
committed
SinglePaged compressed-commit release version 2.0
See https://github.com/t413/SinglePaged for : - entire commit history - readme documentation - polished example site - example configuration
1 parent 48bced1 commit c619bb9

File tree

5 files changed

+173
-52
lines changed

5 files changed

+173
-52
lines changed

‎_config.yml

+15-28
Original file line numberDiff line numberDiff line change
@@ -15,35 +15,22 @@ highlighter: pygments
1515

1616

1717
### content configuration ###
18-
title:
19-
keywords:
20-
description:
21-
source_link:
22-
favicon:
23-
touch_icon:
24-
google_analytics_key:
18+
title: "SinglePaged - Title: Edit me in _config.yml!"
19+
keywords: "SinglePaged, jekyll, template, github, blog, single page"
20+
description: "A single-page template for Jekyll based blogs (like what you'd use on github pages!)"
21+
source_link: "https://github.com/t413/SinglePaged"
22+
favicon: #put a path like: "img/favicon.ico"
23+
touch_icon: #put a path like: "img/apple-touch-icon.png"
24+
google_analytics_key: ## put YOUR key here to enable tracking! (blank to disable)
2525

2626

2727
### template colors, used site-wide via css ###
2828
colors:
29-
black:
30-
light: '#303030'
31-
dark: '#111111'
32-
white:
33-
light: '#f5f5f5'
34-
dark: '#f8f8f8'
35-
blue:
36-
light: '#3c9eec'
37-
dark: '#49a7e9'
38-
green:
39-
light: '#a3d832'
40-
dark: '#9bcf2f'
41-
purple:
42-
light: '#c869bf'
43-
dark: '#c869bf'
44-
orange:
45-
light: '#faaf22'
46-
dark: '#fab125'
47-
turquoise:
48-
light: '#0fbfcf'
49-
dark: '#0fbfcf'
29+
black: '#111111'
30+
white: '#f8f8f8'
31+
blue: '#49a7e9'
32+
green: '#9bcf2f'
33+
purple: '#c869bf'
34+
orange: '#fab125'
35+
turquoise: '#0fbfcf'
36+

‎_includes/css/base.css

+102-3
Original file line numberDiff line numberDiff line change
@@ -102,12 +102,9 @@
102102
ul, ol { margin-bottom: 20px; }
103103
ul { list-style: none outside; }
104104
ol { list-style: decimal; }
105-
ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
106105
ul, ul.square { list-style: square outside; }
107106
ul ul, ul.circle { list-style: circle outside; }
108107
ul ul ul, ul.disc { list-style: disc outside; }
109-
ul ul, ul ol,
110-
ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%; }
111108
ul ul li, ul ol li,
112109
ol ol li, ol ul li { margin-bottom: 6px; }
113110
li { line-height: 18px; margin-bottom: 12px; }
@@ -265,3 +262,105 @@
265262
.add-bottom { margin-bottom: 20px !important; }
266263

267264

265+
266+
/* #Syntax highlighting
267+
================================================== */
268+
269+
270+
.highlighttable {
271+
color: #f8f8f2;
272+
table-layout: fixed;
273+
white-space: nowrap;
274+
width:90%;
275+
}
276+
277+
.highlighttable pre, .highlighttable code { display:block; margin:0; padding:0; background: none; overflow:auto; word-wrap: normal; }
278+
279+
.highlight, .linenodiv {
280+
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIHWPQ1dU1BgABzQC7XXMTYQAAAABJRU5ErkJggg==);
281+
display:block;
282+
padding: 10px;
283+
margin-bottom:20px;
284+
}
285+
.linenodiv, .lineno { color: #ccc; }
286+
287+
td.linenos { width: 40px; }
288+
289+
.linenodiv {
290+
border-right: none;
291+
padding: 10px;
292+
text-align: right;
293+
}
294+
span.lineno {
295+
display: block;
296+
float: left;
297+
width: 40px;
298+
padding-right: 8px;
299+
text-align: right;
300+
}
301+
302+
303+
.hll { background-color: #49483e }
304+
.c { color: #75715e } /* Comment */
305+
.err { color: #960050; background-color: #1e0010 } /* Error */
306+
.k { color: #66d9ef } /* Keyword */
307+
.l { color: #ae81ff } /* Literal */
308+
.n { color: #f8f8f2 } /* Name */
309+
.o { color: #f92672 } /* Operator */
310+
.p { color: #f8f8f2 } /* Punctuation */
311+
.cm { color: #75715e } /* Comment.Multiline */
312+
.cp { color: #75715e } /* Comment.Preproc */
313+
.c1 { color: #75715e } /* Comment.Single */
314+
.cs { color: #75715e } /* Comment.Special */
315+
.ge { font-style: italic } /* Generic.Emph */
316+
.gs { font-weight: bold } /* Generic.Strong */
317+
.kc { color: #66d9ef } /* Keyword.Constant */
318+
.kd { color: #66d9ef } /* Keyword.Declaration */
319+
.kn { color: #f92672 } /* Keyword.Namespace */
320+
.kp { color: #66d9ef } /* Keyword.Pseudo */
321+
.kr { color: #66d9ef } /* Keyword.Reserved */
322+
.kt { color: #66d9ef } /* Keyword.Type */
323+
.ld { color: #e6db74 } /* Literal.Date */
324+
.m { color: #ae81ff } /* Literal.Number */
325+
.s { color: #e6db74 } /* Literal.String */
326+
.na { color: #a6e22e } /* Name.Attribute */
327+
.nb { color: #f8f8f2 } /* Name.Builtin */
328+
.nc { color: #a6e22e } /* Name.Class */
329+
.no { color: #66d9ef } /* Name.Constant */
330+
.nd { color: #a6e22e } /* Name.Decorator */
331+
.ni { color: #f8f8f2 } /* Name.Entity */
332+
.ne { color: #a6e22e } /* Name.Exception */
333+
.nf { color: #a6e22e } /* Name.Function */
334+
.nl { color: #f8f8f2 } /* Name.Label */
335+
.nn { color: #f8f8f2 } /* Name.Namespace */
336+
.nx { color: #a6e22e } /* Name.Other */
337+
.py { color: #f8f8f2 } /* Name.Property */
338+
.nt { color: #f92672 } /* Name.Tag */
339+
.nv { color: #f8f8f2 } /* Name.Variable */
340+
.ow { color: #f92672 } /* Operator.Word */
341+
.w { color: #f8f8f2 } /* Text.Whitespace */
342+
.mf { color: #ae81ff } /* Literal.Number.Float */
343+
.mh { color: #ae81ff } /* Literal.Number.Hex */
344+
.mi { color: #ae81ff } /* Literal.Number.Integer */
345+
.mo { color: #ae81ff } /* Literal.Number.Oct */
346+
.sb { color: #e6db74 } /* Literal.String.Backtick */
347+
.sc { color: #e6db74 } /* Literal.String.Char */
348+
.sd { color: #e6db74 } /* Literal.String.Doc */
349+
.s2 { color: #e6db74 } /* Literal.String.Double */
350+
.se { color: #ae81ff } /* Literal.String.Escape */
351+
.sh { color: #e6db74 } /* Literal.String.Heredoc */
352+
.si { color: #e6db74 } /* Literal.String.Interpol */
353+
.sx { color: #e6db74 } /* Literal.String.Other */
354+
.sr { color: #e6db74 } /* Literal.String.Regex */
355+
.s1 { color: #e6db74 } /* Literal.String.Single */
356+
.ss { color: #e6db74 } /* Literal.String.Symbol */
357+
.bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
358+
.vc { color: #f8f8f2 } /* Name.Variable.Class */
359+
.vg { color: #f8f8f2 } /* Name.Variable.Global */
360+
.vi { color: #f8f8f2 } /* Name.Variable.Instance */
361+
.il { color: #ae81ff } /* Literal.Number.Integer.Long */
362+
363+
.gh { } /* Generic Heading & Diff Header */
364+
.gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
365+
.gd { color: #f92672; } /* Generic.Deleted & Diff Deleted */
366+
.gi { color: #a6e22e; } /* Generic.Inserted & Diff Inserted */

‎_includes/css/main.css

+46-14
Original file line numberDiff line numberDiff line change
@@ -8,30 +8,60 @@ html { box-sizing: border-box; }
88
/* ----- colors (autogenerated from _config.yml)----- */
99

1010
{% for c in site.colors %}
11-
.border-{{c[0]}} { border-color: {{ c[1].dark }} !important; }
12-
.text-{{c[0]}} { color: {{ c[1].dark }}; }
13-
.text-{{c[0]}} a { color: {{ c[1].dark }}; }
14-
.bg-{{c[0]}} { background-color: {{ c[1].dark }} !important; }
15-
.shadow-{{c[0]}} { text-shadow: 1px -2px 2px {{ c[1].dark }}; }
11+
.border-{{c[0]}} { border-color: {{ c[1] }} !important; }
12+
.text-{{c[0]}} { color: {{ c[1] }}; }
13+
.text-{{c[0]}} a { color: {{ c[1] }}; }
14+
.bg-{{c[0]}} { background-color: {{ c[1] }} !important; }
1615
{% endfor %}
1716

18-
img {
19-
max-width:100%!important;
20-
height:auto;
21-
vertical-align:middle;
22-
}
17+
/* ----- per-post colors! ----- */
18+
{% for node in site.posts %}
19+
{% capture id %}{{ node.id | remove:'/' | downcase }}{% endcapture %}
20+
{% capture bg %}{% if site.colors[node.bg] %}{{ site.colors[node.bg] }}{% else %}{{ node.bg }}{% endif %}{% endcapture %}
21+
{% capture fg %}{% if site.colors[node.color] %}{{ site.colors[node.color] }}{% else %}{{ node.color }}{% endif %}{% endcapture %}
22+
nav .p-{{id}} { border-color: {{ bg }}; }
23+
#{{id}} { background-color: {{ bg }} !important; color: {{ fg }}; }
24+
#{{id}} a { color: {{ fg }}; }
25+
#{{id}} .sectiondivider { color: {{ bg }}; }
26+
{% endfor %}
2327

28+
29+
/* ----- code, syntax highlighting, etc ----- */
30+
31+
code, pre { font-family: Monaco, Menlo, Consolas, "Courier New", monospace; }
32+
33+
/* spesifically inline code */
2434
code {
25-
font-family: monospace;
2635
background: rgba(255,255,255,0.2);
2736
display: inline;
2837
word-wrap: break-word;
2938
}
3039

40+
/* block code */
41+
pre code { background: none; display: block; }
42+
pre {
43+
display: block;
44+
margin: 20px 5%;
45+
padding: 4px 8px;
46+
background: rgba(255,255,255,0.1);
47+
word-wrap: break-word;
48+
}
49+
50+
.highlighttable { margin:20px 5%; }
51+
52+
53+
/* ----- base elements ----- */
54+
55+
img {
56+
max-width:100%!important;
57+
height:auto;
58+
vertical-align:middle;
59+
}
60+
3161
hr {
3262
margin:60px auto;
3363
width:50%;
34-
border-color: {{ site.colors.black.dark }};
64+
border-color: {{ site.colors.black }};
3565
}
3666

3767
.container { word-wrap: break-word; }
@@ -47,6 +77,7 @@ hr {
4777
font-size: 17px;
4878
padding: 0 5%;
4979
}
80+
.container ol, .container ul { padding: 0 8%; }
5081
.container p:first-of-type {
5182
margin-top: 40px;
5283
}
@@ -127,7 +158,7 @@ nav ul li a:hover {
127158
opacity:1
128159
}
129160
nav ul li:hover, nav ul li.active {
130-
border-top: {{navborder_active}}px solid;
161+
border-top-width: {{navborder_active}}px;
131162
padding-top: 0;
132163
}
133164

@@ -189,8 +220,9 @@ nav ul li:hover, nav ul li.active {
189220
font-size: 130px;
190221
position: static;
191222
margin-top: -8px;
192-
color: #fff;
193223
}
224+
.sectiondivider .fa-circle { color: #fff; }
225+
194226
.sectiondivider h5 {
195227
font-size:15px;
196228
font-weight:700;

‎index.html

+8-6
Original file line numberDiff line numberDiff line change
@@ -19,28 +19,30 @@
1919

2020
<nav><ul>
2121
{% for node in site.posts reversed %}
22-
<li class="border-{{ node.bg }}"><a href="#{{node.title | remove:' ' | downcase}}">{{node.title}}</a></li>
22+
{% capture id %}{{ node.id | remove:'/' | downcase }}{% endcapture %}
23+
<li class="p-{{id}}"><a href="#{{id}}">{{node.title}}</a></li>
2324
{% endfor %}
2425
</ul></nav>
2526

2627

2728
{% for page in site.posts reversed %}
28-
<div id="{{page.title | remove:' ' | downcase}}" class="section bg-{{page.bg}}">
29+
{% capture id %}{{ page.id | remove:'/' | downcase }}{% endcapture %}
30+
<div id="{{id}}" class="section p-{{id}}">
2931
{% if page.icon %}
3032
<div class="subtlecircle sectiondivider imaged">
3133
<img src="{{page.icon}}" alt="section icon" />
32-
<h5 class="icon-title text-{{page.bg}}">{{ page.title }}</h5>
34+
<h5 class="icon-title">{{ page.title }}</h5>
3335
</div>
3436
{% elsif page.fa-icon %}
3537
<div class="subtlecircle sectiondivider faicon">
3638
<span class="fa-stack">
3739
<i class="fa fa-circle fa-stack-2x"></i>
38-
<i class="fa fa-{{ page.fa-icon }} fa-stack-1x text-{{page.bg}}"></i>
40+
<i class="fa fa-{{ page.fa-icon }} fa-stack-1x"></i>
3941
</span>
40-
<h5 class="icon-title text-{{page.bg}}">{{ page.title }}</h5>
42+
<h5 class="icon-title">{{ page.title }}</h5>
4143
</div>
4244
{% endif %}
43-
<div class="container text-{{ page.color }} {{ page.style }}">
45+
<div class="container {{ page.style }}">
4446
{{ page.content }}
4547
</div>
4648
</div>

‎site.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,8 @@ $(document).ready(function (){
8484
if ($(this).attr("href").charAt(0) == '#'){
8585
$(this).on('click', function(event) {
8686
event.preventDefault();
87-
var targetHight = $($(event.target).attr("href")).offset().top
87+
var target = $(event.target).closest("a");
88+
var targetHight = $(target.attr("href")).offset().top
8889
$('html,body').animate({scrollTop: targetHight - 170}, 800, "easeInOutExpo");
8990
});
9091
}

0 commit comments

Comments
 (0)