Commit c619bb9b authored by Tim O'Brien's avatar Tim O'Brien
Browse files

SinglePaged compressed-commit release version 2.0

See https://github.com/t413/SinglePaged for :
- entire commit history
- readme documentation
- polished example site
- example configuration
parent 48bced14
......@@ -15,35 +15,22 @@ highlighter: pygments
### content configuration ###
title:
keywords:
description:
source_link:
favicon:
touch_icon:
google_analytics_key:
title: "SinglePaged - Title: Edit me in _config.yml!"
keywords: "SinglePaged, jekyll, template, github, blog, single page"
description: "A single-page template for Jekyll based blogs (like what you'd use on github pages!)"
source_link: "https://github.com/t413/SinglePaged"
favicon: #put a path like: "img/favicon.ico"
touch_icon: #put a path like: "img/apple-touch-icon.png"
google_analytics_key: ## put YOUR key here to enable tracking! (blank to disable)
### template colors, used site-wide via css ###
colors:
black:
light: '#303030'
dark: '#111111'
white:
light: '#f5f5f5'
dark: '#f8f8f8'
blue:
light: '#3c9eec'
dark: '#49a7e9'
green:
light: '#a3d832'
dark: '#9bcf2f'
purple:
light: '#c869bf'
dark: '#c869bf'
orange:
light: '#faaf22'
dark: '#fab125'
turquoise:
light: '#0fbfcf'
dark: '#0fbfcf'
black: '#111111'
white: '#f8f8f8'
blue: '#49a7e9'
green: '#9bcf2f'
purple: '#c869bf'
orange: '#fab125'
turquoise: '#0fbfcf'
......@@ -102,12 +102,9 @@
ul, ol { margin-bottom: 20px; }
ul { list-style: none outside; }
ol { list-style: decimal; }
ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
ul, ul.square { list-style: square outside; }
ul ul, ul.circle { list-style: circle outside; }
ul ul ul, ul.disc { list-style: disc outside; }
ul ul, ul ol,
ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%; }
ul ul li, ul ol li,
ol ol li, ol ul li { margin-bottom: 6px; }
li { line-height: 18px; margin-bottom: 12px; }
......@@ -265,3 +262,105 @@
.add-bottom { margin-bottom: 20px !important; }
/* #Syntax highlighting
================================================== */
.highlighttable {
color: #f8f8f2;
table-layout: fixed;
white-space: nowrap;
width:90%;
}
.highlighttable pre, .highlighttable code { display:block; margin:0; padding:0; background: none; overflow:auto; word-wrap: normal; }
.highlight, .linenodiv {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIHWPQ1dU1BgABzQC7XXMTYQAAAABJRU5ErkJggg==);
display:block;
padding: 10px;
margin-bottom:20px;
}
.linenodiv, .lineno { color: #ccc; }
td.linenos { width: 40px; }
.linenodiv {
border-right: none;
padding: 10px;
text-align: right;
}
span.lineno {
display: block;
float: left;
width: 40px;
padding-right: 8px;
text-align: right;
}
.hll { background-color: #49483e }
.c { color: #75715e } /* Comment */
.err { color: #960050; background-color: #1e0010 } /* Error */
.k { color: #66d9ef } /* Keyword */
.l { color: #ae81ff } /* Literal */
.n { color: #f8f8f2 } /* Name */
.o { color: #f92672 } /* Operator */
.p { color: #f8f8f2 } /* Punctuation */
.cm { color: #75715e } /* Comment.Multiline */
.cp { color: #75715e } /* Comment.Preproc */
.c1 { color: #75715e } /* Comment.Single */
.cs { color: #75715e } /* Comment.Special */
.ge { font-style: italic } /* Generic.Emph */
.gs { font-weight: bold } /* Generic.Strong */
.kc { color: #66d9ef } /* Keyword.Constant */
.kd { color: #66d9ef } /* Keyword.Declaration */
.kn { color: #f92672 } /* Keyword.Namespace */
.kp { color: #66d9ef } /* Keyword.Pseudo */
.kr { color: #66d9ef } /* Keyword.Reserved */
.kt { color: #66d9ef } /* Keyword.Type */
.ld { color: #e6db74 } /* Literal.Date */
.m { color: #ae81ff } /* Literal.Number */
.s { color: #e6db74 } /* Literal.String */
.na { color: #a6e22e } /* Name.Attribute */
.nb { color: #f8f8f2 } /* Name.Builtin */
.nc { color: #a6e22e } /* Name.Class */
.no { color: #66d9ef } /* Name.Constant */
.nd { color: #a6e22e } /* Name.Decorator */
.ni { color: #f8f8f2 } /* Name.Entity */
.ne { color: #a6e22e } /* Name.Exception */
.nf { color: #a6e22e } /* Name.Function */
.nl { color: #f8f8f2 } /* Name.Label */
.nn { color: #f8f8f2 } /* Name.Namespace */
.nx { color: #a6e22e } /* Name.Other */
.py { color: #f8f8f2 } /* Name.Property */
.nt { color: #f92672 } /* Name.Tag */
.nv { color: #f8f8f2 } /* Name.Variable */
.ow { color: #f92672 } /* Operator.Word */
.w { color: #f8f8f2 } /* Text.Whitespace */
.mf { color: #ae81ff } /* Literal.Number.Float */
.mh { color: #ae81ff } /* Literal.Number.Hex */
.mi { color: #ae81ff } /* Literal.Number.Integer */
.mo { color: #ae81ff } /* Literal.Number.Oct */
.sb { color: #e6db74 } /* Literal.String.Backtick */
.sc { color: #e6db74 } /* Literal.String.Char */
.sd { color: #e6db74 } /* Literal.String.Doc */
.s2 { color: #e6db74 } /* Literal.String.Double */
.se { color: #ae81ff } /* Literal.String.Escape */
.sh { color: #e6db74 } /* Literal.String.Heredoc */
.si { color: #e6db74 } /* Literal.String.Interpol */
.sx { color: #e6db74 } /* Literal.String.Other */
.sr { color: #e6db74 } /* Literal.String.Regex */
.s1 { color: #e6db74 } /* Literal.String.Single */
.ss { color: #e6db74 } /* Literal.String.Symbol */
.bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
.vc { color: #f8f8f2 } /* Name.Variable.Class */
.vg { color: #f8f8f2 } /* Name.Variable.Global */
.vi { color: #f8f8f2 } /* Name.Variable.Instance */
.il { color: #ae81ff } /* Literal.Number.Integer.Long */
.gh { } /* Generic Heading & Diff Header */
.gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
.gd { color: #f92672; } /* Generic.Deleted & Diff Deleted */
.gi { color: #a6e22e; } /* Generic.Inserted & Diff Inserted */
\ No newline at end of file
......@@ -8,30 +8,60 @@ html { box-sizing: border-box; }
/* ----- colors (autogenerated from _config.yml)----- */
{% for c in site.colors %}
.border-{{c[0]}} { border-color: {{ c[1].dark }} !important; }
.text-{{c[0]}} { color: {{ c[1].dark }}; }
.text-{{c[0]}} a { color: {{ c[1].dark }}; }
.bg-{{c[0]}} { background-color: {{ c[1].dark }} !important; }
.shadow-{{c[0]}} { text-shadow: 1px -2px 2px {{ c[1].dark }}; }
.border-{{c[0]}} { border-color: {{ c[1] }} !important; }
.text-{{c[0]}} { color: {{ c[1] }}; }
.text-{{c[0]}} a { color: {{ c[1] }}; }
.bg-{{c[0]}} { background-color: {{ c[1] }} !important; }
{% endfor %}
img {
max-width:100%!important;
height:auto;
vertical-align:middle;
}
/* ----- per-post colors! ----- */
{% for node in site.posts %}
{% capture id %}{{ node.id | remove:'/' | downcase }}{% endcapture %}
{% capture bg %}{% if site.colors[node.bg] %}{{ site.colors[node.bg] }}{% else %}{{ node.bg }}{% endif %}{% endcapture %}
{% capture fg %}{% if site.colors[node.color] %}{{ site.colors[node.color] }}{% else %}{{ node.color }}{% endif %}{% endcapture %}
nav .p-{{id}} { border-color: {{ bg }}; }
#{{id}} { background-color: {{ bg }} !important; color: {{ fg }}; }
#{{id}} a { color: {{ fg }}; }
#{{id}} .sectiondivider { color: {{ bg }}; }
{% endfor %}
/* ----- code, syntax highlighting, etc ----- */
code, pre { font-family: Monaco, Menlo, Consolas, "Courier New", monospace; }
/* spesifically inline code */
code {
font-family: monospace;
background: rgba(255,255,255,0.2);
display: inline;
word-wrap: break-word;
}
/* block code */
pre code { background: none; display: block; }
pre {
display: block;
margin: 20px 5%;
padding: 4px 8px;
background: rgba(255,255,255,0.1);
word-wrap: break-word;
}
.highlighttable { margin:20px 5%; }
/* ----- base elements ----- */
img {
max-width:100%!important;
height:auto;
vertical-align:middle;
}
hr {
margin:60px auto;
width:50%;
border-color: {{ site.colors.black.dark }};
border-color: {{ site.colors.black }};
}
.container { word-wrap: break-word; }
......@@ -47,6 +77,7 @@ hr {
font-size: 17px;
padding: 0 5%;
}
.container ol, .container ul { padding: 0 8%; }
.container p:first-of-type {
margin-top: 40px;
}
......@@ -127,7 +158,7 @@ nav ul li a:hover {
opacity:1
}
nav ul li:hover, nav ul li.active {
border-top: {{navborder_active}}px solid;
border-top-width: {{navborder_active}}px;
padding-top: 0;
}
......@@ -189,8 +220,9 @@ nav ul li:hover, nav ul li.active {
font-size: 130px;
position: static;
margin-top: -8px;
color: #fff;
}
.sectiondivider .fa-circle { color: #fff; }
.sectiondivider h5 {
font-size:15px;
font-weight:700;
......
......@@ -19,28 +19,30 @@
<nav><ul>
{% for node in site.posts reversed %}
<li class="border-{{ node.bg }}"><a href="#{{node.title | remove:' ' | downcase}}">{{node.title}}</a></li>
{% capture id %}{{ node.id | remove:'/' | downcase }}{% endcapture %}
<li class="p-{{id}}"><a href="#{{id}}">{{node.title}}</a></li>
{% endfor %}
</ul></nav>
{% for page in site.posts reversed %}
<div id="{{page.title | remove:' ' | downcase}}" class="section bg-{{page.bg}}">
{% capture id %}{{ page.id | remove:'/' | downcase }}{% endcapture %}
<div id="{{id}}" class="section p-{{id}}">
{% if page.icon %}
<div class="subtlecircle sectiondivider imaged">
<img src="{{page.icon}}" alt="section icon" />
<h5 class="icon-title text-{{page.bg}}">{{ page.title }}</h5>
<h5 class="icon-title">{{ page.title }}</h5>
</div>
{% elsif page.fa-icon %}
<div class="subtlecircle sectiondivider faicon">
<span class="fa-stack">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-{{ page.fa-icon }} fa-stack-1x text-{{page.bg}}"></i>
<i class="fa fa-{{ page.fa-icon }} fa-stack-1x"></i>
</span>
<h5 class="icon-title text-{{page.bg}}">{{ page.title }}</h5>
<h5 class="icon-title">{{ page.title }}</h5>
</div>
{% endif %}
<div class="container text-{{ page.color }} {{ page.style }}">
<div class="container {{ page.style }}">
{{ page.content }}
</div>
</div>
......
......@@ -84,7 +84,8 @@ $(document).ready(function (){
if ($(this).attr("href").charAt(0) == '#'){
$(this).on('click', function(event) {
event.preventDefault();
var targetHight = $($(event.target).attr("href")).offset().top
var target = $(event.target).closest("a");
var targetHight = $(target.attr("href")).offset().top
$('html,body').animate({scrollTop: targetHight - 170}, 800, "easeInOutExpo");
});
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment