Make the header layout better on phones

This commit is contained in:
Sami Samhuri 2023-02-14 20:55:34 -08:00
parent f275946b00
commit 5399ce0c96
No known key found for this signature in database
GPG key ID: 4B4195422742FC16
2 changed files with 17 additions and 7 deletions

View file

@ -140,7 +140,7 @@ hr {
header.primary {
background-color: #151515;
color: #f7f7f7;
padding: 0.8rem 2.5rem;
padding: 0.8rem 1.2rem;
border-bottom: solid 1px #888888;
box-shadow: 0 0 12px 2px #222;
}
@ -186,12 +186,18 @@ header.primary h4 a:hover {
text-decoration: underline;
}
header.primary nav {
header.primary nav.local {
float: left;
clear: left;
}
header.primary nav.remote {
float: right;
margin-left: 1.4rem;
}
@media (min-width: 35.5rem) {
header.primary nav {
header.primary nav.local {
float: right;
clear: none;
}

View file

@ -43,16 +43,20 @@ enum Template {
.br(),
.h4(.text("By "), .a(.href(context.url(for: "about")), .text(context.site.author)))
),
.nav(
.nav(.class("remote"),
.ul(
.li(.a(.href(context.url(for: "about")), "About")),
.li(.a(.href(context.url(for: "posts")), "Archive")),
.li(.a(.href(context.url(for: "projects")), "Projects")),
.li(.class("mastodon"), .a(.attribute(named: "rel", value: "me"), .href("https://techhub.social/@sjs"), .i(.class("fab fa-mastodon")))),
.li(.class("github"), .a(.href("https://github.com/samsonjs"), .i(.class("fab fa-github")))),
.li(.class("rss"), .a(.href(context.url(for: "feed.xml")), .i(.class("fa fa-rss"))))
)
),
.nav(.class("local"),
.ul(
.li(.a(.href(context.url(for: "about")), "About")),
.li(.a(.href(context.url(for: "posts")), "Archive")),
.li(.a(.href(context.url(for: "projects")), "Projects"))
)
),
.div(.class("clearfix"))
),