css reorganisees par sections
This commit is contained in:
hugogogo
@@ -28,9 +28,9 @@
|
||||
<aside class="page_content sticky">
|
||||
<div class="table_box"> <!-- container use to adjust padding -->
|
||||
<h2>sommaire</h2>
|
||||
<a href="./pages/litterall.html#anchor_litterall"><p>litterall</p></a>
|
||||
<a href="./pages/litterall.html#anchor_27"><p>numero 27</p></a>
|
||||
<a href="./pages/litterall.html#anchor_26"><p>numero 26</p></a>
|
||||
<a href="./pages/litterall.html#anchor_litterall"><p>LITTE<i>rall</i></p></a>
|
||||
<a href="./pages/litterall.html#anchor_27"><p>revue numero 27</p></a>
|
||||
<a href="./pages/litterall.html#anchor_26"><p>revue numero 26</p></a>
|
||||
<a href="./pages/litterall.html#anchor_archives"><p>archives</p></a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
24
styles/aside_right.css
Normal file
24
styles/aside_right.css
Normal file
@@ -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);
|
||||
}
|
||||
6
styles/footer.css
Normal file
6
styles/footer.css
Normal file
@@ -0,0 +1,6 @@
|
||||
|
||||
/*---------------------------------------------*/
|
||||
/*FOOTER*/
|
||||
body footer.page_footer {
|
||||
height: 100px;
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
18
styles/main.css
Normal file
18
styles/main.css
Normal file
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
53
styles/skeleton.css
vendored
53
styles/skeleton.css
vendored
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user