diff --git a/styles/global.css b/styles/global.css index 12bba23..372ec75 100644 --- a/styles/global.css +++ b/styles/global.css @@ -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;