schtobia/flex
1
0
Fork 0
Code Issues Pull requests Activity
flex/flex-pelican-theme.html

367 lines
No EOL
15 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="HandheldFriendly" content="True" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="robots" content="index, follow" />
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,400;0,700;1,400&family=Source+Sans+Pro:ital,wght@0,300;0,400;0,700;1,400&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://flex.alxd.me/theme/stylesheet/style.min.css">
<link id="dark-theme-style" rel="stylesheet" type="text/css"
media="(prefers-color-scheme: dark)"
href="https://flex.alxd.me/theme/stylesheet/dark-theme.min.css">
<link id="pygments-dark-theme" rel="stylesheet" type="text/css"
media="(prefers-color-scheme: dark)"
href="https://flex.alxd.me/theme/pygments/monokai.min.css">
<link id="pygments-light-theme" rel="stylesheet" type="text/css"
media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
href="https://flex.alxd.me/theme/pygments/monokai.min.css">
<link rel="stylesheet" type="text/css" href="https://flex.alxd.me/theme/font-awesome/css/fontawesome.css">
<link rel="stylesheet" type="text/css" href="https://flex.alxd.me/theme/font-awesome/css/brands.css">
<link rel="stylesheet" type="text/css" href="https://flex.alxd.me/theme/font-awesome/css/solid.css">
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#333333">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#333333">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- Microsoft EDGE -->
<meta name="msapplication-TileColor" content="#333333">
<link href="https://flex.alxd.me/feeds/all.atom.xml" type="application/atom+xml" rel="alternate" title="Flex Atom">
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-55543164-6', 'auto');
ga('send', 'pageview');
</script>
<meta name="author" content="Alexandre Vicenzi" />
<meta name="description" content="I just start a new fresh blog using Pelican. Sometimes choosing a theme for a new site is something difficult that takes time. In the Pelican theme gallery, I couldn&#39;t find anything that I really liked to feet all my needs. So in the first time of the history, I …" />
<meta name="keywords" content="pelican, python, theme">
<meta property="og:site_name" content="Flex"/>
<meta property="og:title" content="Flex: Responsive Pelican theme"/>
<meta property="og:description" content="I just start a new fresh blog using Pelican. Sometimes choosing a theme for a new site is something difficult that takes time. In the Pelican theme gallery, I couldn&#39;t find anything that I really liked to feet all my needs. So in the first time of the history, I …"/>
<meta property="og:locale" content="en_US"/>
<meta property="og:url" content="https://flex.alxd.me/flex-pelican-theme.html"/>
<meta property="og:type" content="article"/>
<meta property="article:published_time" content="2015-07-22 08:00:00-04:00"/>
<meta property="article:modified_time" content="2015-07-22 08:00:00-04:00"/>
<meta property="article:author" content="https://flex.alxd.me/author/alexandre-vicenzi.html">
<meta property="article:section" content="News"/>
<meta property="article:tag" content="pelican"/>
<meta property="article:tag" content="python"/>
<meta property="article:tag" content="theme"/>
<meta property="og:image" content="https://flex.alxd.me/images/flex-screenshot.png">
<title>Flex &ndash; Flex: Responsive Pelican theme</title>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-6625957038449899",
enable_page_level_ads: true
});
</script>
</head>
<body >
<aside>
<div>
<a href="https://flex.alxd.me/">
<img src="https://flex.alxd.me/theme/img/profile.png" alt="Flex" title="Flex">
</a>
<h1>
<a href="https://flex.alxd.me/">Flex</a>
</h1>
<p>The minimalist Pelican theme</p>
<nav>
<ul class="list">
<li>
<a target="_self"
href="https://flex.alxd.me/pages/about.html">
About
</a>
</li>
<li>
<a target="_self"
href="https://flex.alxd.me/pages/contact.html">
Contact
</a>
</li>
</ul>
</nav>
<ul class="social">
<li>
<a class="sc-github"
href="https://github.com/alexandrevicenzi/Flex"
target="_blank">
<i class="fa-brands fa-github"></i>
</a>
</li>
<li>
<a class="sc-rss"
href="/blog/feeds/all.atom.xml"
target="_blank">
<i class="fa-solid fa-rss"></i>
</a>
</li>
</ul>
</div>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle ads-aside"
data-ad-client="ca-pub-6625957038449899"
data-ad-slot="8752710348"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</aside>
<main>
<nav>
<a href="https://flex.alxd.me/">Home</a>
<a href="/archives.html">Archives</a>
<a href="/categories.html">Categories</a>
<a href="/tags.html">Tags</a>
<a href="https://flex.alxd.me/feeds/all.atom.xml">Atom</a>
</nav>
<article class="single">
<header>
<h1 id="flex-pelican-theme">Flex: Responsive Pelican theme</h1>
<p>
Posted on July 22, 2015 in <a href="https://flex.alxd.me/category/news.html">News</a>
</p>
</header>
<div>
<p>I just start a new fresh blog using <a href="http://getpelican.com">Pelican</a>. Sometimes choosing a theme for a new site is something difficult that takes time.</p>
<p>In the Pelican <a href="http://www.pelicanthemes.com/">theme gallery</a>, I couldn't find anything that I really liked to feet all my needs. So in the first time of the history, I choose to create my own theme. I never did this before.</p>
<p>Creating a theme for Pelican is quite easy, unlike Wordpress. You can take a look in the <a href="https://github.com/alexandrevicenzi/Flex">Source Code of Flex</a>.</p>
<p>But how Flex looks like? Well, you can see <a href="images/flex-screenshot.png">this screenshot</a>, but you already know how it looks like, you're looking at it. :D</p>
<p>I really care about SEO and integrations with Facebook, Google Plus and other social networks, so this theme offers some features:</p>
<ul>
<li>Mobile First</li>
<li>Responsive</li>
<li>Semantic</li>
<li>SEO Best Practices</li>
<li>Open Graph</li>
<li>Rich Snippets (JSON-LD)</li>
</ul>
<p>Maybe these features are not fully optimized, but I'll improve.</p>
<p>Flex also offers integrations with multiple services.</p>
<blockquote>
<p><strong>Tip:</strong></p>
<p>You can easyly integrate with:</p>
<ul>
<li>AddThis</li>
<li>Disqus</li>
<li>Google Analytics</li>
<li>Google Tag Manager</li>
<li>StatusCake</li>
</ul>
</blockquote>
<p>Flex is a theme built by a developer for developers, but of course, you can use for any purpose. In this scenario, Flex is able to create good styles for coding, outputs and samples.</p>
<p>If you need to show some program output you can use <code>samp</code> tag to look like this:</p>
<p><samp>Done: Processed 4 articles, 0 drafts, 2 pages and 0 hidden pages in 0.22 seconds.</samp></p>
<p>Or if you want multiple lines:</p>
<p><samp>
total used free shared buffers cached
Mem: 5866 4674 1192 386 0 2404
-/+ buffers/cache: 2269 3596
Swap: 20480 1267 19213
</samp></p>
<p>If you like to share code snippets, you can take advantage of <a href="http://pygments.org/">Pygments</a> syntax highlighting:</p>
<div class="highlight"><pre><span></span><code><span class="c1">// Foo</span>
<span class="kd">var</span><span class="w"> </span><span class="nx">bar</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span>
</code></pre></div>
<div class="highlight"><pre><span></span><code><span class="k">class</span> <span class="nc">Foo</span><span class="p">(</span><span class="nb">object</span><span class="p">):</span>
<span class="k">def</span> <span class="fm">__init__</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">bar</span><span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">bar</span> <span class="o">=</span> <span class="n">bar</span>
</code></pre></div>
<div class="highlight"><pre><span></span><code>ls<span class="w"> </span>*.jpg<span class="w"> </span><span class="p">|</span><span class="w"> </span>xargs<span class="w"> </span>-n1<span class="w"> </span>-i<span class="w"> </span>cp<span class="w"> </span><span class="o">{}</span><span class="w"> </span>/external-hard-drive/directory
</code></pre></div>
<p><strong>Note:</strong> The code block looks like GitHub’s colors.</p>
<p>You can add tables too:</p>
<table>
<thead>
<tr>
<th>Item</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Computer</td>
<td>$1600</td>
</tr>
<tr>
<td>Phone</td>
<td>$12</td>
</tr>
<tr>
<td>Pipe</td>
<td>$1</td>
</tr>
</tbody>
</table>
<p>and how heading looks like?</p>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<p>This examples are in Markdown. I'm not sure how it will look using reStructuredText. Keep in mind that Markdown allows you to add HTML tags. If you can create the same HTML syntax produced by Markdown using reStructuredText it will work.</p>
<p>You can take a look in the <a href="https://raw.githubusercontent.com/alexandrevicenzi/blog/master/content/News/flex-pelican-theme.md">source code of this page</a> to know how to create rich examples.</p>
<p>Flex is my first attempt creating themes and there's no IE testing yet. You can check the <a href="https://github.com/alexandrevicenzi/flex">sources here</a>.</p>
<p>As soon as possible I will add this project to Pelican gallery.</p>
<p>Drop a comment if you like this theme, or <a href="https://github.com/alexandrevicenzi/Flex/issues">open an issue</a> if you need a feature or found a bug.</p>
</div>
<div class="tag-cloud">
<p>
<a href="https://flex.alxd.me/tag/pelican.html">pelican</a>
<a href="https://flex.alxd.me/tag/python.html">python</a>
<a href="https://flex.alxd.me/tag/theme.html">theme</a>
</p>
</div>
<div class="center social-share">
<p>Like this article? Share it with your friends!</p>
<div class="addthis_native_toolbox"></div>
<div class="addthis_sharing_toolbox"></div>
<div class="addthis_inline_share_toolbox"></div>
</div>
<div class="addthis_relatedposts_inline"></div>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle ads-responsive"
data-ad-client="ca-pub-6625957038449899"
data-ad-slot="4843941849"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- Disqus -->
<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = 'flex-pelican';
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>
Please enable JavaScript to view comments.
</noscript>
<!-- End Disqus -->
</article>
<footer>
<p>
&copy; 2023 - This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/deed.en_US" target="_blank">Creative Commons Attribution-ShareAlike 4.0 International License</a>
</p>
<p>
Built with <a href="http://getpelican.com" target="_blank">Pelican</a> using <a href="http://bit.ly/flex-pelican" target="_blank">Flex</a> theme
<span class="footer-separator">|</span>
Switch to the <a href="javascript:void(0)" onclick="theme.switch(`dark`)">dark</a> | <a href="javascript:void(0)" onclick="theme.switch(`light`)">light</a> | <a href="javascript:void(0)" onclick="theme.switch(`browser`)">browser</a> theme
<script id="dark-theme-script"
src="https://flex.alxd.me/theme/dark-theme/dark-theme.min.js"
data-enable-auto-detect-theme="True"
data-default-theme="light"
type="text/javascript">
</script>
</p><p>
<a rel="license"
href="http://creativecommons.org/licenses/by-sa/4.0/"
target="_blank">
<img alt="Creative Commons License"
title="Creative Commons License"
style="border-width:0"
src="https://i.creativecommons.org/l/by-sa/4.0/80x15.png"
width="80"
height="15"/>
</a>
</p></footer> </main>
<script type="application/ld+json">
{
"@context" : "http://schema.org",
"@type" : "Blog",
"name": " Flex ",
"url" : "https://flex.alxd.me",
"image": "",
"description": "Flex - The minimalist Pelican theme."
}
</script><script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-55adbb025d4f7e55" async="async"></script>
<a href="https://github.com/alexandrevicenzi/Flex" target="_blank" class="github-corner" aria-label="View source on Github">
<svg width="80"
height="80"
viewBox="0 0 250 250"
style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;"
aria-hidden="true">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
fill="currentColor"
style="transform-origin: 130px 106px;"
class="octo-arm">
</path>
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
fill="currentColor"
class="octo-body">
</path>
</svg>
</a>
</body>
</html>
Reference in a new issue View git blame Copy permalink