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

essais mise en page aside gauche

Browse Source
This commit is contained in:
hugogogo
2021-03-01 22:52:28 +01:00
parent b5f9916007
commit 9a3b552f12
2 changed files with 15 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
pages/litterall.html
View File

@@ -24,6 +24,8 @@
<div class="container_main"> <div class="container_main">
<aside class="page_content sticky"> <aside class="page_content sticky">
<h2>litterall</h2> <h2>litterall</h2>
<p>dernier numero</p>
<p>anciens numeros</p>
</aside> </aside>
<!-- main <!-- main
ne doit pas contenir : sidebars <aside> - navbar <nav> - search form ne doit pas contenir : sidebars <aside> - navbar <nav> - search form
@@ -46,10 +48,12 @@
<img src="./docs/revues/bibliotheque_litterall.jpg" alt="bibliotheque litterall"> <img src="./docs/revues/bibliotheque_litterall.jpg" alt="bibliotheque litterall">
<p class="right"><small>credit: Jeffrey Trehudic</small></p> <p class="right"><small>credit: Jeffrey Trehudic</small></p>
</div> </div>
<h2>dernier numero</h2>
<div class="image"> <div class="image">
<img src="./docs/revues/litt23.jpg" alt="revue litterall"> <img src="./docs/revues/litt23.jpg" alt="revue litterall">
</div> </div>
<h2>anciens numeros</h2>
<div class="gallery"> <div class="gallery">
<div class="card"> <div class="card">
<img src="./docs/revues/litt22.jpg" alt="revue litterall"> <img src="./docs/revues/litt22.jpg" alt="revue litterall">

18
styles/global.css
View File

@@ -8,6 +8,7 @@
--base-back-color: white; --base-back-color: white;
--aside-left-width: 200px; --aside-left-width: 200px;
--aside-right-width: 200px; --aside-right-width: 200px;
--aside-margin: 30px;
} }
@@ -149,6 +150,14 @@ body main {
body main > * { body main > * {
margin: var(--gap-unit) 0px; margin: var(--gap-unit) 0px;
} }
body main h1 {
padding: 70px 0px;
border-bottom: 1px solid lightgrey;
}
body main h2 {
padding: 10px 0px;
border-bottom: 1px solid lightgrey;
}
/*PATH*/ /*PATH*/
body main .page_path { body main .page_path {
@@ -158,11 +167,6 @@ body main .page_path {
/*TITLE*/ /*TITLE*/
body main .page_title { body main .page_title {
position: relative; position: relative;
height: 150px;
border-bottom: 1px solid lightgrey;
}
body main .page_title h1 {
margin: auto 0px;
} }
body main .page_title .date { body main .page_title .date {
position: absolute; position: absolute;
@@ -173,13 +177,13 @@ body main .page_title .date {
/*ASIDE RIGHT RELATIVES*/ /*ASIDE RIGHT RELATIVES*/
/* 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: var(--aside-right-width); width: var(--aside-right-width);
} }
body aside.relative_content .relative_box { body aside.relative_content .relative_box {
margin: var(--aside-margin);
padding: var(--gap-unit); padding: var(--gap-unit);
width: fit-content; width: fit-content;
border: 1px solid lightgrey; border: 1px solid lightgrey;
@@ -194,7 +198,7 @@ body aside.relative_content .relative_box > * {
/*FOOTER*/ /*FOOTER*/
body footer.page_footer { body footer.page_footer {
margin: auto; height: 100px;
border-top: 1px solid lightgrey; border-top: 1px solid lightgrey;
} }