<article class="c-post u-flex u-column u-justify-between o-bg-inverse">
<div class="c-post__head u-py-small u-px-base o-divider">
<div class="c-post__user u-radius-circle u-overflow-hidden">
<figure class="o-skeleton o-skeleton-media--square u-relative ">
<div class="u-size-full u-absolute u-left u-top ">
<img decoding="async" referrerpolicy="no-referrer" class="u-size-full" src="https://citynews.stgy.ovh/~shared/avatars/68799995607345/avatar_1.img" loading="lazy" alt="Via Labro vive nel totale abbandono dell'Ama">
</div>
</figure>
</div>
<a href="" class="c-post__name u-label-03 o-link-text u-block">Ugo Moscardillo</a>
<span class="c-post__date u-block u-label-08 u-color-light">martedì 2 marzo 2021</span>
</div>
<div class="c-post__body u-flex u-column u-px-base u-pt-small u-pb-base">
<a href="" class="u-heading-08 o-link-text u-truncate u-truncate-3">Via Labro vive nel totale abbandono dell'Ama</a>
<div class="u-mb-small">
<span class="u-color-light u-label-08">in </span>
<a href="" class="u-label-08 o-link-text">Categoria segnalazione</a>
</div>
<figure class="o-skeleton o-skeleton-media--horizontal u-relative">
<a href="" class="c-post__wrapper u-absolute u-left u-top">
<img decoding="async" referrerpolicy="no-referrer" class="c-post__image u-size-full" src="https://citynews-romatoday.stgy.ovh/~media/original-low/64810841964238/potatura-olmi-via-lanciani-e-2.jpg" loading="lazy" alt="Via Labro vive nel totale abbandono dell'Ama">
</a>
</figure>
<div class="c-post__place u-flex u-column-reverse">
<div class="u-flex u-mt-small u-color-light">
<svg class="o-icon o-icon--sm">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-map-pin"></use>
</svg>
<span class="u-label-03 u-px-xsmall">San Giovanni</span>
<span class="u-label-07">Via Cilicia, 55</span>
</div>
</div>
</div>
</article>
<article class="c-post u-flex u-column u-justify-between o-bg-inverse">
<div class="c-post__head u-py-small u-px-base o-divider">
<div class="c-post__user u-radius-circle u-overflow-hidden">
<figure class="o-skeleton o-skeleton-media--square u-relative ">
<div class="u-size-full u-absolute u-left u-top ">
<img decoding="async" referrerpolicy="no-referrer" class="u-size-full" src="https://citynews.stgy.ovh/~shared/avatars/68799995607345/avatar_1.img" loading="lazy" alt="{{title}}">
</div>
</figure>
</div>
<a href="" class="c-post__name u-label-03 o-link-text u-block">{{user}}</a>
<span class="c-post__date u-block u-label-08 u-color-light">{{date}}</span>
</div>
<div class="c-post__body u-flex u-column u-px-base u-pt-small u-pb-base">
<a href="" class="u-heading-08 o-link-text u-truncate u-truncate-3">{{title}}</a>
<div class="u-mb-small">
<span class="u-color-light u-label-08">in </span>
<a href="" class="u-label-08 o-link-text">{{category}}</a>
</div>
{% if image %}
<figure class="o-skeleton o-skeleton-media--horizontal u-relative">
<a href="" class="c-post__wrapper u-absolute u-left u-top">
<img decoding="async" referrerpolicy="no-referrer" class="c-post__image u-size-full" src="https://citynews-romatoday.stgy.ovh/~media/original-low/64810841964238/potatura-olmi-via-lanciani-e-2.jpg" loading="lazy" alt="{{title}}">
</a>
</figure>
{% else %}
<a href="" class="u-body-03 u-color-light u-m-none u-truncate u-no-underline u-truncate-4">{{post}}</a>
{% endif %}
<div class="c-post__place u-flex u-column-reverse">
<div class="u-flex u-mt-small u-color-light">
<svg class="o-icon o-icon--sm">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-map-pin"></use>
</svg>
<span class="u-label-03 u-px-xsmall">{{zone}}</span>
<span class="u-label-07">{{address}}</span>
</div>
</div>
</div>
</article>
{
"user": "Ugo Moscardillo",
"date": "martedì 2 marzo 2021",
"title": "Via Labro vive nel totale abbandono dell'Ama",
"category": "Categoria segnalazione",
"address": "Via Cilicia, 55",
"zone": "San Giovanni",
"post": "Non dico che non servono, però hanno distrutto la viabilità di Roma, non si parcheggia più, hanno rallentato i tempi di percorrenza, sono pericolose per gli automobilisti, molte potevano farle sui marciapiedi dove non ci sono negozi e traffico pedonale, strade a due corsie sono diventate una...",
"image": true
}
// Name: post
// Description: Shows posts from users
//
// Component: `c-post`
//
// Dependencies: `settings/v7/colors.tokens`
// `settings/v7/colors.themes`
// `settings/v7/global`
// `settings/v7/spacing.tokens`
//
// ========================================================================
// Variables
// ========================================================================
.c-post {
--img-user-size: 40px;
border-radius: #{$global-radius};
border: 1px solid var(--divider-color);
&__head {
border-bottom-width: var(--divider-height);
display: grid;
grid-column-gap: $margin-xsmall;
grid-template-columns: 40px auto;
grid-template-areas:
"userimg username"
"userimg date";
}
&__place,
&__body {
flex-grow: 1;
}
&__user {
width: var(--img-user-size);
height: var(--img-user-size);
background-color: $ui-04;
grid-area: userimg;
}
&__name {
grid-area: username;
}
&__date {
grid-area: date;
}
&__wrapper {
height: 100%;
width: 100%;
transition: width .6s ease-in-out;
&:hover {
width: 105%;
}
}
&__image {
object-fit: cover;
height: 100%;
}
}
No notes defined.