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>
<nav class="sticky">
<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/litterall.html"><p>LITTER<i>all</i></p></a>
<a href="./pages/lettredeeda.html"><p>l.e.a</p></a>
<a href="./pages/evenements.html"><p>evenements</p></a>
</div>
<div class="nav_right">
<img class="flag" src="./docs/nav/flag_fr_mini.png" alt="drapeau langue"></a>
</div>
</nav>
<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-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;

30
styles/nav.css
View File

@@ -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);
}

16
styles/skeleton.css vendored
View File

@@ -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);
}

1
styles/text.css
View File

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