Don't compress avatars

Fixes #210
This commit is contained in:
Bat 2018-09-09 21:41:55 +01:00
parent de3707983a
commit fcdd3d4c1a
7 changed files with 19 additions and 8 deletions

View file

@ -737,8 +737,9 @@ figcaption {
/** Avatars **/
.avatar {
background-position: center;
background-size: cover;
border-radius: 100%;
text-align: center; /* for alt-text */
}
.avatar.small {

View file

@ -1,3 +1,5 @@
{% import "macros" as macros %}
<!DOCTYPE html>
<html>
<head>
@ -33,8 +35,8 @@
<i class="icon icon-log-out" aria-label="{{ "Log Out" | _ }}"></i>
<span class="mobile-label">{{ "Log Out" | _ }}</span>
</a>
<a href="/me">
<img class="avatar small" src="{{ account.avatar }}" alt="{{ "My account" | _ }}">
<a href="/me" title="{{ "My account" | _ }}">
{{ macros::avatar(user=account) }}
<span class="mobile-label">{{ "My account" | _ }}</span>
</a>
{% else %}

View file

@ -29,7 +29,7 @@ About {{ instance.name }}
</div>
<div>
<p>{{ "Administred by" | _ }}</p>
<img class="avatar small" src="{{ admin.avatar }}" alt="{{ admin.name }}">
{{ macros::avatar(user=admin) }}
<p><a href="/@/{{ admin.fqn }}">{{ admin.name }}</a><small>(@{{ admin.fqn }})</small></p>
</div>
</section>

View file

@ -13,7 +13,7 @@ Users
<div class="list">
{% for user in users %}
<div class="flex">
<img src="{{ user.avatar }}" class="avatar small padded" alt="{{ user.name }}">
{{ macros::avatar(user=user) }}
<p class="grow">
<a href="/@/{{ user.fqn }}">{{ user.name }}</a>
<small>@{{ user.username }}</small>

View file

@ -52,7 +52,7 @@
{% macro comment(comm) %}
<div class="comment" id="comment-{{ comm.id }}">
<a class="author" href="/@/{{ comm.author.fqn }}/">
<img class="avatar small padded" src="{{ comm.author.avatar }}" alt="{{ comm.author.name }}">
{{ macros::avatar(user=comm.author, pad=true) }}
<span class="display-name">{{ comm.author.name }}</span>
<small>@{{ comm.author.fqn }}</small>
</a>
@ -86,3 +86,11 @@
</div>
{% endif %}
{% endmacro %}
{% macro avatar(user, size="small", pad=true) %}
<img
class="avatar {{ size }} {% if pad %}padded{% endif %}"
style="background-image: url('{{ user.avatar }}');"
title="{{ "{{ name }}'s avatar" | _(name=user.name) }}"
aria-label="{{ "{{ name }}'s avatar" | _(name=user.name) }}"
>
{% endmacro %}

View file

@ -42,7 +42,7 @@
{% endfor %}
</ul>
<div class="flex">
<img src="{{ author.avatar }}" alt="{{ author.name }}" class="avatar medium padded">
{{ macros::avatar(user=author, pad=true, size="medium") }}
<div class="grow">
<h2><a href="/@/{{ author.fqn }}">{{ author.name }}</a></h2>
<p>{{ author.summary | safe }}</h2>

View file

@ -1,6 +1,6 @@
<div class="user">
<div class="flex wrap">
<img class="avatar medium" src="{{ user.avatar }}" alt="{{ "{{ name}}'s avatar'" | _(name=user.name) }}">
{{ macros::avatar(user=user, size="medium") }}
<h1 class="grow flex vertical">
{{ user.name }}