Sidebar style (#159)

* Remove styleguide background color

* Remove sidebar watcher

* Remove useless content on homepage

* Add style guardrails on homepage

* Remove hero 100% height rule

* Reorganize page layout around a grid using a sticky menu

* Better view .highlight~ed code

* uPdAtE BrOwSerLiSt GnEu gNeU gNeu

site/content/pages/accueil/index.md

@@ -133,6 +133,8 @@ menu: "pages"
     </aside>
 </section>
 
+<div class="content">
+
 ## Après (nouveau)
 
 Après la conférence
@@ -189,27 +191,6 @@ Après la conférence
 </section>
 ```
 
-## Orateurs
-
-Pendant la conférence
-
-```php
-	<section class="s-speakers s-speakers-widget l-groundZero l-block l-third" aria-labelledby="speakers">
-	  <article>
-		<h2 id="speakers">Les orateurs 2016</h2>
-		<a href="template.php?version=<?php echo $_GET['version']?>&template=liste-orateur&periode=<?php echo $_GET['periode']?>">Voir tous les orateurs</a>
-		<ul>
-      <?php foreach ($selection_orateur as $label_orateur){ ?>
-      <li><dl class="clearfix speaker">
-        <a href="template.php?version=<?php echo $_GET['version']?>&template=detail-orateur&periode=<?php echo $_GET['periode']?>&orateur=<?php echo $label_orateur;?>"><img src="<?php echo get_photo_orateur($label_orateur)?>" width="130" height="130" alt="">
-        <?php echo $liste_orateur[$label_orateur]['nom'];?></a>
-      </li>
-      <?php } ?>
-      </ul>
-	  </article>
-	</section>
-```
-
 ## Actualités
 
 Pendant la conférence
@@ -219,3 +200,5 @@ Pendant la conférence
 … et bien d’autres mais on ne remettra que celles que l’on garde !
 
 Voir [le template commencé pour 2017](https://github.com/Paris-Web/pw-2017/blob/d88ab54bc77372ea3c994b6d93f4ac6089767803/template2017/page_accueil.php)
+
+</div>

src/css/modules/hero.css

@@ -13,7 +13,6 @@
   background-size: cover;
   box-sizing: border-box;
   padding: calc(var(--hero-padding)) 0 calc(var(--hero-padding) + var(--arrow-width));
-  height: 100%;
   min-height: 50vh;
   overflow: hidden;
 }

src/css/pages/layout.css

@@ -346,6 +346,12 @@ body.is-menu-opened {
 }
 
 @media screen and (min-width: 68em) {
+  body {
+    display: grid;
+    width: 100vw;
+    grid-template-columns: 1fr 4fr;
+  }
+
   .header {
     display: none;
   }
@@ -356,6 +362,10 @@ body.is-menu-opened {
     pointer-events: all;
     width: auto;
     visibility: visible;
+    height: 100vh;
+    position: sticky;
+    top: 0;
+    bottom: 0;
   }
   .menu__overlay {
     display: none;
@@ -375,9 +385,8 @@ body.is-menu-opened {
     text-align: center;
   }
   .main {
-    margin-left: 20vw;
-    margin-left: calc(20vw - 1px);
     min-height: 100vh;
+    width: 100%;
   }
 
   .content {
@@ -394,13 +403,7 @@ body.is-menu-opened {
     padding-top: calc(7vh + 1.2em);
   }
 
-  body {
-    position: relative;
-    overflow-y: scroll;
-  }
-  body.is-footer-visible .nav .menu {
-    position: absolute;
-    top: auto;
-    bottom: 0;
+  .footer {
+    grid-column: span 2;
   }
 }

src/css/styleguide/main.css

@@ -12,8 +12,8 @@
 @import "./content/modules/sidebar.css";
 @import "./content/modules/header.css";
 
-/* main.css override */
-
-:root {
-  --color-background-page: var(--color-ui-02);
+/* code samples */
+.highlight, .highlight pre {
+  overflow: scroll;
+  background: var(--color-ui-02) !important;
 }

src/js/pages/nav.js

@@ -151,27 +151,8 @@ const listenIntersection = (element, callback) => {
   });
 };
 
-const listenFooterPosition = () => {
-  const footer = document.querySelector("#footer");
-  const menu = document.querySelector("#menu");
-
-  if (footer) {
-    listenIntersection(footer, entry => {
-      requestAnimationFrame(() => {
-        if (entry.isIntersecting) {
-          document.body.classList.add("is-footer-visible");
-          menu.style.bottom = `${footer.getBoundingClientRect().height}px`;
-        } else {
-          document.body.classList.remove("is-footer-visible");
-        }
-      });
-    });
-  }
-};
-
 const initNavigation = () => {
   listenButtons();
-  listenFooterPosition();
 };
 
 export default initNavigation;