From d5f4539e7ab6cb00513cd428b6ab08c67ddd6bc9 Mon Sep 17 00:00:00 2001 From: maike Date: Tue, 1 Sep 2026 22:40:10 +0500 Subject: Header with a interactive brand text --- .gitignore | 1 + css/main.css | 53 +++++++++++++++++++++++++++++++++++++++++++++++++++++ img/pokepi.png | Bin 0 -> 70708 bytes img/pokepi.webp | Bin 0 -> 29530 bytes index.html | 11 +++++++++++ js/main.js | 10 ++++++++++ partials/_header.p | 16 ++++++++++++++++ templates/_base.p | 38 ++++++++++++++++++++++++++++++++++++++ 8 files changed, 129 insertions(+) create mode 100644 css/main.css create mode 100644 img/pokepi.png create mode 100644 img/pokepi.webp create mode 100644 index.html create mode 100644 js/main.js create mode 100644 partials/_header.p create mode 100644 templates/_base.p diff --git a/.gitignore b/.gitignore index 1d74e21..161b74f 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ .vscode/ +parser3.log diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..9531435 --- /dev/null +++ b/css/main.css @@ -0,0 +1,53 @@ +body { + margin: 0; + padding: 0; + color: #424242; + background-color: #f9f9f9; + font-family: 'PT Sans', Arial, Helvetica, sans-serif; + font-size: 14px; +} + +h1, h2, h3, h4, h5, h6 { + color: #ff685b; + font-family: 'PT Sans Narrow', 'Arial Narrow', Arial, Helvetica, sans-serif; +} + +.clearfix::after { + content: ""; + display: table; + clear: both; +} + +.layout { + margin: 0 auto; + width: 100%; + max-width: 640px; + min-width: 240px; + min-height: 100vh; + background-color: #fff; +} + +.header .pokepi { + width: 240px; + height: 240px; + user-select: none; +} + +.header .brand { + float: right; + user-select: none; + margin: 18px; + font-size: 16px; + font-family: 'PT Mono', 'Courier New', Courier, monospace; +} + +.header .brand .letter { + display: block; + margin: 4px 0; +} + +@media (max-width: 480px) { + .header .brand { + display: none; /* hide on tiny screens */ + } +} diff --git a/img/pokepi.png b/img/pokepi.png new file mode 100644 index 0000000..d62f7ab Binary files /dev/null and b/img/pokepi.png differ diff --git a/img/pokepi.webp b/img/pokepi.webp new file mode 100644 index 0000000..0709ecb Binary files /dev/null and b/img/pokepi.webp differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..fbc467e --- /dev/null +++ b/index.html @@ -0,0 +1,11 @@ +@USE +/templates/_base.p + +@main[] +^base[михаил «synzr»]{ +

Hello World

+}{ +# empty CSS block +}{ +# empty JS block +} diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..b96513b --- /dev/null +++ b/js/main.js @@ -0,0 +1,10 @@ +// brand letters' rotation +function rotate(letter) { + return String.fromCharCode( + letter.charCodeAt(0) + (letter.toLowerCase() <= 'm' ? 13 : -13) + ); +} + +$(".header .brand .letter").hover(function () { + $(this).text(rotate($(this).text())); +}); diff --git a/partials/_header.p b/partials/_header.p new file mode 100644 index 0000000..ca070ea --- /dev/null +++ b/partials/_header.p @@ -0,0 +1,16 @@ +@header[] +$brand[synzr] + + diff --git a/templates/_base.p b/templates/_base.p new file mode 100644 index 0000000..fb80ef7 --- /dev/null +++ b/templates/_base.p @@ -0,0 +1,38 @@ +@USE +/partials/_header.p + +@base[title;body;css;js] + + + + + + + + + + + $title + + + + + + + + $css + + + +

+ ^header[] + + $body +

+ + + + $js + + + -- cgit v1.3