Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Index template file #76

Closed
wants to merge 1 commit into from
Closed

Index template file #76

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
219 changes: 219 additions & 0 deletions templates/ink.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,219 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Article Title</title>
<meta name="description" content="">
<meta name="author" content="ink, cookbook, recipes">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">


<link rel="icon" type="image/x-icon" href="https://assets-cdn.github.com/favicon.ico">

<link rel="shortcut icon" href="http://cdn.ink.sapo.pt/3.1.1/img/favicon.ico">
<link rel="apple-touch-icon" href="http://cdn.ink.sapo.pt/3.1.1/img/touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="http://cdn.ink.sapo.pt/3.1.1/img/touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="http://cdn.ink.sapo.pt/3.1.1/img/touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="http://cdn.ink.sapo.pt/3.1.1/img/touch-icon-ipad-retina.png">
<link rel="apple-touch-startup-image" href="http://cdn.ink.sapo.pt/3.1.1/img/splash.320x460.png" media="screen and (min-device-width: 200px) and (max-device-width: 320px) and (orientation:portrait)">
<link rel="apple-touch-startup-image" href="http://cdn.ink.sapo.pt/3.1.1/img/splash.768x1004.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
<link rel="apple-touch-startup-image" href="http://cdn.ink.sapo.pt/3.1.1/img/splash.1024x748.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">

<!-- load Ink's css from the cdn -->
<link rel="stylesheet" type="text/css" href="http://cdn.ink.sapo.pt/3.1.1/css/ink-flex.min.css">
<link rel="stylesheet" type="text/css" href="http://cdn.ink.sapo.pt/3.1.1/css/font-awesome.min.css">

<!-- load Ink's css for IE8 -->
<!--[if lt IE 9 ]>
<link rel="stylesheet" href="http://cdn.ink.sapo.pt/3.1.1/css/ink-ie.min.css" type="text/css" media="screen" title="no title" charset="utf-8">
<![endif]-->

<!-- test browser flexbox support and load legacy grid if unsupported -->
<script type="text/javascript" src="http://cdn.ink.sapo.pt/3.1.1/js/modernizr.js"></script>
<script type="text/javascript">
Modernizr.load({
test: Modernizr.flexbox,
nope : 'http://cdn.ink.sapo.pt/3.1.1/css/ink-legacy.min.css'
});
</script>

<!-- load Ink's javascript files from the cdn -->
<script type="text/javascript" src="http://cdn.ink.sapo.pt/3.1.1/js/holder.js"></script>
<script type="text/javascript" src="http://cdn.ink.sapo.pt/3.1.1/js/ink-all.min.js"></script>
<script type="text/javascript" src="http://cdn.ink.sapo.pt/3.1.1/js/autoload.js"></script>
<script type="text/javascript" src="/js/mermaid.full.min.js"></script>


<style type="text/css">

body {
background: #ffffff;
font-family: sans-serif;
font-size: 90%;
}

header h1 small:before {
content: "|";
margin: 0 0.5em;
font-size: 1.5em;
}
h1 {
color: #104e8b;
}


article header{
padding: 0;
overflow: hidden;
}

article footer {
background: none;
}

article {
padding-bottom: 2em;
border-bottom: 1px solid #ccc;
}

table, th, td {
border: 1px solid #8b8989;
}

.date {
float: right;
}

summary {
font-weight: 700;
line-height: 1;
}
.push, footer {
height: 120px;
margin-top: 0;
margin-bottom: 10;
}
footer {
background: #cdc5bf;
}
</style>
<script>
Ink.requireModules(['Ink.Dom.Loaded_1'], function (DomLoaded) {
DomLoaded.run(function(){
var elements = document.querySelectorAll ('article h1,h2');
var i;
var sections = document.getElementById('sections');
for(i=0;i<elements.length;i++){
var e = elements[i];

sections.innerHTML = sections.innerHTML + '<li><a href="#'+e.id+'">'+e.innerText+'</a></li>';
//$("#sections").append('<li><a href="http://www.idg.se">'+$e.text()+'</a></li>');
}

Ink.requireModules( ['Ink.UI.Sticky_1'], function( Sticky ){
new Sticky('#sidenav')
});
});
});
</script>
</head>

<body>

<div class="ink-grid">

<!--[if lte IE 9 ]>
<div class="ink-alert basic" role="alert">
<button class="ink-dismiss">&times;</button>
<p>
<strong>You are using an outdated Internet Explorer version.</strong>
Please <a href="http://browsehappy.com/">upgrade to a modern browser</a> to improve your web experience.
</p>
</div>
-->

<!-- Add your site or application content here -->

<header class="clearfix vertical-padding">

<h1 class="logo xlarge-push-left large-push-left">
mermaid<small>Diagrams and flowcharts from text similar to markdown</small>
</h1>

<nav class="ink-navigation xlarge-push-right large-push-right half-top-space">
<ul class="menu horizontal black">
{{#list}}
{{#active}}
<li class="active"><a href="{{{name}}}.html">{{{name}}}</a></li>
{{/active}}
{{^active}}
<li><a href="{{{name}}}.html">{{{name}}}</a></li>
{{/active}}
{{/list}}
</ul>
</nav>

</header>

<section class="column-group gutters article">
<div class="xlarge-70 large-70 medium-60 small-100 tiny-100">
<article>
{{{contents}}}
</article>
</div>
<section class="xlarge-30 large-30 medium-40 small-100 tiny-100">
<nav id="sidenav" class="ink-navigation ink-sticky bottom-space"
data-bottom-element="#sticky-stop">
<ul class="menu vertical black" id="sections">
<li class="heading active"><a href="#">Quicklinks:</a></li>
</ul>
</nav>
</section>
</section>
<div id="sticky-stop">&nbsp;</div>

<section class="column-group gutters">
<div class="all-20 small-100 tiny-100">
<h4>Heading 1</h4>
<img class="half-bottom-space" src="holder.js/1200x600/auto/ink" alt="">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel tortor vel nisl vestibulum congue vel vel lectus. Cras vehicula metus nec nibh ornare, in ullamcorper ipsum sodales. Duis luctus tempus augue, sed facilisis sem semper non. Pellentesque elementum auctor lectus, a fringilla quam."</p>
</div>
<div class="all-20 small-100 tiny-100">
<h4>Heading 2</h4>
<img class="half-bottom-space" src="holder.js/1200x600/auto/ink" alt="">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel tortor vel nisl vestibulum congue vel vel lectus. Cras vehicula metus nec nibh ornare, in ullamcorper ipsum sodales. Duis luctus tempus augue, sed facilisis sem semper non. Pellentesque elementum auctor lectus, a fringilla quam."</p>
</div>
<div class="all-20 small-100 tiny-100">
<h4>Heading 3</h4>
<img class="half-bottom-space" src="holder.js/1200x600/auto/ink" alt="">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel tortor vel nisl vestibulum congue vel vel lectus. Cras vehicula metus nec nibh ornare, in ullamcorper ipsum sodales. Duis luctus tempus augue, sed facilisis sem semper non. Pellentesque elementum auctor lectus, a fringilla quam."</p>
</div>
<div class="all-20 small-100 tiny-100">
<h4>Heading 4</h4>
<img class="half-bottom-space" src="holder.js/1200x600/auto/ink" alt="">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel tortor vel nisl vestibulum congue vel vel lectus. Cras vehicula metus nec nibh ornare, in ullamcorper ipsum sodales. Duis luctus tempus augue, sed facilisis sem semper non. Pellentesque elementum auctor lectus, a fringilla quam."</p>
</div>
<div class="all-20 small-100 tiny-100">
<h4>Heading 5</h4>
<img class="half-bottom-space" src="holder.js/1200x600/auto/ink" alt="">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel tortor vel nisl vestibulum congue vel vel lectus. Cras vehicula metus nec nibh ornare, in ullamcorper ipsum sodales. Duis luctus tempus augue, sed facilisis sem semper non. Pellentesque elementum auctor lectus, a fringilla quam."</p>
</div>
</section>
</div>
<footer class="clearfix">
<div class="ink-grid">
<ul class="unstyled inline half-vertical-space">
<li class="active"><a href="#">About</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Contacts</a></li>
</ul>
<p class="note">Identification of the owner of the copyright, either by name, abbreviation, or other designation by which it is generally known.</p>
</div>
</footer>
</body>
</html>