chores: Remove the extends

  rename some objects
  add some missing element in the font size reset

Issues #84 #91 #92

css/src/elements/_forms.scss

@@ -7,15 +7,15 @@
 
 $type-list: text tel email url search date time datetime month week number;
 @each $type in $type-list {
-  [type="#{$type}"] { @extend %input; }
-}
-
-/// Reset
-input, select, textarea { font-family: $font; }
-fieldset { margin: 0; border: none; padding: 0; }
-select { width: auto; cursor: pointer; }
-
-input, select, textarea, label { vertical-align: middle; }
+  [type="#{$type}"] {
+    border: 1px solid $black; border-radius: 3px; background-color: $white;
 
+    &:focus { outline: none; }
+  }
+}
 select,
-textarea { @extend %input; }
+textarea {
+  border: 1px solid $black; border-radius: 3px; background-color: $white;
+
+  &:focus { outline: none; }
+}

css/src/elements/_headings.scss

@@ -4,10 +4,28 @@
 /// @group Elements
 ///
 ////
-h1 { @extend %h1; }
-h2 { @extend %h2; }
-h3 { @extend %h3; }
-h4 { @extend %h4; }
-h5 { @extend %h5; }
-h6 { @extend %h6; }
+h1 {
+  margin: 25px 0;
+  font-size: 3.5em;
+}
+h2 {
+  margin: 25px 0;
+  font-size: 2.4em;
+}
+h3 {
+  margin: 25px 0;
+  font-size: 2em;
+}
+h4 {
+  margin: 20px 0;
+  font-size: 1.8em;
+}
+h5 {
+  margin: 20px 0;
+  font-size: 1.6em;
+}
+h6 {
+  margin: 15px 0;
+  font-size: 1.4em;
+}
 h1, h2, h3, h4, h5, h6 { line-height: 1; font-weight: $fw-bold; }

css/src/generic/_reset.scss

@@ -18,7 +18,8 @@ body {
 }
 
 /// Reset nested font-size
-blockquote p,td p,th p,li li,li p,li h1,li h2,li h3,li h4,li h5,li h6,button { font-size: 100%; }
+blockquote p,td p,th p,li li,li p,li h1,li h2,li h3,li h4,li h5,li h6,li label,li select, li input, li textarea, li button { font-size: 100%; }
+
 
 // Links & buttons
 button { display: inline; margin: 0; border: none; padding: 0; outline: none; cursor: pointer; }
@@ -29,3 +30,11 @@ img { max-width: 100%; height: auto;}
 
 // Separator
 hr { border: none; height: 1px; background-color: $black; }
+
+
+// Forms
+input, select, textarea { font-family: $font; }
+fieldset { margin: 0; border: none; padding: 0; }
+select { width: auto; cursor: pointer; }
+
+input, select, textarea, label { vertical-align: middle; }

css/src/main.scss

@@ -14,27 +14,23 @@
 @import 'generic/reset';
 
 // Tools (helper, mixins and function)
-@import 'tools/headings';
-@import 'tools/list-horizontal';
-@import 'tools/input';
-@import 'tools/page-sized';
-@import 'tools/link-block';
+// @import 'tools/';
 
 
 // Base
+@import 'elements/body';
 @import 'elements/blocks';
-@import 'elements/forms';
 @import 'elements/headings';
-@import 'elements/body';
+@import 'elements/forms';
 @import 'elements/links';
 
 // Objects
-@import 'objects/alignements';
+@import 'objects/container';
+@import 'objects/list-inline';
+@import 'objects/link-block';
 @import 'objects/forms';
+@import 'objects/alignements';
 @import 'objects/highlights';
-@import 'objects/list-horizontal';
-@import 'objects/page-sized';
-@import 'objects/link-block';
 
 // Components
 

css/src/objects/_alignements.scss

@@ -7,4 +7,7 @@
 .align-left { text-align: left; }
 .align-center { text-align: center; }
 .align-right { text-align: right; }
-.align-justify { text-align: justify; }
+.align-justify {
+  text-align: justify;
+  &.align-center { text-align-last: center; }
+}

css/src/objects/_container.scss

@@ -0,0 +1,10 @@
+////
+/// Page
+///
+/// @group Objects
+///
+////
+
+.container {
+  margin: auto; padding: 0 $page-padding; width: $max-width; max-width: 100%;
+}

css/src/objects/_link-block.scss

@@ -1 +1,5 @@
-.link-block { @extend %link-block; }
+.link-block {
+  display: block; color: inherit;
+
+  &:hover { text-decoration: none; }
+}

css/src/tools/_list-horizontal.scss → css/src/objects/_list-inline.scss

@@ -1,11 +1,10 @@
 ////
-/// Transform a list into a vertical spaced list
+/// Navigation
 ///
-/// @group Tools
+/// @group Objects
 ///
 ////
-
-%list-horizontal {
+.list-inline {
   display: block; margin: 0; padding: 0;
 
   > * { display: inline-block; margin: 5px; padding: 0; }

index.html

@@ -32,7 +32,7 @@ <h1><img src="https://raw.githubusercontent.com/dummy-team/dummy/gh-pages/img/du
     <div id="footer" class="footer">
         <div class="page-sized align-center">
             <!--nav-bottom-->
-            <ul id="nav-footer" class="list-horizontal nav nav-footer">
+            <ul id="nav-footer" class="list-inline nav nav-footer">
                 <li><a href="https://github.com/dummy-team/dummy" target="_blank">Dummy Team</a></li>
                 <li><a href="https://dummy-team.github.io/dummy" target="_blank">Project home</a></li>
                 <li><a href="https://github.com/dummy-team/dummy" target="_blank">Github</a></li>