Center logo and nav items on small screens
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
611a255293
commit
9fcf074888
|
@ -37,8 +37,8 @@ header, footer {
|
|||
header {
|
||||
align-items: center;
|
||||
background: $color-background;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
justify-content: space-between;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
|
@ -48,9 +48,22 @@ header {
|
|||
display: block;
|
||||
}
|
||||
|
||||
nav {
|
||||
grid-column: 1 / span 3;
|
||||
|
||||
a {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.header-brand {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
grid-column: 2 / span 1;
|
||||
|
||||
& > .sm-menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.header-logo {
|
||||
|
@ -59,12 +72,14 @@ header {
|
|||
}
|
||||
|
||||
.nav-burger {
|
||||
grid-column: 3 / span 1;
|
||||
justify-self: end;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.sm-menu {
|
||||
display: flex;
|
||||
margin-left: 0.5rem;
|
||||
grid-column: 1 / span 1;
|
||||
|
||||
a {
|
||||
margin-left: 0.5rem;
|
||||
|
@ -82,8 +97,18 @@ header {
|
|||
}
|
||||
|
||||
@media screen and (min-width: $small) {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
& > .header-brand > .sm-menu {
|
||||
display: flex;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
& > .sm-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
nav {
|
||||
flex-wrap: wrap;
|
||||
justify-content: right;
|
||||
|
|
|
@ -17,13 +17,10 @@
|
|||
</head>
|
||||
<body>
|
||||
<header>
|
||||
{{ partial "sm-menu.html" . }}
|
||||
<div class="header-brand">
|
||||
<a href="{{ .Site.BaseURL }}"><img alt="Logo von kontakt – dem Kulturprojekt" class="header-logo" src="/logo.svg"></a>
|
||||
<div class="sm-menu">
|
||||
{{ range .Site.Menus.sm }}
|
||||
<a href="{{ .URL }}"{{ if hasPrefix .URL "https://" }} target="_blank"{{ end }}><img alt="{{ .Name }}" class="sm-icon" src="{{ .Params.src }}"></a>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ partial "sm-menu.html" . }}
|
||||
</div>
|
||||
<input class="nav-toggle" id="toggleMainNav" type="checkbox">
|
||||
<label class="nav-burger" for="toggleMainNav">
|
||||
|
|
|
@ -0,0 +1,6 @@
|
|||
<div class="sm-menu">
|
||||
{{ range .Site.Menus.sm }}
|
||||
<a href="{{ .URL }}"{{ if hasPrefix .URL "https://" }} target="_blank"{{ end }}><img alt="{{ .Name }}" class="sm-icon" src="{{ .Params.src }}"></a>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue