Browse Source

Amélioration toc pour mobile

presse
Norore 3 years ago
parent
commit
c502c5d37e
  1. 6
      source/_toc_presse.erb
  2. 5
      source/presse.html.erb
  3. 44
      source/stylesheets/presse.css.scss

6
source/_toc_presse.erb

@ -1,4 +1,6 @@
<div class="toc">
<nav class="toc" role="navigation">
<input type="checkbox" id="button" class="menu">
<label for="button" class="menu" onclick></label>
<strong>Sommaire&nbsp;:</strong>
<ul class="unstyled">
@ -11,4 +13,4 @@
<li><a href="#glossaire">05. Glossaire</a></li>
<li><a href="#presence">06. Présence Presse</a></li>
</ul>
</div>
</nav>

5
source/presse.html.erb

@ -10,13 +10,14 @@ title: Pas Sage en Seine - Dossier de presse
</header>
<div class="flex-container content">
<div class="w20 pal">
<div class="w20 pal txtleft">
<%= partial '_toc_presse' %>
</div>
<div class="w50 center pal">
<%= partial '_dossier_presse' %>
</div>
<div class="w20 pal txtright">
<%= partial '_toc_presse' %>
</div>
</div>

44
source/stylesheets/presse.css.scss

@ -108,12 +108,18 @@ nav[role="navigation"] label.menu {
padding: .5em;
}
}
:target:before {
content: "";
display: block;
height: 8rem; /* fixed header height*/
margin: -8rem 0 0; /* negative fixed header height */
}
}
div.toc {
nav.toc {
font-size: 1.5rem;
position: sticky;
top: 5rem;
top: 7rem;
right: 0;
}
@ -121,41 +127,45 @@ div.toc {
@media screen and (max-width: 800px) {
html, body {
margin: 0;
header .brand {
font-size: 1.5rem;
}
}
nav[role="navigation"] a {
nav[role="navigation"] ul,
nav[role="navigation"] strong {
display: none;
}
nav[role="navigation"] label.menu {
display: inline;
width: 100%;
margin-top: .5rem;
margin-top: 0rem;
margin-left: 1.5rem;
}
nav[role="navigation"] label.menu:after {
nav[role="navigation"] label.menu:before {
position: absolute;
right: 1.5rem;
top: 1.5rem;
left: 0rem;
top: 0rem;
content: "\2261";
}
nav[role="navigation"] input[type=checkbox].menu:checked ~ label:after {
nav[role="navigation"] input[type=checkbox].menu:checked ~ label:before {
content: "\203A";
}
nav[role="navigation"] input[type=checkbox].menu:checked ~ a {
nav[role="navigation"] input[type=checkbox].menu:checked ~ ul,
nav[role="navigation"] input[type=checkbox].menu:checked ~ strong {
display: block;
font-size: 1.5rem;
background-color: $bg;
color: $text;
}
.w50, .w60 {
width: 90%;
}
.w20 {
width: 40%;
}
.pal {
padding: 1rem;
}
.content {
min-height: 100vh;
padding-top: 10rem;
padding-top: 7rem;
&:nth-child(even) {
background-color: $bg;
@ -191,4 +201,10 @@ div.toc {
}
}
}
nav.toc {
position: fixed;
font-size: 1.5rem;
top: 7rem;
left: .5rem;
}
}
Loading…
Cancel
Save