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

navbar mise en page

Browse Source
This commit is contained in:
hugogogo
2021-03-01 21:09:31 +01:00
parent 41d4a450c8
commit c20d3867f8
4 changed files with 56 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
index.html
View File

@@ -12,22 +12,8 @@
</style> </style>
</head> </head>
<body> <body>
<div id="main"> <main class="index">
<img class="contain" src="./docs/kosmopolit_fond.png"> <img src="./docs/kosmopolit_logo.png">
<div class="container-link"> </main>
<a class="link-index container-link-asso" href="./pages/asso.html">
<div class="dot-link dot-link-asso"></div>
<h1 class="menu-link link-asso">KOSMOPOLIT l'association</h1>
</a>
<a class="link-index container-link-litterall" href="./pages/litterall.html">
<div class="dot-link dot-link-litterall"></div>
<h1 class="menu-link link-litterall">LITTERall</h1>
</a>
<a class="link-index container-link-lettredeeda" href="./pages/lettredeeda.html">
<div class="dot-link dot-link-lettredeeda"></div>
<h1 class="menu-link link-lettredeeda">lettres d'europe et d'ailleurs</h1>
</a>
</div>
</div>
</body> </body>
</html> </html>

12
pages/litterall.html
View File

@@ -12,10 +12,14 @@
</head> </head>
<body> <body>
<nav class="sticky"> <nav class="sticky">
<p><a href=""><img src="./docs/kosmopolit_fond.png" alt="logo kosmopolit"></a></p> <div class="nav_left">
<p><a href="">kosmopolit</a></p> <a class="nav_logo" href=""><img src="./docs/kosmopolit_fond.png" alt="logo kosmopolit"></a>
<p><a href="">litterall</a></p> <a href=""><p>kosmopolit</p></a>
<p><a href="">l.e.a</a></p> <a href=""><p>litterall</p></a>
<a href=""><p>l.e.a</p></a>
</div>
<div class="nav_right">
</div>
</nav> </nav>
<div class="container_main"> <div class="container_main">
<aside class="page_content sticky"> <aside class="page_content sticky">

48
styles/global.css
View File

@@ -6,6 +6,8 @@
--base-font-size: 10px; --base-font-size: 10px;
--nav-height: 40px; --nav-height: 40px;
--base-back-color: white; --base-back-color: white;
--aside-left-width: 200px;
--aside-right-width: 350px;
} }
@@ -60,7 +62,7 @@ body, body * {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
body > *:not(.container_main), aside, main { body aside, body main {
padding: calc(var(--gap-unit) / 2); padding: calc(var(--gap-unit) / 2);
} }
@@ -82,21 +84,43 @@ body {
/*NAVBAR*/ /*NAVBAR*/
body nav { body nav {
flex-direction: row; flex-direction: row;
/*we have to set the height to use the height % for childs elements*/
height: var(--nav-height); height: var(--nav-height);
border-bottom: 1px solid lightgrey; border-bottom: 1px solid lightgrey;
background-color: var(--base-back-color); background-color: var(--base-back-color);
z-index: 10; z-index: 10;
} }
body nav *:first-child {
margin-left: var(--gap-unit);
padding-left: 0px;
}
body nav > * {
margin: auto 20px;
padding: 0px 10px;
}
body nav * { body nav * {
max-height: var(--nav-height); display: flex;
flex-direction: row;
margin: auto;
max-height: 100%;
}
/*nav_left is used for links to pages*/
body nav .nav_left {
/*we have to set the height to use the height % for childs elements*/
height: 100%;
margin-left: 0px;
margin-right: auto;
}
/*nav_right is used for actions such as connection, search or language*/
body nav .nav_right {
height: 100%;
margin-left: auto;
margin-right: 0px;
}
/*appearence on hover and click*/
body nav a {
padding: 0px 20px;
height: 100%;
}
body nav a:hover, body nav a:focus {
background-color: lightgrey;
}
/*special settings for the logo*/
body nav a.nav_logo {
padding: 0px;
width: var(--aside-left-width);
} }
/*CONTAINER*/ /*CONTAINER*/
@@ -115,7 +139,7 @@ body aside.page_content > * {
} }
/* asides elements only have width if they have a child*/ /* asides elements only have width if they have a child*/
body aside.page_content *:first-child { body aside.page_content *:first-child {
width: 150px; width: 200px;
} }
/*MAIN*/ /*MAIN*/
@@ -154,7 +178,7 @@ body aside.relative_content {
} }
/* asides elements only have width if they have a child*/ /* asides elements only have width if they have a child*/
body aside.relative_content *:first-child { body aside.relative_content *:first-child {
width: 200px; width: 350px;
} }
/*FOOTER*/ /*FOOTER*/

76
styles/index.css
View File

@@ -1,76 +1,18 @@
/*//////////////////////*/ /*------------------------------------------*/
/*IMAGE*/ /*IMAGE*/
#main { body main.index {
position: relative; position: relative;
height: 100vh; height: 100vh;
width: 100vw; width: 100vw;
padding: 0px;
margin: 0px;
} }
img { body main.index img {
width: 100%; margin: 0px;
height: 100%; padding: 0px;
} max-width: 100vw;
.contain { max-height: 100vh;
object-fit: contain; object-fit: contain;
} }
.cover {
object-fit: cover;
}
/*//////////////////////////*/
/*MENU*/
/*wrapper rectangle qui imite la taille de l'image*/
.container-link {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 880px;
max-width: 100vw;
height: 600px;
/* border: 1px solid red; */
}
/*contain le text et le point (general)*/
.link-index {
position: absolute;
display: flex;
}
.dot-link {
width: 30px;
min-width: 30px;
height: 30px;
margin: auto 10px;
border-radius: 50%;
}
.menu-link {
margin: auto;
}
/*contain le text et le point (specifique)*/
.container-link-asso {
top: 1%;
left: 1%;
}
.dot-link-asso {
background-color: var(--color-purple);
}
/*contain le text et le point (specifique)*/
.container-link-litterall {
bottom: 1%;
left: 70%;
}
.dot-link-litterall {
background-color: var(--color-green);
}
/*contain le text et le point (specifique)*/
.container-link-lettredeeda {
top: 53%;
right: 6%;
}
.dot-link-lettredeeda {
background-color: var(--color-water);
}
.link-lettredeeda {
width: 50px;
}