From 1ae94034b3856d38726c68f1ffba68893373ad34 Mon Sep 17 00:00:00 2001 From: afreismuth-ippon Date: Wed, 16 Oct 2024 16:29:23 +0200 Subject: [PATCH] Improve style (#2) --- src/atom/_atom.scss | 2 ++ src/atom/atom.pug | 4 ++- src/atom/paragraph/_paragraph.scss | 6 +++++ src/atom/paragraph/paragraph.code.pug | 3 +++ src/atom/paragraph/paragraph.md | 1 + src/atom/paragraph/paragraph.mixin.pug | 3 +++ src/atom/paragraph/paragraph.render.pug | 4 +++ src/atom/title/_title.scss | 8 ++++++ src/atom/title/title.code.pug | 3 +++ src/atom/title/title.md | 1 + src/atom/title/title.mixin.pug | 3 +++ src/atom/title/title.render.pug | 4 +++ src/head.mixin.pug | 8 ++++++ src/index.pug | 16 +++++++++-- src/template/_template.scss | 1 + src/template/layout/_layout.scss | 35 +++++++++++++++++++++++++ src/template/layout/layout.code.pug | 3 +++ src/template/layout/layout.md | 1 + src/template/layout/layout.mixin.pug | 5 ++++ src/template/layout/layout.render.pug | 4 +++ src/template/template.pug | 3 ++- src/tikui.scss | 3 ++- 22 files changed, 116 insertions(+), 5 deletions(-) create mode 100644 src/atom/_atom.scss create mode 100644 src/atom/paragraph/_paragraph.scss create mode 100644 src/atom/paragraph/paragraph.code.pug create mode 100644 src/atom/paragraph/paragraph.md create mode 100644 src/atom/paragraph/paragraph.mixin.pug create mode 100644 src/atom/paragraph/paragraph.render.pug create mode 100644 src/atom/title/_title.scss create mode 100644 src/atom/title/title.code.pug create mode 100644 src/atom/title/title.md create mode 100644 src/atom/title/title.mixin.pug create mode 100644 src/atom/title/title.render.pug create mode 100644 src/head.mixin.pug create mode 100644 src/template/_template.scss create mode 100644 src/template/layout/_layout.scss create mode 100644 src/template/layout/layout.code.pug create mode 100644 src/template/layout/layout.md create mode 100644 src/template/layout/layout.mixin.pug create mode 100644 src/template/layout/layout.render.pug diff --git a/src/atom/_atom.scss b/src/atom/_atom.scss new file mode 100644 index 0000000..bde2db0 --- /dev/null +++ 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 index 6925138..9f880bf 100644 --- 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 new file mode 100644 index 0000000..ff197a0 --- /dev/null +++ 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 new file mode 100644 index 0000000..0e68c5d --- /dev/null +++ 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 new file mode 100644 index 0000000..ca713d4 --- /dev/null +++ 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 new file mode 100644 index 0000000..2747dc4 --- /dev/null +++ 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 new file mode 100644 index 0000000..24c3735 --- /dev/null +++ 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 new file mode 100644 index 0000000..0395e83 --- /dev/null +++ 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 new file mode 100644 index 0000000..0791a42 --- /dev/null +++ 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 new file mode 100644 index 0000000..65e1cf4 --- /dev/null +++ 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 new file mode 100644 index 0000000..c99d2ac --- /dev/null +++ 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 new file mode 100644 index 0000000..fe37e28 --- /dev/null +++ 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 new file mode 100644 index 0000000..8de2cf1 --- /dev/null +++ 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 index 5a6193f..e070126 100644 --- 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 new file mode 100644 index 0000000..5aa99e5 --- /dev/null +++ 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 new file mode 100644 index 0000000..41302ed --- /dev/null +++ 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 new file mode 100644 index 0000000..d103b53 --- /dev/null +++ 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 new file mode 100644 index 0000000..b157692 --- /dev/null +++ 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 new file mode 100644 index 0000000..aa5a4e6 --- /dev/null +++ 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 new file mode 100644 index 0000000..1d6532b --- /dev/null +++ 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 index b48c538..3ccdec1 100644 --- 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 index 9284f7d..6c67c93 100644 --- a/src/tikui.scss +++ b/src/tikui.scss @@ -1 +1,2 @@ -// stylelint-disable-line no-empty-source +@use 'atom/atom'; +@use 'template/template';