<header class="c-preface h-card">
<h1 class="c-preface__title p-name">Rachel Andrew
</h1>
<div class="c-preface__main p-note">
<div class="s-prose"><img class="c-avatar u-photo" src="https://cloud.24ways.org/authors/rachelandrew280.jpg" width="280" height="280" alt="" />
<p><span class="fn n">Rachel Andrew</span> is a Director of edgeofmyseat.com, a UK web development consultancy and creators of the small content management system, <a href="https://grabaperch.com/">Perch</a>. She is the author of a number of <a href="https://rachelandrew.co.uk/books">books</a>, and is a regular columnist for <a href="http://alistapart.com/author/rachelandrew">A List Apart</a>.</p>
<p>She curates a popular <a href="http://csslayout.news/">email newsletter on CSS Layout</a>, and will be launching a <a href="https://thecssworkshop.com/">CSS Layout online workshop</a> in early 2016.</p>
<p>When not writing about business and technology on her blog at <a href="https://rachelandrew.co.uk">rachelandrew.co.uk</a> or <a href="http://lanyrd.com/profile/rachelandrew/">speaking at conferences</a>, you will usually find Rachel running up and down one of the giant hills in Bristol.</p>
<p><span class="caption">Photo: <a href="http://duncandavidson.com/">James Duncan Davidson</a></span></p>
</div>
</div>
</header>
<header class="c-preface{{ " h-card" if microformats }}">
<h1 class="c-preface__title{{ " p-name" if microformats }}">
{%- if titleIcon -%}
{% include titleIcon + ".svg" %}
{%- endif -%}
{{ title }}
</h1>
{%- if content -%}
<div class="c-preface__main{{ " p-note" if microformats }}">
<div class="s-prose">
{%- if avatar -%}
{% render "@avatar", avatar %}
{%- endif -%}
{{ content | markdown | safe }}
</div>
</div>
{%- endif -%}
</header>
{
"site": {
"title": "24 ways",
"handle": "24ways",
"description": "24 ways is the advent calendar for web geeks. Each day throughout December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer.",
"url": "https://24ways.org",
"feed": "https://feeds.feedburner.com/24ways",
"theme_color": "#f04"
},
"theme": {
"year": [
348,
344,
340,
336,
332,
328,
324,
320,
316,
312,
308,
304,
300,
296,
292,
288
],
"day": [
360,
353,
346,
339,
332,
325,
318,
311,
304,
297,
290,
283,
276,
269,
262,
255,
248,
241,
234,
227,
220,
213,
206,
199
]
},
"title": "Rachel Andrew",
"content": "<span class=\"fn n\">Rachel Andrew</span> is a Director of edgeofmyseat.com, a UK web development consultancy and creators of the small content management system, [Perch](https://grabaperch.com/). She is the author of a number of [books](https://rachelandrew.co.uk/books), and is a regular columnist for [A List Apart](http://alistapart.com/author/rachelandrew).\n\nShe curates a popular [email newsletter on CSS Layout](http://csslayout.news/), and will be launching a [CSS Layout online workshop](https://thecssworkshop.com/) in early 2016.\n\nWhen not writing about business and technology on her blog at [rachelandrew.co.uk](https://rachelandrew.co.uk) or [speaking at conferences](http://lanyrd.com/profile/rachelandrew/), you will usually find Rachel running up and down one of the giant hills in Bristol.\n\n<span class=\"caption\">Photo: [James Duncan Davidson](http://duncandavidson.com/)</span>\n",
"avatar": {
"src": "https://cloud.24ways.org/authors/rachelandrew280.jpg",
"size": 280
},
"microformats": true
}
.c-preface {
overflow: hidden;
display: flex;
flex-direction: column;
padding: map(spaces, medium) map(spaces, large) calc(map(spaces, large) / 2);
background-color: $color-year;
background-color: var(--color-year, $color-year);
background-image: inline('diamond.svg');
background-repeat: repeat;
@media (--from-medium-screen) {
min-height: 9rem;
}
@media (--from-large-screen) {
padding-top: map(spaces, xxlarge);
padding-left: 25%;
}
}
.c-preface__title {
@apply --typeset-title;
display: flex;
align-items: flex-start;
position: relative;
margin-top: auto;
color: map(colors, primary, light);
svg {
width: 1em;
height: 1em;
margin-right: map(spaces, small);
}
}
.c-preface__main {
position: relative;
margin-top: map(spaces, small);
color: color(white a(75%));
.s-prose p:first-of-type {
@apply --typeset-lede;
}
.s-prose p:last-of-type {
margin-bottom: 0;
}
.c-avatar {
width: 50%;
float: right;
margin-top: -7.5%;
margin-right: -7.5%;
@media (--from-large-screen) {
width: auto;
float: left;
margin-left: -33%;
margin-right: map(spaces, medium);
}
}
a {
border-bottom: 1px solid color(white a(25%));
color: white;
&:hover {
border-bottom-color: color(white a(25%));
}
}
}
There are no notes for this item.