templates: use class to apply layout $width (#82599)

static/includes/_layout.scss

@@ -44,21 +44,18 @@ div#page main {
 	width: 100%;
 }
 
-div#header,
-div#nav,
-div#footer,
-div#main-content-wrapper,
 .page-width,
-.header-width {
+.header-width,
+.nav-width,
+.footer-width {
 	clear: both;
 	max-width: $width;
 	margin: 0 auto;
 }
 
 @if ($mobile-width) {
-    div#footer,
-    div#main-content-wrapper,
-    .page-width {
+    .page-width,
+    .footer-width {
 		@media ($max-mobile-viewport) {
 			max-width: $mobile-width;
         }

templates/includes/nav.html

@@ -3,7 +3,7 @@
 <nav role="navigation" class="site-nav">
   <div id="nav-wrapper" class="gru-nav-wrapper">
     {% block nav-pre %}{% endblock %}
-    <div id="nav" class="gru-nav">
+    <div id="nav" class="nav-width gru-nav">
       {% block nav-top %}{% endblock %}
       <button id="nav-button" class="gru-nav-button" aria-labelledby="nav-button--label">
         <span class="sr-only" id="nav-button--label">Ouvrir le menu</span>

templates/theme.html

@@ -55,7 +55,7 @@
       <header role="banner" class="site-header">
         <div id="header-wrapper" >
           {% block header-pre %}{% endblock %}
-          <div id="header">
+          <div id="header" class="header-width">
             {% block header-top %}{% endblock %}
             <div id="top">
               {% block header-title %}
@@ -82,7 +82,7 @@
       {% endblock %}
 
       <main role="main">
-        <div id="main-content-wrapper">
+        <div id="main-content-wrapper" class="page-width">
           <div id="main-content">
 
             {% block content-messages %}
@@ -115,7 +115,7 @@
       <footer role="contentinfo">
         {% block footer-pre %}{% endblock %}
         <div id="footer-wrapper">
-          <div id="footer" class="clearfix">
+          <div id="footer" class="footer-width clearfix">
             {% block footer-top %}{% endblock %}
             {% block footer %}
               <p id="legal">Copyright © 2005-2016 Entr'ouvert</p>