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

Improve article card usability

parent cfa8d59d
No related branches found
No related tags found
No related merge requests found
Pipeline #868 passed
...@@ -7,14 +7,14 @@ ...@@ -7,14 +7,14 @@
</div> </div>
<div class="candidate-card__bio"> <div class="candidate-card__bio">
<h1 class="head-heavy-xs"><a href="#" data-href="{{ link.templates-candidate-detail }}">{{ person.first }} {{ person.last }}</a></h1> <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> <h2 class="head-allcaps-4xs md:head-allcaps-3xs">{{ person.occupation }}</h2>
</div> </div>
<div class="candidate-card__affiliation"> <div class="candidate-card__affiliation">
<div>{{ person.age }} let</div> <div>{{ person.age }} let</div>
<div> <div>
{{> atoms-basic-avatar(classes: "w-6 mr-2") }} {{> 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> </div>
<div class="card__body candidate-card__social"> <div class="card__body candidate-card__social">
......
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
content: "\e919"; content: "\e919";
font-size: .5em; font-size: .5em;
font-weight: 600; font-weight: 600;
margin-top: .5em; margin-top: .7em;
} }
} }
...@@ -41,8 +41,9 @@ ...@@ -41,8 +41,9 @@
} }
} }
.unordered-list--dense { .unordered-list--dense,
@apply row-gap-2; .content-block ul {
@apply row-gap-0;
} }
.unordered-list--linked { .unordered-list--linked {
......
...@@ -13,17 +13,19 @@ ...@@ -13,17 +13,19 @@
&:before { &:before {
@apply absolute block top-0 left-0 bottom-0 right-0 pointer-events-none; @apply absolute block top-0 left-0 bottom-0 right-0 pointer-events-none;
content: ""; 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 { .article-card-cover__details {
/* padding shall be kept in sync with general card */ /* 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 { .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 { .article-card:hover .article-card-sharing {
...@@ -31,7 +33,7 @@ ...@@ -31,7 +33,7 @@
} }
.article-card-meta { .article-card-meta {
@apply text-sm text-white text-opacity-85; @apply text-sm text-white;
} }
.article-card-meta__item:not(:first-child) { .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