kgess-mirror/matrix.org
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix.org.git synced 2026-01-16 23:13:50 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Clean up / improve guardians CSS

Browse source
This commit is contained in:
Jonas Platte 2022-10-04 22:31:11 +02:00
parent d36ebda6ac
commit 719e4bed14
No known key found for this signature in database
GPG key ID: CC154DE0E30B7C67
2 changed files with 27 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
sass/_guardians.scss
View file

@ -1,24 +1,24 @@
.guardian {
display: flex;
flex-direction: row;
margin-bottom: 20px;
align-items: flex-start;
margin: 2.5em 0;
img {
width: 128px;
height: 128px;
min-width: 128px;
min-height: 128px;
border-radius: 128px;
margin: 20px;
}
}
max-width: 25vw;
border-radius: 100%;
.guardian-details {
display: flex;
flex-direction: column;
&:first-child {
margin-right: 20px;
}
&:last-child {
margin-left: 20px;
}
}
}
.guardian-name {
font-weight: bold;
margin: 0px;
margin: 0 0 .5rem;
}

28
templates/shortcodes/guardians.html
View file

@ -1,20 +1,20 @@
<div>
{% set guardians_data = load_data(path="content/about/guardians.toml") %}
{% for guardian in guardians_data.guardians %}
<div class="guardian">
{% if loop.index % 2 == 0 %}
<div class="guardian-details">
<h4 class="guardian-name">{{ guardian.name }}</h4>
<p>{{ guardian.bio }}</p>
</div>
<img src="/about/{{ guardian.picture }}" alt="Mugshot of {{ guardian.name }}" />
{% else %}
<img src="/about/{{ guardian.picture }}" alt="Mugshot of {{ guardian.name }}" />
<div class="guardian-details">
<h4 class="guardian-name">{{ guardian.name }}</h4>
<p>{{ guardian.bio }}</p>
</div>
{% endif %}
<div class="guardian">
{% if loop.index % 2 == 0 %}
<div class="guardian-details">
<h4 class="guardian-name">{{ guardian.name }}</h4>
<p>{{ guardian.bio }}</p>
</div>
<img src="/about/{{ guardian.picture }}" alt="Mugshot of {{ guardian.name }}" />
{% else %}
<img src="/about/{{ guardian.picture }}" alt="Mugshot of {{ guardian.name }}" />
<div>
<h4 class="guardian-name">{{ guardian.name }}</h4>
<p>{{ guardian.bio }}</p>
</div>
{% endif %}
</div>
{% endfor %}
</div>