Skip to content

Commit

Permalink
Add styling for links in list
Browse files Browse the repository at this point in the history
  • Loading branch information
@nanoparsec
nanoparsec committed Mar 4, 2024
1 parent fd8dfee commit 51149f2
Show file tree
Hide file tree
Showing 5 changed files with 67 additions and 54 deletions.
43 changes: 43 additions & 0 deletions lib/components/lists/_lists.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,3 +42,46 @@ dd {
font-size: $font-size-base;
line-height: $heading-line-height;
}

ul:not([class]) {
padding-left: 1rem;
font-size: $font-size-base;

li {
padding-left: 1rem;

&::marker {
content: "—";
color: $brand-secondary;
}
}
}

ol:not([class]) {
padding-left: 1.5rem;
font-size: $font-size-base;

li {
padding-left: 0.5rem;
}
}

ul:not([class]),
ol:not([class]) {
> * + * {
margin-top: $spacer-2xs;
}

a:not([class]) {
color: $brand-text;
text-decoration-color: $brand-primary;
text-decoration-thickness: $spacer-3xs;
text-underline-offset: $spacer-3xs;

transition: all 0.1s ease-out;
}

:hover {
text-decoration-color: $brand-primary-light;
}
}
30 changes: 0 additions & 30 deletions lib/components/text/_text.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,36 +126,6 @@ p {

// Markdown Listen und Text
.markdown {
li::marker {
color: $brand-secondary;
}

ul {
padding-left: 1rem;
font-size: $font-size-base;

li {
padding-left: 1rem;

&::marker {
content: "—";
}
}
}

ol {
padding-left: 1.5rem;
font-size: $font-size-base;

li {
padding-left: 0.5rem;
}
}

li + li {
margin-top: $spacer-xs;
}

&.texttable {
p {
@extend %body-font-bold;
Expand Down
16 changes: 8 additions & 8 deletions lib/views/trainings_detail/trainings_detail.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,18 +70,18 @@ description: Show Training Detail
<section class="section">
<h2 class="section__title--small"><span aria-hidden>-- </span>Agenda</h2>
<div class="article markdown">
<ul class="unordered-list">
<li class="unordered-list__item">Lorem, ipsum dolor Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, atque?</li>
<li class="unordered-list__item">
<ul>
<li>Lorem, ipsum dolor Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, atque?</li>
<li>
Lorem reiciendis error fugit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et distinctio voluptatem fugit est beatae nisi possimus ratione, obcaecati quod
veniam, numquam architecto voluptate.
</li>
<li class="unordered-list__item">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li><a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit.</a></li>
</ul>
<ol class="ordered-list">
<li class="ordered-list__item">Lorem, ipsum dolor</li>
<li class="ordered-list__item">Lorem reiciendis error fugit</li>
<li class="ordered-list__item">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<ol>
<li>Lorem, ipsum dolor</li>
<li>Lorem reiciendis error fugit</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
</ol>
</div>
</section>
Expand Down
16 changes: 8 additions & 8 deletions lib/views/trainings_detail/trainings_detail_isaqb.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,15 +78,15 @@ description: Show Training Detail iSAQB
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Numquam doloribus laborum nisi non, <a href="#">lorem ipsum</a> cupiditate quo accusantium doloremque saepe quidem illum!</p>
<img class="article__image" src="https://www.innoq.com/de/trainings/blockchain-verteilter-konsens/lars-hupel.jpg" alt="Dr. Lars Hupel im Einsatz"/>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum aliquid, <strong>lorem ipsum</strong> reiciendis error fugit dicta tempora necessitatibus maiores nesciunt et, porro ipsa incidunt <em>lorem ipsum</em> asperiores perspiciatis, dolor explicabo quia aliquam eos nam.</p>
<ul class="unordered-list">
<li class="unordered-list__item">Lorem, ipsum dolor Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, atque?</li>
<li class="unordered-list__item">Lorem reiciendis error fugit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et distinctio voluptatem fugit est beatae nisi possimus ratione, obcaecati quod veniam, numquam architecto voluptate.</li>
<li class="unordered-list__item">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<ul>
<li>Lorem, ipsum dolor Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, atque?</li>
<li>Lorem reiciendis error fugit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et distinctio voluptatem fugit est beatae nisi possimus ratione, obcaecati quod veniam, numquam architecto voluptate.</li>
<li><a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit.</a></li>
</ul>
<ol class="ordered-list">
<li class="ordered-list__item">Lorem, ipsum dolor</li>
<li class="ordered-list__item">Lorem reiciendis error fugit</li>
<li class="ordered-list__item">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<ol>
<li>Lorem, ipsum dolor</li>
<li>Lorem reiciendis error fugit</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
</ol>
</div>
</section>
Expand Down
16 changes: 8 additions & 8 deletions lib/views/trainings_detail/trainings_detail_power.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,15 +80,15 @@ description: Show Training Detail Powerworkshop
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Numquam doloribus laborum nisi non, <a href="#">lorem ipsum</a> cupiditate quo accusantium doloremque saepe quidem illum!</p>
<img class="article__image" src="https://www.innoq.com/de/trainings/blockchain-verteilter-konsens/lars-hupel.jpg" alt="Dr. Lars Hupel im Einsatz"/>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum aliquid, <strong>lorem ipsum</strong> reiciendis error fugit dicta tempora necessitatibus maiores nesciunt et, porro ipsa incidunt <em>lorem ipsum</em> asperiores perspiciatis, dolor explicabo quia aliquam eos nam.</p>
<ul class="unordered-list">
<li class="unordered-list__item">Lorem, ipsum dolor Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, atque?</li>
<li class="unordered-list__item">Lorem reiciendis error fugit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et distinctio voluptatem fugit est beatae nisi possimus ratione, obcaecati quod veniam, numquam architecto voluptate.</li>
<li class="unordered-list__item">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<ul>
<li>Lorem, ipsum dolor Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, atque?</li>
<li>Lorem reiciendis error fugit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et distinctio voluptatem fugit est beatae nisi possimus ratione, obcaecati quod veniam, numquam architecto voluptate.</li>
<li><a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit.</a></li>
</ul>
<ol class="ordered-list">
<li class="ordered-list__item">Lorem, ipsum dolor</li>
<li class="ordered-list__item">Lorem reiciendis error fugit</li>
<li class="ordered-list__item">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<ol>
<li>Lorem, ipsum dolor</li>
<li>Lorem reiciendis error fugit</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
</ol>
</div>
</section>
Expand Down

0 comments on commit 51149f2

Please sign in to comment.