<!-- Default -->
<header class="c-preface">
    <h1 class="c-preface__title">Preface title
    </h1>
    <div class="c-preface__main">
        <div class="s-prose">
            <p>Preface content</p>

        </div>
    </div>
</header>

<!-- Topic -->
<header class="c-preface">
    <h1 class="c-preface__title"><svg width="16" height="16" viewBox="0 0 240 240" focusable="false" aria-hidden="true">
            <path d="M20 220c-11 0-20-9-20-20V70c0-11 9-20 20-20h60V35c0-10 5-15 15-15h50c10 0 15 5 15 15v15h60c11 0 20 9 20 20v130c0 11-9 20-20 20H20zm0-160c-5.5 0-10 4.5-10 10v130c0 5.5 4.5 10 10 10h200c5.5 0 10-4.5 10-10V70c0-5.5-4.5-10-10-10H20zm130-10V35c0-3-2-5-5-5H95c-3 0-5 2-5 5v15h60zM30 100V90h180v10H30zm0 40v-10h180v10H30zm0 40v-10h180v10H30z" />
        </svg>
        Business
    </h1>
    <div class="c-preface__main">
        <div class="s-prose">
            <p>Where there’s muck, there are clients, deliverables and contracts. Occasionally, there’s brass. Here are articles on developing and improving relationships with clients; writing contracts and presenting your work; and encouraging success and avoiding failure.</p>

        </div>
    </div>
</header>

<!-- Author -->
<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>
/* Default */
{
  "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": "Preface title",
  "content": "Preface content"
}

/* Topic */
{
  "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": "Business",
  "content": "Where there's muck, there are clients, deliverables and contracts. Occasionally, there's brass. Here are articles on developing and improving relationships with clients; writing contracts and presenting your work; and encouraging success and avoiding failure.\n",
  "titleIcon": "topic-business"
}

/* Author */
{
  "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
}

  • Content:
    .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%));
        }
      }
    }
    
  • URL: /components/raw/preface/preface.css
  • Filesystem Path: src/components/common/preface/preface.css
  • Size: 1.4 KB

There are no notes for this item.