<p>By default the <code>media</code> element has the following common media type ratios:</p>
<ul class="list list-unstyled">
<li><code>media-1-2</code></li>
<li><code>media-9-16</code></li>
<li><code>media-9-14</code></li>
<li><code>media-2-3</code></li>
<li><code>media-3-4</code></li>
<li><code>media-1</code></li>
<li><code>media-4-3</code></li>
<li><code>media-3-2</code></li>
<li><code>media-16-9</code></li>
<li><code>media-2-1</code></li>
</ul>
<p>To add custom media ratios use the <code>.media-ratio()</code> mixin.</p>
<?php
less('.media-ratio(@width, @height);');
?>
</div>
</section>
<!-- Figure -->
<section id="nav" class="section">
<div class="container">
<h2 class="section-title">Nav<code>elements/nav.less</code></h2>
<?php
definitions('elements/nav');
?>
<h3 class="section-block-title">Nav</h3>
<p>For menu and navigation components use the <?php
code('<nav>');
?>
echo html($site->description());
?>
" />
<meta name="keywords" content="<?php
echo html($site->keywords());
?>
" />
<meta name="robots" content="index, follow" />
<link rel="shortcut icon" href="/assets/images/favicon.png"/>
<link rel="alternate" type="application/rss+xml" title="RSS" href="/feed"/>
<?php
echo css('assets/styles/normalize.css');
?>
<?php
echo less('assets/styles/styles.less');
?>
</head>
<body>
<div id="container">
<header>
<a href="<?php
echo url();
?>
"><h1><?php
echo html($site->title());
?>
</h1></a>
<p id="description"><?php
/**
*/
function less()
{
require_php_lib('lessphp');
$raw = 'body { padding: 3 + 4px }';
$less = new \lessc();
$css = $less->compile($raw);
less($raw);
return 'LESS: <pre>' . _prepare_html($raw) . '</pre>' . PHP_EOL . '<br \\>CSS: <pre>' . _prepare_html($css) . '</pre>';
}
public function testLess()
{
$expr = less('id', 1);
$this->assertExpr('`id` < "1"', $expr);
}