style: make page wider and header shorter
Alan Pearce alan@alanpearce.eu
Tue, 07 May 2024 21:02:31 +0200
2 files changed, 44 insertions(+), 4 deletions(-)
M frontend/static/style.css → frontend/static/style.css
@@ -3,10 +3,52 @@ --standard-border-radius: 0; --text: black; --text-light: #212121; --preformatted: var(--code); + --min-width: 60rem; } + +body { + grid-template-columns: 1fr min(var(--min-width), 90%) 1fr; +} + +body > header { + align-items: center; + display: flex; + justify-content: center; + padding: unset; + & > :only-child { + margin-block-start: 0; + } + & > nav { + width: min(var(--min-width), 90%); + display: flex; + padding: 0.5rem 0; + + a { + margin-bottom: unset; + } + + & h1 { + margin: unset; + font-size: unset; + line-height: 2; + & > a { + margin-left: unset; + padding-left: unset; + border: 1px transparent; + } + } + } +} + form { + margin-top: 1.5rem; +} + +fieldset { display: flex; column-gap: 1ex; + border: none; + padding: unset; } input[type="search"] {
M frontend/templates/index.gotmpl → frontend/templates/index.gotmpl
@@ -9,11 +9,9 @@ <link href="/static/style.css" rel="stylesheet" /> </head> <body> <header> - <h1>Searchix</h1> - <p>Search Nix Packages and options from NixOS, Darwin and Home-Manager</p> <nav> - <a href="/">Home</a> - <a href="/search/nixos">NixOS Options</a> + <h1><a href="/">Searchix</a></h1> + <a href="/search/nixos">NixOS</a> </nav> </header> <main>