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

page kosmopolit burger en croix

Browse Source
This commit is contained in:
hugogogo
2021-04-23 15:51:49 +02:00
parent 58ff636065
commit 2a4621215e
2 changed files with 20 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
fr/kosmopolit.html
View File

@@ -15,7 +15,8 @@
<nav class="navbar sticky"> <nav class="navbar sticky">
<label for="burger" class="burger"></label><input type="checkbox" id="burger"> <input type="checkbox" id="burger">
<label for="burger" class="burger"></label>
<div class="nav_left"> <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 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/kosmopolit.html" target="_parent"><p>KOSMOPOLIT</p></a>

18
styles/media.css
View File

@@ -74,16 +74,34 @@
height: 2px; height: 2px;
border-top: 2px solid var(--color-grey-dark); border-top: 2px solid var(--color-grey-dark);
} }
nav.navbar #burger:checked + .burger {
cursor: default;
}
nav.navbar #burger:checked ~ .nav_right { nav.navbar #burger:checked ~ .nav_right {
display: flex; display: flex;
} }
nav.navbar #burger:checked ~ .nav_left a { nav.navbar #burger:checked ~ .nav_left a {
display: flex; display: flex;
} }
nav.navbar #burger:checked ~ .nav_left a:not(#nav_logo) {
height: 50px;
}
nav.navbar #burger:checked ~ .nav_left a#nav_logo { nav.navbar #burger:checked ~ .nav_left a#nav_logo {
display: flex; display: flex;
margin-bottom: 40px; margin-bottom: 40px;
} }
nav.navbar #burger:checked + .burger::before {
transform: rotate(40deg);
top: 18px;
right: 21px;
height: 2px;
border-bottom: none;
}
nav.navbar #burger:checked + .burger::after {
transform: rotate(-40deg);
}
nav.navbar .burger:checked::after {
}
/*MAIN*/ /*MAIN*/
main { main {
max-width: 90%; max-width: 90%;