00dani/lemoncurry
1
0
Fork 1
Code Issues Pull requests Releases Wiki Activity

Tweak the cards' layout, there's more room for extra stuff this way

Browse source
This commit is contained in:
Danielle McLean 2017-11-11 17:07:40 +11:00
parent fa3a6ec362
commit 6481e8d9bc
Signed by: 00dani
GPG key ID: 5A5D2D1AFF12EEC5
3 changed files with 36 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
home/static/home/css/index.styl
View file

@ -10,6 +10,13 @@ main
margin-bottom 1rem margin-bottom 1rem
.p-note > :last-child .p-note > :last-child
margin-bottom 0 margin-bottom 0
li.list-group-item
background-color $base01
text-align center
> a
margin-right 1rem
&:last-child
margin-right 0
@media (min-width $md) @media (min-width $md)
flex-direction row-reverse flex-direction row-reverse
align-items unset align-items unset

38
home/templates/home/index.html
View file

@ -13,36 +13,44 @@
<article class="h-card card p-author"> <article class="h-card card p-author">
<a class="u-uid u-url" href="{{ uri }}" hidden></a> <a class="u-uid u-url" href="{{ uri }}" hidden></a>
{% if user.avatar %}<img class="card-img-top u-photo" src="{{ user.avatar.url }}" alt="{{ user.first_name }} {{ user.last_name }}" />{% endif %} {% if user.avatar %}<img class="card-img-top u-photo" src="{{ user.avatar.url }}" alt="{{ user.first_name }} {{ user.last_name }}" />{% endif %}
<div class="card-body"> <div class="card-body">
<h4 class="card-title p-name"> <h4 class="card-title p-name">
<span class="p-given-name">{{ user.first_name }}</span> <span class="p-family-name">{{ user.last_name }}</span> <span class="p-given-name">{{ user.first_name }}</span> <span class="p-family-name">{{ user.last_name }}</span>
</h4> </h4>
{% for key in user.keys.all %}
<h6 class="card-subtitle">
<a class="u-key" href="{{ key.file.url }}">
<i class="fa fa-key"></i>
{{ key.pretty_print }}
</a>
</h6>
{% endfor %}
{% if user.note %}<div class="p-note">{{ user.note | markdown }}</div>{% endif %} {% if user.note %}<div class="p-note">{{ user.note | markdown }}</div>{% endif %}
</div> </div>
<div class="card-footer"> <div class="card-footer">
<ul class="profiles"> <ul class="profiles">
<li> <li><a class="u-email" rel="me" href="mailto:{{ user.email }}">
<a class="u-email" rel="me" href="mailto:{{ user.email }}"><i class="fa fa-envelope"></i> {{ user.email }}</a> <i class="fa fa-envelope"></i> {{ user.email }}
</a></li>
{% if user.xmpp %}<li><a class="u-impp" rel="me" href="xmpp:{{ user.xmpp }}">
<i class="openwebicons-xmpp"></i> {{ user.xmpp }}
</a></li>{% endif %}
</ul>
</div>
<div class="card-footer">
<ul class="profiles">
{% for key in user.keys.all %}<li>
<a class="u-key" href="{{ key.file.url }}">
<i class="fa fa-key"></i> {{ key.pretty_print }}
</a>
</li> </li>
{% if user.xmpp %} {% endfor %}
<li> </ul>
<a class="u-impp" rel="me" href="xmpp:{{ user.xmpp }}"><i class="openwebicons-xmpp"></i> {{ user.xmpp }}</a> </div>
</li>
{% endif %} <div class="card-footer">
<ul class="profiles">
{% for profile in user.profiles.all %}<li> {% for profile in user.profiles.all %}<li>
<a class="u-url" rel="me" href="{{ profile.url }}"><i class="{{ profile.site.icon }}"></i> {{ profile.name }}</a> <a class="u-url" rel="me" href="{{ profile.url }}"><i class="{{ profile.site.icon }}"></i> {{ profile.name }}</a>
</li>{% endfor %} </li>{% endfor %}
</ul> </ul>
</div> </div>
<script class="p-json-ld" type="application/ld+json">{{ user.json_ld | jsonify }}</script> <script class="p-json-ld" type="application/ld+json">{{ user.json_ld | jsonify }}</script>
</article> </article>
</aside> </aside>

6
lemoncurry/static/lemoncurry/css/layout.styl
View file

@ -64,6 +64,12 @@ body
.card .card
background-color $base02 background-color $base02
.card-footer
background-color $base01
&:nth-of-type(odd)
background-color $base02
&.h-card &.h-card
max-width 25rem max-width 25rem
position sticky position sticky