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 --- css/main.css | 53 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 css/main.css (limited to 'css') 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 */ + } +} -- cgit v1.3