Merge pull request #100 from etalab/margin-padding-improvements

Small improvements regarding margins and other improvements from reboot

Author: Thimy

CHANGELOG.md

@@ -6,6 +6,9 @@
 
 - Added a `required` class to `labels` to inform about _required_ fields
 - Change padding unit on inputs
+- Reworked the way cards and panels are spaced
+- Removed `.form__container`; use `.container__small` instead
+- Removed box shadow from buttons
 
 #### Bug fixes
 

index.html

@@ -486,16 +486,16 @@ <h3>Lorem Ipsum</h3>
 
     <section class="section section-grey">
       <div class="container">
-        <div class="form__container">
-          <form action="#" method="post" name="form" target="_blank" novalidate>
-            <div class="form__group">
-              <label for="form-email">Pour être informé des nouveautés, inscrivez-vous à notre newsletter :</label>
+        <form action="#" method="post" name="form" target="_blank" novalidate>
+          <h1>Newsletter</h1>
+          <div class="form__group">
+            <label for="form-email">Pour être informé des nouveautés, inscrivez-vous à notre newsletter :</label>
+            <div class="input__group">
               <input type="email" value="" name="email" id="form-email">
+              <button class="button" type="submit" name="subscribe" id="form-submit">Valider</button>
             </div>
-
-            <button class="button" type="submit" name="subscribe" id="form-submit">Valider</button>
-          </form>
-        </div>
+          </div>
+        </form>
       </div>
     </section>
 

src/css/base/typography.css

@@ -12,6 +12,7 @@ h3,
 h4,
 h5,
 h6 {
+  margin-top: 0;
   font-family: "Evolventa", "Trebuchet MS", sans-serif;
 }
 

src/css/components/card.css

@@ -11,8 +11,8 @@
   border: 1px solid var(--theme-border-lighter);
 }
 
-.row .card {
-  margin: 0 1em;
+.row .card + .card {
+  margin-left: var(--space-m);
 }
 
 @media (--smaller-than-tablet) {
@@ -21,7 +21,8 @@
   }
 
   .row > .card + .card {
-    margin-top: 2em;
+    margin-left: 0;
+    margin-top: var(--space-m);
   }
 }
 
@@ -30,6 +31,10 @@
   width: 100%;
   overflow: hidden;
   position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--theme-background-color);
 }
 
 .card__cover img {

src/css/components/form.css

@@ -1,5 +1,5 @@
 form {
-  max-width: 520px;
+  max-width: 35em;
   margin: 0 auto;
 }
 
@@ -20,11 +20,6 @@ label.label-inline {
   margin-left: var(--space-xs);
 }
 
-.form__container {
-  max-width: 35em;
-  margin: auto;
-}
-
 .form__group {
   position: relative;
   display: block;
@@ -75,3 +70,8 @@ fieldset {
   width: 16px;
   height: 16px;
 }
+
+.input__group .button {
+  flex-shrink: 0;
+  margin-left: var(--space-s);
+}

src/css/components/panel.css

@@ -7,14 +7,6 @@
   border: 1px solid var(--theme-border-lighter);
 }
 
-.panel + * {
-  margin-top: var(--space-m);
-}
-
-.panel > :first-child {
-  margin-top: 0;
-}
-
 .panel > :last-child {
   margin-bottom: 0;
 }
@@ -31,9 +23,6 @@
 
 .panel__header h3 {
   display: inline-block;
-}
-
-.panel__header h3:first-of-type {
   margin: 0;
 }
 

src/css/elements/button.css

@@ -20,7 +20,6 @@ input[type="button"]:visited {
   background-color: var(--theme-primary);
   border-radius: var(--theme-border-radius);
   border: 0;
-  box-shadow: 0 -2px inset var(--theme-primary-dark);
   font-family: "Source Sans Pro", Arial, sans-serif;
   font-size: var(--space-s);
   position: relative;
@@ -41,8 +40,6 @@ button.button:active,
 input[type="submit"]:hover,
 input[type="button"]:hover {
   transform: translateY(1px);
-  border-bottom: 0;
-  box-shadow: none;
 }
 
 button::-moz-focus-inner {
@@ -137,7 +134,6 @@ button.button-outline.large {
 .button.warning,
 a.button.warning {
   background-color: var(--red);
-  box-shadow: 0 -2px inset var(--dark-red);
 }
 
 .button.warning:hover,
@@ -148,7 +144,6 @@ a.button.warning {
 .button.secondary,
 a.button.secondary {
   background-color: var(--darker-grey);
-  box-shadow: 0 -2px inset var(--darkest-grey);
 }
 
 .button.secondary:hover,

src/css/elements/table.css

@@ -4,7 +4,6 @@
   border-left: 0;
   border-right: 0;
   border-radius: 2px;
-  box-shadow: 0 1px 4px var(--theme-box-shadow);
   position: relative;
   width: 100%;
   border-collapse: collapse;

src/css/layouts/article.css

@@ -105,6 +105,7 @@
 .article__preview .article__author {
   width: auto;
   padding: 0;
+  margin-bottom: var(--space-s);
 }
 
 .article__preview .article__author img {
@@ -125,15 +126,12 @@ a.article__link {
   margin-bottom: 0;
 }
 
-.article__meta {
-  margin-bottom: var(--space-s);
-}
-
 .article__thumbnail {
   width: 100%;
   height: 200px;
   overflow: hidden;
   position: relative;
+  margin-top: var(--space-s);
 }
 
 .article__thumbnail img {

src/css/layouts/container.css

@@ -1,7 +1,7 @@
 .container {
   position: relative;
   width: 100%;
-  max-width: 1000px;
+  max-width: 1200px;
   margin: 0 auto;
   padding: 0 20px;
 }