Sidebar element

This commit is contained in:
Mats Rauhala 2021-01-25 21:52:33 +02:00
parent 869ad66b21
commit 8727fd33a6
2 changed files with 34 additions and 5 deletions

View File

@ -45,6 +45,7 @@ h2 {
justify-content: space-between; justify-content: space-between;
} }
article .header { article .header {
font-size: 1.4rem; font-size: 1.4rem;
font-style: italic; font-style: italic;
@ -57,6 +58,7 @@ article .header {
text-decoration: none; text-decoration: none;
} }
@media (max-width: 319px) { @media (max-width: 319px) {
body { body {
width: 90%; width: 90%;
@ -113,15 +115,36 @@ article .header {
display: inline; display: inline;
margin: 0 0.6rem; margin: 0 0.6rem;
} }
div.sidebar-container {
/* display: grid; */
/* grid-template-columns: minmax(60%, 85%) 1fr; */
}
div.sidebar-container > div.sidebar {
padding-top: 2rem;
border-top: 0.2rem solid #000;
}
} }
@media (min-width: 640px) { @media (min-width: 640px) {
body { body {
width: 60rem; width: 100rem;
margin: 0 auto; margin: 0 auto;
padding: 0; padding: 0;
} }
div.sidebar-container {
display: grid;
grid-template-columns: minmax(60%, 85%) 1fr;
}
div.sidebar-container > div.sidebar {
padding-top: 0px;
padding-left: 2rem;
border-left: 0.2rem solid #000;
border-top: none;
}
article {
width: 60rem;
}
header { header {
margin: 0 0 3rem; margin: 0 0 3rem;
padding: 1.2rem 0; padding: 1.2rem 0;

View File

@ -1,6 +1,12 @@
<div class="sidebar-container">
<article> <article>
<section> <section>
$body$ $body$
</section> </section>
</article> </article>
<div class="sidebar">
<a href="$github$">Github</a>
<a href="$issues$">Issues</a>
$if(badge)$<img src="$badge$" />$endif$
</div>
</div>