54 lines
2.2 KiB
Text
54 lines
2.2 KiB
Text
---
|
|
layout: base
|
|
permalink: /index.html
|
|
title: 'Eleventy Excellent'
|
|
description: 'Eleventy starter using modern CSS, fluid type, fluid spacing, flexible layout and progressive enhancement.'
|
|
blog:
|
|
title: 'Blog'
|
|
intro: "I'm showing the last 4 blog posts, but there might be more!"
|
|
---
|
|
|
|
<div class="wrapper">
|
|
<header class="full | section" style="--spot-color: var(--color-primary)">
|
|
<div class="section__inner flow region">
|
|
<h1 class="text-center" style="color: var(--color-light);">{{ title }}</h1>
|
|
</div>
|
|
{% svg "divider/waves", null, "seperator" %}
|
|
</header>
|
|
|
|
<article class="full | region">
|
|
<div class="wrapper flow prose">
|
|
<h2 id="an-eleventy-starter">An Eleventy starter</h2>
|
|
<p>
|
|
Built around a CSS workflow that emphasizes guiding browser styling rather than micromanaging it. It
|
|
incorporates progressive enhancement, fluid type and spacing, and utilizes modern CSS features for
|
|
layout. The goal is to develop frontends that provide a great experience across all devices,
|
|
connection speeds, and usage contexts.
|
|
</p>
|
|
<p>
|
|
<strong>This is <a href="https://github.com/madrilene/eleventy-excellent/">version 4</a>.</strong> I keep a
|
|
<a href="https://github.com/madrilene/eleventy-excellent/tree/v1">branch of v1</a>,
|
|
<a href="https://github.com/madrilene/eleventy-excellent/tree/v2">v2</a> and <a href="https://github.com/madrilene/eleventy-excellent/tree/v3">v3</a>. I tried to <a href="/get-started/#docs-lol">document most features and methodologies</a>.
|
|
</p>
|
|
<p><strong>Have fun</strong> and let me know if you find any issues or have ideas for improvements!</p>
|
|
</div>
|
|
</article>
|
|
|
|
<section class="full | region">
|
|
<div class="wrapper flow prose">
|
|
<h2>{{ blog.title }}</h2>
|
|
{% if blog.intro %}
|
|
<p>{{ blog.intro }}</p>
|
|
{% endif %}
|
|
<div class="feature | region region-space-l">
|
|
<custom-masonry layout="50-50">
|
|
{% set itemList = collections.allPosts %}
|
|
{% asyncEach item in itemList.slice(0, 4) %}
|
|
{% set headingLevel = "h3" %}
|
|
{% include "partials/card-blog.njk" %}
|
|
{% endeach %}
|
|
</custom-masonry>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|