feature: add a custom container to replace wrapper-backed paddings

scss/_global.scss

@@ -15,6 +15,20 @@ $wrapper-padding: $baselinerem * 3;
 
 // Mixins
 
+@mixin container {
+  max-width: $max-size;
+  margin: auto;
+
+
+  padding-left:$wrapper-padding/2;
+  padding-right:$wrapper-padding/2;
+
+  @include rwd(1300px) {
+    padding-left:$wrapper-padding;
+    padding-right:$wrapper-padding;
+  }
+}
+
 @mixin row() {
   max-width: $max-size;
   margin: auto;
@@ -40,21 +54,17 @@ body {
   flex-direction: column;
 }
 
+// the type of container we use for our theme system
+.container-semifluid {
+  @include container();
+}
+
 
 /* 02.1 - Wrapper et page totale */
 
 #wrapper {
   flex: 1 0 auto;
   background: $background-color url('img/background.png') center bottom repeat-x;
-
-
-  padding-left:$wrapper-padding/2;
-  padding-right:$wrapper-padding/2;
-
-  @include rwd(1300px) {
-    padding-left:$wrapper-padding;
-    padding-right:$wrapper-padding;
-  }
 }
 
 #global-area {
@@ -84,27 +94,6 @@ header h1 {
     margin-bottom: 1.5rem;
 }
 
-.navbar {
-  box-shadow: $large-shadow;
-  @include borders();
-  border-left: 0;
-  border-right: 0;
-  ul {
-    padding-bottom:0;
-  }
-  @include li-no-margin();
-
-    &.navbar-transparent {
-        border: none;
-        box-shadow: none;
-        background-color:transparent;
-    }
-}
-
-.dropdown-menu {
-  box-shadow: $narrow-shadow, $inset-shadow;
-}
-
 /* 02.2 - Main Area */
 
 #page-main {

style.css

@@ -112,7 +112,7 @@
 }
 .bg-yellow {
   background-color: #f6d32d !important;
-  color: #000;
+  color: #FFF;
 }
 .bg-brown {
   background-color: #986a44 !important;
@@ -474,20 +474,25 @@ body {
   flex-direction: column;
 }
 
-/* 02.1 - Wrapper et page totale */
+.container-semifluid {
-#wrapper {
+  max-width: 1600px;
-  flex: 1 0 auto;
+  margin: auto;
-  background: #42a0f3 url("img/background.png") center bottom repeat-x;
   padding-left: 2.25rem;
   padding-right: 2.25rem;
 }
 @media (min-width: 1300pxpx) {
-  #wrapper {
+  .container-semifluid {
     padding-left: 4.5rem;
     padding-right: 4.5rem;
   }
 }
 
+/* 02.1 - Wrapper et page totale */
+#wrapper {
+  flex: 1 0 auto;
+  background: #42a0f3 url("img/background.png") center bottom repeat-x;
+}
+
 #global-area {
   max-width: 1600px;
   margin: auto;
@@ -524,28 +529,6 @@ header h1 {
   margin-bottom: 1.5rem;
 }
 
-.navbar {
-  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
-  border: 1px solid rgba(0, 0, 0, 0.3);
-  border-left: 0;
-  border-right: 0;
-}
-.navbar ul {
-  padding-bottom: 0;
-}
-.navbar li {
-  margin: 0;
-}
-.navbar.navbar-transparent {
-  border: none;
-  box-shadow: none;
-  background-color: transparent;
-}
-
-.dropdown-menu {
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
-}
-
 /* 02.2 - Main Area */
 #page-main {
   max-width: 100%;
@@ -688,11 +671,11 @@ ul.social li a:hover {
 }
 .card-yellow > .card-header, .card-yellow > .card-footer {
   background-color: #f6d32d !important;
-  color: #000;
+  color: #FFF;
 }
 .card-yellow.card-colored > .card-body {
   background-color: #f6d32d !important;
-  color: #000;
+  color: #FFF;
 }
 .card-brown > .card-header, .card-brown > .card-footer {
   background-color: #986a44 !important;
@@ -1176,7 +1159,7 @@ a.list-group-item:hover {
 }
 .btn-yellow {
   background-color: #f6d32d !important;
-  color: #000;
+  color: #FFF;
 }
 .btn-yellow:hover, .btn-yellow:active, .btn-yellow:focus, a:hover > .btn-yellow, a:active > .btn-yellow, a:focus > .btn-yellow, .btn-yellow:not(.disabled):not(:disabled):hover, .btn-yellow:not(.disabled):not(:disabled):active, .btn-yellow:not(.disabled):not(:disabled):focus, a:hover > .btn-yellow:not(.disabled):not(:disabled), a:active > .btn-yellow:not(.disabled):not(:disabled), a:focus > .btn-yellow:not(.disabled):not(:disabled) {
   background-color: #f8dd5e !important;
@@ -1349,7 +1332,7 @@ a.list-group-item:hover {
 }
 .badge-yellow {
   background-color: #f6d32d !important;
-  color: #000;
+  color: #FFF;
 }
 .badge-yellow:hover, .badge-yellow:active, .badge-yellow:focus, a:hover > .badge-yellow, a:active > .badge-yellow, a:focus > .badge-yellow, .badge-yellow:not(.disabled):not(:disabled):hover, .badge-yellow:not(.disabled):not(:disabled):active, .badge-yellow:not(.disabled):not(:disabled):focus, a:hover > .badge-yellow:not(.disabled):not(:disabled), a:active > .badge-yellow:not(.disabled):not(:disabled), a:focus > .badge-yellow:not(.disabled):not(:disabled) {
   background-color: #f8dd5e !important;
@@ -1760,16 +1743,16 @@ a.list-group-item:hover {
   background-color: #f6d32d;
 }
 .navhead-yellow a, .navbar-yellow a {
-  color: rgba(0, 0, 0, 0.5);
+  color: rgba(255, 255, 255, 0.5);
 }
 .navhead-yellow a:hover, .navhead-yellow a:active, .navbar-yellow a:hover, .navbar-yellow a:active {
-  color: #000;
+  color: #FFF;
 }
 .navhead-yellow a.disabled, .navhead-yellow a.navlink.disabled, .navbar-yellow a.disabled, .navbar-yellow a.navlink.disabled {
-  color: rgba(0, 0, 0, 0.25);
+  color: rgba(255, 255, 255, 0.25);
 }
 .navhead-yellow h1, .navhead-yellow h2, .navhead-yellow h3, .navhead-yellow h4, .navhead-yellow h5, .navhead-yellow h6, .navbar-yellow h1, .navbar-yellow h2, .navbar-yellow h3, .navbar-yellow h4, .navbar-yellow h5, .navbar-yellow h6 {
-  color: #000;
+  color: #FFF;
 }
 .navhead-brown, .navbar-brown {
   background-color: #986a44;