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

les espaces sont a peu pres bien structures

Browse Source
This commit is contained in:
hugogogo
2021-03-01 00:58:44 +01:00
parent 5e9f0ce6d7
commit 9ebfbaf40e
1 changed files with 56 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
styles/global.css
View File

@@ -8,8 +8,8 @@
/*DEBUG*/
/*borders on mains elements of pages for debugging*/
body > *, body > .horizontal > * {
/* borders on mains elements of pages for debugging*/
body > *, body > .container_main > * {
border: 1px solid red;
}
@@ -44,57 +44,95 @@ body > *, body > .horizontal > * {
path to pages -> .page_path
container -> .container_main
summary -> aside.page_content
content -> main
main -> main
asides -> aside.relative_content
footer ->
*/
/*ALL*/
/* by default all elements are verticals*/
body, body * {
display: flex;
flex-direction: column;
}
body > *:not(.container_main), aside, main {
padding: calc(var(--gap-unit) / 2);
}
/*HTML*/
html {
scroll-behavior: smooth;
/*default font-size for rem*/
font-size: var(--base-font-size);
}
/*the page is design for a maximum screen*/
/*BODY*/
/* the page is designed for a maximum screen*/
body {
max-width: var(--max-screen);
margin: auto;
}
/*by default all elements are verticals*/
body, body * {
display: flex;
flex-direction: column;
}
body > *, body aside, body main {
padding: 0px var(--gap-unit);
}
/*NAVBAR*/
body nav {
flex-direction: row;
height: 30px;
}
body nav > * {
margin: auto;
padding: 0px 10px;
}
/*TITLE*/
body .page_title {
}
/*PATH-TO-PAGES*/
body .page_path {
}
/*CONTAINER*/
body .container_main {
flex-direction: row;
}
/*MAIN*/
body main {
}
body main > * {
margin: var(--gap-unit) 0px;
}
/*ASIDES*/
body aside {
}
/*asides elements only have width if they have a child*/
/* asides elements only have width if they have a child*/
body aside *:first-child {
width: 200px;
}
/*aside left is for page table of content */
/* aside left is for page table of content */
body aside.page_content {
}
/*aside right is for links to relatives content*/
/* aside right is for links to relatives content*/
body aside.relative_content {
}
/*FOOTER*/
body footer {
}
/*---------------------------------------------*/
/*DESIGN KEYWORDS*/
/*contains elements oriented vertically (default) or horizontally*/
/* contains elements oriented vertically (default) or horizontally*/
.vertical {
flex-direction: column;
}
/*horizontal is only in web version, it becomes vertical in mobile design*/
/* horizontal is only in web version, it becomes vertical in mobile design*/
.horizontal {
flex-direction: row;
}
/*self position of elements to the left, the right, or the center of their container*/
/* self position of elements to the left, the right, or the center of their container*/
.right {
margin-right: 0px;
margin-left: auto;