<article class="c-comment c-comment--unhelpful h-entry" id="c0002">
    <header class="c-comment__header">
        <h3 class="c-comment__title  p-name h-card">
            <a class="p-author u-url" href="https://paulrobertlloyd.com/">
                <img class="c-avatar  u-photo" src="https://www.gravatar.com/avatar/15091a37bacfa4bdd011282627eaca2b?s=96" width="64" height="64" alt="" />

                Paul Robert Lloyd
            </a>
        </h3>
        <p class="c-comment__meta">
            <a class="c-comment__permalink" rel="bookmark" href="#c0002" title="Permalink to this comment"><time class="dt-published" datetime="2012-12-12T12:24:48-00:00">12 December 2012</time></a>
        </p>
    </header>
    <div class="c-comment__main s-prose  e-content">
        <p>You fool! Everything you’ve written here is wrong!</p>

    </div>
    <footer class="c-comment__footer">
        <p>This comment was <a href="/vote/up/c0002/">helpful</a> / <a href="/vote/down/c0002/">unhelpful</a></p>
    </footer>
</article>
<article class="c-comment{% for mod in mods %} c-comment--{{ mod }}{% endfor %} h-entry" id="{{ id }}">
  <header class="c-comment__header">
    <h3 class="c-comment__title  p-name h-card">
      <a class="p-author u-url" href="{{ href }}">
        {% render "@avatar", avatar %}
        {{ author | title }}
      </a>
    </h3>
    <p class="c-comment__meta">
      <a class="c-comment__permalink" rel="bookmark" href="#{{ id }}" title="Permalink to this comment"><time class="dt-published" datetime="{{ datetime }}">{{ datetime | date('D MMMM YYYY') }}</time></a>
    </p>
  </header>
  <div class="c-comment__main s-prose  e-content">
    {{ content | markdown | safe }}
  </div>
  <footer class="c-comment__footer">
    <p>This comment was <a href="/vote/up/{{ id }}/">helpful</a> / <a href="/vote/down/{{ id }}/">unhelpful</a></p>
  </footer>
</article>
{
  "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
    ]
  },
  "id": "c0002",
  "href": "https://paulrobertlloyd.com/",
  "author": "Paul Robert Lloyd",
  "datetime": "2012-12-12T12:24:48-00:00",
  "mods": [
    "unhelpful"
  ],
  "avatar": {
    "src": "https://www.gravatar.com/avatar/15091a37bacfa4bdd011282627eaca2b?s=96",
    "size": 64
  },
  "content": "You fool! Everything you've written here is wrong!\n"
}
  • Content:
    $comment-avatar--small: map(sizes, large);
    $comment-avatar--large: map(sizes, xlarge);
    
    .c-comment {
      position: relative;
      margin-bottom: map(spaces, large);
      padding: map(spaces, large);
      padding-left: $comment-avatar--small;
      background-color: white;
      box-shadow: 1px 1px 0 $prose-color--shadow;
    
      @media (-ms-high-contrast: active) {
        border: 1px solid;
      }
    
      @media (--from-medium-screen) {
        padding-left: $comment-avatar--large;
      }
    
      @media (--upto-large-screen) {
        margin-left: calc(calc(map(spaces, large) - map(spaces, xsmall)) * -1);
        margin-right: calc(calc(map(spaces, large) - map(spaces, xsmall)) * -1);
      }
    
      &.c-comment--unhelpful {
        background-color: transparent;
        box-shadow: 0 0 0 1px $prose-color--shadow;
      }
    
      .c-avatar {
        position: absolute;
        top: 0;
        left: calc(map(spaces, large) * -1);
        width: map(sizes, large);
    
        @media (--from-medium-screen) {
          width: map(sizes, xlarge);
        }
      }
    }
    
    .c-comment__header {
      margin-bottom: map(spaces, large);
    
      @media print {
        border-top: 1px solid black;
        padding-top: map(spaces, small);
      }
    }
    
    .c-comment__title {
      @apply --typeset-summary-title;
    }
    
    .c-comment__meta {
      @apply --typeset-label;
    
      @media (--from-small-screen) {
        position: absolute;
        top: 1.75rem;
        right: map(spaces, large);
      }
    }
    
    .c-comment__main {
      margin-bottom: map(spaces, large);
    }
    
    .c-comment__footer {
      @apply --typeset-label;
    
      border-top: 1px solid $prose-color--shadow;
      padding-top: map(spaces, medium);
      text-align: right;
    }
    
  • URL: /components/raw/comment/comment.css
  • Filesystem Path: src/components/common/comment/comment.css
  • Size: 1.5 KB

There are no notes for this item.