328 lines
15 KiB
HTML
328 lines
15 KiB
HTML
|
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
|
||
|
|
<title>Featured Images for the detail View</title>
|
||
|
|
<meta name="HandheldFriendly" content="True"/>
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
|
|
<meta name="referrer" content="origin"/>
|
||
|
|
<meta name="generator" content="Pelican"/>
|
||
|
|
<link href="http://attila.demo.arulraj.net/" rel="canonical"/>
|
||
|
|
|
||
|
|
<link href="http://attila.demo.arulraj.net/feeds/all.atom.xml" type="application/atom+xml" rel="alternate" title="Attila Demo Full Atom Feed"/>
|
||
|
|
<link href="http://attila.demo.arulraj.net/feeds/misc.atom.xml" type="application/atom+xml" rel="alternate" title="Attila Demo Categories Atom Feed"/>
|
||
|
|
<link href="css/style.css" type="text/css" rel="stylesheet"/>
|
||
|
|
<link href="http://attila.demo.arulraj.net/theme/css/code_blocks/github.css" rel="stylesheet">
|
||
|
|
|
||
|
|
<!--[if lt IE 9]>
|
||
|
|
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||
|
|
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
|
||
|
|
<![endif]-->
|
||
|
|
<link href="http://attila.demo.arulraj.net/2015/11/featured-images-for-the-detail-view.html" rel="canonical"/>
|
||
|
|
<meta name="description" content="Hi there and welcome to Attila - theme for the blogging platform Pelican. Attila is open source and can be found on GitHub. This article...">
|
||
|
|
<meta name="author" content="zutrinken">
|
||
|
|
<meta name="tags" content="General">
|
||
|
|
|
||
|
|
<meta property="og:site_name" content="Attila Demo"/>
|
||
|
|
<meta property="og:title" content="Featured Images for the detail View"/>
|
||
|
|
<meta property="og:description" content="Hi there and welcome to Attila - theme for the blogging platform Pelican. Attila is open source and can be found on GitHub. This article..."/>
|
||
|
|
<meta property="og:locale" content="en_US"/>
|
||
|
|
<meta property="og:url" content="http://attila.demo.arulraj.net/2015/11/featured-images-for-the-detail-view.html"/>
|
||
|
|
<meta property="og:type" content="article"/>
|
||
|
|
<meta property="article:published_time" content="2015-11-20 21:54:00+05:30"/>
|
||
|
|
<meta property="article:modified_time" content=""/>
|
||
|
|
<meta property="article:author" content="http://attila.demo.arulraj.net/author/zutrinken">
|
||
|
|
<meta property="article:publisher" content="http://facebook.com/arulraj.net"/>
|
||
|
|
<meta property="article:section" content="misc"/>
|
||
|
|
<meta property="article:tag" content="General"/>
|
||
|
|
<meta property="og:image" content="http://attila.demo.arulraj.net/assets/images/4BQLVS45VD.jpg">
|
||
|
|
|
||
|
|
<meta name="twitter:card" content="summary_large_image">
|
||
|
|
<meta name="twitter:site" content="@arulrajnet">
|
||
|
|
<meta name="twitter:title" content="Featured Images for the detail View">
|
||
|
|
<meta name="twitter:url" content="http://attila.demo.arulraj.net/2015/11/featured-images-for-the-detail-view.html">
|
||
|
|
<meta name="twitter:image:src" content="http://attila.demo.arulraj.net/assets/images/4BQLVS45VD.jpg">
|
||
|
|
<meta name="twitter:description" content="Hi there and welcome to Attila - theme for the blogging platform Pelican. Attila is open source and can be found on GitHub. This article...">
|
||
|
|
<script type="application/ld+json">
|
||
|
|
{
|
||
|
|
"@context": "http://schema.org",
|
||
|
|
"@type": "Article",
|
||
|
|
"name": "Featured Images for the detail View",
|
||
|
|
"headline": "Featured Images for the detail View",
|
||
|
|
"datePublished": "2015-11-20 21:54:00+05:30",
|
||
|
|
"dateModified": "",
|
||
|
|
"author": {
|
||
|
|
"@type": "Person",
|
||
|
|
"name": "zutrinken",
|
||
|
|
"url": "http://attila.demo.arulraj.net/author/zutrinken"
|
||
|
|
},
|
||
|
|
"image": "css/header.jpg",
|
||
|
|
"url": "http://attila.demo.arulraj.net/2015/11/featured-images-for-the-detail-view.html",
|
||
|
|
"description": "Hi there and welcome to Attila - theme for the blogging platform Pelican. Attila is open source and can be found on GitHub. This article..."
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body class="home-template">
|
||
|
|
<nav id="menu">
|
||
|
|
<a class="close-button">Close</a>
|
||
|
|
<div class="nav-wrapper">
|
||
|
|
<p class="nav-label">Menu</p>
|
||
|
|
<ul>
|
||
|
|
<li role="presentation"><a href="http://attila.demo.arulraj.net/pages/about/">About</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<div class="progress-container">
|
||
|
|
<span class="progress-bar"></span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<header id="post-header" class="has-cover">
|
||
|
|
<div class="inner">
|
||
|
|
<nav id="navigation">
|
||
|
|
<span id="home-button" class="nav-button">
|
||
|
|
<a class="home-button" href="http://attila.demo.arulraj.net/" title="Home"><i class="ic ic-arrow-left"></i> Home</a>
|
||
|
|
</span>
|
||
|
|
<span id="menu-button" class="nav-button">
|
||
|
|
<a class="menu-button"><i class="ic ic-menu"></i> Menu</a>
|
||
|
|
</span>
|
||
|
|
</nav>
|
||
|
|
<h1 class="post-title">Featured Images for the detail View</h1>
|
||
|
|
|
||
|
|
<span class="post-meta">
|
||
|
|
<a href="http://attila.demo.arulraj.net/author/zutrinken">Zutrinken</a>
|
||
|
|
| <time datetime="20 Nov 2015">20 Nov 2015</time>
|
||
|
|
</span>
|
||
|
|
|
||
|
|
<div class="post-cover cover" style="background-image: url('css/header.jpg')">
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
<section id="wrapper">
|
||
|
|
<a class="hidden-close"></a>
|
||
|
|
|
||
|
|
<main class="content" role="main">
|
||
|
|
<article class="post">
|
||
|
|
<div class="inner">
|
||
|
|
<section class="post-content">
|
||
|
|
<p><strong>Hi there and welcome to Attila - theme for the blogging platform <a href="http://getpelican.com/">Pelican</a>. Attila is open source and can be found on <a href="https://github.com/arulrajnet/attila">GitHub</a>. This article is just a demo post and shows you the style of common used elements.</strong></p>
|
||
|
|
<hr/>
|
||
|
|
<h1>Headline 1</h1>
|
||
|
|
<h2>Headline 2</h2>
|
||
|
|
<h3>Headline 3</h3>
|
||
|
|
<h4>Headline 4</h4>
|
||
|
|
<hr/>
|
||
|
|
<p>Bear claw danish chocolate lollipop soufflé jelly. Apple pie chocolate cake
|
||
|
|
jelly-o icing bonbon. Gingerbread pastry fruitcake muffin chocolate bar
|
||
|
|
cheesecake. Sugar plum bonbon bonbon lemon drops gummies.</p>
|
||
|
|
<div class="imgview-image" offset="1500" style="background-image: url('images/psithemius_glow.jpg'); height:73.4vh"></div>
|
||
|
|
<div class="imgview-space" style="height:73.4vh"></div>
|
||
|
|
<h2>Inline 🦄 text styles + <a href="http://ghost.org">link</a></h2>
|
||
|
|
<p>Chocolate tiramisu pastry <a href="http://zutrinken.com">a link</a> cotton candy sesame
|
||
|
|
snaps. Dessert cake chocolate bar <strong>a bold part</strong> sugar plum bonbon 🐓💨
|
||
|
|
marshmallow lollipop toffee soufflé. Donut caramels chocolate bar. Oat cake
|
||
|
|
cookie a marked part cheesecake donut. Jelly-o <code><some> $code</code> marzipan cake.
|
||
|
|
Bonbon sesame snaps chocolate <em>an italic part</em> oat cake pudding sweet roll
|
||
|
|
caramels bonbon. Soufflé muffin 👻 gummies sugar plum dessert bonbon bear claw.
|
||
|
|
Sweet ice cream jujubes. Marzipan sugar plum pastry chocolate ⌘+A bar
|
||
|
|
fruitcake. Lollipop lollipop brownie.</p>
|
||
|
|
<h2>Ordered & unordered lists</h2>
|
||
|
|
<p>Cake jelly-o chocolate cake sugar plum carrot cake lollipop bonbon. Jelly
|
||
|
|
beans pudding oat cake pie.</p>
|
||
|
|
<h3>Unordered list</h3>
|
||
|
|
<ul>
|
||
|
|
<li>Jelly beans pudding oat cake pie.</li>
|
||
|
|
<li>Cupcake cupcake oat cake candy lemon</li>
|
||
|
|
<li>Drops marzipan icing. Dessert topping croissant fruitcake sesame snaps cotton candy sweet danish</li>
|
||
|
|
<li>Sweet roll sweet sugar plum donut <ul>
|
||
|
|
<li>Bear claw gingerbread cake donut chocolate bar</li>
|
||
|
|
<li>Topping cake fruitcake fruitcake</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>Ice cream icing chupa chups cupcake jelly-o candy</li>
|
||
|
|
<li>Croissant jujubes topping tart soufflé pudding <ul>
|
||
|
|
<li>Cheesecake caramels icing</li>
|
||
|
|
<li>Cake jelly-o chocolate cake sugar plum carrot cake lollipop bonbon</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<h3>Ordered list</h3>
|
||
|
|
<ol>
|
||
|
|
<li>Drops marzipan icing. Dessert topping croissant fruitcake sesame snaps cotton candy sweet danish </li>
|
||
|
|
<li>
|
||
|
|
<p>Sweet roll sweet sugar plum donut </p>
|
||
|
|
<ul>
|
||
|
|
<li>Bear claw gingerbread cake donut chocolate bar</li>
|
||
|
|
<li>Topping cake fruitcake fruitcake</li>
|
||
|
|
<li>Ice cream icing chupa chups cupcake jelly-o candy</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ol>
|
||
|
|
<h3>Definition list</h3>
|
||
|
|
<div class="imgview-image" offset="3500" style="background-image: url('images/psithemius_glow.jpg'); height:73.4vh"></div>
|
||
|
|
<div class="imgview-space" style="height:73.4vh"></div>
|
||
|
|
<p>Ice cream</p>
|
||
|
|
<div class="highlight"><pre><span></span>icing chupa chups cupcake jelly-o candy. Croissant jujubes topping tart soufflé pudding
|
||
|
|
</pre></div>
|
||
|
|
<p>Cake</p>
|
||
|
|
<div class="highlight"><pre><span></span>Jelly beans pudding oat cake pie
|
||
|
|
</pre></div>
|
||
|
|
<p>Drops marzipan icing</p>
|
||
|
|
<div class="highlight"><pre><span></span>Cake jelly-o chocolate cake sugar plum carrot cake lollipop
|
||
|
|
</pre></div>
|
||
|
|
<h2>Tables, blockquotes and codeblocks</h2>
|
||
|
|
<p>Apple pie chocolate cake jelly-o icing bonbon. Gingerbread pastry fruitcake
|
||
|
|
muffin chocolate bar cheesecake. Sugar plum bonbon bonbon lemon drops gummies.</p>
|
||
|
|
<table>
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>RGB</th>
|
||
|
|
<th>CMYK</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td>Red</td>
|
||
|
|
<td>Cyan</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Green</td>
|
||
|
|
<td>Magenta</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Blue</td>
|
||
|
|
<td>Yellow</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
<p>Brownie oat cake tart caramels croissant lollipop pastry soufflé lemon drops.
|
||
|
|
Cotton candy pastry ice cream fruitcake tiramisu jelly beans dragée.</p>
|
||
|
|
<blockquote>
|
||
|
|
<p>Jelly beans dessert toffee caramels brownie ice cream croissant chupa chups
|
||
|
|
liquorice. Danish sweet roll croissant. Powder sugar plum powder danish wafer
|
||
|
|
cake.</p>
|
||
|
|
<p>Candy jelly beans jujubes muffin. Bear claw danish chocolate lollipop
|
||
|
|
soufflé jelly.</p>
|
||
|
|
</blockquote>
|
||
|
|
<p>Cake soufflé icing gingerbread topping jujubes. Chocolate cake pudding sweet
|
||
|
|
biscuit cake. Soufflé tart topping gummi bears jujubes lollipop ice cream
|
||
|
|
pudding.</p>
|
||
|
|
<p>Apple pie jelly-o powder powder sweet. Halvah chocolate bar cotton candy sugar
|
||
|
|
plum cake. Liquorice marshmallow sweet macaroon.</p>
|
||
|
|
<div class="highlight"><pre><span></span><span class="nt"><blockquote></span>
|
||
|
|
<span class="nt"><p></span>For example.<span class="nt"></p></span>
|
||
|
|
<span class="nt"></blockquote></span>
|
||
|
|
</pre></div>
|
||
|
|
<p>Cake soufflé icing gingerbread topping jujubes. Chocolate cake pudding sweet
|
||
|
|
biscuit cake. Soufflé tart topping gummi bears jujubes lollipop ice cream
|
||
|
|
pudding. Apple pie jelly-o powder powder sweet. Halvah chocolate bar cotton
|
||
|
|
candy sugar plum cake. Liquorice marshmallow sweet macaroon. Cotton candy
|
||
|
|
pastry ice cream fruitcake tiramisu jelly beans drag.</p>
|
||
|
|
<p>Apple pie chocolate cake jelly-o icing bonbon. Gingerbread pastry fruitcake
|
||
|
|
muffin chocolate bar cheesecake. Sugar plum bonbon bonbon lemon drops gummies.
|
||
|
|
Brownie oat cake tart caramels croissant lollipop pastry soufflé lemon drops.
|
||
|
|
Jelly beans dessert toffee caramels brownie ice cream croissant chupa chups
|
||
|
|
liquorice. Danish sweet roll croissant. Powder sugar plum powder danish wafer
|
||
|
|
cake. Candy jelly beans jujubes muffin. Bear claw danish chocolate lollipop
|
||
|
|
soufflé jelly.</p>
|
||
|
|
</section>
|
||
|
|
<section class="post-info">
|
||
|
|
<div class="post-share">
|
||
|
|
<a class="twitter" href="https://twitter.com/share?text=Featured Images for the detail View&url=http://attila.demo.arulraj.net/2015/11/featured-images-for-the-detail-view.html" onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
|
||
|
|
<i class="ic ic-twitter"></i><span class="hidden">Twitter</span>
|
||
|
|
</a>
|
||
|
|
<a class="facebook" href="https://www.facebook.com/sharer/sharer.php?u=http://attila.demo.arulraj.net/2015/11/featured-images-for-the-detail-view.html" onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">
|
||
|
|
<i class="ic ic-facebook"></i><span class="hidden">Facebook</span>
|
||
|
|
</a>
|
||
|
|
<a class="googleplus" href="https://plus.google.com/share?url=http://attila.demo.arulraj.net/2015/11/featured-images-for-the-detail-view.html" onclick="window.open(this.href, 'google-plus-share', 'width=490,height=530');return false;">
|
||
|
|
<i class="ic ic-googleplus"></i><span class="hidden">Google+</span>
|
||
|
|
</a>
|
||
|
|
<div class="clear"></div>
|
||
|
|
</div>
|
||
|
|
<aside class="post-tags">
|
||
|
|
<a href="http://attila.demo.arulraj.net/tag/general">General</a> </aside>
|
||
|
|
<div class="clear"></div>
|
||
|
|
<aside class="post-author">
|
||
|
|
<figure class="post-author-avatar">
|
||
|
|
<img src="http://attila.demo.arulraj.net/assets/images/avatar.png" alt="Zutrinken"/>
|
||
|
|
</figure>
|
||
|
|
<div class="post-author-bio">
|
||
|
|
<h4 class="post-author-name"><a href="http://attila.demo.arulraj.net/author/zutrinken">Zutrinken</a></h4>
|
||
|
|
<p class="post-author-about">This is the place for a small biography with max 200 characters. Well, now 100 are left. Cool, hugh?</p>
|
||
|
|
<span class="post-author-location"><i class="ic ic-location"></i> Chennai</span>
|
||
|
|
<span class="post-author-website"><a href="http://blog.arulraj.net"><i class="ic ic-link"></i> Website</a></span>
|
||
|
|
</div>
|
||
|
|
<div class="clear"></div>
|
||
|
|
</aside>
|
||
|
|
</section>
|
||
|
|
<script type="text/javascript">
|
||
|
|
var disqus = 'attilademo';
|
||
|
|
var disqus_shortname = 'attilademo';
|
||
|
|
var disqus_identifier = '/2015/11/featured-images-for-the-detail-view.html';
|
||
|
|
var disqus_url = 'http://attila.demo.arulraj.net/2015/11/featured-images-for-the-detail-view.html';
|
||
|
|
</script>
|
||
|
|
<noscript>Please enable JavaScript to view the comments.</noscript>
|
||
|
|
<section class="post-comments">
|
||
|
|
<a id="show-disqus" class="post-comments-activate" data-disqus-identifier="/2015/11/featured-images-for-the-detail-view.html">Show Comments</a>
|
||
|
|
<div id="disqus_thread"></div>
|
||
|
|
</section>
|
||
|
|
<aside class="post-nav">
|
||
|
|
<a class="post-nav-prev" href="http://attila.demo.arulraj.net/2015/11/featured-color-header-view.html">
|
||
|
|
<section class="post-nav-teaser">
|
||
|
|
<i class="ic ic-arrow-right"></i>
|
||
|
|
<h2 class="post-nav-title">Featured Color Header View</h2>
|
||
|
|
<p class="post-nav-excerpt">Chocolate tiramisu pastry cotton candy sesame snaps. Dessert cake chocolate bar sugar...</p>
|
||
|
|
</section>
|
||
|
|
</a>
|
||
|
|
<div class="clear"></div>
|
||
|
|
</aside>
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<div id="body-class" style="display: none;" class=""></div>
|
||
|
|
<footer id="footer">
|
||
|
|
<div class="inner">
|
||
|
|
<section class="credits">
|
||
|
|
<span class="credits-theme">Theme <a href="https://github.com/arulrajnet/attila" rel="nofollow">Attila</a></span>
|
||
|
|
<span class="credits-software">Published with <a href="https://github.com/getpelican/pelican" rel="nofollow">Pelican</a></span>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
</section>
|
||
|
|
<script type="text/javascript" src="js/script.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
let paras = document.getElementsByClassName("imgview-image");
|
||
|
|
window.addEventListener('scroll', () => {
|
||
|
|
let { scrollY } = window;
|
||
|
|
if ( screen.width > screen.height && screen.height > 800) {
|
||
|
|
for (let i = 0; i < paras.length; i++) {
|
||
|
|
paras[i].style.backgroundPositionY = paras[i].getAttribute("offset") * 0.1 + -0.1 * scrollY + 'px';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
var _gaq = _gaq || [];
|
||
|
|
_gaq.push(['_setAccount', 'UA-3546274-12']);
|
||
|
|
_gaq.push(['_trackPageview']);
|
||
|
|
(function() {
|
||
|
|
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||
|
|
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||
|
|
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||
|
|
})();
|
||
|
|
</script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
var disqus_shortname = 'attilademo';
|
||
|
|
(function () {
|
||
|
|
var s = document.createElement('script'); s.async = true;
|
||
|
|
s.type = 'text/javascript';
|
||
|
|
s.src = '//' + disqus_shortname + '.disqus.com/count.js';
|
||
|
|
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
|
||
|
|
}());
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|