diff --git a/docs/nav/flag_de_mini.png b/docs/nav/flag_de_mini.png
new file mode 100644
index 0000000..7a17028
Binary files /dev/null and b/docs/nav/flag_de_mini.png differ
diff --git a/docs/nav/flag_en_mini.png b/docs/nav/flag_en_mini.png
new file mode 100644
index 0000000..7720105
Binary files /dev/null and b/docs/nav/flag_en_mini.png differ
diff --git a/docs/nav/flag_fr_mini.png b/docs/nav/flag_fr_mini.png
new file mode 100644
index 0000000..b21d7f5
Binary files /dev/null and b/docs/nav/flag_fr_mini.png differ
diff --git a/docs/nav/kosmopolit_logo_mini.png b/docs/nav/kosmopolit_logo_mini.png
index de6f0fb..15f5392 100644
Binary files a/docs/nav/kosmopolit_logo_mini.png and b/docs/nav/kosmopolit_logo_mini.png differ
diff --git a/pages/litterall.html b/pages/litterall.html
index 198e41e..3120486 100644
--- a/pages/litterall.html
+++ b/pages/litterall.html
@@ -13,13 +13,14 @@
diff --git a/styles/global.css b/styles/global.css
index a946edd..44f0515 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -8,6 +8,16 @@
--color-yellow: hsl(59, 92%, 46%); /* #e3e00a - rgb(227, 224, 10 ) */
--color-blue: hsl(189, 73%, 61%); /* #51cee4 - rgb(81, 206, 228) */
--color-water: hsl(189, 88%, 38%); /* #0c9cb5 - rgb(12, 156, 181) */
+ --hue-1: 324;
+ --hue-2: 86;
+ --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 */
--hue-btn: 12;
@@ -24,10 +34,8 @@
--color-text: hsl(0, 0%, 10%);
--color-text-light: hsl(0, 0%, 25%);
--color-text-strong: hsl(0, 0%, 5%);
- /*links*/
- --hue-link: 324;
- --hue-link: 189;
- --hue-link: 59;
+ /*texts links*/
+ --hue-link: var(--hue-3);
--color-link: hsl(var(--hue-link), 70%, 40%);
--color-link-hover: hsl(var(--hue-link), 70%, 50%);
--color-link-active: hsl(var(--hue-link), 70%, 50%);
@@ -41,7 +49,6 @@
--max-screen: 1110px;
--base-font-size: 10px;
--nav-height: 40px;
- --base-back-color: white;
--aside-left-width: 200px;
--aside-right-width: 200px;
--aside-margin: 30px;
diff --git a/styles/nav.css b/styles/nav.css
index 9710dd8..4831733 100644
--- a/styles/nav.css
+++ b/styles/nav.css
@@ -2,36 +2,40 @@
/*---------------------------------------------*/
/*NAVBAR*/
body nav {
- border-bottom: 1px solid lightgrey;
+ border-bottom: 1px solid var(--color-lines);
}
body nav * {
display: flex;
flex-direction: row;
margin: auto;
-}
-body nav .nav_left, body nav .nav_right {
- margin: 2px auto;
+ height: 100%;
}
/* nav_left is used for links to pages*/
body nav .nav_left {
- margin-left: 2px;
- padding-left: 20px;
- padding-right: 20px;
+ margin-left: 0px;
}
body nav .nav_left a {
- height: 100%;
- margin: auto 20px;
+ padding: 0px 20px;
+}
+body nav .nav_left #nav_logo {
+ padding-left: 40px;
+ padding-right: 40px;
+}
+body nav .nav_left a p {
+ height: auto;
}
body nav .nav_left img {
- height: 100%;
+ height: calc(100% - 4px);
+}
+body nav a:not(#nav_logo):hover, body nav a:not(#nav_logo):focus {
+ background-color: var(--color-back-dark);
}
/* nav_right is used for actions such as connection, search or language*/
body nav .nav_right {
margin-right: 2px;
}
-/* links looks on hover or click*/
-body nav a:hover, body nav a:focus {
- background-color: lightgrey;
+body nav .nav_right img.flag {
+ height: calc(var(--nav-height) / 2);
}
diff --git a/styles/skeleton.css b/styles/skeleton.css
index c721838..8ba8dd9 100644
--- a/styles/skeleton.css
+++ b/styles/skeleton.css
@@ -62,7 +62,7 @@ html {
/*BODY*/
/* the page is designed for a maximum screen*/
body {
- background-color: var(--base-back-color);
+ background-color: var(--color-back-base);
}
/*NAVBAR*/
@@ -70,7 +70,7 @@ body nav {
flex-direction: row;
/*we have to set the height to use the height % for childs elements*/
height: var(--nav-height);
- background-color: var(--base-back-color);
+ background-color: var(--color-back-base);
z-index: 10;
}
@@ -96,7 +96,7 @@ body aside.page_content .table_box {
box-sizing: border-box;
padding: var(--gap-unit);
/*for style*/
- border-left: 1px solid lightgrey;
+ border-left: 1px solid var(--color-lines);
}
/*to put space between elements*/
body aside.page_content .table_box > * {
@@ -111,11 +111,11 @@ body main > * {
}
body main h1 {
padding: 70px 0px;
- border-bottom: 1px solid lightgrey;
+ border-bottom: 1px solid var(--color-lines);
}
body main h2 {
padding: 10px 0px;
- border-bottom: 1px solid lightgrey;
+ border-bottom: 1px solid var(--color-lines);
}
/*TITLE*/
@@ -140,10 +140,10 @@ body aside.relative_content .relative_box {
margin: var(--aside-margin);
padding: var(--gap-unit);
width: fit-content;
- border: 1px solid lightgrey;
+ border: 1px solid var(--color-lines);
}
body aside.relative_content .box_name {
- border-bottom: 1px solid lightgrey;
+ border-bottom: 1px solid var(--color-lines);
padding-bottom: var(--gap-unit);
}
body aside.relative_content .relative_box > * {
@@ -153,7 +153,7 @@ body aside.relative_content .relative_box > * {
/*FOOTER*/
body footer.page_footer {
height: 100px;
- border-top: 1px solid lightgrey;
+ border-top: 1px solid var(--color-lines);
}
diff --git a/styles/text.css b/styles/text.css
index 1c8f3e1..8e02c9d 100644
--- a/styles/text.css
+++ b/styles/text.css
@@ -28,6 +28,7 @@ p a:hover {
p a:active {
color: var(--color-link-active);
}
+/*color text*/
p, span {
color: var(--color-text);
}