diff --git a/pages/litterall.html b/pages/litterall.html
index 87fa2e0..06d14c8 100644
--- a/pages/litterall.html
+++ b/pages/litterall.html
@@ -28,9 +28,9 @@
diff --git a/styles/aside_left.css b/styles/aside_left.css
index 22608f4..056e513 100644
--- a/styles/aside_left.css
+++ b/styles/aside_left.css
@@ -13,9 +13,13 @@ body aside.page_content .table_box {
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);
+ border-left: 1px solid var(--color-lines-3);
}
/*to put space between elements*/
body aside.page_content .table_box > * {
margin-bottom: var(--gap-unit);
}
+body aside.page_content .table_box h2 {
+ color: var(--color-text-1);
+}
+
diff --git a/styles/aside_right.css b/styles/aside_right.css
new file mode 100644
index 0000000..b1d2898
--- /dev/null
+++ b/styles/aside_right.css
@@ -0,0 +1,24 @@
+
+/*---------------------------------------------*/
+/*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 {
+ width: var(--aside-right-width);
+}
+body aside.relative_content .relative_box {
+ margin: var(--aside-margin);
+ padding: var(--gap-unit);
+ width: fit-content;
+ border: 1px solid var(--color-lines-2);
+}
+body aside.relative_content .box_name {
+ border-bottom: 1px solid var(--color-lines-2);
+ padding-bottom: var(--gap-unit);
+}
+body aside.relative_content .relative_box > * {
+ margin-bottom: var(--gap-unit);
+}
diff --git a/styles/footer.css b/styles/footer.css
new file mode 100644
index 0000000..557abca
--- /dev/null
+++ b/styles/footer.css
@@ -0,0 +1,6 @@
+
+/*---------------------------------------------*/
+/*FOOTER*/
+body footer.page_footer {
+ height: 100px;
+}
diff --git a/styles/global.css b/styles/global.css
index de4e4b2..cbe62f0 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -1,6 +1,10 @@
/*----------------------------------------------*/
/*GLOBAL VARIABLE*/
:root {
+ /*COLOR*/
+ /* background*/
+ --color-back-base: hsl(0, 0%, 100%);
+ --color-back-dark: hsl(0, 0%, 95%);
/* color range */
--color-purple: hsl(324, 86%, 52%); /* #ee1998 - rgb(238, 25, 152) */
--color-pink: hsl(324, 100%, 74%); /* #ff7bca - rgb(255, 123, 202) */
@@ -12,16 +16,25 @@
--hue-2: 86;
--hue-3: 59;
--hue-4: 189;
-
- /*BODY*/
- /* background*/
- --color-back-base: hsl(0, 0%, 100%);
- --color-back-dark: hsl(0, 0%, 95%);
+ /*text*/
+ --color-text: hsl(0, 0%, 10%);
+ --color-text-light: hsl(0, 0%, 25%);
+ --color-text-strong: hsl(0, 0%, 5%);
+ --color-text-1: hsl(var(--hue-1), 80%, 50%);
+ --color-text-2: hsl(var(--hue-2), 90%, 30%);
+ --color-text-3: hsl(var(--hue-3), 90%, 30%);
+ --color-text-4: hsl(var(--hue-4), 70%, 40%);
+ /*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%);
+ --color-link-visited: hsl(var(--hue-link), 60%, 30%);
/* 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%);
+ --color-lines-1: hsl(var(--hue-1), 50%, 80%);
+ --color-lines-2: hsl(var(--hue-2), 50%, 80%);
+ --color-lines-3: hsl(var(--hue-3), 50%, 80%);
+ --color-lines-4: hsl(var(--hue-4), 50%, 80%);
/* buttons*/
--hue-btn: 12;
--color-btn: hsl(var(--hue-btn), 1%, 1%);
@@ -33,19 +46,6 @@
--font-fallback: 'cabrion';
/* colors texts */
- /*text*/
- --color-text: hsl(0, 0%, 10%);
- --color-text-light: hsl(0, 0%, 25%);
- --color-text-strong: hsl(0, 0%, 5%);
- /*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%);
- --color-link-visited: hsl(var(--hue-link), 60%, 30%);
- /*titles*/
- --color-title-1: hsl(0, 0%, 10%);
- --color-title-2: hsl(0, 0%, 10%);
/*skeleton*/
--gap-unit: 10px;
diff --git a/styles/main.css b/styles/main.css
new file mode 100644
index 0000000..e8be972
--- /dev/null
+++ b/styles/main.css
@@ -0,0 +1,18 @@
+
+/*---------------------------------------------*/
+/*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-1);
+}
+body main h2 {
+ padding: 10px 0px;
+ border-bottom: 1px solid var(--color-lines-1);
+}
+
diff --git a/styles/nav.css b/styles/nav.css
index d3b11a6..c33c5dc 100644
--- a/styles/nav.css
+++ b/styles/nav.css
@@ -2,7 +2,7 @@
/*---------------------------------------------*/
/*NAVBAR*/
body nav {
- border-bottom: 1px solid var(--color-lines-nav);
+ border-bottom: 1px solid var(--color-lines-4);
}
body nav * {
display: flex;
@@ -22,6 +22,7 @@ body nav .nav_left #nav_logo {
padding-right: 40px;
}
body nav .nav_left a p {
+ /*to center vertically the text*/
height: auto;
}
body nav .nav_left img {
diff --git a/styles/skeleton.css b/styles/skeleton.css
index dc88658..e4db4c2 100644
--- a/styles/skeleton.css
+++ b/styles/skeleton.css
@@ -30,61 +30,16 @@ body .container_main {
body aside.page_content {
top: calc(var(--nav-height) + 1px);
height: calc(100vh - var(--nav-height) - 1px);
+ background-color: var(--color-back-base);
}
-
-/*MAIN*/
body main {
- padding: calc(var(--gap-unit) / 2);
+ background-color: var(--color-back-base);
}
-body main > * {
- margin: var(--gap-unit) 0px;
-}
-body main h1 {
- padding: 70px 0px;
- border-bottom: 1px solid var(--color-lines-main);
-}
-body main h2 {
- padding: 10px 0px;
- border-bottom: 1px solid var(--color-lines-main);
-}
-
-/*TITLE*/
-body main .page_title {
- position: relative;
-}
-body main .page_title .date {
- position: absolute;
- bottom: 0px;
- left: 0px;
-}
-
-/*ASIDE RIGHT RELATIVES*/
-/* aside right is for links to relatives content*/
body aside.relative_content {
- padding: calc(var(--gap-unit) / 2);
+ background-color: var(--color-back-base);
}
-/* asides elements only have width if they have a child*/
-body aside.relative_content *:first-child {
- width: var(--aside-right-width);
-}
-body aside.relative_content .relative_box {
- margin: var(--aside-margin);
- padding: var(--gap-unit);
- width: fit-content;
- border: 1px solid var(--color-lines-aside-r);
-}
-body aside.relative_content .box_name {
- border-bottom: 1px solid var(--color-lines-aside-r);
- padding-bottom: var(--gap-unit);
-}
-body aside.relative_content .relative_box > * {
- margin-bottom: var(--gap-unit);
-}
-
-/*FOOTER*/
body footer.page_footer {
- height: 100px;
- border-top: 1px solid var(--color-lines-nav);
+ background-color: var(--color-back-dark);
}