<div class="s-prose">
    <p class="lede">Rachel Andrew is a Director of edgeofmyseat.com, a UK web development consultancy and creators of the small content management system, Perch. She is the author of a number of books, and is a regular columnist for A List Apart.</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 class="s-prose{% for mod in mods %} s-prose--{{ mod }}{% endfor %}">
  {{ content | markdown }}
</div>
{
  "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
    ]
  },
  "content": "<p class=\"lede\">Rachel Andrew is a Director of edgeofmyseat.com, a UK web development consultancy and creators of the small content management system, Perch. She is the author of a number of books, and is a regular columnist for A List Apart.</p>\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"
}
  • Content:
    .s-prose {
      @apply --typeset-prose;
    
      .caps {
        font-variant: lining-nums small-caps;
      }
    
      .caption {
        @apply --typeset-caption;
        opacity: 0.9;
      }
    
      .lede {
        @apply --typeset-lede;
        position: relative;
        top: calc(map(spaces, xsmall) * -1);
      }
    
      > * {
        margin-bottom: 0.75em;
      }
    
      /* Text */
      strong,
      dt {
        font-family: map(fonts, family-sans);
      }
    
      pre,
      code,
      samp {
        font-variant: lining-nums tabular-nums;
        hanging-punctuation: none;
        hyphens: none;
      }
    
      pre,
      code {
        margin: -0.125em 0.125em;
        padding: 0.0625em 0.125em;
        background-color: color(white a(50%));
      }
    
      /* Grouping content */
      pre {
        margin: 1em -0.5em;
        padding: 0.25em 0.5em;
    
        code {
          margin: 0;
          background-color: transparent;
          padding: 0;
        }
      }
    
      ol,
      ul {
        list-style-position: inside;
    
        @media (--from-large-screen) {
          list-style-position: outside;
        }
      }
    
      ol li {
        list-style-type: decimal;
      }
    
      ul li {
        list-style-type: square;
    
        li {
          list-style-type: circle;
        }
      }
    
      > ul > li {
        position: relative;
        padding-left: 1em;
        list-style: none outside;
    
        @media (--from-large-screen) {
          padding-left: 0;
        }
    
        &::before {
          content: '';
          background-color: color($color-text a(0.75));
          width: 0.5rem;
          height: 0.5rem;
          position: absolute;
          left: 0;
          top: 0.5em;
          transform: rotate(45deg);
          transform-origin: 50% 50%;
    
          @media (--from-large-screen) {
            left: -1.125em;
          }
        }
      }
    
      dt {
        font-weight: 700;
      }
    
      li {
        margin-bottom: 0.25em;
      }
    
      li li,
      dd {
        margin-left: 1.5em;
      }
    
      li > *,
      dd > * {
        margin-top: 0;
      }
    }
    
    .s-prose--article {
      @apply --typescale-prose;
    
      .footnotes {
        @apply --typeset-caption;
    
        li {
          margin-bottom: map(spaces, small);
        }
    
        a:last-of-type {
          /* Chrome doesn’t seem to use fallback glyph in font stack */
          font-family: sans-serif;
        }
      }
    
      > *:first-child {
        margin-top: 0;
      }
    
      pre,
      figure,
      table {
        margin-top: map(spaces, large);
        margin-bottom: map(spaces, large);
      }
    
      /* Sections */
      h2,
      h3,
      h4,
      h5 {
        @apply --typeset-heading;
        margin-top: map(spaces, large);
        margin-bottom: map(spaces, small);
      }
    
      h2 {
        margin-top: map(spaces, xlarge);
        font-size: 1.5em;
        font-weight: 700;
      }
    
      h2 + h3 {
        margin-top: 0;
      }
    
      h2,
      h3 {
        color: $color-day--dark;
        color: var(--color-day--dark, $color-day--dark);
      }
    
      h3 {
        font-size: 1.25em;
        opacity: 0.9;
      }
    
      h4 {
        font-size: 1.125em;
      }
    
      h5 {
        font-size: 0.875em;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        opacity: 0.9;
      }
    
      hr {
        text-align: center;
        margin: map(spaces, large) 0 map(spaces, xlarge);
    
        &::after {
          content: '\25C6 \25C6 \25C6';
          height: 0;
          font-family: sans-serif;
          letter-spacing: map(spaces, medium);
          color: color($color-text a(25%));
        }
      }
    
      /* Grouping content */
      blockquote {
        border-left: 0.25rem solid $prose-color--rule;
        padding-left: map(spaces, medium);
        margin-bottom: map(spaces, large);
    
        > p,
        > ul,
        > ol {
          font-size: 1.125em;
          line-height: 1.25;
          margin-bottom: 0.75em;
        }
    
        li {
          list-style-position: inside;
        }
    
        > footer,
        > cite { /* ! Legacy */
          @apply --typeset-caption;
        }
      }
    
      figure,
      p.image { /* ! Legacy */
        margin-left: calc(map(spaces, large) * -1);
        margin-right: calc(map(spaces, large) * -1);
    
        @media (--from-large-screen) {
          margin-left: 0;
          margin-right: -7.6667%;
        }
    
        @media (--from-xlarge-screen) {
          margin-right: -25%;
        }
      }
    
      figcaption,
      p.image span.caption { /* ! Legacy */
        @apply --typeset-caption;
        display: block;
        border-bottom: 1px solid $prose-color--rule;
        margin-right: map(spaces, large);
        margin-left: map(spaces, large);
        padding: map(spaces, medium) 0;
    
        @media (--from-large-screen) {
          margin: 0;
        }
      }
    
      /* Embedded content */
      img,
      video {
        display: block;
        max-width: 100%;
      }
    
      /* Key press within user input sequence. */
      kbd > kbd {
        font-size: 90%;
        background-color: white;
        margin: 0 0.125rem;
        border: 1px solid $prose-color--shadow;
        border-radius: map(borders, radius-default);
        padding: map(spaces, xsmall) map(spaces, small);
        box-shadow: 0 1px 0 $prose-color--shadow;
      }
    
      /* Menu selection within user input sequence. */
      kbd > samp {
        font-family: inherit;
        font-size: 1em;
        background-color: white;
        margin: -0.375rem -0.625rem; /* -6px -10px */
        border-radius: 0;
        padding: 0.375rem 0.625rem; /* 6px 10px */
        box-shadow: none;
      }
    
      /* Links */
      a {
        text-decoration: underline;
        text-decoration-color: var(--color-day--dark-alpha, $color-day--dark-alpha);
    
        &:hover {
          text-decoration-color: var(--color-day, $color-day);
        }
    
        @media print {
          border-bottom: 1px dotted #999;
    
          &::after {
            font-size: 0.75em;
            content: ' [' attr(href) ']';
          }
        }
      }
    
      /* Tables */
      table {
        @apply --typeset-ui;
    
        ol,
        ul {
          margin-left: map(spaces, large);
        }
      }
    
      caption {
        @apply --typeset-caption;
        color: map(colors, neutral, base);
        caption-side: bottom;
        text-align: left;
        margin: map(spaces, medium) 0;
      }
    
      td,
      th {
        border-bottom: 1px solid $prose-color--rule;
        padding: map(spaces, small) map(spaces, large) map(spaces, small) map(spaces, small);
        hyphens: none;
      }
    
      th {
        line-height: 1.25;
        background-color: $prose-color--background;
    
        code {
          background: none;
        }
      }
    }
    
  • URL: /components/raw/prose/prose.css
  • Filesystem Path: src/components/scopes/prose/prose.css
  • Size: 5.8 KB

There are no notes for this item.