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

navbar en iframe ok

Browse Source
This commit is contained in:
ethylotest
2021-03-22 14:48:17 +01:00
parent b81b2a0023
commit 13f2418356
12 changed files with 120 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
fr/actualites.html Normal file
View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>kosmopolit - actualités</title>
<base href="../"/>
<meta name="description" content="description du site web">
<meta name="keywords" content="truc, bidule, chouette">
<link href="./styles/style.css" type="text/css" rel="stylesheet">
<link href="./styles/actualites.css" type="text/css" rel="stylesheet">
</head>
<body>
<nav class="sticky">
<iframe src="./fr/navbar.html"></iframe>
</nav>
<div class="container_main">
<aside class="aside_left sticky">
<div class="table_box"> <!-- container use to adjust padding -->
<h2>sommaire</h2>
<a href="./fr/actualites.html#anchor_actualites"><p>actualités</p></a>
</div>
</aside>
<main>
<div class="page_title">
<h1 id="anchor_actualites">actualités</h1>
</div>
<div class="quote">
</main>
<aside class="aside_right">
<div class="relative_box">
</div>
</aside>
</div>
<footer class="page_footer">
</footer>
</body>
</html>

69
fr/evenements.html
View File

@@ -1,69 +0,0 @@
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>kosmopolit - evenements</title>
<base href="../"/>
<meta name="description" content="description du site web">
<meta name="keywords" content="truc, bidule, chouette">
<link href="./styles/style.css" type="text/css" rel="stylesheet">
<link href="./styles/evenements.css" type="text/css" rel="stylesheet">
</head>
<body>
<nav class="sticky">
<div class="nav_left">
<a id="nav_logo" href="index.html"><img src="./docs/nav/kosmopolit_logo_mini.png" alt="logo kosmopolit"></a>
<a href="./fr/kosmopolit.html"><p>kosmopolit</p></a>
<a href="./fr/litterall.html"><p>LITTER<i>all</i></p></a>
<a href="./fr/lettres.html"><p>l.e.a</p></a>
<a href="./fr/evenements.html"><p>evenements</p></a>
</div>
<div class="nav_right">
<div class="dropdown">
<a class="drop_title drop horizontal" tabindex="0">
<img class="flag" src="./docs/nav/flag_fr_mini.png" alt="drapeau francais">
<p>fr</p>
</a>
<div class="drop_items">
<a class="drop horizontal" href="./en/litterall.html">
<img class="flag" src="./docs/nav/flag_en_mini.png" alt="English flag">
<p>en</p>
</a>
<a class="drop horizontal" href="./de/litterall.html">
<img class="flag" src="./docs/nav/flag_de_mini.png" alt="Deutsche Flagge">
<p>de</p>
</a>
</div>
</div>
</div>
</nav>
<div class="container_main">
<aside class="aside_left sticky">
<div class="table_box"> <!-- container use to adjust padding -->
<h2>sommaire</h2>
<a href="./fr/evenements.html#anchor_evenements"><p>evenements</p></a>
</div>
</aside>
<main>
<div class="page_title">
<h1 id="anchor_evenements">evenements</h1>
</div>
<div class="quote">
</main>
<aside class="aside_right">
<div class="relative_box">
</div>
</aside>
</div>
<footer class="page_footer">
</footer>
</body>
</html>

26
fr/kosmopolit.html
View File

@@ -12,31 +12,7 @@
</head> </head>
<body> <body>
<nav class="sticky"> <nav class="sticky">
<div class="nav_left"> <iframe src="./fr/navbar.html"></iframe>
<a id="nav_logo" href="index.html"><img src="./docs/nav/kosmopolit_logo_mini.png" alt="logo kosmopolit"></a>
<a href="./fr/kosmopolit.html"><p>kosmopolit</p></a>
<a href="./fr/litterall.html"><p>LITTER<i>all</i></p></a>
<a href="./fr/lettres.html"><p>l.e.a</p></a>
<a href="./fr/evenements.html"><p>evenements</p></a>
</div>
<div class="nav_right">
<div class="dropdown">
<a class="drop_title drop horizontal" tabindex="0">
<img class="flag" src="./docs/nav/flag_fr_mini.png" alt="drapeau francais">
<p>fr</p>
</a>
<div class="drop_items">
<a class="drop horizontal" href="./en/litterall.html">
<img class="flag" src="./docs/nav/flag_en_mini.png" alt="English flag">
<p>en</p>
</a>
<a class="drop horizontal" href="./de/litterall.html">
<img class="flag" src="./docs/nav/flag_de_mini.png" alt="Deutsche Flagge">
<p>de</p>
</a>
</div>
</div>
</div>
</nav> </nav>
<div class="container_main"> <div class="container_main">

26
fr/lettres.html
View File

@@ -12,31 +12,7 @@
</head> </head>
<body> <body>
<nav class="sticky"> <nav class="sticky">
<div class="nav_left"> <iframe src="./fr/navbar.html"></iframe>
<a id="nav_logo" href="index.html"><img src="./docs/nav/kosmopolit_logo_mini.png" alt="logo kosmopolit"></a>
<a href="./fr/kosmopolit.html"><p>kosmopolit</p></a>
<a href="./fr/litterall.html"><p>LITTER<i>all</i></p></a>
<a href="./fr/lettres.html"><p>l.e.a</p></a>
<a href="./fr/evenements.html"><p>evenements</p></a>
</div>
<div class="nav_right">
<div class="dropdown">
<a class="drop_title drop horizontal" tabindex="0">
<img class="flag" src="./docs/nav/flag_fr_mini.png" alt="drapeau francais">
<p>fr</p>
</a>
<div class="drop_items">
<a class="drop horizontal" href="./en/litterall.html">
<img class="flag" src="./docs/nav/flag_en_mini.png" alt="English flag">
<p>en</p>
</a>
<a class="drop horizontal" href="./de/litterall.html">
<img class="flag" src="./docs/nav/flag_de_mini.png" alt="Deutsche Flagge">
<p>de</p>
</a>
</div>
</div>
</div>
</nav> </nav>
<div class="container_main"> <div class="container_main">

26
fr/litterall.html
View File

@@ -12,31 +12,7 @@
</head> </head>
<body> <body>
<nav class="sticky"> <nav class="sticky">
<div class="nav_left"> <iframe src="./fr/navbar.html"></iframe>
<a id="nav_logo" href="index.html"><img src="./docs/nav/kosmopolit_logo_mini.png" alt="logo kosmopolit"></a>
<a href="./fr/kosmopolit.html"><p>kosmopolit</p></a>
<a href="./fr/litterall.html"><p>LITTER<i>all</i></p></a>
<a href="./fr/lettres.html"><p>l.e.a</p></a>
<a href="./fr/evenements.html"><p>evenements</p></a>
</div>
<div class="nav_right">
<div class="dropdown">
<a class="drop_title drop horizontal" tabindex="0">
<img class="flag" src="./docs/nav/flag_fr_mini.png" alt="drapeau francais">
<p>fr</p>
</a>
<div class="drop_items">
<a class="drop horizontal" href="./en/litterall.html">
<img class="flag" src="./docs/nav/flag_en_mini.png" alt="English flag">
<p>en</p>
</a>
<a class="drop horizontal" href="./de/litterall.html">
<img class="flag" src="./docs/nav/flag_de_mini.png" alt="Deutsche Flagge">
<p>de</p>
</a>
</div>
</div>
</div>
</nav> </nav>
<div class="container_main"> <div class="container_main">

27
fr/litterall/litterall_26.html
View File

@@ -18,32 +18,9 @@
<body> <body>
<nav class="sticky"> <nav class="sticky">
<div class="nav_left"> <iframe src="./fr/navbar.html"></iframe>
<a id="nav_logo" href="index.html"><img src="./docs/nav/kosmopolit_logo_mini.png" alt="logo kosmopolit"></a>
<a href="./fr/kosmopolit.html"><p>kosmopolit</p></a>
<a href="./fr/litterall.html"><p>LITTER<i>all</i></p></a>
<a href="./fr/lettres.html"><p>l.e.a</p></a>
<a href="./fr/evenements.html"><p>evenements</p></a>
</div>
<div class="nav_right">
<div class="dropdown">
<a class="drop_title drop horizontal" tabindex="0">
<img class="flag" src="./docs/nav/flag_fr_mini.png" alt="drapeau francais">
<p>fr</p>
</a>
<div class="drop_items">
<a class="drop horizontal" href="./en/litterall.html">
<img class="flag" src="./docs/nav/flag_en_mini.png" alt="English flag">
<p>en</p>
</a>
<a class="drop horizontal" href="./de/litterall.html">
<img class="flag" src="./docs/nav/flag_de_mini.png" alt="Deutsche Flagge">
<p>de</p>
</a>
</div>
</div>
</div>
</nav> </nav>
<div class="container_main"> <div class="container_main">
<aside class="aside_left sticky"> <aside class="aside_left sticky">

27
fr/litterall/litterall_27.html
View File

@@ -18,32 +18,9 @@
<body> <body>
<nav class="sticky"> <nav class="sticky">
<div class="nav_left"> <iframe src="./fr/navbar.html"></iframe>
<a id="nav_logo" href="index.html"><img src="./docs/nav/kosmopolit_logo_mini.png" alt="logo kosmopolit"></a>
<a href="./fr/kosmopolit.html"><p>kosmopolit</p></a>
<a href="./fr/litterall.html"><p>LITTER<i>all</i></p></a>
<a href="./fr/lettres.html"><p>l.e.a</p></a>
<a href="./fr/evenements.html"><p>evenements</p></a>
</div>
<div class="nav_right">
<div class="dropdown">
<a class="drop_title drop horizontal" tabindex="0">
<img class="flag" src="./docs/nav/flag_fr_mini.png" alt="drapeau francais">
<p>fr</p>
</a>
<div class="drop_items">
<a class="drop horizontal" href="./en/litterall.html">
<img class="flag" src="./docs/nav/flag_en_mini.png" alt="English flag">
<p>en</p>
</a>
<a class="drop horizontal" href="./de/litterall.html">
<img class="flag" src="./docs/nav/flag_de_mini.png" alt="Deutsche Flagge">
<p>de</p>
</a>
</div>
</div>
</div>
</nav> </nav>
<div class="container_main"> <div class="container_main">
<aside class="aside_left sticky"> <aside class="aside_left sticky">

38
fr/navbar.html Normal file
View File

@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="../"/>
<link href="./styles/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="navbar">
<div class="nav_left">
<a id="nav_logo" href="index.html" target="_parent"><img src="./docs/nav/kosmopolit_logo_mini.png" alt="logo kosmopolit"></a>
<a href="./fr/kosmopolit.html" target="_parent"><p>KOSMOPOLIT</p></a>
<a href="./fr/litterall.html" target="_parent"><p>LITTER<i>all</i></p></a>
<a href="./fr/lettres.html" target="_parent"><p>l.e.a</p></a>
<a href="./fr/actualites.html" target="_parent"><p>actualités</p></a>
</div>
<div class="nav_right">
<div class="dropdown">
<a class="drop_title drop horizontal" tabindex="0" target="_parent">
<img class="flag" src="./docs/nav/flag_fr_mini.png" alt="drapeau francais">
<p>fr</p>
</a>
<div class="drop_items">
<a class="drop horizontal" href="./en/litterall.html" target="_parent">
<img class="flag" src="./docs/nav/flag_en_mini.png" alt="English flag">
<p>en</p>
</a>
<a class="drop horizontal" href="./de/litterall.html" target="_parent">
<img class="flag" src="./docs/nav/flag_de_mini.png" alt="Deutsche Flagge">
<p>de</p>
</a>
</div>
</div>
</div>
</div>
</body>
</html>

28
fr/publications/traduire_retraduire.html
View File

@@ -11,33 +11,11 @@
<link href="./styles/traduire_retraduire.css" type="text/css" rel="stylesheet"> <link href="./styles/traduire_retraduire.css" type="text/css" rel="stylesheet">
</head> </head>
<body> <body>
<nav class="sticky"> <nav class="sticky">
<div class="nav_left"> <iframe src="./fr/navbar.html"></iframe>
<a id="nav_logo" href="index.html"><img src="./docs/nav/kosmopolit_logo_mini.png" alt="logo kosmopolit"></a>
<a href="./fr/kosmopolit.html"><p>kosmopolit</p></a>
<a href="./fr/litterall.html"><p>LITTER<i>all</i></p></a>
<a href="./fr/lettres.html"><p>l.e.a</p></a>
<a href="./fr/evenements.html"><p>evenements</p></a>
</div>
<div class="nav_right">
<div class="dropdown">
<a class="drop_title drop horizontal" tabindex="0">
<img class="flag" src="./docs/nav/flag_fr_mini.png" alt="drapeau francais">
<p>fr</p>
</a>
<div class="drop_items">
<a class="drop horizontal" href="./en/litterall.html">
<img class="flag" src="./docs/nav/flag_en_mini.png" alt="English flag">
<p>en</p>
</a>
<a class="drop horizontal" href="./de/litterall.html">
<img class="flag" src="./docs/nav/flag_de_mini.png" alt="Deutsche Flagge">
<p>de</p>
</a>
</div>
</div>
</div>
</nav> </nav>
<div class="container_main"> <div class="container_main">
<aside class="aside_left sticky"> <aside class="aside_left sticky">

0
styles/evenements.css → styles/actualites.css
View File

43
styles/nav.css
View File

@@ -1,38 +1,41 @@
/*---------------------------------------------*/ /*---------------------------------------------*/
/*NAVBAR*/ /*NAVBAR*/
nav { .navbar {
border-bottom: 1px solid var(--color-lines-4); flex-direction: row;
/*we have to set the height to use the height % for childs elements*/
height: var(--nav-height);
background-color: var(--color-back-base);
} }
nav * { .navbar * {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin: auto; margin: auto;
height: 100%; height: 100%;
} }
/* nav_left is used for links to pages*/ /* nav_left is used for links to pages*/
nav .nav_left { .navbar .nav_left {
margin-left: 0px; margin-left: 0px;
} }
nav .nav_left a { .navbar .nav_left a {
padding: 0px 20px; padding: 0px 20px;
} }
nav .nav_left #nav_logo { .navbar .nav_left #nav_logo {
padding-left: 40px; padding-left: 40px;
padding-right: 40px; padding-right: 40px;
} }
nav a p { .navbar a p {
/*to center vertically the text*/ /*to center vertically the text*/
height: auto; height: auto;
} }
nav .nav_left img { .navbar .nav_left img {
height: calc(100% - 4px); height: calc(100% - 4px);
} }
nav a:not(#nav_logo):hover, nav a:not(#nav_logo):focus { .navbar a:not(#nav_logo):hover, nav a:not(#nav_logo):focus {
background-color: var(--color-back-dark); 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*/
nav .nav_right { .navbar .nav_right {
margin-right: 2px; margin-right: 2px;
} }
@@ -50,17 +53,17 @@ nav .nav_right {
.drop .drop
.drop .drop
*/ */
nav .nav_right .dropdown { .navbar .nav_right .dropdown {
position: relative; position: relative;
height: 100%; height: 100%;
flex-direction: column; flex-direction: column;
} }
nav .nav_right .dropdown .drop { .navbar .nav_right .dropdown .drop {
position: relative; position: relative;
padding: 0px 20px; padding: 0px 20px;
background-color: var(--color-back-base); background-color: var(--color-back-base);
} }
nav .nav_right .dropdown .drop_items { .navbar .nav_right .dropdown .drop_items {
position: absolute; position: absolute;
top: 100%; top: 100%;
left: 0px; left: 0px;
@@ -69,23 +72,23 @@ nav .nav_right .dropdown .drop_items {
display: none; display: none;
} }
/* horizontal space between flag and name*/ /* horizontal space between flag and name*/
nav .nav_right .dropdown .drop > * { .navbar .nav_right .dropdown .drop > * {
margin: auto 3px; margin: auto 3px;
} }
/*flag size*/ /*flag size*/
nav .nav_right .dropdown img.flag { .navbar .nav_right .dropdown img.flag {
height: 12px; height: 12px;
} }
/*flag size*/ /*flag size*/
nav .nav_right .dropdown .drop p { .navbar .nav_right .dropdown .drop p {
font-size: 1.6em; font-size: 1.6em;
} }
/*the menu appears when focus on an element inside*/ /*the menu appears when focus on an element inside*/
nav .nav_right .dropdown:focus-within * { .navbar .nav_right .dropdown:focus-within * {
display: flex; display: flex;
} }
/*a rectangle cover the div when focus, so you can click on it to unfocus*/ /*a rectangle cover the div when focus, so you can click on it to unfocus*/
nav .nav_right .dropdown:focus-within:after { .navbar .nav_right .dropdown:focus-within:after {
content: ""; content: "";
position: absolute; position: absolute;
top: 0px; top: 0px;
@@ -94,7 +97,7 @@ nav .nav_right .dropdown:focus-within:after {
height: 100%; height: 100%;
} }
/*the little arrow point down*/ /*the little arrow point down*/
nav .nav_right .dropdown .drop_title:after { .navbar .nav_right .dropdown .drop_title:after {
content: "▼"; /* ▲ */ content: "▼"; /* ▲ */
content: "v"; content: "v";
position: absolute; position: absolute;
@@ -103,7 +106,7 @@ nav .nav_right .dropdown .drop_title:after {
transform: translateY(-50%); transform: translateY(-50%);
} }
/*the little arrow point up*/ /*the little arrow point up*/
nav .nav_right .dropdown .drop_title:focus:after { .navbar .nav_right .dropdown .drop_title:focus:after {
transform: rotate(180deg) translateY(20%); transform: rotate(180deg) translateY(20%);
} }

4
styles/skeleton.css vendored
View File

@@ -21,6 +21,10 @@ nav {
height: var(--nav-height); height: var(--nav-height);
background-color: var(--color-back-base); background-color: var(--color-back-base);
z-index: 10; z-index: 10;
border-bottom: 1px solid var(--color-lines-4);
}
nav iframe {
width: 100%;
} }
.container_main { .container_main {
flex-direction: row; flex-direction: row;