Skip to content
Snippets Groups Projects
Commit d220c73e authored by xaralis's avatar xaralis
Browse files

Improve article card usability

parent cfa8d59d
Branches
Tags
No related merge requests found
......@@ -7,14 +7,14 @@
</div>
<div class="candidate-card__bio">
<h1 class="head-heavy-xs"><a href="#" data-href="{{ link.templates-candidate-detail }}">{{ person.first }} {{ person.last }}</a></h1>
<div class="font-light mb-4">{{ person.email }}</div>
<a href="#" class="block font-light mb-4">{{ person.email }}</a>
<h2 class="head-allcaps-4xs md:head-allcaps-3xs">{{ person.occupation }}</h2>
</div>
<div class="candidate-card__affiliation">
<div>{{ person.age }} let</div>
<div>
{{> atoms-basic-avatar(classes: "w-6 mr-2") }}
<span class="font-bold font-condensed">{{ person.party }}</span>
<a href="#" class="font-bold font-condensed">{{ person.party }}</a>
</div>
</div>
<div class="card__body candidate-card__social">
......
......@@ -20,7 +20,7 @@
content: "\e919";
font-size: .5em;
font-weight: 600;
margin-top: .5em;
margin-top: .7em;
}
}
......@@ -41,8 +41,9 @@
}
}
.unordered-list--dense {
@apply row-gap-2;
.unordered-list--dense,
.content-block ul {
@apply row-gap-0;
}
.unordered-list--linked {
......
......@@ -13,17 +13,19 @@
&:before {
@apply absolute block top-0 left-0 bottom-0 right-0 pointer-events-none;
content: "";
background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,.8));
background: linear-gradient(to bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,.8));
}
}
.article-card-cover__details {
/* padding shall be kept in sync with general card */
@apply absolute left-0 bottom-0 p-4;
/* No pointer events to make full article cover clickable */
@apply absolute left-0 bottom-0 p-4 pointer-events-none;
}
.article-card-sharing {
@apply mb-4 transition duration-200 opacity-0;
/* Turn on pointer events to make sharer clickable */
@apply mb-4 transition duration-200 opacity-0 pointer-events-auto;
}
.article-card:hover .article-card-sharing {
......@@ -31,7 +33,7 @@
}
.article-card-meta {
@apply text-sm text-white text-opacity-85;
@apply text-sm text-white;
}
.article-card-meta__item:not(:first-child) {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment