diff options
| -rw-r--r-- | css/main.css | 25 | ||||
| -rw-r--r-- | img/photo/me.jpg | bin | 0 -> 663485 bytes | |||
| -rw-r--r-- | img/thumb/me.jpg | bin | 0 -> 39173 bytes | |||
| -rw-r--r-- | img/thumb/me.webp | bin | 0 -> 33282 bytes | |||
| -rw-r--r-- | index.html | 12 | ||||
| -rw-r--r-- | partials/_article.p | 1 | ||||
| -rw-r--r-- | partials/_figure.p | 29 | ||||
| -rw-r--r-- | partials/_header.p | 9 | ||||
| -rw-r--r-- | partials/_picture.p | 10 | ||||
| -rw-r--r-- | partials/_section.p | 7 |
10 files changed, 80 insertions, 13 deletions
diff --git a/css/main.css b/css/main.css index 83dc70b..6800c97 100644 --- a/css/main.css +++ b/css/main.css @@ -4,7 +4,7 @@ body { color: #424242; background-color: #f9f9f9; font-family: 'PT Sans', Arial, Helvetica, sans-serif; - font-size: 14px; + font-size: 16px; } h1, h2, h3, h4, h5, h6 { @@ -52,16 +52,35 @@ h1, h2, h3, h4, h5, h6 { } } +.article { + padding: 0 9px; +} + .article .title { margin: 0; } +.article .divider { + margin: 9px 0; +} + .article .section .title, .article .section .text { margin: 9px 0; +} + +.article .section .text { text-align: justify; + text-indent: 12.5mm; } -.divider { - margin: 9px 0; +.article .section .figure { + margin: 0 0 0 9px; + width: min-content; + float: right; +} + +.article .section .figure .caption { + font-style: italic; + font-size: 11px; } diff --git a/img/photo/me.jpg b/img/photo/me.jpg Binary files differnew file mode 100644 index 0000000..de6f49a --- /dev/null +++ b/img/photo/me.jpg diff --git a/img/thumb/me.jpg b/img/thumb/me.jpg Binary files differnew file mode 100644 index 0000000..85eda7e --- /dev/null +++ b/img/thumb/me.jpg diff --git a/img/thumb/me.webp b/img/thumb/me.webp Binary files differnew file mode 100644 index 0000000..d09cc5b --- /dev/null +++ b/img/thumb/me.webp @@ -2,11 +2,21 @@ /templates/_base.p /partials/_article.p /partials/_section.p +/partials/_figure.p @main[] +$photo_thumbnails[ + $.[image/webp][/img/thumb/me.webp] + $.[image/jpeg][/img/thumb/me.jpg] +] ^base[михаил «synzr»]{ ^article[index][Приветствую вас!]{ - ^section[about-me][Обо мне]{ + ^section[about-me]{ + ^figure[$photo_thumbnails;image/jpeg; + $.caption[Моя фотография у останкинского телецентра в Москве] + $.height[160] + $.href[/img/photo/me.jpg] + ] <p class="text"> Меня зовут Михаил, я платно учусь в частном колледже на IT, интересуюсь технологиями и коллекционирую музыку на CD-пластинках. diff --git a/partials/_article.p b/partials/_article.p index b397998..3e2ddfb 100644 --- a/partials/_article.p +++ b/partials/_article.p @@ -1,7 +1,6 @@ @article[id;title;content] <div class="article" id="$id"> <h1 class="title">$title</h1> - $content </div> #end @article[] diff --git a/partials/_figure.p b/partials/_figure.p new file mode 100644 index 0000000..df7c653 --- /dev/null +++ b/partials/_figure.p @@ -0,0 +1,29 @@ +@USE +/partials/_picture.p + +@figure[images;default_type;.caption;.alt;.height;.href] +^if(def $alt){ + $resolved_alt[$alt] +}(def $caption){ + $resolved_alt[$caption] +} + +<figure class="figure"> +# HACK боже какое оно вонючее + ^if(def $href){ + <a href="$href"> + } + ^picture[$images;$default_type; + $.alt[$resolved_alt] + $.height[$height] + $.class[image] + ] + ^if(def $href){ + </a> + } + + ^if(def $caption){ + <figcaption class="caption">$caption</figcaption> + } +</figure> +#end @figure[] diff --git a/partials/_header.p b/partials/_header.p index 2525cf3..5f57f7c 100644 --- a/partials/_header.p +++ b/partials/_header.p @@ -3,12 +3,15 @@ @header[brand] $pokepi[ - $.[image/png][/img/pokepi.png] $.[image/webp][/img/pokepi.webp] + $.[image/png][/img/pokepi.png] ] -<header class="header clearfix"> - ^picture[$pokepi;Мой покепи;pokepi;image/png] +<header class="header clearfix" role="presentation"> + ^picture[$pokepi;image/png; + $.alt[Мой покепи] + $.class[pokepi] + ] <h1 class="brand"> ^for[i](0;^brand.length[] - 1){ <span class="letter">^brand.mid($i;1)</span> diff --git a/partials/_picture.p b/partials/_picture.p index 9128f1f..cdd1baf 100644 --- a/partials/_picture.p +++ b/partials/_picture.p @@ -1,8 +1,14 @@ -@picture[images;alt;class;default] +@picture[images;default_type;.alt;.class;.role;.height] <picture> ^images.foreach[type;srcset]{ <source srcset="$srcset" type="$type"> } - <img src="$images.[$default]" alt="$alt" class="$class"> + <img + src="$images.[$default_type]" + ^if(def $alt){alt="$alt"} + ^if(def $class){class="$class"} + ^if(def $role){role="$role"} + ^if(def $height){height="$height"} + > </picture> #end @picture[] diff --git a/partials/_section.p b/partials/_section.p index d6e0b66..44135e1 100644 --- a/partials/_section.p +++ b/partials/_section.p @@ -1,7 +1,8 @@ -@section[id;title;content] +@section[id;content;.title] <section id="$id" class="section"> - <h2 class="title">$title</h2> - + ^if(def $title){ + <h2 class="title">$title</h2> + } $content </section> #end @section[] |
