CSS: add new application layout + CSS

Without bootstrap!

app/assets/stylesheets/application.scss

@@ -33,13 +33,11 @@
 // = require etapes
 // = require fonts
 // = require france_connect_particulier
-// = require header
 // = require landing
 // = require left_panel
 // = require login
 // = require main_container
 // = require navbar
-// = require new_footer
 // = require notification_alert
 // = require pieces_justificatives_fields
 // = require pj_modal

app/assets/stylesheets/common.scss

@@ -0,0 +1,7 @@
+@import "typography";
+
+body {
+  @extend %new-type;
+  font-size: 16px;
+  line-height: 1.42857143;
+}

app/assets/stylesheets/custom_reset.scss

@@ -0,0 +1,27 @@
+html,
+body {
+  height: 100%;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+a {
+  text-decoration: none;
+}
+
+// remove dotted outline on firefox
+:focus {
+  outline: none;
+}
+
+::-moz-focus-inner {
+  border: none;
+}

app/assets/stylesheets/landing.scss

@@ -2,10 +2,8 @@
 @import "colors";
 @import "mixins";
 @import "placeholders";
-@import "typography";
 
 .landing {
-  @extend %new-type;
   background-color: #FFFFFF;
 }
 

app/assets/stylesheets/new_application.scss

@@ -0,0 +1,9 @@
+// = require reset
+// = require custom_reset
+// = require common
+// = require utils
+// = require fonts
+// = require new_header
+// = require new_footer
+// = require landing
+// = require navbar

app/assets/stylesheets/new_footer.scss

@@ -1,10 +1,9 @@
+@import "colors";
 @import "constants";
 @import "mixins";
 @import "placeholders";
-@import "typography";
 
 .footer {
-  @extend %new-type;
   @include vertical-padding(72px);
   background-color: $light-grey;
 }

app/assets/stylesheets/new_header.scss

@@ -1,15 +1,11 @@
 @import "constants";
 @import "colors";
 @import "mixins";
-@import "typography";
 
 // FIXME: Rename when the header is generalized
 .new-header {
-  @extend %new-type;
   height: 72px;
   background-color: #FFFFFF;
-  // FIXME: Delete when the header is generalized
-  margin-top: -60px;
 }
 
 .header-inner-content {

app/assets/stylesheets/utils.scss

@@ -0,0 +1,11 @@
+.pull-left {
+  float: left;
+}
+
+.pull-right {
+  float: right;
+}
+
+.clearfix {
+  clear: both;
+}

app/views/layouts/new_application.html.haml

@@ -13,7 +13,7 @@
     = favicon_link_tag(image_url("favicons/32x32.png"), type: "image/png", sizes: "32x32")
     = favicon_link_tag(image_url("favicons/96x96.png"), type: "image/png", sizes: "96x96")
 
-    = stylesheet_link_tag "application", :media => "all", "data-turbolinks-track" => true
+    = stylesheet_link_tag "new_application", :media => "all", "data-turbolinks-track" => true
     = stylesheet_link_tag "print", :media => "print", "data-turbolinks-track" => true
 
   %body

config/initializers/assets.rb

@@ -8,4 +8,4 @@ Rails.application.config.assets.version = '1.0'
 
 # Precompile additional assets.
 # application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
-Rails.application.config.assets.precompile += %w(print.css)
+Rails.application.config.assets.precompile += %w(print.css new_application.css)