pro/2022_WEBSITE_kosmopolit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mise en page aside de droite en cours

Browse Source
This commit is contained in:
hugogogo
2021-03-01 22:14:08 +01:00
parent c20d3867f8
commit b5f9916007
2 changed files with 34 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
pages/litterall.html
View File

@@ -94,8 +94,16 @@
</div> </div>
</main> </main>
<aside class="relative_content"> <aside class="relative_content">
<div> <div class="relative_box">
<h2></h2> <p class="box_name">autres publications</p>
<a>
<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> </div>
</aside> </aside>
</div> </div>

37
styles/global.css
View File

@@ -7,7 +7,7 @@
--nav-height: 40px; --nav-height: 40px;
--base-back-color: white; --base-back-color: white;
--aside-left-width: 200px; --aside-left-width: 200px;
--aside-right-width: 350px; --aside-right-width: 200px;
} }
@@ -96,28 +96,29 @@ body nav * {
margin: auto; margin: auto;
max-height: 100%; max-height: 100%;
} }
/*nav_left is used for links to pages*/ /* nav_left is used for links to pages*/
body nav .nav_left { body nav .nav_left {
/*we have to set the height to use the height % for childs elements*/ /*we have to set the height to use the height % for childs elements*/
height: 100%; height: 100%;
margin-left: 0px; margin-left: 0px;
margin-right: auto; margin-right: auto;
} }
/*nav_right is used for actions such as connection, search or language*/ /* nav_right is used for actions such as connection, search or language*/
body nav .nav_right { body nav .nav_right {
height: 100%; height: 100%;
margin-left: auto; margin-left: auto;
margin-right: 0px; margin-right: 0px;
} }
/*appearence on hover and click*/ /* appearence on hover and click*/
body nav a { body nav a {
padding: 0px 20px; /*gap-unit * 1.5 because there are 2 * (1/2) for aside and (1/2) for main*/
padding: 0px calc(var(--gap-unit) * 1.5);
height: 100%; height: 100%;
} }
body nav a:hover, body nav a:focus { body nav a:hover, body nav a:focus {
background-color: lightgrey; background-color: lightgrey;
} }
/*special settings for the logo*/ /* special settings for the logo*/
body nav a.nav_logo { body nav a.nav_logo {
padding: 0px; padding: 0px;
width: var(--aside-left-width); width: var(--aside-left-width);
@@ -131,8 +132,8 @@ body .container_main {
/*ASIDE LEFT SUMMARY*/ /*ASIDE LEFT SUMMARY*/
/* aside left is for page table of content */ /* aside left is for page table of content */
body aside.page_content { body aside.page_content {
top: calc(var(--nav-height) + var(--gap-unit) + 1px); top: calc(var(--nav-height) + 1px);
height: calc(100vh - var(--nav-height) - 2 * var(--gap-unit)); height: calc(100vh - var(--nav-height));
} }
body aside.page_content > * { body aside.page_content > * {
margin: var(--gap-unit) 0px; margin: var(--gap-unit) 0px;
@@ -170,20 +171,30 @@ body main .page_title .date {
} }
/*ASIDE RIGHT RELATIVES*/ /*ASIDE RIGHT RELATIVES*/
body aside.relative_content > * {
margin: var(--gap-unit) 0px;
}
/* aside right is for links to relatives content*/ /* aside right is for links to relatives content*/
body aside.relative_content { body aside.relative_content {
margin: 10px 30px;
} }
/* asides elements only have width if they have a child*/ /* asides elements only have width if they have a child*/
body aside.relative_content *:first-child { body aside.relative_content *:first-child {
width: 350px; width: var(--aside-right-width);
}
body aside.relative_content .relative_box {
padding: var(--gap-unit);
width: fit-content;
border: 1px solid lightgrey;
}
body aside.relative_content .box_name {
border-bottom: 1px solid lightgrey;
padding-bottom: var(--gap-unit);
}
body aside.relative_content .relative_box > * {
margin-bottom: var(--gap-unit);
} }
/*FOOTER*/ /*FOOTER*/
body footer.page_footer { body footer.page_footer {
height: 100px; margin: auto;
border-top: 1px solid lightgrey; border-top: 1px solid lightgrey;
} }