diff options
| -rw-r--r-- | themes/conspiracy/assets/css/style.css | 66 | ||||
| -rw-r--r-- | themes/conspiracy/layouts/partials/header.html | 33 |
2 files changed, 58 insertions, 41 deletions
diff --git a/themes/conspiracy/assets/css/style.css b/themes/conspiracy/assets/css/style.css index 96dc56b..d365591 100644 --- a/themes/conspiracy/assets/css/style.css +++ b/themes/conspiracy/assets/css/style.css @@ -16,6 +16,8 @@ html { --c-bg-secondary: #ff9449; --shadow-opacity: 0.8; + + --default-border: 0.5px dotted rgba(255, 255, 255, 0.3); } @font-face { @@ -72,16 +74,6 @@ strong { font-style: italic; } -nav { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - overflow-x: scroll; - background-color: var(--c-bg-front); - box-shadow: 0 0 3px 2px rgba(0, 0, 0, var(--shadow-opacity)); - padding: 0 10px 0 10px; -} - a:hover, a:visited, a:active, a:link { color: var(--c-fg-secondary); text-decoration: none; @@ -92,20 +84,36 @@ a:hover { color: var(--c-text); } -nav > a:link, nav > a:active, nav > a:visited, nav > a:hover { +nav { + display: flex; + flex-direction: row; + flex-wrap: wrap; + background-color: var(--c-bg-front); + box-shadow: 0 0 3px 2px rgba(0, 0, 0, var(--shadow-opacity)); + padding: 0 10px 0 10px; + justify-content: space-between; +} + +nav > div { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; + border-top: var(--default-border); + margin-top: -1px; +} + +nav a:link, nav a:active, nav a:visited, nav a:hover { flex-grow: 1; + text-align: center; color: inherit; padding: 10px 10px 10px 10px; } -nav > a:hover { +nav a:hover { background: var(--c-bg-primary); } -nav > .spacer { - flex-grow: 100; -} - .breadcrumbs { max-width: 40em; text-align: center; @@ -136,13 +144,6 @@ main { hyphens: auto; } -@media (max-width: 30em) { - main { - padding-left: 20px; - padding-right: 20px; - } -} - main > .intro { margin-top: 40px; } @@ -238,7 +239,7 @@ main.cards { .card > .links { margin-left: -20px; margin-bottom: -30px; - border-top: 0.5px dotted rgba(255, 255, 255, 0.3); + border-top: var(--default-border); margin-top: 20px; width: calc(100% + 40px); display: flex; @@ -254,7 +255,7 @@ main.cards { main > .links { margin: 20px 0px 40px 0px; - border: 0.5px dotted rgba(255, 255, 255, 0.3); + border: var(--default-border); border-left: none; border-right: none; width: calc(100%); @@ -475,6 +476,17 @@ body .s1 { color: var(--c-text); font-weight: 600 } /* Literal.String.Single */ body .ss { color: var(--c-text); font-weight: 600 } /* Literal.String.Symbol */ body .il { color: var(--c-text); font-weight: 600 } /* Literal.Number.Integer.Long */ +@media (max-width: 40em) { + nav > div { + flex-grow: 1; + } + + main { + padding-left: 20px; + padding-right: 20px; + } +} + @media print, (prefers-color-scheme: light) { html { --c-bg-backdrop: hsl(220, 10%, 90%); @@ -493,13 +505,15 @@ body .il { color: var(--c-text); font-weight: 600 } /* Literal.Number.Integer.L --c-bg-secondary: hsl(319, 98%, 52%); --shadow-opacity: 0.2; + + --default-border: 0.5px dotted hsla(220, 10%, 30%, 50%); } body > header > h1 { filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.4)); } - a:hover, nav > a:hover { + a:hover, nav a:hover { color: var(--c-text-inverted); } diff --git a/themes/conspiracy/layouts/partials/header.html b/themes/conspiracy/layouts/partials/header.html index 675f899..e252f1f 100644 --- a/themes/conspiracy/layouts/partials/header.html +++ b/themes/conspiracy/layouts/partials/header.html @@ -1,17 +1,20 @@ <nav> - {{- $currentPage := . }} - <!-- todo: put this in a "pages" drop down on mobile --> - {{- range site.Menus.main }} - {{- $menu_item_url := .URL | absURL }} - {{- $page_url:= $currentPage.Permalink | absURL }} - <a href="{{ .URL }}" title="{{ .Title | default .Name }}" {{- if eq $menu_item_url $page_url }} class="active" {{- end }}> - {{- .Pre }} - {{- .Name -}} - {{ .Post -}} - </a> - {{- end }} - <span class="spacer"></span> - {{- range site.Params.profile_links }} - <a href="{{ .url | absURL }}" title="{{ .name }}">{{ .name }}</a> - {{- end }} + <div class="internal"> + {{- $currentPage := . }} + <!-- todo: put this in a "pages" drop down on mobile --> + {{- range site.Menus.main }} + {{- $menu_item_url := .URL | absURL }} + {{- $page_url:= $currentPage.Permalink | absURL }} + <a href="{{ .URL }}" title="{{ .Title | default .Name }}" {{- if eq $menu_item_url $page_url }} class="active" {{- end }}> + {{- .Pre }} + {{- .Name -}} + {{ .Post -}} + </a> + {{- end }} + </div> + <div class="external"> + {{- range site.Params.profile_links }} + <a href="{{ .url | absURL }}" title="{{ .name }}">{{ .name }}</a> + {{- end }} + </span> </nav> |