Improve style

afreismuth-ippon · afreismuth-ippon · commit fee479a4ee34 · 2024-10-16T16:28:07.000+02:00
diff --git a/src/atom/_atom.scss b/src/atom/_atom.scss
@@ -0,0 +1,2 @@
+@use 'paragraph/paragraph';
+@use 'title/title';
diff --git a/src/atom/atom.pug b/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
diff --git a/src/atom/paragraph/_paragraph.scss b/src/atom/paragraph/_paragraph.scss
@@ -0,0 +1,6 @@
+.paragraph {
+  margin: 1rem 0;
+  font-family: sans-serif;
+  font-size: 2rem;
+  color: #223344;
+}
diff --git a/src/atom/paragraph/paragraph.code.pug b/src/atom/paragraph/paragraph.code.pug
@@ -0,0 +1,3 @@
+include paragraph.mixin.pug
+
++paragraph My paragraph
diff --git a/src/atom/paragraph/paragraph.md b/src/atom/paragraph/paragraph.md
@@ -0,0 +1 @@
+## Paragraph
diff --git a/src/atom/paragraph/paragraph.mixin.pug b/src/atom/paragraph/paragraph.mixin.pug
@@ -0,0 +1,3 @@
+mixin paragraph
+  p.paragraph
+    block
diff --git a/src/atom/paragraph/paragraph.render.pug b/src/atom/paragraph/paragraph.render.pug
@@ -0,0 +1,4 @@
+extends /layout
+
+block body
+  include paragraph.code.pug
diff --git a/src/atom/title/_title.scss b/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;
+}
diff --git a/src/atom/title/title.code.pug b/src/atom/title/title.code.pug
@@ -0,0 +1,3 @@
+include title.mixin.pug
+
++title My title
diff --git a/src/atom/title/title.md b/src/atom/title/title.md
@@ -0,0 +1 @@
+## Title
diff --git a/src/atom/title/title.mixin.pug b/src/atom/title/title.mixin.pug
@@ -0,0 +1,3 @@
+mixin title
+  h1.title
+    block
diff --git a/src/atom/title/title.render.pug b/src/atom/title/title.render.pug
@@ -0,0 +1,4 @@
+extends /layout
+
+block body
+  include title.code.pug
diff --git a/src/head.mixin.pug b/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')
+
diff --git a/src/index.pug b/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
diff --git a/src/template/_template.scss b/src/template/_template.scss
@@ -0,0 +1 @@
+@use 'layout/layout';
diff --git a/src/template/layout/_layout.scss b/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;
+    }
+  }
+}
diff --git a/src/template/layout/layout.code.pug b/src/template/layout/layout.code.pug
@@ -0,0 +1,3 @@
+include layout.mixin.pug
+
++layout Layout
diff --git a/src/template/layout/layout.md b/src/template/layout/layout.md
@@ -0,0 +1 @@
+## Layout
diff --git a/src/template/layout/layout.mixin.pug b/src/template/layout/layout.mixin.pug
@@ -0,0 +1,5 @@
+mixin layout
+  .layout
+    .layout--content
+      block
+
diff --git a/src/template/layout/layout.render.pug b/src/template/layout/layout.render.pug
@@ -0,0 +1,4 @@
+extends /layout
+
+block body
+  include layout.code.pug
diff --git a/src/template/template.pug b/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
+
diff --git a/src/tikui.scss b/src/tikui.scss
@@ -1 +1,2 @@
-// stylelint-disable-line no-empty-source
+@use 'atom/atom';
+@use 'template/template';

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+@use 'paragraph/paragraph';`
	`2`	`+@use 'title/title';`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+include paragraph.mixin.pug`
	`2`	`+`
	`3`	`++paragraph My paragraph`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+mixin paragraph`
	`2`	`+ p.paragraph`
	`3`	`+ block`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+include title.mixin.pug`
	`2`	`+`
	`3`	`++title My title`