pro/2022_WEBSITE_kosmopolit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

test variables globales couleurs

Browse Source
This commit is contained in:
hugogogo
2021-03-11 19:34:53 +01:00
parent 8c1e06d682
commit d5de3d34e2
9 changed files with 40 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/nav/flag_de_mini.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 332 B

BIN
docs/nav/flag_en_mini.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

BIN
docs/nav/flag_fr_mini.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 154 B

BIN
docs/nav/kosmopolit_logo_mini.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

3
pages/litterall.html
View File

@@ -13,13 +13,14 @@
<body> <body>
<nav class="sticky"> <nav class="sticky">
<div class="nav_left"> <div class="nav_left">
<a class="nav_logo" href="index.html"><img src="./docs/nav/kosmopolit_logo_mini.png" alt="logo kosmopolit"></a> <a id="nav_logo" href="index.html"><img src="./docs/nav/kosmopolit_logo_mini.png" alt="logo kosmopolit"></a>
<a href="./pages/kosmopolit.html"><p>kosmopolit</p></a> <a href="./pages/kosmopolit.html"><p>kosmopolit</p></a>
<a href="./pages/litterall.html"><p>LITTER<i>all</i></p></a> <a href="./pages/litterall.html"><p>LITTER<i>all</i></p></a>
<a href="./pages/lettredeeda.html"><p>l.e.a</p></a> <a href="./pages/lettredeeda.html"><p>l.e.a</p></a>
<a href="./pages/evenements.html"><p>evenements</p></a> <a href="./pages/evenements.html"><p>evenements</p></a>
</div> </div>
<div class="nav_right"> <div class="nav_right">
<img class="flag" src="./docs/nav/flag_fr_mini.png" alt="drapeau langue"></a>
</div> </div>
</nav> </nav>
<div class="container_main"> <div class="container_main">

17
styles/global.css
View File

@@ -8,6 +8,16 @@
--color-yellow: hsl(59, 92%, 46%); /* #e3e00a - rgb(227, 224, 10 ) */ --color-yellow: hsl(59, 92%, 46%); /* #e3e00a - rgb(227, 224, 10 ) */
--color-blue: hsl(189, 73%, 61%); /* #51cee4 - rgb(81, 206, 228) */ --color-blue: hsl(189, 73%, 61%); /* #51cee4 - rgb(81, 206, 228) */
--color-water: hsl(189, 88%, 38%); /* #0c9cb5 - rgb(12, 156, 181) */ --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 */ /* colors buttons */
--hue-btn: 12; --hue-btn: 12;
@@ -24,10 +34,8 @@
--color-text: hsl(0, 0%, 10%); --color-text: hsl(0, 0%, 10%);
--color-text-light: hsl(0, 0%, 25%); --color-text-light: hsl(0, 0%, 25%);
--color-text-strong: hsl(0, 0%, 5%); --color-text-strong: hsl(0, 0%, 5%);
/*links*/ /*texts links*/
--hue-link: 324; --hue-link: var(--hue-3);
--hue-link: 189;
--hue-link: 59;
--color-link: hsl(var(--hue-link), 70%, 40%); --color-link: hsl(var(--hue-link), 70%, 40%);
--color-link-hover: hsl(var(--hue-link), 70%, 50%); --color-link-hover: hsl(var(--hue-link), 70%, 50%);
--color-link-active: hsl(var(--hue-link), 70%, 50%); --color-link-active: hsl(var(--hue-link), 70%, 50%);
@@ -41,7 +49,6 @@
--max-screen: 1110px; --max-screen: 1110px;
--base-font-size: 10px; --base-font-size: 10px;
--nav-height: 40px; --nav-height: 40px;
--base-back-color: white;
--aside-left-width: 200px; --aside-left-width: 200px;
--aside-right-width: 200px; --aside-right-width: 200px;
--aside-margin: 30px; --aside-margin: 30px;

30
styles/nav.css
View File

@@ -2,36 +2,40 @@
/*---------------------------------------------*/ /*---------------------------------------------*/
/*NAVBAR*/ /*NAVBAR*/
body nav { body nav {
border-bottom: 1px solid lightgrey; border-bottom: 1px solid var(--color-lines);
} }
body nav * { body nav * {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin: auto; margin: auto;
} height: 100%;
body nav .nav_left, body nav .nav_right {
margin: 2px auto;
} }
/* nav_left is used for links to pages*/ /* nav_left is used for links to pages*/
body nav .nav_left { body nav .nav_left {
margin-left: 2px; margin-left: 0px;
padding-left: 20px;
padding-right: 20px;
} }
body nav .nav_left a { body nav .nav_left a {
height: 100%; padding: 0px 20px;
margin: auto 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 { 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*/ /* nav_right is used for actions such as connection, search or language*/
body nav .nav_right { body nav .nav_right {
margin-right: 2px; margin-right: 2px;
} }
/* links looks on hover or click*/ body nav .nav_right img.flag {
body nav a:hover, body nav a:focus { height: calc(var(--nav-height) / 2);
background-color: lightgrey;
} }

16
styles/skeleton.css vendored
View File

@@ -62,7 +62,7 @@ html {
/*BODY*/ /*BODY*/
/* the page is designed for a maximum screen*/ /* the page is designed for a maximum screen*/
body { body {
background-color: var(--base-back-color); background-color: var(--color-back-base);
} }
/*NAVBAR*/ /*NAVBAR*/
@@ -70,7 +70,7 @@ body nav {
flex-direction: row; flex-direction: row;
/*we have to set the height to use the height % for childs elements*/ /*we have to set the height to use the height % for childs elements*/
height: var(--nav-height); height: var(--nav-height);
background-color: var(--base-back-color); background-color: var(--color-back-base);
z-index: 10; z-index: 10;
} }
@@ -96,7 +96,7 @@ body aside.page_content .table_box {
box-sizing: border-box; box-sizing: border-box;
padding: var(--gap-unit); padding: var(--gap-unit);
/*for style*/ /*for style*/
border-left: 1px solid lightgrey; border-left: 1px solid var(--color-lines);
} }
/*to put space between elements*/ /*to put space between elements*/
body aside.page_content .table_box > * { body aside.page_content .table_box > * {
@@ -111,11 +111,11 @@ body main > * {
} }
body main h1 { body main h1 {
padding: 70px 0px; padding: 70px 0px;
border-bottom: 1px solid lightgrey; border-bottom: 1px solid var(--color-lines);
} }
body main h2 { body main h2 {
padding: 10px 0px; padding: 10px 0px;
border-bottom: 1px solid lightgrey; border-bottom: 1px solid var(--color-lines);
} }
/*TITLE*/ /*TITLE*/
@@ -140,10 +140,10 @@ body aside.relative_content .relative_box {
margin: var(--aside-margin); margin: var(--aside-margin);
padding: var(--gap-unit); padding: var(--gap-unit);
width: fit-content; width: fit-content;
border: 1px solid lightgrey; border: 1px solid var(--color-lines);
} }
body aside.relative_content .box_name { body aside.relative_content .box_name {
border-bottom: 1px solid lightgrey; border-bottom: 1px solid var(--color-lines);
padding-bottom: var(--gap-unit); padding-bottom: var(--gap-unit);
} }
body aside.relative_content .relative_box > * { body aside.relative_content .relative_box > * {
@@ -153,7 +153,7 @@ body aside.relative_content .relative_box > * {
/*FOOTER*/ /*FOOTER*/
body footer.page_footer { body footer.page_footer {
height: 100px; height: 100px;
border-top: 1px solid lightgrey; border-top: 1px solid var(--color-lines);
} }

1
styles/text.css
View File

@@ -28,6 +28,7 @@ p a:hover {
p a:active { p a:active {
color: var(--color-link-active); color: var(--color-link-active);
} }
/*color text*/
p, span { p, span {
color: var(--color-text); color: var(--color-text);
} }