Post

<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&#39;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&#39;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>

        <a href="" class="u-body-03 u-color-light u-m-none u-truncate u-no-underline u-truncate-4">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...</a>

        <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..."
}
  • Content:
    // 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%;
      }
    }
    
  • URL: /components/raw/post/_post.scss
  • Filesystem Path: src/lib/components/post/_post.scss
  • Size: 1.3 KB

No notes defined.