diff options
| author | Samuel Johnson <[email protected]> | 2025-12-10 20:07:31 -0500 |
|---|---|---|
| committer | Samuel Johnson <[email protected]> | 2025-12-10 20:07:31 -0500 |
| commit | bc008f5a9c5a3b1e2967b8733a02781a681b65da (patch) | |
| tree | ea1662712a57247659153d9105cfe83f4696a523 | |
| parent | c9433d03e2f6c7779a1b3eacb2b8e45fc7be99b4 (diff) | |
Improve mobile UI styling
| -rw-r--r-- | static/app.css | 79 | ||||
| -rw-r--r-- | ui/html/base.tmpl.html | 27 |
2 files changed, 89 insertions, 17 deletions
diff --git a/static/app.css b/static/app.css index 2b2c069..ef46364 100644 --- a/static/app.css +++ b/static/app.css @@ -6,17 +6,23 @@ header { align-content: center; } -header > h1 { +header h1 { padding: 0.25em; font-size: 2em; } -header > nav { +header nav { margin-top: auto; margin-bottom: auto; margin-left: 2em; } +.lead { + display: flex; + flex-direction: row; + justify-content: space-between; +} + .flex_between { display: flex; flex-direction: row; @@ -52,7 +58,15 @@ a { text-decoration: none; } -a::after { +a.icon { + display: none; +} + +.card a { + color: #0fcff0; +} + +a:not(.icon)::after { content: ""; background: white; height: 1px; @@ -61,17 +75,17 @@ a::after { transition: .16s all 0.025s; } -a::after { +a:not(.icon)::after { left: 100%; right: 0; } -a:hover ~ a::after { +a:hover ~ a:not(.icon)::after { left: 0; right: 100%; } -a:hover::after { +a:not(.icon):hover::after { left: 0; right: 0; } @@ -79,7 +93,7 @@ a:hover::after { .pane { margin: auto; padding: 0.2em 0.5em; - width: 75%; + width: 75vw; background-color: rgba(0, 0, 0, 0.8); color: #dcccd5; @@ -235,21 +249,66 @@ input { @media only screen and (max-width: 768px) { header { display: flex; - flex-direction: column; + flex-direction: row; + justify-content: space-between; } - header > h1 { + header h1 { font-size: 1.5em; } - header > nav { + .lead { + flex-direction: column; + } + + a.icon { + display: block; + padding-top: 1.5em; + } + + header nav { margin-left: 0em; + display: flex; + flex-direction: column; + } + + header nav a:not(.icon) { + height: 0; + margin: 0; + overflow: hidden; + transition: margin 0.5s ease-out 0.2s, + height 0.5s ease-in-out; + } + + header nav a.icon { + float: right; + } + + header nav.responsive { + position: relative; + } + + header nav.responsive a { + height: 1em; + margin: 0.5em; + } + + body { + margin: 0; + padding: 0; } .topline > p { display: none; } + .pane { + width: 100vw; + + margin: 0; + padding: 0; + } + .bottom_elem { margin-bottom: 2.5em; } diff --git a/ui/html/base.tmpl.html b/ui/html/base.tmpl.html index 5d69616..5d9fd4a 100644 --- a/ui/html/base.tmpl.html +++ b/ui/html/base.tmpl.html @@ -12,18 +12,31 @@ <title>{{template "title" .}} - Paterissa</title> <link rel="icon" href="/static/get?file=favicon.ico" type="image/x-icon"> <link rel="stylesheet" href="/static/get?file=app.css"> + <script> + function toggleDropdown() { + var nav = document.getElementById("nav") + if (nav.className === "") { + nav.className += "responsive"; + } else { + nav.className = ""; + } + } + </script> </head> <body> <img src="/static/get?file=images/bg.png" id="bg-image"> <div class="pane"> <header> - <h1><a href="https://paterissa.net">Paterissa</a></h1> - <nav> - <a href="https://git.paterissa.net" class="nav_tag">Git</a> - <a href="https://starless.paterissa.net" class="nav_tag">Starless</a> - <a href="https://charts.paterissa.net" class="nav_tag">Parliament Builder</a> - <a href="/feeds" class="nav_tag">Feeds</a> - </nav> + <div class="lead"> + <h1><a href="https://paterissa.net">Paterissa</a></h1> + <nav id="nav"> + <a href="https://git.paterissa.net" class="nav_tag">Git</a> + <a href="https://starless.paterissa.net" class="nav_tag">Starless</a> + <a href="https://charts.paterissa.net" class="nav_tag">Parliament Builder</a> + <a href="/feeds" class="nav_tag">Feeds</a> + </nav> + </div> + <a href="javascript:void(0);" class="icon" onclick="toggleDropdown()">☰</a> </header> <hr> <main class="inner_pane"> |