Move site header layout styles to columns; fix nav spacing
Do a bit of testing on Chrome too.
This commit is contained in:
parent
17f576406f
commit
20e76897ff
7 changed files with 141 additions and 129 deletions
|
|
@ -1,14 +1,2 @@
|
|||
@layer reset, typography, root, layout, section, page, utility;
|
||||
|
||||
:root {
|
||||
--menu-icon-size: 20px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--twitter-icon: url(/icons/twitter-dark.svg);
|
||||
--github-icon: url(/icons/github-dark.svg);
|
||||
--instagram-icon: url(/icons/instagram-dark.svg);
|
||||
--feed-icon: url(/icons/rss-dark.svg);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -156,6 +156,10 @@
|
|||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
h1.gradient a[href] {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
header.site nav > li {
|
||||
|
|
@ -198,12 +202,16 @@
|
|||
background-color: inherit;
|
||||
}
|
||||
|
||||
.title, .title a {
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
.post header a,
|
||||
.post header a:visited {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.social > li + li:before {
|
||||
color: var(--dark);
|
||||
}
|
||||
|
||||
.title, .title a {
|
||||
color: var(--color);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
--list-item-block-gap: var(--body-item-spacing);
|
||||
--margin-min-width: var(--body-item-spacing);
|
||||
--margin-max-width: 1fr;
|
||||
--menu-icon-size: 20px;
|
||||
--nav-bulleted-spacing: 0.75rem;
|
||||
}
|
||||
|
||||
|
|
@ -159,6 +160,60 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
header.site {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
header.site h1 {
|
||||
margin: 0;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
header.site > .grid {
|
||||
align-items: baseline;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0 0.5em;
|
||||
margin: 0 auto;
|
||||
max-width: var(--content-width);
|
||||
padding: 1.5rem 3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
header.site > .grid > nav {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
header.site nav > li { display: block; }
|
||||
|
||||
header.site nav:first-of-type {
|
||||
justify-content: start;
|
||||
order: 2;
|
||||
}
|
||||
@media (max-width: 435px) {
|
||||
header.site nav:first-of-type { order: 5; }
|
||||
}
|
||||
|
||||
header.site nav:last-of-type {
|
||||
justify-content: end;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
@media (max-width: 516px) {
|
||||
header.site > .platter {
|
||||
border-left: none;
|
||||
border-radius: 0;
|
||||
border-right: none;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
header.site > .grid { max-width: none; }
|
||||
}
|
||||
|
||||
img {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
|
|
@ -192,12 +247,16 @@
|
|||
padding-block-start: 0.5em;
|
||||
}
|
||||
|
||||
nav.bulleted>li:first-child::before {
|
||||
margin-inline: 0;
|
||||
nav.bulleted > li:not(:first-child)::before {
|
||||
margin-inline-start: var(--nav-bulleted-spacing);
|
||||
}
|
||||
|
||||
nav.bulleted>li::before {
|
||||
margin-inline: var(--nav-bulleted-spacing);
|
||||
nav.social > li {
|
||||
margin-inline-start: var(--nav-bulleted-spacing);
|
||||
}
|
||||
|
||||
nav.social > li:first-child {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
|
|
@ -240,6 +299,10 @@
|
|||
display: grid;
|
||||
grid-template-columns: subgrid;
|
||||
}
|
||||
|
||||
.list .post header h1 {
|
||||
grid-column: content-start / content-end;
|
||||
}
|
||||
}
|
||||
|
||||
.list .post time {
|
||||
|
|
@ -329,12 +392,30 @@
|
|||
grid-column: gutter-start / gutter-end;
|
||||
}
|
||||
|
||||
.post p,
|
||||
.post .tags,
|
||||
.post .title {
|
||||
.post > * {
|
||||
grid-column: content-start / content-end;
|
||||
}
|
||||
|
||||
.social {
|
||||
display: block flex;
|
||||
margin-left: auto;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.social > li > a {
|
||||
display: block;
|
||||
height: var(--menu-icon-size);
|
||||
width: var(--menu-icon-size);
|
||||
}
|
||||
|
||||
.social > li > a > span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.social > li + li:before {
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
.youtube iframe {
|
||||
aspect-ratio: 16 / 9;
|
||||
margin-bottom: -3px;
|
||||
|
|
|
|||
|
|
@ -17,104 +17,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
header.site a[href],
|
||||
header.site a[href]:hover {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
header.site {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
header.site h1 {
|
||||
margin: 0;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
header.site > .grid {
|
||||
align-items: baseline;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0 0.5em;
|
||||
margin: 0 auto;
|
||||
max-width: var(--content-width);
|
||||
padding: 1.5rem 3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
header.site > .grid > nav {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
header.site nav > li { display: block; }
|
||||
|
||||
header.site nav:first-of-type {
|
||||
justify-content: start;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
header.site nav:last-of-type {
|
||||
justify-content: end;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
@media (max-width: 516px) {
|
||||
header.site > .platter {
|
||||
border-left: none;
|
||||
border-radius: 0;
|
||||
border-right: none;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
header.site > .grid { max-width: none; }
|
||||
}
|
||||
|
||||
@media (max-width: 435px) {
|
||||
header.site nav:first-of-type { order: 5; }
|
||||
}
|
||||
|
||||
nav.social > li { margin-inline-start: var(--nav-bulleted-spacing); }
|
||||
nav.social > li:first-child { margin-inline-start: 0; }
|
||||
|
||||
.social {
|
||||
display: block flex;
|
||||
letter-spacing: 2px;
|
||||
margin-left: auto;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.social > li > a {
|
||||
background-image: var(--url);
|
||||
background-repeat: no-repeat;
|
||||
background-size: var(--menu-icon-size);
|
||||
display: block;
|
||||
height: var(--menu-icon-size);
|
||||
width: var(--menu-icon-size);
|
||||
}
|
||||
|
||||
.social > li > a > span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.social > li + li:before {
|
||||
color: var(--dark);
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
#social-menu-mastodon img {
|
||||
content: var(--mastodon-icon);
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
#social-menu-mastodon img { content: var(--mastodon-icon); }
|
||||
#social-menu-github img { content: var(--github-icon); }
|
||||
#social-menu-instagram img { content: var(--instagram-icon); }
|
||||
#social-menu-feed img { content: var(--feed-icon); }
|
||||
|
||||
#social-menu-mastodon img {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -80,7 +80,17 @@
|
|||
content: "↳";
|
||||
}
|
||||
|
||||
header.site nav > .active { font-weight: bold; }
|
||||
header.site h1 > a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
header.site nav {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
header.site nav > .active {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: var(--font-family-heading);
|
||||
|
|
@ -157,6 +167,9 @@
|
|||
line-height: var(--line-height);
|
||||
}
|
||||
|
||||
.social {
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: var(--h5-size);
|
||||
|
|
|
|||
|
|
@ -9,13 +9,18 @@
|
|||
<nav class="social">
|
||||
{{ with site.Menus.social }}
|
||||
{{- range . -}}
|
||||
{{- $id := .Identifier -}}
|
||||
{{- $targetBlank := .Params.targetBlank | default true -}}
|
||||
<li id="social-menu-{{ $id }}">
|
||||
<a href="{{ .URL }}" {{ if $targetBlank }}target="_blank"{{ end }} aria-label="{{ .Name }}">
|
||||
<img alt="{{ .Name }}">
|
||||
</a>
|
||||
</li>
|
||||
{{- $id := .Identifier -}}
|
||||
{{- $targetBlank := .Params.targetBlank | default true -}}
|
||||
<li id="social-menu-{{ $id }}">
|
||||
<a
|
||||
href="{{ .URL }}"
|
||||
{{ if $targetBlank }}
|
||||
target="_blank"
|
||||
{{ end }}
|
||||
aria-label="{{ .Name }}">
|
||||
<img alt="{{ .Name }}" width=20 height=20>
|
||||
</a>
|
||||
</li>
|
||||
{{- end -}}
|
||||
{{ end }}
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,15 @@
|
|||
<nav class="site bulleted">
|
||||
{{ with site.Menus.main }}
|
||||
{{- range . -}}
|
||||
<li><a {{ if $currentPage.HasMenuCurrent "main" . }} class="active"{{ end }} href="{{ .URL }}"><span>{{ .Name }}</span></a></li>
|
||||
<li>
|
||||
<a
|
||||
{{ if $currentPage.HasMenuCurrent "main" . }}
|
||||
class="active"
|
||||
{{ end }}
|
||||
href="{{ .URL }}">
|
||||
<span>{{ .Name }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{{- end -}}
|
||||
{{ end }}
|
||||
</nav>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue