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

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);
}