CSS, nav: Better styled navigation bar
- Use <ul> - Get rid of the ugly border-bottom - Instead, decrease the left/right margin so it spans across the width of the screen - Align site index link on the left, and the other nav items on the right - Adjust behaviour of hover - Reflect currently selected page in the nav bar
This commit is contained in:
parent
69a1d57e14
commit
d51263ded2
|
@ -60,27 +60,87 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--bg);
|
||||||
|
color: var(--text);
|
||||||
|
/* Some users don't even bother to make their default sans-serif readable
|
||||||
|
* in their browser settings, so I help them.
|
||||||
|
* But... that's barely an excuse for me to use a big font-stack, I know */
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||||
|
font-size: var(--base-fontsize);
|
||||||
|
line-height: var(--line-height);
|
||||||
|
|
||||||
|
/* WTH? Who needs text-shadow? */
|
||||||
|
text-shadow: 0 1px 0 var(--shadow-color);
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
padding: 0 5%;
|
||||||
|
}
|
||||||
|
footer, .after-content {
|
||||||
|
margin: 0 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Homepage stuff */
|
||||||
|
#pfp {
|
||||||
|
/* The dot slash pic */
|
||||||
|
max-width: 20%;
|
||||||
|
border: 5px solid var(--border);
|
||||||
|
border-radius: 25%;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
display: block;
|
||||||
|
margin-top: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
nav {
|
nav {
|
||||||
|
margin-right: 5%;
|
||||||
|
margin-left: 5%;
|
||||||
padding: 1rem 0.3rem;
|
padding: 1rem 0.3rem;
|
||||||
padding-bottom: 4px;
|
padding-bottom: 4px;
|
||||||
padding-top: 1.5rem;
|
padding-top: 1.5rem;
|
||||||
font-weight: 400;
|
font-weight: 500;
|
||||||
border-bottom: 1px solid var(--accent-light);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Differentiating between normal content links and meta content links */
|
||||||
nav a, .meta a, .post-meta a, footer a, .after-content a {
|
nav a, .meta a, .post-meta a, footer a, .after-content a {
|
||||||
color: var(--accent-light);
|
color: var(--accent-light);
|
||||||
/* border-color: var(--accent-bg); */
|
|
||||||
/* border-radius: 5px; */
|
|
||||||
/* border-style: solid; */
|
|
||||||
/* border-bottom: 1px; */
|
|
||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav a {
|
nav a {
|
||||||
margin-right: 1rem;
|
margin-right: 1.5rem;
|
||||||
|
padding-bottom: .3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
nav .right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav .selected {
|
||||||
|
border-bottom: 2.5px solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
/********************************************************************
|
||||||
|
* Idea from seirdy.one to have unstyled unordered-list nav
|
||||||
|
* Step 1 to making the single-line nav: remove the bullet padding. */
|
||||||
|
nav ul {
|
||||||
|
padding: 0
|
||||||
|
}
|
||||||
|
/* Step 2: remove bullets and make elements inline.
|
||||||
|
* Also: bump up the line-height and margins to increase space between
|
||||||
|
* tap-targets (SC 2.5.5). Google a11y guidelines require 8 CSS pixels
|
||||||
|
* between tap targets. */
|
||||||
|
nav ul li {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: .375em;
|
||||||
|
}
|
||||||
|
/* END borrowed code from seirdy.one
|
||||||
|
********************************************************************/
|
||||||
|
|
||||||
|
|
||||||
blockquote {
|
blockquote {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
padding-left: 1rem;
|
padding-left: 1rem;
|
||||||
|
@ -190,29 +250,22 @@ pre code {
|
||||||
/* color: #000; */
|
/* color: #000; */
|
||||||
/* } */
|
/* } */
|
||||||
|
|
||||||
body {
|
|
||||||
margin: auto;
|
|
||||||
background-color: var(--bg);
|
|
||||||
padding: 0 5%;
|
|
||||||
/* margin-top: 2rem; */
|
|
||||||
color: var(--text);
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
||||||
font-size: var(--base-fontsize);
|
|
||||||
line-height: var(--line-height);
|
|
||||||
text-shadow: 0 1px 0 var(--shadow-color);
|
|
||||||
max-width: 47rem; /* lol idk */
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-date {
|
.post-date {
|
||||||
margin-right: 1.5rem;
|
margin-right: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.posts {text-align: left;}
|
.posts {text-align: left;}
|
||||||
a {border-bottom: 1px solid var(--accent); color: var(--accent); text-decoration: none;}
|
a {border-bottom: 1px solid var(--accent); color: var(--accent); text-decoration: none;}
|
||||||
a:hover {
|
a:hover:not(nav) {
|
||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
background-color: var(--accent-bg);
|
background-color: var(--accent-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
nav a:hover {
|
||||||
|
background-color: var(--accent-bg);
|
||||||
|
border-bottom: 2.5px solid;
|
||||||
|
}
|
||||||
|
|
||||||
header {top: 1px;}
|
header {top: 1px;}
|
||||||
|
|
||||||
fieldset {
|
fieldset {
|
||||||
|
|
11
config.toml
11
config.toml
|
@ -30,13 +30,14 @@ posts = "/posts/:slug"
|
||||||
[menu]
|
[menu]
|
||||||
[[menu.main]]
|
[[menu.main]]
|
||||||
identifier = "posts"
|
identifier = "posts"
|
||||||
name = "posts"
|
name = "Posts"
|
||||||
title = "posts"
|
title = "posts"
|
||||||
url = "posts/"
|
url = "posts/"
|
||||||
weight = 10
|
weight = 10
|
||||||
|
pre = "<span class=\"right\">"
|
||||||
[[menu.main]]
|
[[menu.main]]
|
||||||
identifier = "about"
|
identifier = "about"
|
||||||
name = "about"
|
name = "About"
|
||||||
title = "about"
|
title = "about"
|
||||||
url = "about/"
|
url = "about/"
|
||||||
weight = 20
|
weight = 20
|
||||||
|
@ -48,10 +49,12 @@ posts = "/posts/:slug"
|
||||||
# weight = 30
|
# weight = 30
|
||||||
[[menu.main]]
|
[[menu.main]]
|
||||||
identifier = "rss"
|
identifier = "rss"
|
||||||
name = "rss"
|
name = "RSS"
|
||||||
title = "rss"
|
title = "rss"
|
||||||
url = "posts/index.xml"
|
url = "posts/index.xml"
|
||||||
weight = 30
|
weight = 100
|
||||||
|
# pre = "<span class=\"right\">"
|
||||||
|
post="</span>"
|
||||||
|
|
||||||
[markup.goldmark.renderer]
|
[markup.goldmark.renderer]
|
||||||
# Allows HTML in Markdown
|
# Allows HTML in Markdown
|
||||||
|
|
|
@ -1,6 +1,11 @@
|
||||||
<nav>
|
<nav><ul>
|
||||||
<a rel="home" href="{{ .Site.BaseURL }}">home</a>
|
<li><a rel="home" href="{{ .Site.BaseURL }}">{{ .Site.Params.shortTitle }}</a></li>
|
||||||
|
{{- $currentPage := . }}
|
||||||
{{- range .Site.Menus.main.ByWeight }}
|
{{- range .Site.Menus.main.ByWeight }}
|
||||||
{{ .Pre }}<a href="{{ $.Site.BaseURL }}{{ .URL }}" title="{{ .Title }}">{{- .Name -}}</a>{{ .Post }}
|
{{- $url := printf "%s%s" $.Site.BaseURL .URL }}
|
||||||
|
|
||||||
|
{{ .Pre }}<li><a href="{{ $url }}"
|
||||||
|
{{- if hasPrefix $currentPage.Permalink $url }}class="selected"{{ end -}}
|
||||||
|
title="{{ .Title }}">{{- .Name -}}</a></li>{{ .Post }}
|
||||||
{{- end }}
|
{{- end }}
|
||||||
</nav>
|
</ul></nav>
|
||||||
|
|
Loading…
Reference in New Issue