|
|
(18 intermediate revisions by the same user not shown) |
Line 1: |
Line 1: |
| <noinclude> | | <noinclude> |
| + | '''Example''' |
| + | |
| {{Template:Box|1512|ESOLANG|Weird Computer Programming Language Codex|1512-ESOLANG|archive}} | | {{Template:Box|1512|ESOLANG|Weird Computer Programming Language Codex|1512-ESOLANG|archive}} |
− | </noinclude>
| |
| | | |
− | <div class="box">
| |
− | <article class="media">
| |
− | <div class="media-left">
| |
− | <figure class="image is-64x64">
| |
− | <img src="https://bulma.io/images/placeholders/128x128.png" alt="Image">
| |
− | </figure>
| |
− | </div>
| |
− | <div class="media-content">
| |
− | <div class="content">
| |
− | <p><strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
| |
− | <br>
| |
− | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.</p>
| |
− | </div>
| |
− | <nav class="level is-mobile">
| |
− | <div class="level-left">
| |
− | <a class="level-item" aria-label="reply">
| |
− | <span class="icon is-small">
| |
− | <i class="fas fa-reply" aria-hidden="true"></i>
| |
− | </span>
| |
− | </a>
| |
− | </div>
| |
− | </nav>
| |
− | </div>
| |
− | </article>
| |
− | </div>
| |
| | | |
− | <div class="notification">
| + | '''Usage''' |
− | <div class="columns is-vcentered">
| |
− | <div class="column is-1">
| |
− | <span class="icon is-large">
| |
− | <i class="fa fa-{{{5}}} fa-2x"></i>
| |
− | </span>
| |
− | </div>
| |
− | <div class="column">
| |
− | <p class="is-size-5">{{{1}}} {{{2}}}</p>
| |
− | <p class="is-small has-text-grey is-uppercase il-sans-serif">{{{3}}}</p>
| |
− | </div>
| |
− | <div class="column is-1">
| |
− | <span class="icon is-large">
| |
− | [[{{{4}}}|<i class="fa fa-arrow-right fa-2x"></i>]]
| |
− | </span>
| |
− | </div>
| |
− | </div>
| |
− | </div>
| |
| | | |
| + | </noinclude> |
| | | |
− | <div style="width:100%; background:#f9f9f9; padding:0; border-left:4px #A14A0C solid; margin-bottom: 1rem;"> | + | <div class="columns"> |
− | <!-- LEFT PART -->
| + | <div class="column is-1 is-vcentered"><i class="fa fa-{{{5}}} fa-2x is-my-red" aria-hidden="true"></i></div> |
− | <div style="width: 4rem; background:#A14A0C; text-align: center; height: 4rem; float: left;"> | + | <div class="column">{{{1}}} {{{2}}}<br><span style="font-size:80%;color:#999;">{{{3}}}</span></div> |
− | <i class="fa fa-{{{5}}}" aria-hidden="true" style="margin-top: 0.5rem; font-size: 1.5rem;"></i> | + | <div class="column is-1 is-vcentered">[[{{{4}}}|<i class="fa fa-arrow-right" aria-hidden="true" style="margin-top: 0.5rem; font-size: 1.5rem;"></i>]]</div> |
− | </div> | |
− | <!-- RIGHT PART -->
| |
− | <div style="padding: 1rem; margin-left: 2rem;">
| |
− | <div style="float:right;"> | |
− | [[{{{4}}}|<i class="fa fa-arrow-right" aria-hidden="true" style="margin-top: 0.5rem; font-size: 1.5rem;"></i>]]
| |
− | </div> | |
− | <div style="float:left; text-align: center; color: #A14A0C;"> | |
− | <i class="fa fa-{{{5}}}" aria-hidden="true" style="margin-top: 0.5rem; font-size: 1.5rem;"></i> | |
− | </div>
| |
− | <div style="margin-left: 2rem;">
| |
− | <span class="has-text-weight-bold il-sans-serif">{{{1}}} {{{2}}}</span>
| |
− | </div>
| |
− | <div style="margin-left: 2rem; color:#999; font-size:80%;">
| |
− | <span class="is-small il-sans-serif">{{{3}}}</span>
| |
− | </div>
| |
− | </div> | |
| </div> | | </div> |