diff --git a/pages/litterall.html b/pages/litterall.html index 3120486..87fa2e0 100644 --- a/pages/litterall.html +++ b/pages/litterall.html @@ -29,8 +29,9 @@
@@ -53,7 +54,7 @@
credit: Jeffrey Trehudic
-sommaire ...
diff --git a/styles/aside_left.css b/styles/aside_left.css
new file mode 100644
index 0000000..22608f4
--- /dev/null
+++ b/styles/aside_left.css
@@ -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);
+}
diff --git a/styles/global.css b/styles/global.css
index 44f0515..de4e4b2 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -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%);
diff --git a/styles/nav.css b/styles/nav.css
index 4831733..d3b11a6 100644
--- a/styles/nav.css
+++ b/styles/nav.css
@@ -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;
diff --git a/styles/skeleton.css b/styles/skeleton.css
index 8ba8dd9..dc88658 100644
--- a/styles/skeleton.css
+++ b/styles/skeleton.css
@@ -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);
}