CTZN

Post

Header

@jennsu

<article class="post-item">
  <header>
    <h3>
      <a href="">
        <span class="avatar">
          <span class="size30 sky" data-content="j"></span>
        </span>
        @<span>jennsu</span>
      </a>
    </h3>
    <p><time datetime="2015-03-18T20:27:48+00:00">6 days ago</time></p>
  </header>
</article>

Source

@jennsu

via instagram

<article class="post-item">
  <header>
    <h3>…</h3>
    <p><time…>…</time></p>
    <p class="source">
      <svg class="icon" width="24" height="24" viewBox="0 0 24 24">
        <switch><use xlink:href="#icon-instagram"></use><foreignObject>via instagram</foreignObject></switch>
      </svg>
    </p>
  </header>
</article>

Text & Images

@jennsu

via instagram

Uploaded image 1

@aldo getting ready for Neighborday!

<article class="post-item">
  <header>…</header>

  <div class="body">
    <p><img src="…" alt="Uploaded image 1"></p>
    <p>@aldo getting ready for Neighborday!</p>
  </div>
</article>

Video

@jennsu

via instagram

<article class="post-item">
  <header>…</header>

  <div class="body">
    <p>
      <video poster="…poster-image.jpg" controls="controls" preload="none">
        <source src="…video-file.m4v" type="video/mp4" />
        <source src="…video-file.webm…" type="video/webm" />
        <img class="video-fallback" src="…poster-image.jpg" alt="" />
        <span class="video-fallback">
          Aw, shucks.
          Our video player isn’t working in this web browser.
          Please try again in another browser or on another device.
        </span>
      </video>
    </p>
  </div>
</article>

The “video-fallback” image and text will appear in browsers that don’t understand <video /> elements.

Profile

@caseycaplowe

joined

caseycaplowe’s photo

@caseycaplowe

Casey Caplowe

GOOD cofounder, los angeleno, etc

Edit your profile

<article class="post-item">
  <header>…</header>

  <div class="profile">
    <a href="">
      <span class="avatar">
        <img height="100" width="100" src="…" alt="caseycaplowe’s photo" />
      </span>
      <h2>@caseycaplowe</h2>
      <p class="name">Casey Caplowe</p>
      <p class="about">GOOD cofounder, los angeleno, etc</p>
    </a>
    <p class="action">
      <a href="">
        <svg class="icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-edit"></use></svg>
        Edit your profile
      </a>
    </p>
  </div>
</article>

Footer

@jennsu

via instagram

@aldo getting ready for Neighborday!

<article class="post-item">
  <header>…</header>

  <div class="body">…</div>

  <footer>
    <ul class="action">
      <li>
        <button role="checkbox" aria-checked="false">
          <svg class="icon" width="24" height="24" viewBox="0 0 24 24">
            <switch><use xlink:href="#icon-heart"></use><foreignObject>Heart</foreignObject></switch>
          </svg>
        </button>
      </li>
      <li>
        <a href="">
          <svg class="icon" width="24" height="24" viewBox="0 0 24 24">
            <use xlink:href="#icon-reply"></use>
          </svg>
          Comment
        </a>
      </li>
      <li>
        <button role="checkbox" aria-checked="false">
          <svg class="icon" width="24" height="24" viewBox="0 0 24 24">
            <switch><use xlink:href="#icon-star"></use><foreignObject>Feature</foreignObject></switch>
          </svg>
        </button>
      </li>
      <li>              
        <a href="">
          <svg class="icon" width="24" height="24" viewBox="0 0 24 24">
            <switch><use xlink:href="#icon-more"></use><foreignObject>Options</foreignObject></switch>
          </svg>
        </a>
      </li>
    </ul>
  </footer>
</article>

Featured

@jennsu

via instagram

@aldo getting ready for Neighborday!

<article class="post-item">
  <header>…</header>

  <div class="body">…</div>

  <footer>
    <ul class="action">
      …
      <li>
        <button role="checkbox" aria-checked="true">
          <svg class="icon" width="24" height="24" viewBox="0 0 24 24">
            <switch><use xlink:href="#icon-star"></use><foreignObject>Feature</foreignObject></switch>
          </svg>
        </button>
      </li>
    </ul>
    <ul class="meta">
      <li>
        <svg class="icon" width="24" height="24" viewBox="0 0 24 24">
          <use xlink:href="#icon-star"></use>
        </svg>
        Featured
      </li>
    </ul>
  </footer>
</article>

Heart

@jennsu

via instagram

@aldo getting ready for Neighborday!

<article class="post-item">
  <header>…</header>

  <div class="body">…</div>

  <footer>
    <ul class="action">
      <li>
        <button role="checkbox" aria-checked="true">
          <svg class="icon" width="24" height="24" viewBox="0 0 24 24">
            <switch><use xlink:href="#icon-heart"></use><foreignObject>Heart</foreignObject></switch>
          </svg>
        </button>
      </li>
      …
    </ul>

    <ul class="meta">
      <li>
        <svg class="icon" width="24" height="24" viewBox="0 0 24 24">
          <use xlink:href="#icon-star"></use>
        </svg>
        Featured
      </li>
      <li>
        <svg class="icon" width="24" height="24" viewBox="0 0 24 24">
          <switch><use xlink:href="#icon-heart"></use><foreignObject>Heart</foreignObject></switch>
        </svg>
        <ul>
          <li><a href="…">@aldo</a></li>
        </ul>
      </li>
    </ul>
  </footer>
</article>

List

<ul class="post-list">
  <li>
    <article class="post-item">…</article>
  </li>
  <li>
    <article class="post-item">…</article>
  </li>
</ul>

Moderated

<ul class="post-list">
  <li>
    <p class="moderated">Moderated</p>
    <article class="post-item">
      <header>…</header>
      <div class="body">…</div>

      <footer>
        <ul class="action">
          <li>
            <button>
              <svg class="icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-checkmark"></use></svg>
              Approve
            </button>
          </li>
          <li>
            <button>
              <svg class="icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-close"></use></svg>
              Remove
            </button>
          </li>
        </ul>
      </footer>
    </article>
  </li>
  <li>
    <article class="post-item">…</article>
  </li>
</ul>

Comment

@brian:

Didn't end up even playing the bass, just spent a lot of time talking with a friend I don't see enough of. Did play a few songs, rocked some Dio, barbecued, and just had a nice day off.

<div class="comments">
  <article class="post-item">
    <header>
      <h3>
        <span class="avatar">
          <img height="15" width="15" alt="" src="…" />
        </span>
        @brian:
      </h3>
    </header>
    <div class="body">
      <p>Didn't end up even playing the bass, just spent a lot of time talking with a friend I don't see enough of.
      Did play a few songs, rocked some Dio, barbecued, and just had a nice day off.</p>
    </div>
    <p class="time"><time datetime="2015-03-18T20:27:48+00:00">2 days ago</time></p>
  </article>
</div>

Comment List

Comments

  1. @brian:

    Didn't end up even playing the bass, just spent a lot of time talking with a friend I don't see enough of. Did play a few songs, rocked some Dio, barbecued, and just had a nice day off.

  2. @cogg:

    Sounds great. We have a have a cheap bass that we got when my son wanted to learn it. If you are just looking for something to play with, happy to gift it just to see it get used.

  3. @brian:

    That'd be awesome, I've been meaning to get a bass for a while now.

  4. @cogg:

    Apparently my nephew called dibs and has already taken possession. Sorry for getting your hopes up.

  5. @brian:

    My soul. It is crushed.

<div class="comments">
  <h2>Comments</h2>
  <ol class="post-list">…</ol>
</div>

Comments (within a post)

@jennsu

via instagram

@aldo getting ready for Neighborday!

<article class="post-item">
  …
  <footer>
    <ul class="action">…</ul>
    <ul class="meta">…</ul>

    <div class="comments">
      <h2>Comments</h2>
      <ol class="post-list">…</ol>
    </div>

  </footer>
</article>

Comments (on a page by themselves)

  1. @brian:

    Didn't end up even playing the bass, just spent a lot of time talking with a friend I don't see enough of. Did play a few songs, rocked some Dio, barbecued, and just had a nice day off.

  2. @cogg:

    Sounds great. We have a have a cheap bass that we got when my son wanted to learn it. If you are just looking for something to play with, happy to gift it just to see it get used.

  3. @cogg:

    Apparently my nephew called dibs and has already taken possession. Sorry for getting your hopes up.

  4. @brian:

    My soul. It is crushed.

<section class="post page">
  <div class="comments">
    <ol class="post-list">…</ol>
  </div>
</section>

Notification

jelena gave your post on Project Citizen some love:

Paint and markers are being put to good use at CTZN mixer!

<div class="notifications">
  <article class="post-item">
    <header>
      <h3>
        <a href="">
          <span class="avatar">
            <span class="size30 grape" data-content="j"></span>
          </span>
          <span>jelena</span>
        </a>
        gave your post on <span>Project Citizen</span> some love:
      </h3>
    </header>
    <div class="body">
      <p>Paint and markers are being put to good use at CTZN mixer!</p>
      <p><img src="…"></p>
      <p><img src="…"></p>
      <p><img src="…"></p>
    </div>
    <p class="time">
      <time datetime="2014-11-23T04:46:51+00:00">11 weeks ago</time>
    </p>
  </article>
</div>

Alert

Something went wrong.

We tried to import your latest Facebook posts, but the login information we have is out of date. You can update your settings to correct this.

<div class="notifications">
  <article class="post-item">
    <header>
      <h3>
        <svg class="icon" width="24" height="24" viewBox="0 0 24 24">
          <use xlink:href="#icon-alert"></use>
        </svg>
        Something went wrong.
      </h3>
    </header>
    <div class="body">
      <p>We tried to import your latest Facebook posts, but the login information we have is out of date.
      You can <a href="">update your settings</a> to correct this.</p>
    </div>
  </article>
</div>

Curator Activity

@eshah cleared a reported post on Santa Zen:

Helped a friend buy a Trek Silque S today. Forgot to take a picture of her with it. Planning on doing a ride tomorrow, then I can post it.

<div class="notifications">
  <article class="post-item">
    <header>
      <svg class="icon" width="24" height="24" viewBox="0 0 24 24">
        <use xlink:href="#icon-alert"></use>
      </svg>
      <h3>
        <a href="">
          @eshah
        </a>
        cleared a reported post on Santa Zen:
      </h3>
    </header>
    <div class="body">
      <p><img src="…"></p>
      <p>Helped a friend buy a Trek Silque S today. Forgot to take a picture of her with it.
      Planning on doing a ride tomorrow, then I can post it.</p>
    </div>
    <p class="time">
      <time datetime="2015-02-03T04:53:41+00:00">5 minutes ago</time>
    </p>
  </article>
</div>

Request to Join

@cogg requested to join:

Hello! I’d like to join the push for CicLAvia

<div class="notifications">
  <article class="post-item">
    <header>
      <h3>
        <a href="">
          <span class="avatar">
            <img height="30" width="30" alt="" src="…"/>
          </span>
          <span>@cogg</span>
        </a>
        requested to join:
      </h3>
    </header><div class="body"><p>Hello! I’d like to join the push for CicLAvia</p></div>
    <p class="time"><time datetime="2015-02-03T04:53:28+00:00">1 hour ago</time></p>
    <footer>
      <ul class="action">
        <li>
          <button>
            <svg class="icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-checkmark"></use></svg>
            Accept
          </button>
        </li>
        <li>
          <button>
            <svg class="icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-close"></use></svg>
            Decline
          </button>
        </li>
        <li class="dismiss">
          <button>
            <svg class="icon" width="24" height="24" viewBox="0 0 24 24">
              <switch><use xlink:href="#icon-close"></use><foreignObject>Dismiss</foreignObject></switch>
            </svg>
          </button>
        </li>
      </ul>
    </footer>
  </article>
</div>

Request Accepted

@brian requested to join:

Hello! I’d like to join the push for CicLAvia

<div class="notifications">
  <article class="post-item">
    <header>
      <h3>
        <a href="">
          <span class="avatar">
            <img height="30" width="30" alt="" src="…" />
          </span>
          <span>@brian</span>
        </a>
        requested to join:
      </h3>
    </header>
    <div class="body"><p>Hello! I’d like to join the push for CicLAvia</p></div>
    <p class="time"><time datetime="2015-02-03T04:53:28+00:00">2 hours ago</time></p>
    <footer >
      <ul class="action">
        <li>
          <button disabled="disabled">
            <svg class="icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-checkmark"></use></svg>
            Accepted
          </button>
        </li>
      </ul>
    </footer>
  </article>
</div>

Notification List

  1. @eshah gave your post on Project Citizen some love:

    Celebrating our first release of CTZN with brunch at Tom Bergin’s!

  2. jelena gave your post on Project Citizen some love:

    Paint and markers are being put to good use at CTZN mixer!

  3. @eshah gave your post on Project Citizen some love:

    Here are some photos from yesterday’s event at the big house!

    house-1.jpg

    house-2.jpg

    house-3.jpg

<div class="notifications">
  <ol class="post-list">
    <li></li>
    <li>…</li>
    <li>…</li>
  </ol>
</div>

Examples

Post

Go Back

@iamreal8

via instagram

Image 1 A healthy org has healthy practice. Company bike helmets to accompany company bikes. Going to lunch? Grab a bike and a helmet. . .dope. #ctzn #good #greedycity

Comments

Go Back

Comments

  1. @brian:

    Didn't end up even playing the bass, just spent a lot of time talking with a friend I don't see enough of. Did play a few songs, rocked some Dio, barbecued, and just had a nice day off.

  2. @cogg:

    Sounds great. We have a have a cheap bass that we got when my son wanted to learn it. If you are just looking for something to play with, happy to gift it just to see it get used.

  3. @cogg:

    Apparently my nephew called dibs and has already taken possession. Sorry for getting your hopes up.

  4. @brian:

    My soul. It is crushed.

Notifications

Go Back

Alerts

  1. Something went wrong.

    We tried to import your latest Facebook posts, but the login information we have is out of date. You can update your settings to correct this.

Recent

  1. @eshah reported a post as inappropriate on Santa Zen:

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  2. @eshah cleared a reported post on Santa Zen:

    Helped a friend buy a Trek Silque S today. Forgot to take a picture of her with it. Planning on doing a ride tomorrow, then I can post it.

  3. @eshah hid a post on Santa Zen:

    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Older

  1. @dan gave your post on Project Citizen some love:

    A shiny new version of our app just went up. Hooray!

  2. @brian gave your post on Project Citizen some love:

    A shiny new version of our app just went up. Hooray!

  3. @cogg gave your post on Project Citizen some love:

    A shiny new version of our app just went up. Hooray!

  4. @aldoatgood gave your post on Project Citizen some love:

    A shiny new version of our app just went up. Hooray!

  5. @eshah gave your post on Project Citizen some love:

    A shiny new version of our app just went up. Hooray!

  6. @baxter gave your post on Project Citizen some love:

    Paint and markers are being put to good use at CTZN mixer!

  7. @vogg gave your post on Project Citizen some love:

    Paint and markers are being put to good use at CTZN mixer!

  8. @aldoatgood gave your post on Project Citizen some love:

    Paint and markers are being put to good use at CTZN mixer!

  9. anton gave your post on Project Citizen some love:

    Paint and markers are being put to good use at CTZN mixer!

  10. jelena gave your post on Project Citizen some love:

    Paint and markers are being put to good use at CTZN mixer!

  11. jelena gave your post on Project Citizen some love:

    Celebrating our first release of CTZN with brunch at Tom Bergin’s!

  12. lfatone gave your post on Project Citizen some love:

    Celebrating our first release of CTZN with brunch at Tom Bergin’s!

  13. @eshah gave your post on Project Citizen some love:

    Celebrating our first release of CTZN with brunch at Tom Bergin’s!

  14. anton gave your post on Project Citizen some love:

    Celebrating our first release of CTZN with brunch at Tom Bergin’s!

  15. @brian gave your post on Project Citizen some love:

    Celebrating our first release of CTZN with brunch at Tom Bergin’s!

  16. [anonymous22] gave your post on Project Citizen some love:

    Celebrating our first release of CTZN with brunch at Tom Bergin’s!

  17. caseycaplowe gave your post on Project Citizen some love:

    Celebrating our first release of CTZN with brunch at Tom Bergin’s!

  18. @aldoatgood gave your post on Project Citizen some love:

    Celebrating our first release of CTZN with brunch at Tom Bergin’s!

  19. @cogg gave your post on Project Citizen some love:

    Celebrating our first release of CTZN with brunch at Tom Bergin’s!

  20. @baxter gave your post on Project Citizen some love:

    Celebrating our first release of CTZN with brunch at Tom Bergin’s!

  21. @aldoatgood mentioned you in a post on Project Citizen:

    @cogg @dan @brian @anton @jim @eshah @jelena we did it!! You guys are awesome <3 <3 <3

  22. @eshah gave your post on Project Citizen some love:

    Here are some photos from yesterday’s event at the big house!

    house-1.jpg

    house-2.jpg

    house-3.jpg

  23. jelena mentioned you in a post on Project Citizen:

    No posts today? But we did so much on our push! @aldoatgood made this nifty start page design... @Jim helped me tweak some Tumblr code... (sidenote: I wish when I hit @ and started typing the app would suggest who I could mention in this push.)

    ctzn-start.png

Requests

Go Back
  1. @cogg requested to join:

    Hello! I’d like to join the push for CicLAvia

  2. @brian requested to join:

    Hello! I’d like to join the push for CicLAvia

  1. @iamreal8

    via instagram

    Image 1

    A healthy org has healthy practice. Company bike helmets to accompany company bikes. Going to lunch? Grab a bike and a helmet. . .dope. #ctzn #good #greedycity

    Comments

    1. @brian:

      Didn't end up even playing the bass, just spent a lot of time talking with a friend I don't see enough of. Did play a few songs, rocked some Dio, barbecued, and just had a nice day off.

    2. @cogg:

      Sounds great. We have a have a cheap bass that we got when my son wanted to learn it. If you are just looking for something to play with, happy to gift it just to see it get used.

    3. View all 8 comments
    4. @cogg:

      Apparently my nephew called dibs and has already taken possession. Sorry for getting your hopes up.

    5. @brian:

      My soul. It is crushed.

  2. Moderated

    @jim

    Here’s what the inside of the “Big House” looks like… And two of our hosts for yesterday’s event, from Root Down LA. Peace guys!

    Uploaded image 1

    Uploaded image 2