Improve style

Author: afreismuth-ippon

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,5 @@
+.paragraph {
+  margin: 0;
+  font-family: sans-serif;
+  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,6 @@
+.title {
+  margin: 0;
+  color: #234;
+  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,12 @@
-block body
-  p Bonjour
+include /head.mixin.pug
+include /atom/title/title.mixin.pug
+include /atom/paragraph/paragraph.mixin.pug
+
+doctype html
+html(lang='fr')
+  +head
+  body
+    +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/tikui.scss

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