Improve style (#2)

src/atom/_atom.scss

@@ -0,0 +1,2 @@
+@use 'paragraph/paragraph';
+@use 'title/title';

src/atom/atom.pug

@@ -13,4 +13,6 @@ block content
     .tikui-vertical-spacing--line
       include /documentation/atomic-design/quote/atom
     .tikui-vertical-spacing--line
-      // Atoms componentDoc
+      include:componentDoc(height=100) paragraph/paragraph.md
+    .tikui-vertical-spacing--line
+      include:componentDoc(height=100) title/title.md

src/atom/paragraph/_paragraph.scss

@@ -0,0 +1,6 @@
+.paragraph {
+  margin: 1rem 0;
+  font-family: sans-serif;
+  font-size: 2rem;
+  color: #223344;
+}

src/atom/paragraph/paragraph.code.pug

@@ -0,0 +1,3 @@
+include paragraph.mixin.pug
+
++paragraph My paragraph

src/atom/paragraph/paragraph.md

@@ -0,0 +1 @@
+## Paragraph

src/atom/paragraph/paragraph.mixin.pug

@@ -0,0 +1,3 @@
+mixin paragraph
+  p.paragraph
+    block

src/atom/paragraph/paragraph.render.pug

@@ -0,0 +1,4 @@
+extends /layout
+
+block body
+  include paragraph.code.pug

src/atom/title/_title.scss

@@ -0,0 +1,8 @@
+.title {
+  margin: 0;
+  color: #234;
+  margin-bottom: 3rem;
+  text-align: center;
+  font-size: 4rem;
+  font-family: sans-serif;
+}

src/atom/title/title.code.pug

@@ -0,0 +1,3 @@
+include title.mixin.pug
+
++title My title

src/atom/title/title.md

@@ -0,0 +1 @@
+## Title

src/atom/title/title.mixin.pug

@@ -0,0 +1,3 @@
+mixin title
+  h1.title
+    block

src/atom/title/title.render.pug

@@ -0,0 +1,4 @@
+extends /layout
+
+block body
+  include title.code.pug

src/head.mixin.pug

@@ -0,0 +1,8 @@
+mixin head
+  head
+    meta(charset='utf-8')
+    block title
+      title Mon site web
+    link(rel='icon' type='image/png' href='[[TIKUI_BASEPATH]]favicon.png')
+    link(href='[[TIKUI_BASEPATH]]tikui.css' rel='stylesheet')
+

src/index.pug

@@ -1,2 +1,14 @@
-block body
-  p Bonjour
+include /head.mixin.pug
+include /atom/title/title.mixin.pug
+include /atom/paragraph/paragraph.mixin.pug
+include /template/layout/layout.mixin.pug
+
+doctype html
+html(lang='fr')
+  +head
+  body
+    +layout
+      +title Mon site web à déployer
+      +paragraph Mon site web fonctionne bien en local et j'en suis fier 💪
+      +paragraph Pendant ce live, voyons comment le déployer !
+      :reload

src/template/_template.scss

@@ -0,0 +1 @@
+@use 'layout/layout';

src/template/layout/_layout.scss

@@ -0,0 +1,35 @@
+$layout-padding: 1vw;
+$layout-large-horizontal-padding: 3vw;
+$layout-large-content: 75vw;
+
+@media screen {
+  .layout {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    padding: $layout-padding;
+    overflow: auto;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .layout {
+    background-color: #fff;
+    padding: 0;
+
+    &--content {
+      box-sizing: border-box;
+      margin: 0 auto;
+      border-width: 2px;
+      border-top-width: 0;
+      border-bottom-width: 0;
+      border-style: solid;
+      border-color: #234;
+      padding: $layout-padding $layout-large-horizontal-padding;
+      width: $layout-large-content + 2 * $layout-large-horizontal-padding;
+      min-height: 100vh;
+    }
+  }
+}

src/template/layout/layout.code.pug

@@ -0,0 +1,3 @@
+include layout.mixin.pug
+
++layout Layout

src/template/layout/layout.md

@@ -0,0 +1 @@
+## Layout

src/template/layout/layout.mixin.pug

@@ -0,0 +1,5 @@
+mixin layout
+  .layout
+    .layout--content
+      block
+

src/template/layout/layout.render.pug

@@ -0,0 +1,4 @@
+extends /layout
+
+block body
+  include layout.code.pug

src/template/template.pug

@@ -13,4 +13,5 @@ block content
     .tikui-vertical-spacing--line
       include /documentation/atomic-design/quote/template
     .tikui-vertical-spacing--line
-      // Templates componentDoc
+      include:templateDoc layout/layout.md
+

src/tikui.scss

@@ -1 +1,2 @@
-// stylelint-disable-line no-empty-source
+@use 'atom/atom';
+@use 'template/template';