diff options
author | Franck Cuny <franck@fcuny.net> | 2021-08-23 09:15:40 -0700 |
---|---|---|
committer | Franck Cuny <franck@fcuny.net> | 2021-08-23 09:15:40 -0700 |
commit | dbacc543ca0a397a73a520d6c92fd08a7cf3b6aa (patch) | |
tree | 481a9986412dd3cc2b35f974fc8f7a874cb7f41a /users/fcuny | |
parent | build: tag the repo after a deploy (diff) | |
download | world-dbacc543ca0a397a73a520d6c92fd08a7cf3b6aa.tar.gz |
CSS: makes the menu more readable
Move the title to the left and the menu items to the right.
Diffstat (limited to 'users/fcuny')
-rw-r--r-- | users/fcuny/notes/layouts/partials/header.html | 14 | ||||
-rw-r--r-- | users/fcuny/notes/static/css/custom.css | 48 |
2 files changed, 39 insertions, 23 deletions
diff --git a/users/fcuny/notes/layouts/partials/header.html b/users/fcuny/notes/layouts/partials/header.html index 508e259..76e23a2 100644 --- a/users/fcuny/notes/layouts/partials/header.html +++ b/users/fcuny/notes/layouts/partials/header.html @@ -1,15 +1,13 @@ <header> <nav class='menu'> - <a href="{{ .Site.Home.Permalink }}">{{ .Site.Home.Title }}</a> - <ul> + <a href="{{ .Site.Home.Permalink }}"><b>{{ .Site.Home.Title }}</b></a> + <div class='navigation'> {{ $currentPage := . }} {{ range .Site.Menus.main }} - <li> - <a class='{{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}menu-active{{ end }}' href="{{ absURL .URL }}"> - {{ .Title }} - </a> - </li> + <a class='menu-item {{ if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}menu-active{{ end }}' href="{{ absURL .URL }}"> + {{ .Title }} + </a> {{ end }} - </ul> + </div> </nav> </header> diff --git a/users/fcuny/notes/static/css/custom.css b/users/fcuny/notes/static/css/custom.css index 1113707..3475d1f 100644 --- a/users/fcuny/notes/static/css/custom.css +++ b/users/fcuny/notes/static/css/custom.css @@ -115,39 +115,57 @@ blockquote { nav.menu { display: flex; - flex: 2 0px; - justify-content: flex-end; - padding-left: 1em; + justify-content: flex-start; + flex-direction: row; + flex-wrap: nowrap; margin: 0 auto; + font-size: 18px; } -nav.menu ul { +.navigation { display: flex; - list-style-type: none; - margin: 0 + justify-content: flex-end; + flex-direction: row; + flex-wrap: nowrap; + box-sizing: border-box; + flex-basis: auto; + flex-grow: 1; + align-items: center; +} + +.menu-item { + box-sizing: border-box; + font-weight: 400; + padding-right: 8px; } nav.menu a { - padding: 1em; display: inline-block; color: black; - font-family: sans-serif; text-decoration: none; transition: all 75ms ease-in; } -nav.menu a:hover { - color: #fff; - background-color: #007d9c; +.navigation a:hover { + text-decoration: underline; + text-decoration-thickness: 4px; + text-underline-offset:.3rem; + color: #007d9c; } -nav.menu a.menu-active:hover { - color: #fff; - background-color: #007d9c; +a.menu-active:hover { + text-decoration: underline; + text-underline-offset:.3rem; + color: #007d9c; + font-weight: 700; } -nav.menu a.menu-active { +a.menu-active { + text-decoration: underline; + text-underline-offset:.3rem; + text-decoration-thickness: 4px; color: #007d9c; + font-weight: 700; } .toc { |