https://svtempleofnc.github.io/SriVari RajaGopuram2023-12-24T01:56:38+00:00»SriVari RajaGopuram« our gateway to future generations and once alife time oppurtunity.Phlowhttp://phlow.de/Jekyllhttps://svtempleofnc.github.io/design/mediaelement_js/Play Audio & Video with media­element.js2015-10-15T00:00:00+00:00Phlowhttp://phlow.de/Do you like music? Or are you a podcaster? Do you want to stream your videos in a nice player? Than you likely will like the integration of <em>mediaelement.js</em>. It enables you to play music and stream video in a consistent player that looks in each browser delicious. It even works in IE6-8.<p><a href="http://mediaelementjs.com/">mediaelement.js</a> is like magic. It’s browser and device support is perfect. To activate the video or audio player just set the following variable in front matter to <code class="language-plaintext highlighter-rouge">true</code>.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>mediaplayer: true
</code></pre></div></div>
<p>To use the player just use some HTML5-magic like…</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><audio</span> <span class="na">src=</span><span class="s">"http://path-to-file.com/music.mp3"</span> <span class="na">type=</span><span class="s">"audio/mp3"</span> <span class="na">controls=</span><span class="s">"controls"</span><span class="nt">></audio></span></code></pre></figure>
<p>All possible functions and how to use <em>mediaelement.js</em> is well-documented on the <a href="http://mediaelementjs.com/">players website</a>.</p>
<h2 id="music-from-all-around-the-world">»Music From All Around The World«</h2>
<p><a href="https://archive.org/details/music_from_all_around_the_world">»Music From All Around The World«</a> is a compilation curated by Jeannette Corneille and Moritz “mo.” Sauer for <a href="http://phlow-magazine.com/">Phlow-Magazine.com</a>. Cover <a href="http://mediaelementjs.com/">Artwork designed by Jeannette Corneille</a>. All tracks were released under a <a href="http://jcorneille.de/">creative commons licence</a>.</p>
<h3 id="b-ju---philly-run">B-Ju - »Philly Run«</h3>
<audio src="http://archive.org/download/music_from_all_around_the_world/13._music_from_all_around_the_world_-_b-ju_-_philly_run.mp3" type="audio/mp3" controls="controls"></audio>
<h3 id="comfort-fit---freeze-the-cut">Comfort Fit - »Freeze The Cut«</h3>
<audio src="http://archive.org/download/music_from_all_around_the_world/05._music_from_all_around_the_world_-_comfort_fit_-_freeze_the_cut_opolopos_emotional_draft_remix.mp3" type="audio/mp3" controls="controls"></audio>
<h3 id="the-black-atlantic---dandelion">The Black Atlantic - »Dandelion«</h3>
<audio src="http://archive.org/download/music_from_all_around_the_world/02._music_from_all_around_the_world_-_the_black_atlantic_-_dandelion.mp3" type="audio/mp3" controls="controls"></audio>
<p class="t30 button radius"><a href="https://archive.org/details/music_from_all_around_the_world">Download Compilation ›</a></p>
2015-10-15T00:00:00+00:00https://svtempleofnc.github.io/design/typography/typography/Wonderful Typography2015-08-16T00:00:00+00:00Phlowhttp://phlow.de/<em>Feeling Responsive</em> uses <a href='https://www.google.com/fonts/specimen/Volkhov'>Volkhov</a> for headlines, <a href='https://www.google.com/fonts/specimen/Lato'>Lato</a> for everything else and if you are in need to show some code, it will be in <a href='http://www.microsoft.com/typography/fonts/family.aspx?FID=18'>Lucida Console</a> or <a href='http://en.wikipedia.org/wiki/Monaco_(typeface)'>Monaco</a>.<!--more-->
<div class="row">
<div class="medium-4 medium-push-8 columns">
<div class="panel radius">
<p id="toc"><strong>Table of Contents</strong></p>
<ul id="markdown-toc">
<li><a href="#lato--a-sans-serif-typeface-family" id="markdown-toc-lato--a-sans-serif-typeface-family">Lato – A Sans Serif Typeface Family</a></li>
<li><a href="#about-volkhov-h2" id="markdown-toc-about-volkhov-h2">About Volkhov <h2></a> <ul>
<li><a href="#feeling-responsive-uses-volkhov-for--h3" id="markdown-toc-feeling-responsive-uses-volkhov-for--h3">Feeling Responsive uses Volkhov for… <h3></a> <ul>
<li><a href="#heading-in-volkhov-h4" id="markdown-toc-heading-in-volkhov-h4">Heading in Volkhov <h4></a> <ul>
<li><a href="#heading-in-volkhov-h5" id="markdown-toc-heading-in-volkhov-h5">Heading in Volkhov <h5></a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#modular-scale" id="markdown-toc-modular-scale">Modular Scale</a></li>
<li><a href="#typographical-elements" id="markdown-toc-typographical-elements">Typographical Elements</a> <ul>
<li><a href="#hr-horizontal-line" id="markdown-toc-hr-horizontal-line"><hr> Horizontal Line</a></li>
<li><a href="#pre-displaying-code" id="markdown-toc-pre-displaying-code"><pre> Displaying Code</a></li>
<li><a href="#blockquote-quotation" id="markdown-toc-blockquote-quotation"><blockquote> Quotation</a></li>
<li><a href="#blockquote-and-cite--together" id="markdown-toc-blockquote-and-cite--together"><blockquote> and <cite> together</a></li>
<li><a href="#ol-ordered-lists" id="markdown-toc-ol-ordered-lists"><ol> Ordered Lists</a></li>
<li><a href="#ul-unordered-lists" id="markdown-toc-ul-unordered-lists"><ul> Unordered Lists</a></li>
<li><a href="#dl-definition-lists" id="markdown-toc-dl-definition-lists"><dl> Definition Lists</a></li>
<li><a href="#a" id="markdown-toc-a"><a></a></li>
<li><a href="#em" id="markdown-toc-em"><em></a></li>
<li><a href="#strong" id="markdown-toc-strong"><strong></a></li>
<li><a href="#small" id="markdown-toc-small"><small></a></li>
<li><a href="#s" id="markdown-toc-s"><s></a></li>
<li><a href="#cite" id="markdown-toc-cite"><cite></a></li>
<li><a href="#q" id="markdown-toc-q"><q></a></li>
<li><a href="#dfn" id="markdown-toc-dfn"><dfn></a></li>
<li><a href="#abbr" id="markdown-toc-abbr"><abbr></a></li>
<li><a href="#time" id="markdown-toc-time"><time></a></li>
<li><a href="#code" id="markdown-toc-code"><code></a></li>
<li><a href="#var" id="markdown-toc-var"><var></a></li>
<li><a href="#samp" id="markdown-toc-samp"><samp></a></li>
<li><a href="#kbd" id="markdown-toc-kbd"><kbd></a></li>
<li><a href="#sub" id="markdown-toc-sub"><sub></a></li>
<li><a href="#sup" id="markdown-toc-sup"><sup></a></li>
<li><a href="#i" id="markdown-toc-i"><i></a></li>
<li><a href="#b" id="markdown-toc-b"><b></a></li>
<li><a href="#u" id="markdown-toc-u"><u></a></li>
<li><a href="#mark" id="markdown-toc-mark"><mark></a></li>
<li><a href="#br" id="markdown-toc-br"><br></a></li>
</ul>
</li>
<li><a href="#footnotes" id="markdown-toc-footnotes">Footnotes</a></li>
<li><a href="#h1-heading-in-volkhov" id="markdown-toc-h1-heading-in-volkhov"><h1>-Heading in Volkhov</a> <ul>
<li><a href="#h2-heading-in-volkhov" id="markdown-toc-h2-heading-in-volkhov"><h2>-Heading in Volkhov</a> <ul>
<li><a href="#h3-heading-in-volkhov" id="markdown-toc-h3-heading-in-volkhov"><h3>-Heading in Volkhov</a> <ul>
<li><a href="#h4-heading-in-volkhov" id="markdown-toc-h4-heading-in-volkhov"><h4>-Heading in Volkhov</a> <ul>
<li><a href="#h5-heading-in-volkhov" id="markdown-toc-h5-heading-in-volkhov"><h5>-Heading in Volkhov</a> <ul>
<li><a href="#h6-heading-in-volkhov" id="markdown-toc-h6-heading-in-volkhov"><h6>-Heading in Volkhov</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#tables" id="markdown-toc-tables">Tables</a></li>
</ul>
</li>
</ul>
</div>
</div><!-- /.medium-4.columns -->
<div class="medium-8 medium-pull-4 columns">
<h2 id="lato--a-sans-serif-typeface-family">Lato – A Sans Serif Typeface Family</h2>
<p><a href="https://www.google.com/fonts/specimen/Lato"><dfn>Lato</dfn></a> is a sans serif typeface family started in the summer of 2010 by Warsaw-based designer Łukasz Dziedzic. »Lato« means »Summer« in Polish. In December 2010 the Lato family was published under the Open Font License by his foundry tyPoland, with support from Google.</p>
<blockquote>
<p><span class="teaser">I do not think of type as something that should be readable. It should be beautiful.</span><cite><a href="http://en.wikipedia.org/wiki/Ed_Benguiat">Ed Benguiat</a></cite></p>
</blockquote>
<p>In the last ten or so years, during which Łukasz has been designing type, most of his projects were rooted in a particular design task that he needed to solve. With Lato, it was no different. Originally, the family was conceived as a set of corporate fonts for a large client — who in the end decided to go in different stylistic direction, so the family became available for a public release.</p>
<p>When working on Lato, Łukasz tried to carefully balance some potentially conflicting priorities. He wanted to create a typeface that would seem quite “transparent” when used in body text but would display some original traits when used in larger sizes. He used classical proportions (particularly visible in the uppercase) to give the letterforms familiar harmony and elegance. At the same time, he created a sleek sans serif look, which makes evident the fact that Lato was designed in 2010 — even though it does not follow any current trend.</p>
<p>The semi-rounded details of the letters give Lato a feeling of warmth, while the strong structure provides stability and seriousness. “Male and female, serious but friendly. With the feeling of the Summer,” says Łukasz. Learn more at <a href="http://www.latofonts.com/">www.latofonts.com</a></p>
<h2 id="about-volkhov-h2">About Volkhov <h2></h2>
<p><dfn>Volkhov</dfn> is a low-contrast seriffed typeface with a robust character, intended for providing a motivating reading experience. Volkhov was designed by Ivan Petrov.</p>
<h3 id="feeling-responsive-uses-volkhov-for--h3">Feeling Responsive uses Volkhov for… <h3></h3>
<ul>
<li><h1>-headings</li>
<li><h2>-headings</li>
<li><h3>-headings</li>
<li><h4>-headings</li>
<li><h5>-headings</li>
<li><h6>-headings</li>
</ul>
<h4 id="heading-in-volkhov-h4">Heading in Volkhov <h4></h4>
<p>As a four-weight family it is well-suited for complex text environments being economic and legible, contemporary and prominent. Many of its design solutions relate to this purpose: large open counters, rather short descenders, and brutal asymmetric serifs.</p>
<h5 id="heading-in-volkhov-h5">Heading in Volkhov <h5></h5>
<p>Spacing in Bold is slightly increased compared to the normal weight, because the bold mass is mostly grown inwards. The Italic has a steep angle and a distinctive calligraphically reminiscent character, as a counterpart to the rigorous Regular.</p>
<h2 id="modular-scale">Modular Scale</h2>
<p><em>Feeling Responsive</em> explores the <em>2:3 perfect fifth</em> modular scale created with <a href="http://modularscale.com/">www.modular-scale.com</a>. This is the modular scale of <em>Feeling Responsive</em>.</p>
<p>44px @ 1:1.5 – Ideal text size<br />
16px @ 1:1.5 – Important number</p>
<table>
<thead>
<tr>
<th>Modular Scale</th>
<th> </th>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>44.000</td>
<td>1</td>
<td>2.75</td>
<td>338.462</td>
</tr>
<tr>
<td>36.000</td>
<td>0.818</td>
<td>2.25</td>
<td>276.923</td>
</tr>
<tr>
<td>29.333</td>
<td>0.667</td>
<td>1.833</td>
<td>225.638</td>
</tr>
<tr>
<td>24.000</td>
<td>0.545</td>
<td>1.5</td>
<td>184.615</td>
</tr>
<tr>
<td>19.555</td>
<td>0.444</td>
<td>1.222</td>
<td>150.423</td>
</tr>
<tr>
<td>16.000</td>
<td>0.364</td>
<td>1</td>
<td>123.077</td>
</tr>
</tbody>
</table>
<h2 class="t60" id="typographical-elements">Typographical Elements</h2>
<p>Here you’ll find the <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list">complete list of HTML5-Tags</a> and this is how they look like.</p>
<h3 id="hr-horizontal-line"><hr> Horizontal Line</h3>
<hr />
<h3 id="pre-displaying-code"><pre> Displaying Code</h3>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><html>
<head>
<title>Code Blocks</title>
</head>
<body></body>
</html>
</code></pre></div> </div>
<h3 id="blockquote-quotation"><blockquote> Quotation</h3>
<blockquote>Everything happens for a reason. (Britney Spears)</blockquote>
<h3 id="blockquote-and-cite--together"><blockquote> and <cite> together</h3>
<blockquote>
<p>Age is an issue of mind over matter. If you don’t mind, it doesn’t matter.
<cite>Mark Twain</cite></p>
</blockquote>
<h3 id="ol-ordered-lists"><ol> Ordered Lists</h3>
<ol>
<li>Ordered List</li>
<li>Second List Item</li>
<li>Third List Item
<ol>
<li>Second Level First Item</li>
<li>Second Level Second Item</li>
<li>Second Level Third Item
<ol>
<li>And a third level First Item</li>
<li>And a third level Second Item</li>
<li>And a third level Third Item</li>
</ol>
</li>
</ol>
</li>
<li>Fourth List Item</li>
<li>Fifth List Item</li>
</ol>
<h3 id="ul-unordered-lists"><ul> Unordered Lists</h3>
<ul>
<li>Unordered List</li>
<li>Second List Item</li>
<li>Third List Item
<ul>
<li>Second Level First Item</li>
<li>Second Level Second Item</li>
<li>Second Level Third Item
<ul>
<li>And a third level First Item</li>
<li>And a third level Second Item</li>
<li>And a third level Third Item</li>
</ul>
</li>
</ul>
</li>
<li>Fourth List Item</li>
<li>Fifth List Item</li>
</ul>
<h3 id="dl-definition-lists"><dl> Definition Lists</h3>
<dl>
<dt>Definition List</dt>
<dd>Bacon ipsum dolor sit amet spare ribs brisket ribeye, andouille sirloin bresaola frankfurter corned beef capicola bacon. Salami beef ribs sirloin, short loin hamburger shoulder t-bone.</dd>
<dt>Beef ribs jowl swine porchetta</dt>
<dd>Sirloin tenderloin swine frankfurter pork loin pork capicola ham hock strip steak ribeye beef ribs. Hamburger t-bone ribeye ham prosciutto bresaola.</dd>
<dt>Pancetta flank sirloin pork</dt>
<dd>short ribs shankle prosciutto landjaeger. Beef ribs turkey shoulder drumstick. Leberkas pork belly ribeye, bresaola jerky strip steak tenderloin bacon landjaeger short ribs beef ribs. Flank pork chop fatback tail kielbasa filet mignon jowl landjaeger bresaola tongue corned beef biltong.</dd>
<dd>Landjaeger spare ribs fatback corned beef tenderloin drumstick, swine chicken beef turkey biltong doner tri-tip filet mignon.</dd>
</dl>
<h3 id="a"><a></h3>
<p><a href="http://phlow.de/">Links</a> make the web exceptional.</p>
<h3 id="em"><em></h3>
<p>Let’s <em>emphasize</em> how important responsive webdesign is.</p>
<h3 id="strong"><strong></h3>
<p>This looks like <strong>bold</strong> text.</p>
<h3 id="small"><small></h3>
<p><small>This is small text.</small></p>
<h3 id="s"><s></h3>
<p>It’s nice getting things done. Just strike through <s>finished tasks</s>.</p>
<h3 id="cite"><cite></h3>
<p><cite>Albert Einstein</cite></p>
<h3 id="q"><q></h3>
<p>If you use <q> your text gets <q>automagically quotes around the text passage</q>.</p>
<h3 id="dfn"><dfn></h3>
<p>The <dfn> tag is a phrase tag. It defines a <dfn>definition term</dfn>.</p>
<h3 id="abbr"><abbr></h3>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<h3 id="time"><time></h3>
<p>The concert took place on <time datetime="2001-05-15 19:00">May 15</time>.</p>
<h3 id="code"><code></h3>
<p>Some <code class="language-plaintext highlighter-rouge">code: lucida console</code> displayed.</p>
<h3 id="var"><var></h3>
<p>The <var> tag is a phrase tag. It defines a <var>variable</var>.</p>
<h3 id="samp"><samp></h3>
<p>Text surrounded by <samp> <samp>looks like this in monospace</samp>.</p>
<h3 id="kbd"><kbd></h3>
<p>Copycats enjoy pressing <kbd>CMD</kbd> + <kbd>c</kbd> and <kbd>CMD</kbd> + <kbd>v</kbd>.</p>
<h3 id="sub"><sub></h3>
<p>This text <sub>lays low</sub> and chills a bit.</p>
<h3 id="sup"><sup></h3>
<p>This text <sup>gets high</sup> above the clouds.</p>
<h3 id="i"><i></h3>
<p>This looks <i>italic</i>.</p>
<h3 id="b"><b></h3>
<p>This looks <b>bold</b>, too.</p>
<h3 id="u"><u></h3>
<div><p><u>Underlining</u> content for emphasize is not the best choice. You can't read it so well.</p></div>
<h3 id="mark"><mark></h3>
<p>Let’s <mark>mark this hint</mark> to give you a clue.</p>
<h3 id="br"><br></h3>
<p>Need a break? I give you three!<br /><br /><br /></p>
<h2 id="footnotes">Footnotes</h2>
<p>If you need footnotes for your posts, articles and entries, the Kramdown-Parser <sup id="fnref:1" role="doc-noteref"><a href="#fn:1" class="footnote" rel="footnote">1</a></sup> got you covered. How to use footnotes? Read this footnote. <sup id="fnref:2" role="doc-noteref"><a href="#fn:2" class="footnote" rel="footnote">2</a></sup></p>
<h1 id="h1-heading-in-volkhov"><h1>-Heading in Volkhov</h1>
<h2 id="h2-heading-in-volkhov"><h2>-Heading in Volkhov</h2>
<h3 id="h3-heading-in-volkhov"><h3>-Heading in Volkhov</h3>
<h4 id="h4-heading-in-volkhov"><h4>-Heading in Volkhov</h4>
<h5 id="h5-heading-in-volkhov"><h5>-Heading in Volkhov</h5>
<h6 id="h6-heading-in-volkhov"><h6>-Heading in Volkhov</h6>
<h2 id="tables">Tables</h2>
<p>Even tables are responsive thanks to foundation. A table can consist of these elements.</p>
<table>
<caption><table> defines an HTML table</caption>
<colgroup>
<col span="1" style="width: 15%;" />
<col span="1" style="width: 50%;" />
<col span="1" style="width: 35%;" />
</colgroup>
<thead>
<tr>
<th>HTML Tag</th>
<th>Defintion</th>
<th>Style</th>
</tr>
</thead>
<tbody>
<tr>
<td><caption></td>
<td>defines a table caption</td>
<td><code>font-weight: bold;</code></td>
</tr>
<tr>
<td><colgroup></td>
<td>specifies a group of one or more columns in a table for
formatting. The <colgroup> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.</td>
<td>no styling needed</td>
</tr>
<tr>
<td><col></td>
<td>specifies column properties for each column within a `<colgroup>`
element</td>
<td>no styling needed</td>
</tr>
<tr>
<td><thead></td>
<td>is used to group header content in an HTML table</td>
<td><code>font-weight: bold;</code></td>
</tr>
<tr>
<td><tbody></td>
<td>is used to group the body content in an HTML table</td>
<td>no styling needed</td>
</tr>
<tr>
<td><tr></td>
<td>defines a row in an HTML table</td>
<td>no styling needed</td>
</tr>
<tr>
<td><th></td>
<td>defines a header cell in an HTML table</td>
<td><code>font-weight: bold;</code></td>
</tr>
<tr>
<td><td></td>
<td>defines a standard cell in an HTML table</td>
<td><code>font-weight: normal;</code></td>
</tr>
<tr>
<td><tfoot></td>
<td>is used to group footer content in an HTML table</td>
<td>no styling needed</td>
</tr>
</table>
</div><!-- /.medium-8.columns -->
</div><!-- /.row -->
</tbody></table>
</div></div>
<div class="footnotes" role="doc-endnotes">
<ol>
<li id="fn:1" role="doc-endnote">
<p>Find out more about Kramdown on <a href="http://kramdown.gettalong.org/">http://kramdown.gettalong.org/</a> <a href="#fnref:1" class="reversefootnote" role="doc-backlink">↩</a></p>
</li>
<li id="fn:2" role="doc-endnote">
<p>Kramdown has an excellent documentation of all its features. Check out, on how to <a href="http://kramdown.gettalong.org/syntax.html#footnotes">footnotes</a>. <a href="#fnref:2" class="reversefootnote" role="doc-backlink">↩</a></p>
</li>
</ol>
</div>
2015-08-16T00:00:00+00:00https://svtempleofnc.github.io/design/comments/Now with Comments!2015-08-15T00:00:00+00:00Phlowhttp://phlow.de/For a blog you need comments. Like all those other jekyll themes we baked in Disqus. It's easy to set, it works and makes a static jekyll blog more dynamic.<p>If you want to use Disqus-Comments with <em>Feeling Responsive</em>, just open <code class="language-plaintext highlighter-rouge">config.yml</code> and add your <code class="language-plaintext highlighter-rouge">disqus_shortname</code>. <a href="https://disqus.com/websites/">More on how to use Disqus ›</a>
<!--more--></p>
<p>By default comments are turned off. You can customize the default behaviour in <code class="language-plaintext highlighter-rouge">config.yml</code>. To <strong>turn on comments</strong> just add <code class="language-plaintext highlighter-rouge">comments: true</code> to front matter using the page layout <code class="language-plaintext highlighter-rouge">layout: page</code>.</p>
2015-08-15T00:00:00+00:00https://svtempleofnc.github.io/design/no-header/No Header2015-08-11T00:00:00+00:00Phlowhttp://phlow.de/Feeling Responsive allows you to use all kinds of headers. This example shows <em>no</em> header at all. Just the navigation.<p><em>Silence is beautiful.</em> Sometimes you just want no distractions at all. Whether you like the content to speak for itself or enjoy pure typography on a plain background: <em>Feeling Responsive</em> got you covered. Just say <em>no</em> like this:
<!--more--></p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>header: no
</code></pre></div></div>
<h3 class="t60" id="all-header-styles">All Header-Styles</h3>
<ul class="side-nav">
<li><a href="https://svtempleofnc.github.io/design/no-header/">Headers With Style · <strong>No Header</strong></a></li>
<li><a href="https://svtempleofnc.github.io/design/no-header-but-image/">Headers With Style · <strong>No Header but Article Image</strong></a></li>
<li><a href="https://svtempleofnc.github.io/design/header-with-text/">Headers With Style · <strong>Header With Text</strong></a></li>
<li><a href="https://svtempleofnc.github.io/design/header-logo-only/">Headers With Style · <strong>Header With Logo Only</strong></a></li>
<li><a href="https://svtempleofnc.github.io/design/header-image-color/">Headers With Style · <strong>Header Image With Background Color</strong></a></li>
<li><a href="https://svtempleofnc.github.io/design/header-full-width-image/">Headers With Style · <strong>Header with a Full-Width-Image</strong></a></li>
<li><a href="https://svtempleofnc.github.io/design/header-image-pattern/">Headers With Style · <strong>Header Image With Pattern</strong></a></li>
</ul>
2015-08-11T00:00:00+00:00https://svtempleofnc.github.io/design/no-header-but-image/No Header but Article Image2015-03-12T00:00:00+00:00Phlowhttp://phlow.de/Feeling Responsive enables you to get the attention of visitors. If you don't want to use a big header, use an image for the article instead.<p>First turn of the header with <code class="language-plaintext highlighter-rouge">header: no</code>. Then add an image to with the following code. The caption is optional.
<!--more--></p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>header: no
image:
title: unsplash_eagle.jpg
caption: This is a caption for the header image with link
caption_url: https://unsplash.com/
</code></pre></div></div>
<h3 class="t60" id="all-header-styles">All Header-Styles</h3>
<ul class="side-nav">
<li><a href="https://svtempleofnc.github.io/design/no-header/">Headers With Style · <strong>No Header</strong></a></li>
<li><a href="https://svtempleofnc.github.io/design/no-header-but-image/">Headers With Style · <strong>No Header but Article Image</strong></a></li>
<li><a href="https://svtempleofnc.github.io/design/header-with-text/">Headers With Style · <strong>Header With Text</strong></a></li>
<li><a href="https://svtempleofnc.github.io/design/header-logo-only/">Headers With Style · <strong>Header With Logo Only</strong></a></li>
<li><a href="https://svtempleofnc.github.io/design/header-image-color/">Headers With Style · <strong>Header Image With Background Color</strong></a></li>
<li><a href="https://svtempleofnc.github.io/design/header-full-width-image/">Headers With Style · <strong>Header with a Full-Width-Image</strong></a></li>
<li><a href="https://svtempleofnc.github.io/design/header-image-pattern/">Headers With Style · <strong>Header Image With Pattern</strong></a></li>
</ul>
2015-03-12T00:00:00+00:00https://svtempleofnc.github.io/design/header-with-text/Header With Text2015-02-10T00:00:00+00:00Phlowhttp://phlow.de/Feeling Responsive allows you to use all kinds of headers. This header is with text.<!--more-->
<h2 id="front-matter-code">Front Matter Code</h2>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>header:
title: header with text
image_fullwidth: unsplash_brooklyn-bridge_header.jpg
caption: This is a caption for the header image with link
caption_url: https://unsplash.com/
</code></pre></div></div>
<h3 class="t60" id="all-header-styles">All Header-Styles</h3>
<ul class="side-nav">
<li><a href="https://svtempleofnc.github.io/design/no-header/">Headers With Style · <strong>No Header</strong></a></li>
<li><a href="https://svtempleofnc.github.io/design/no-header-but-image/">Headers With Style · <strong>No Header but Article Image</strong></a></li>
<li><a href="https://svtempleofnc.github.io/design/header-with-text/">Headers With Style · <strong>Header With Text</strong></a></li>
<li><a href="https://svtempleofnc.github.io/design/header-logo-only/">Headers With Style · <strong>Header With Logo Only</strong></a></li>
<li><a href="https://svtempleofnc.github.io/design/header-image-color/">Headers With Style · <strong>Header Image With Background Color</strong></a></li>
<li><a href="https://svtempleofnc.github.io/design/header-full-width-image/">Headers With Style · <strong>Header with a Full-Width-Image</strong></a></li>
<li><a href="https://svtempleofnc.github.io/design/header-image-pattern/">Headers With Style · <strong>Header Image With Pattern</strong></a></li>
</ul>
2015-02-10T00:00:00+00:00https://svtempleofnc.github.io/design/header-logo-only/Header With Logo Only2014-10-09T00:00:00+00:00Phlowhttp://phlow.de/Feeling Responsive allows you to use all kinds of headers. This is the default mode. It shows a header just with your logo on the standard background.<p>No front matter code needed.
<!--more--></p>
<h3 class="t60" id="all-header-styles">All Header-Styles</h3>
<ul class="side-nav">
<li><a href="https://svtempleofnc.github.io/design/no-header/">Headers With Style · <strong>No Header</strong></a></li>
<li><a href="https://svtempleofnc.github.io/design/no-header-but-image/">Headers With Style · <strong>No Header but Article Image</strong></a></li>
<li><a href="https://svtempleofnc.github.io/design/header-with-text/">Headers With Style · <strong>Header With Text</strong></a></li>
<li><a href="https://svtempleofnc.github.io/design/header-logo-only/">Headers With Style · <strong>Header With Logo Only</strong></a></li>
<li><a href="https://svtempleofnc.github.io/design/header-image-color/">Headers With Style · <strong>Header Image With Background Color</strong></a></li>
<li><a href="https://svtempleofnc.github.io/design/header-full-width-image/">Headers With Style · <strong>Header with a Full-Width-Image</strong></a></li>
<li><a href="https://svtempleofnc.github.io/design/header-image-pattern/">Headers With Style · <strong>Header Image With Pattern</strong></a></li>
</ul>
2014-10-09T00:00:00+00:00https://svtempleofnc.github.io/design/header-image-color/Header Image With Background Color2014-10-09T00:00:00+00:00Phlowhttp://phlow.de/Feeling Responsive allows you to use all kinds of headers. This example shows a header image with a defined background color via front matter.<p>It’s so easy to do. Just define in front matter an image and a background color. Instead of a color you can also use a pattern image. Have a look at the <a href="https://svtempleofnc.github.io/design/header-image-pattern/">example with a background pattern</a>.
<!--more--></p>
<h2 id="front-matter-code">Front Matter Code</h2>
<div class="alert-box alert "><p>WARNING: To make this work the value of <code class="language-plaintext highlighter-rouge">background-color</code> must be inbetween quotes.</p>
</div>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>header:
image: "header_unsplash_2-970x.jpg"
background-color: "#fabb00"
caption: This is a caption for the header image with link
caption_url: https://unsplash.com/
</code></pre></div></div>
<h3 class="t60" id="all-header-styles">All Header-Styles</h3>
<ul class="side-nav">
<li><a href="https://svtempleofnc.github.io/design/no-header/">Headers With Style · <strong>No Header</strong></a></li>
<li><a href="https://svtempleofnc.github.io/design/no-header-but-image/">Headers With Style · <strong>No Header but Article Image</strong></a></li>
<li><a href="https://svtempleofnc.github.io/design/header-with-text/">Headers With Style · <strong>Header With Text</strong></a></li>
<li><a href="https://svtempleofnc.github.io/design/header-logo-only/">Headers With Style · <strong>Header With Logo Only</strong></a></li>
<li><a href="https://svtempleofnc.github.io/design/header-image-color/">Headers With Style · <strong>Header Image With Background Color</strong></a></li>
<li><a href="https://svtempleofnc.github.io/design/header-full-width-image/">Headers With Style · <strong>Header with a Full-Width-Image</strong></a></li>
<li><a href="https://svtempleofnc.github.io/design/header-image-pattern/">Headers With Style · <strong>Header Image With Pattern</strong></a></li>
</ul>
2014-10-09T00:00:00+00:00https://svtempleofnc.github.io/design/header-full-width-image/Header with a Full-Width-Image2014-10-09T00:00:00+00:00Phlowhttp://phlow.de/Feeling Responsive allows you to use all kinds of headers. This example shows a header with a <em>full-width-image</em>.<p>It’s so easy to do. Just define in front matter your image.
<!--more--></p>
<h2 id="front-matter-code">Front Matter Code</h2>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>header:
image_fullwidth: "unsplash_brooklyn-bridge_header.jpg"
caption: This is a caption for the header image with link
caption_url: https://unsplash.com/
</code></pre></div></div>
<h3 class="t60" id="all-header-styles">All Header-Styles</h3>
<ul class="side-nav">
<li><a href="https://svtempleofnc.github.io/design/no-header/">Headers With Style · <strong>No Header</strong></a></li>
<li><a href="https://svtempleofnc.github.io/design/no-header-but-image/">Headers With Style · <strong>No Header but Article Image</strong></a></li>
<li><a href="https://svtempleofnc.github.io/design/header-with-text/">Headers With Style · <strong>Header With Text</strong></a></li>
<li><a href="https://svtempleofnc.github.io/design/header-logo-only/">Headers With Style · <strong>Header With Logo Only</strong></a></li>
<li><a href="https://svtempleofnc.github.io/design/header-image-color/">Headers With Style · <strong>Header Image With Background Color</strong></a></li>
<li><a href="https://svtempleofnc.github.io/design/header-full-width-image/">Headers With Style · <strong>Header with a Full-Width-Image</strong></a></li>
<li><a href="https://svtempleofnc.github.io/design/header-image-pattern/">Headers With Style · <strong>Header Image With Pattern</strong></a></li>
</ul>
2014-10-09T00:00:00+00:00https://svtempleofnc.github.io/design/header-image-pattern/Header Image With Pattern2014-10-08T00:00:00+00:00Phlowhttp://phlow.de/Feeling Responsive allows you to use all kinds of headers. This example shows a header image in front of a pattern.<p>It’s so easy to do. Just define in front matter an image and a pattern image. Instead of a pattern you can also use a color. Have a look at the <a href="https://svtempleofnc.github.io/design/header-image-color/">example with a background color</a>.
<!--more--></p>
<h2 id="front-matter-code">Front Matter Code</h2>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>header:
image: "header_unsplash_2-970x.jpg"
pattern: "pattern_concrete.jpg"
caption: This is a caption for the header image with link
caption_url: https://unsplash.com/
</code></pre></div></div>
<h3 class="t60" id="all-header-styles">All Header-Styles</h3>
<ul class="side-nav">
<li><a href="https://svtempleofnc.github.io/design/no-header/">Headers With Style · <strong>No Header</strong></a></li>
<li><a href="https://svtempleofnc.github.io/design/no-header-but-image/">Headers With Style · <strong>No Header but Article Image</strong></a></li>
<li><a href="https://svtempleofnc.github.io/design/header-with-text/">Headers With Style · <strong>Header With Text</strong></a></li>
<li><a href="https://svtempleofnc.github.io/design/header-logo-only/">Headers With Style · <strong>Header With Logo Only</strong></a></li>
<li><a href="https://svtempleofnc.github.io/design/header-image-color/">Headers With Style · <strong>Header Image With Background Color</strong></a></li>
<li><a href="https://svtempleofnc.github.io/design/header-full-width-image/">Headers With Style · <strong>Header with a Full-Width-Image</strong></a></li>
<li><a href="https://svtempleofnc.github.io/design/header-image-pattern/">Headers With Style · <strong>Header Image With Pattern</strong></a></li>
</ul>
2014-10-08T00:00:00+00:00