Thomasorus Design System

Article 

<article>
    <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Placeat eveniet ducimus perferendis officiis ipsa quia natus sequi est saepe corporis porro, fuga dolorem deserunt magni, distinctio rem nihil sapiente voluptatum.
    </p>
    <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita recusandae quod odio a veniam possimus illo quasi vel voluptatibus similique iusto, saepe adipisci ipsa minus quas nostrum dolor repudiandae deleniti?
    </p>
</article>
 
<article>
    <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Placeat eveniet ducimus perferendis officiis ipsa quia natus sequi est saepe corporis porro, fuga dolorem deserunt magni, distinctio rem nihil sapiente voluptatum.
    </p>
    <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita recusandae quod odio a veniam possimus illo quasi vel voluptatibus similique iusto, saepe adipisci ipsa minus quas nostrum dolor repudiandae deleniti?
    </p>
</article>
 
/* No context defined. */
  • Content: 
    article > *+* {
    margin-top: 25px;
    margin-top: var(--margin-s);
}

article h1 + figure,
article h1 + picture {
    z-index: -1;
    position: absolute;
    margin:0;
    max-width: 40%;
    max-height: 40%;
    right: 30px;
    right: var(--margin-s);
    border:none!important;
}

article h1 + picture img {
    border:none!important;
    box-shadow: unset;
    filter: drop-shadow(1px 2px 4px var(--text));
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width: 1300px) {
    article h1 + picture,
    article h1 + figure {
        z-index: none;
        position: relative;
        margin:inherit;
        max-width: 60ch;
        right:unset;
        max-height: unset;
        border:unset;
    }
}
  • URL: /components/raw/article/article.demo.css
  • Filesystem Path: src/components/containers/article/article.demo.css
  • Size: 746 Bytes

No notes defined.