diff options
| author | maike <maike@synzr.tw> | 2026-09-02 00:23:42 +0500 |
|---|---|---|
| committer | maike <maike@synzr.tw> | 2026-09-02 00:23:42 +0500 |
| commit | e7c15e2602e49355444f5d90819dfd0ea66e47bf (patch) | |
| tree | e6e028ee4fd86523015d7bc36f7dca7dff7fb69f | |
| parent | d5f4539e7ab6cb00513cd428b6ab08c67ddd6bc9 (diff) | |
| download | hamster-e7c15e2602e49355444f5d90819dfd0ea66e47bf.tar.gz hamster-e7c15e2602e49355444f5d90819dfd0ea66e47bf.tar.bz2 hamster-e7c15e2602e49355444f5d90819dfd0ea66e47bf.zip | |
Basic article layout
| -rw-r--r-- | css/main.css | 14 | ||||
| -rw-r--r-- | index.html | 14 | ||||
| -rw-r--r-- | partials/_article.p | 7 | ||||
| -rw-r--r-- | partials/_header.p | 18 | ||||
| -rw-r--r-- | partials/_picture.p | 8 | ||||
| -rw-r--r-- | partials/_section.p | 7 | ||||
| -rw-r--r-- | templates/_base.p | 3 |
7 files changed, 61 insertions, 10 deletions
diff --git a/css/main.css b/css/main.css index 9531435..83dc70b 100644 --- a/css/main.css +++ b/css/main.css @@ -51,3 +51,17 @@ h1, h2, h3, h4, h5, h6 { display: none; /* hide on tiny screens */ } } + +.article .title { + margin: 0; +} + +.article .section .title, +.article .section .text { + margin: 9px 0; + text-align: justify; +} + +.divider { + margin: 9px 0; +} @@ -1,11 +1,23 @@ @USE /templates/_base.p +/partials/_article.p +/partials/_section.p @main[] ^base[михаил «synzr»]{ - <h1>Hello World</h1> + ^article[index][Приветствую вас!]{ + ^section[about-me][Обо мне]{ + <p class="text"> + Меня зовут Михаил, я платно учусь в частном колледже на IT, + интересуюсь технологиями и коллекционирую музыку на CD-пластинках. + Ну, вроде бы я человек - насколько это возможно. Обожаю лезть, куда не надо. + </p> + } + <hr class="divider"> + } }{ # empty CSS block }{ # empty JS block } +#end @main[] diff --git a/partials/_article.p b/partials/_article.p new file mode 100644 index 0000000..b397998 --- /dev/null +++ b/partials/_article.p @@ -0,0 +1,7 @@ +@article[id;title;content] +<div class="article" id="$id"> + <h1 class="title">$title</h1> + + $content +</div> +#end @article[] diff --git a/partials/_header.p b/partials/_header.p index ca070ea..2525cf3 100644 --- a/partials/_header.p +++ b/partials/_header.p @@ -1,16 +1,18 @@ -@header[] -$brand[synzr] +@USE +/partials/_picture.p -<header class="header clearfix"> - <picture> - <source srcset="/img/pokepi.webp" type="image/webp"> - <source srcset="/img/pokepi.png" type="image/png"> - <img src="/img/pokepi.png" alt="Моя покеписона" class="pokepi"> - </picture> +@header[brand] +$pokepi[ + $.[image/png][/img/pokepi.png] + $.[image/webp][/img/pokepi.webp] +] +<header class="header clearfix"> + ^picture[$pokepi;Мой покепи;pokepi;image/png] <h1 class="brand"> ^for[i](0;^brand.length[] - 1){ <span class="letter">^brand.mid($i;1)</span> } </h1> </header> +#end @header[] diff --git a/partials/_picture.p b/partials/_picture.p new file mode 100644 index 0000000..9128f1f --- /dev/null +++ b/partials/_picture.p @@ -0,0 +1,8 @@ +@picture[images;alt;class;default] +<picture> + ^images.foreach[type;srcset]{ + <source srcset="$srcset" type="$type"> + } + <img src="$images.[$default]" alt="$alt" class="$class"> +</picture> +#end @picture[] diff --git a/partials/_section.p b/partials/_section.p new file mode 100644 index 0000000..d6e0b66 --- /dev/null +++ b/partials/_section.p @@ -0,0 +1,7 @@ +@section[id;title;content] +<section id="$id" class="section"> + <h2 class="title">$title</h2> + + $content +</section> +#end @section[] diff --git a/templates/_base.p b/templates/_base.p index fb80ef7..4b5536f 100644 --- a/templates/_base.p +++ b/templates/_base.p @@ -25,7 +25,7 @@ <body> <div class="layout clearfix"> - ^header[] + ^header[synzr] $body </div> @@ -36,3 +36,4 @@ </body> </html> +#end @base[] |