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>
</main>
<aside class="relative_content">
<div>
<h2></h2>
<div class="relative_box">
<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>
</aside>
</div>

37
styles/global.css
View File

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