pedf
/
spin
Archived
1
0
Fork 0
Code Releases Activity

Nový styl hlavičky u článků

Browse Source
master
Emil Miler 3 years ago
parent 417018438a
commit bfa354038f
2 changed files with 34 additions and 26 deletions
Show Stats Download Patch File Download Diff File

44
index.html
Unescape Escape View File

@ -135,29 +135,29 @@
<section class="articles"> <section class="articles">
<div class="wrap"> <div class="wrap">
<div class="header"> <h2>Články</h2>
<h2>Články</h2> <div>
<p>Zde jsou odkazy na články, ve kterých byl projekt zmíněn.</p> <p>Zde jsou odkazy na články, ve kterých byl projekt zmíněn.</p>
</div> <div class="list">
<div class="list"> <article>
<article> <a href="#">
<a href="#"> <h3>Lorem Ipsum</h3>
<h3>Lorem Ipsum</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Et leo duis ut diam quam. A scelerisque purus semper eget duis at.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Et leo duis ut diam quam. A scelerisque purus semper eget duis at.</p> </a>
</a> </article>
</article> <article>
<article> <a href="#">
<a href="#"> <h3>Lorem Ipsum</h3>
<h3>Lorem Ipsum</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Et leo duis ut diam quam. A scelerisque purus semper eget duis at.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Et leo duis ut diam quam. A scelerisque purus semper eget duis at.</p> </a>
</a> </article>
</article> <article>
<article> <a href="#">
<a href="#"> <h3>Lorem Ipsum</h3>
<h3>Lorem Ipsum</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Et leo duis ut diam quam. A scelerisque purus semper eget duis at.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Et leo duis ut diam quam. A scelerisque purus semper eget duis at.</p> </a>
</a> </article>
</article> </div>
</div> </div>
</div> </div>
</section> </section>

16
style.css
Unescape Escape View File

@ -117,20 +117,26 @@ main .team figure label {
font-weight: bold; font-weight: bold;
} }
main .articles .header { main .articles .wrap {
display: grid; display: grid;
grid-template-columns: 1fr 4fr; grid-template-columns: 1fr 4fr;
grid-column-gap: 1em; grid-column-gap: 3em;
align-items: baseline;
margin-bottom: 4em; margin-bottom: 4em;
border-bottom: 1px solid var(--color-blue);
} }
main .articles .wrap>h2,
main .articles .wrap>div {
margin: 0;
padding-top: 2rem;
}
main .articles .wrap>h2 { border-top: 3px solid var(--color-blue) }
main .articles .wrap>div { border-top: 3px solid #d6e2ff }
main .articles .list { main .articles .list {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
grid-column-gap: 2em; grid-column-gap: 2em;
grid-row-gap: 2em; grid-row-gap: 2em;
margin-top: 4em;
} }
main .articles .list article a { main .articles .list article a {
color: inherit; color: inherit;
@ -212,7 +218,9 @@ footer img:hover { transform: scale(1.1) }
grid-column-gap: 1em; grid-column-gap: 1em;
} }
main .articles .wrap,
main .articles .list { grid-template-columns: 1fr } main .articles .list { grid-template-columns: 1fr }
main .articles .wrap>div { border-top: 0 }
footer { margin: 5em auto } footer { margin: 5em auto }