diff options
| author | maike <maike@synzr.tw> | 2026-09-01 22:40:10 +0500 |
|---|---|---|
| committer | maike <maike@synzr.tw> | 2026-09-01 23:41:22 +0500 |
| commit | d5f4539e7ab6cb00513cd428b6ab08c67ddd6bc9 (patch) | |
| tree | 8767ca37a3f8ccaccde30872fdf6cde413dfb17c | |
| parent | 04147f350f07f7cadd4fe5aa9cd74096109b275d (diff) | |
| download | hamster-d5f4539e7ab6cb00513cd428b6ab08c67ddd6bc9.tar.gz hamster-d5f4539e7ab6cb00513cd428b6ab08c67ddd6bc9.tar.bz2 hamster-d5f4539e7ab6cb00513cd428b6ab08c67ddd6bc9.zip | |
Header with a interactive brand text
| -rw-r--r-- | .gitignore | 1 | ||||
| -rw-r--r-- | css/main.css | 53 | ||||
| -rw-r--r-- | img/pokepi.png | bin | 0 -> 70708 bytes | |||
| -rw-r--r-- | img/pokepi.webp | bin | 0 -> 29530 bytes | |||
| -rw-r--r-- | index.html | 11 | ||||
| -rw-r--r-- | js/main.js | 10 | ||||
| -rw-r--r-- | partials/_header.p | 16 | ||||
| -rw-r--r-- | templates/_base.p | 38 |
8 files changed, 129 insertions, 0 deletions
@@ -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 Binary files differnew file mode 100644 index 0000000..d62f7ab --- /dev/null +++ b/img/pokepi.png diff --git a/img/pokepi.webp b/img/pokepi.webp Binary files differnew file mode 100644 index 0000000..0709ecb --- /dev/null +++ b/img/pokepi.webp 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»]{ + <h1>Hello World</h1> +}{ +# 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] + +<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> + + <h1 class="brand"> + ^for[i](0;^brand.length[] - 1){ + <span class="letter">^brand.mid($i;1)</span> + } + </h1> +</header> 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] +<!DOCTYPE html> +<html lang="ru"> + +<head> + <meta charset="UTF-8"> + <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> + + <meta http-equiv="X-UA-Compatible" content="IE=8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + + <title>$title</title> + + <link rel="preconnect" href="//assets.synzr.tw"> + <link rel="stylesheet" href="//assets.synzr.tw/css/fonts/pt-sans.css"> + <link rel="stylesheet" href="//assets.synzr.tw/css/fonts/pt-sans-narrow.css"> + <link rel="stylesheet" href="//assets.synzr.tw/css/fonts/pt-mono.css"> + + <link rel="stylesheet" href="/css/main.css"> + $css +</head> + +<body> + <div class="layout clearfix"> + ^header[] + + $body + </div> + + <script src="//assets.synzr.tw/js/jquery-1.12.4.min.js"></script> + <script src="/js/main.js"></script> + $js +</body> + +</html> |
