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">
</head>
<body>
<nav>
<nav class="sticky">
<p><a href=""><img src="./docs/kosmopolit_fond.png" alt="logo kosmopolit"></a></p>
<p><a href="">kosmopolit</a></p>
<p><a href="">litterall</a></p>
<p><a href="">l.e.a</a></p>
</nav>
<div class="container_main">
<aside class="page_content">
<aside class="page_content sticky">
<h2>litterall</h2>
</aside>
<!-- main
@@ -26,12 +26,12 @@
ne doit pas etre contenu par : <article> - <aside> - <footer> - <header> - <nav>
-->
<main>
<div class="page.infos">
<p><small><a>accueil</a> > <a>litterall</a></small></p>
<p><small>truc</small></p>
<div class="page_path">
<p><i><small><a>accueil</a> > <a>litterall</a></small></i></p>
</div>
<div class="page_title">
<h1 id="anchor_litterall">LITTER<i>all</i></h1>
<p class="date"><i><small>edité le 01/03/2020</small></i></p>
</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>
<br><br>
@@ -94,5 +94,8 @@
<h2></h2>
</div>
</aside>
</div>
<footer class="page_footer">
</footer>
</body>
</html>

67
styles/global.css
View File

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

7
styles/reset.css
View File

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