continue mise en page aside gauche

This commit is contained in:
hugogogo
2021-03-02 10:28:28 +01:00
parent 9a3b552f12
commit 34bed77eac
3 changed files with 29 additions and 23 deletions

View File

@@ -23,9 +23,12 @@
</nav>
<div class="container_main">
<aside class="page_content sticky">
<h2>litterall</h2>
<p>dernier numero</p>
<p>anciens numeros</p>
<div class="table_box"> <!-- container use to adjust padding -->
<h2>sommaire</h2>
<a href="./pages/litterall.html#anchor_litterall"><p>litterall</p></a>
<a href="#anchor_last"><p>dernier numero</p></a>
<a href="#anchor_previous"><p>anciens numeros</p></a>
</div>
</aside>
<!-- main
ne doit pas contenir : sidebars <aside> - navbar <nav> - search form
@@ -104,10 +107,6 @@
<h2>traduire, retraduire</h2>
<p>entretien entre frédéric Boyer, Christiane Kayser, et Jean-Philippe Rossignol</p>
</a>
<a>
<h2>traduire, retraduire</h2>
<p>entretien entre frédéric Boyer, Christiane Kayser, et Jean-Philippe Rossignol</p>
</a>
</div>
</aside>
</div>

View File

@@ -136,12 +136,17 @@ body aside.page_content {
top: calc(var(--nav-height) + 1px);
height: calc(100vh - var(--nav-height));
}
body aside.page_content > * {
margin: var(--gap-unit) 0px;
}
/* asides elements only have width if they have a child*/
body aside.page_content *:first-child {
width: 200px;
body aside.page_content .table_box {
width: calc(var(--aside-left-width) - var(--aside-margin));
margin: var(--aside-margin) 0px var(--aside-margin) var(--aside-margin);
/*border-box so changing padding has no effect on total width*/
box-sizing: border-box;
padding: var(--gap-unit);
border-left: 1px solid lightgrey;
}
body aside.page_content .table_box > * {
margin-bottom: var(--gap-unit);
}
/*MAIN*/

View File

@@ -53,9 +53,11 @@ p {
}
h1 {
font-size: 3.5em;
line-height: 1.5em;
}
h2 {
font-size: 2em;
line-height: 1.5em;
}
small {
font-size: 0.8em;
@@ -80,15 +82,15 @@ p br, h1 br, h2 br {
margin: 0px;
}
/*
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript tex
<code> - Computer code
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript tex
<code> - Computer code
*/