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;
}
article .header {
font-size: 1.4rem;
font-style: italic;
@ -57,6 +58,7 @@ article .header {
text-decoration: none;
}
@media (max-width: 319px) {
body {
width: 90%;
@ -113,15 +115,36 @@ article .header {
display: inline;
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) {
body {
width: 60rem;
width: 100rem;
margin: 0 auto;
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 {
margin: 0 0 3rem;
padding: 1.2rem 0;

View File

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