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

nav et aside left en sticky

Browse Source
This commit is contained in:
hugogogo
2021-03-01 11:29:29 +01:00
parent 5fe29fcc87
commit 41d4a450c8
3 changed files with 60 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
pages/litterall.html
View File

@@ -11,14 +11,14 @@
<link href="./styles/litterall.css" type="text/css" rel="stylesheet"> <link href="./styles/litterall.css" type="text/css" rel="stylesheet">
</head> </head>
<body> <body>
<nav> <nav class="sticky">
<p><a href=""><img src="./docs/kosmopolit_fond.png" alt="logo kosmopolit"></a></p> <p><a href=""><img src="./docs/kosmopolit_fond.png" alt="logo kosmopolit"></a></p>
<p><a href="">kosmopolit</a></p> <p><a href="">kosmopolit</a></p>
<p><a href="">litterall</a></p> <p><a href="">litterall</a></p>
<p><a href="">l.e.a</a></p> <p><a href="">l.e.a</a></p>
</nav> </nav>
<div class="container_main"> <div class="container_main">
<aside class="page_content"> <aside class="page_content sticky">
<h2>litterall</h2> <h2>litterall</h2>
</aside> </aside>
<!-- main <!-- main
@@ -26,12 +26,12 @@
ne doit pas etre contenu par : <article> - <aside> - <footer> - <header> - <nav> ne doit pas etre contenu par : <article> - <aside> - <footer> - <header> - <nav>
--> -->
<main> <main>
<div class="page.infos"> <div class="page_path">
<p><small><a>accueil</a> > <a>litterall</a></small></p> <p><i><small><a>accueil</a> > <a>litterall</a></small></i></p>
<p><small>truc</small></p>
</div> </div>
<div class="page_title"> <div class="page_title">
<h1 id="anchor_litterall">LITTER<i>all</i></h1> <h1 id="anchor_litterall">LITTER<i>all</i></h1>
<p class="date"><i><small>edité le 01/03/2020</small></i></p>
</div> </div>
<p class="right"><i>“Il est difficile à des étrangers comme nous de pénétrer l’ultime secret des vers d’une autre langue. Ce n’est pas à nous d’en juger, nous n’aurons pas le dernier mot.”</i><br><small>Ossip Mandelstam, Entretiens sur Dante</small><br><small>traduction Louis Martinez</small></p> <p class="right"><i>“Il est difficile à des étrangers comme nous de pénétrer l’ultime secret des vers d’une autre langue. Ce n’est pas à nous d’en juger, nous n’aurons pas le dernier mot.”</i><br><small>Ossip Mandelstam, Entretiens sur Dante</small><br><small>traduction Louis Martinez</small></p>
<br><br> <br><br>
@@ -94,5 +94,8 @@
<h2></h2> <h2></h2>
</div> </div>
</aside> </aside>
</div>
<footer class="page_footer">
</footer>
</body> </body>
</html> </html>

67
styles/global.css
View File

@@ -5,11 +5,17 @@
--max-screen: 1500px; --max-screen: 1500px;
--base-font-size: 10px; --base-font-size: 10px;
--nav-height: 40px; --nav-height: 40px;
--base-back-color: white;
} }
/*DEBUG*/ /*DEBUG*/
/* borders on mains elements of pages for debugging*/ /* borders on mains elements of pages for debugging*/
body * {
/*
border: 1px solid red;
*/
}
body > *, body > .container_main > * { body > *, body > .container_main > * {
/* /*
border: 1px solid red; border: 1px solid red;
@@ -22,10 +28,10 @@ body > *, body > .container_main > * {
--------------------- --------------------- --------------------- ---------------------
' NAV ' ' NAV ' ' NAV ' ' NAV '
'---------------------' '---------------------' '---------------------' '---------------------'
' ------------------- ' ' S ' INFOS ' A ' ' ------------------- ' ' S ' PATHS ' A '
'' CONTAINER '' ' U ' ----- ' S ' '' CONTAINER '' ' U ' ----- ' S '
'' --- ------- --- '' ' M ' TITLE ' I ' '' --- ------- --- '' ' M ' TITLE ' I '
''' S '' INFOS '' A ''' ' M ' ----- ' D ' ''' S '' PATHS '' A ''' ' M ' ----- ' D '
''' U '' ----- '' S ''' ' A ' M ' E ' ''' U '' ----- '' S ''' ' A ' M ' E '
''' M '' TITLE '' I ''' ' R ' A ' S ' ''' M '' TITLE '' I ''' ' R ' A ' S '
''' M '' ----- '' D ''' ' Y ' I ' ' ''' M '' ----- '' D ''' ' Y ' I ' '
@@ -42,7 +48,7 @@ body > *, body > .container_main > * {
container -> .container_main container -> .container_main
summary -> aside.page_content summary -> aside.page_content
main -> main main -> main
infos -> .page.infos paths -> .page.path
title -> .page_title title -> .page_title
asides -> aside.relative_content asides -> aside.relative_content
footer -> footer ->
@@ -70,6 +76,7 @@ html {
body { body {
max-width: var(--max-screen); max-width: var(--max-screen);
margin: auto; margin: auto;
background-color: var(--base-back-color);
} }
/*NAVBAR*/ /*NAVBAR*/
@@ -77,6 +84,8 @@ body nav {
flex-direction: row; flex-direction: row;
height: var(--nav-height); height: var(--nav-height);
border-bottom: 1px solid lightgrey; border-bottom: 1px solid lightgrey;
background-color: var(--base-back-color);
z-index: 10;
} }
body nav *:first-child { body nav *:first-child {
margin-left: var(--gap-unit); margin-left: var(--gap-unit);
@@ -95,6 +104,20 @@ body .container_main {
flex-direction: row; flex-direction: row;
} }
/*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));
}
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: 150px;
}
/*MAIN*/ /*MAIN*/
body main { body main {
} }
@@ -102,28 +125,29 @@ body main > * {
margin: var(--gap-unit) 0px; margin: var(--gap-unit) 0px;
} }
/*INFOS*/ /*PATH*/
body .page_path { body main .page_path {
margin-top: 0px;
} }
/*TITLE*/ /*TITLE*/
body .page_title { body main .page_title {
height: 100px; position: relative;
height: 150px;
border-bottom: 1px solid lightgrey; border-bottom: 1px solid lightgrey;
} }
body .page_title * { body main .page_title h1 {
margin: auto 0px; margin: auto 0px;
} }
body main .page_title .date {
position: absolute;
bottom: 0px;
left: 0px;
}
/*ASIDES*/ /*ASIDE RIGHT RELATIVES*/
body aside { body aside.relative_content > * {
} margin: var(--gap-unit) 0px;
/* aside left is for page table of content */
body aside.page_content {
}
/* asides elements only have width if they have a child*/
body aside.page_content *:first-child {
width: 150px;
} }
/* aside right is for links to relatives content*/ /* aside right is for links to relatives content*/
body aside.relative_content { body aside.relative_content {
@@ -134,7 +158,9 @@ body aside.relative_content *:first-child {
} }
/*FOOTER*/ /*FOOTER*/
body footer { body footer.page_footer {
height: 100px;
border-top: 1px solid lightgrey;
} }
@@ -162,4 +188,9 @@ body footer {
margin-left: auto; margin-left: auto;
text-align: center; text-align: center;
} }
.sticky {
position: -webkit-sticky; /*safari*/
position: sticky;
top: 0;
}

7
styles/reset.css
View File

@@ -1,15 +1,14 @@
/*/////////////////////////////////////////////*/ /*/////////////////////////////////////////////*/
/*RESET*/ /*RESET*/
* {
box-sizing: content-box;
}
/* /*
body *:not(script) { body *:not(script) {
display: block; display: block;
} }
*/ */
body *:not(script) {
display: flex;
flex-direction: column;
}
html, body, div, span, applet, object, iframe, html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, a, abbr, acronym, address, big, cite, code,