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

transvase aside style dans aside css

Browse Source
This commit is contained in:
hugogogo
2021-03-12 13:08:44 +01:00
parent d5de3d34e2
commit 409ec82f3b
5 changed files with 50 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
pages/litterall.html
View File

@@ -29,8 +29,9 @@
<div class="table_box"> <!-- container use to adjust padding -->
<h2>sommaire</h2>
<a href="./pages/litterall.html#anchor_litterall"><p>litterall</p></a>
<a href="./pages/litterall.html#anchor_last"><p>dernier numero</p></a>
<a href="./pages/litterall.html#anchor_previous"><p>anciens numeros</p></a>
<a href="./pages/litterall.html#anchor_27"><p>numero 27</p></a>
<a href="./pages/litterall.html#anchor_26"><p>numero 26</p></a>
<a href="./pages/litterall.html#anchor_archives"><p>archives</p></a>
</div>
</aside>
@@ -53,7 +54,7 @@
<img src="./docs/litterall/bibliotheque_litterall.jpg" alt="bibliotheque litterall">
<p class="right"><small>credit: Jeffrey Trehudic</small></p>
</div>
<h2 id="anchor_last">revue numéro 27</h2>
<h2 id="anchor_27">revue numéro 27</h2>
<div class="image horizontal">
<img src="./docs/litterall/revue_27.JPG" alt="revue litterall">
<div class="vertical">
@@ -62,7 +63,7 @@
<p>sommaire ...</p>
</div>
</div>
<h2 id="anchor_last">revue numéro 26</h2>
<h2 id="anchor_26">revue numéro 26</h2>
<div class="image horizontal">
<img src="./docs/litterall/revue_26.JPG" alt="revue litterall">
<div class="vertical">
@@ -72,7 +73,7 @@
</div>
</div>
<h2 id="anchor_previous">anciens numeros</h2>
<h2 id="anchor_archives">anciens numeros</h2>
<div class="gallery">
<div class="card">
<img src="./docs/revues/litt22.jpg" alt="revue litterall">

21
styles/aside_left.css Normal file
View File

@@ -0,0 +1,21 @@
/*---------------------------------------------*/
/*ASIDE LEFT*/
/* aside left is for page table of content */
body aside.page_content {
top: calc(var(--nav-height) + 1px);
height: calc(100vh - var(--nav-height));
padding: calc(var(--gap-unit) / 2);
}
/* asides elements only have width if they have a child*/
body aside.page_content .table_box {
min-width: var(--aside-left-width);
margin: var(--aside-margin) auto var(--aside-margin) var(--aside-margin);
padding: var(--gap-unit);
/*for style*/
border-left: 1px solid var(--color-lines-aside-l);
}
/*to put space between elements*/
body aside.page_content .table_box > * {
margin-bottom: var(--gap-unit);
}

17
styles/global.css
View File

@@ -13,13 +13,16 @@
--hue-3: 59;
--hue-4: 189;
/*doc color*/
--hue-back: var(--hue-4);
--color-back-base: hsl(var(--hue-back), 0%, 100%);
--color-back-dark: hsl(var(--hue-back), 0%, 95%);
--color-lines: hsl(var(--hue-back), 70%, 80%);
/* colors buttons */
/*BODY*/
/* background*/
--color-back-base: hsl(0, 0%, 100%);
--color-back-dark: hsl(0, 0%, 95%);
/* lines*/
--color-lines-main: hsl(var(--hue-1), 50%, 80%);
--color-lines-aside-l: hsl(var(--hue-2), 50%, 80%);
--color-lines-aside-r: hsl(var(--hue-3), 50%, 80%);
--color-lines-nav: hsl(var(--hue-4), 50%, 80%);
/* buttons*/
--hue-btn: 12;
--color-btn: hsl(var(--hue-btn), 1%, 1%);

2
styles/nav.css
View File

@@ -2,7 +2,7 @@
/*---------------------------------------------*/
/*NAVBAR*/
body nav {
border-bottom: 1px solid var(--color-lines);
border-bottom: 1px solid var(--color-lines-nav);
}
body nav * {
display: flex;

93
styles/skeleton.css vendored
View File

@@ -1,71 +1,20 @@
/*DEBUG*/
/* borders on mains elements of pages for debugging*/
body * {
/*
border: 1px solid red;
*/
}
body > *, body > .container_main > * {
/*
border: 1px solid red;
*/
}
/*---------------------------------------------*/
/*global settings*/
/*
--------------------- ---------------------
' NAV ' ' NAV '
'---------------------' '---------------------'
' ------------------- ' ' S ' PATHS ' A '
'' CONTAINER '' ' U ' ----- ' S '
'' --- ------- --- '' ' M ' TITLE ' I '
''' S '' PATHS '' A ''' ' M ' ----- ' D '
''' U '' ----- '' S ''' ' A ' M ' E '
''' M '' TITLE '' I ''' ' R ' A ' S '
''' M '' ----- '' D ''' ' Y ' I ' '
''' A '' M '' E ''' ' ' N ' '
''' R '' A '' S ''' '---------------------'
''' Y '' I '' ''' ' FOOTER '
''' '' N '' ''' '---------------------'
'''---''-------''---'''
''-------------------''
' FOOTER '
'---------------------'
navbar -> nav
container -> .container_main
summary -> aside.page_content
main -> main
paths -> .page.path
asides -> aside.relative_content
footer ->
*/
/*ALL*/
/* by default all elements are verticals*/
/*SKELETON*/
/*the position, size, and orientation of all elements without style or spaces*/
body, body * {
display: flex;
/*by default all elements are verticals*/
flex-direction: column;
}
body aside, body main {
padding: calc(var(--gap-unit) / 2);
}
/*HTML*/
html {
scroll-behavior: smooth;
/*default font-size for rem*/
font-size: var(--base-font-size);
}
/*BODY*/
/* the page is designed for a maximum screen*/
body {
background-color: var(--color-back-base);
}
/*NAVBAR*/
body nav {
flex-direction: row;
/*we have to set the height to use the height % for childs elements*/
@@ -73,49 +22,30 @@ body nav {
background-color: var(--color-back-base);
z-index: 10;
}
/*CONTAINER*/
body .container_main {
margin: auto;
flex-direction: row;
/*the page is designed for a maximum screen*/
max-width: var(--max-screen);
margin: 0px;
}
/*ASIDE LEFT SUMMARY*/
/* aside left is for page table of content */
body aside.page_content {
top: calc(var(--nav-height) + 1px);
height: calc(100vh - var(--nav-height));
}
/* asides elements only have width if they have a child*/
body aside.page_content .table_box {
width: var(--aside-left-width);
margin: var(--aside-margin) 0px var(--aside-margin) var(--aside-margin);
/*border-box so changing padding has no effect on total width*/
box-sizing: border-box;
padding: var(--gap-unit);
/*for style*/
border-left: 1px solid var(--color-lines);
}
/*to put space between elements*/
body aside.page_content .table_box > * {
margin-bottom: var(--gap-unit);
height: calc(100vh - var(--nav-height) - 1px);
}
/*MAIN*/
body main {
padding: calc(var(--gap-unit) / 2);
}
body main > * {
margin: var(--gap-unit) 0px;
}
body main h1 {
padding: 70px 0px;
border-bottom: 1px solid var(--color-lines);
border-bottom: 1px solid var(--color-lines-main);
}
body main h2 {
padding: 10px 0px;
border-bottom: 1px solid var(--color-lines);
border-bottom: 1px solid var(--color-lines-main);
}
/*TITLE*/
@@ -131,6 +61,7 @@ body main .page_title .date {
/*ASIDE RIGHT RELATIVES*/
/* aside right is for links to relatives content*/
body aside.relative_content {
padding: calc(var(--gap-unit) / 2);
}
/* asides elements only have width if they have a child*/
body aside.relative_content *:first-child {
@@ -140,10 +71,10 @@ body aside.relative_content .relative_box {
margin: var(--aside-margin);
padding: var(--gap-unit);
width: fit-content;
border: 1px solid var(--color-lines);
border: 1px solid var(--color-lines-aside-r);
}
body aside.relative_content .box_name {
border-bottom: 1px solid var(--color-lines);
border-bottom: 1px solid var(--color-lines-aside-r);
padding-bottom: var(--gap-unit);
}
body aside.relative_content .relative_box > * {
@@ -153,7 +84,7 @@ body aside.relative_content .relative_box > * {
/*FOOTER*/
body footer.page_footer {
height: 100px;
border-top: 1px solid var(--color-lines);
border-top: 1px solid var(--color-lines-nav);
}