kontakt
/
www.kontakt-bamberg.de
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Center logo and nav items on small screens
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Luca 2023-03-30 23:23:32 +02:00
parent 611a255293
commit 9fcf074888
3 changed files with 36 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
assets/style.scss
View File

@ -37,8 +37,8 @@ header, footer {
header { header {
align-items: center; align-items: center;
background: $color-background; background: $color-background;
display: flex; display: grid;
flex-wrap: wrap; grid-template-columns: 1fr auto 1fr;
justify-content: space-between; justify-content: space-between;
position: sticky; position: sticky;
top: 0; top: 0;
@ -48,9 +48,22 @@ header {
display: block; display: block;
} }
nav {
grid-column: 1 / span 3;
a {
text-align: center;
}
}
.header-brand { .header-brand {
align-items: center; align-items: center;
display: flex; display: flex;
grid-column: 2 / span 1;
& > .sm-menu {
display: none;
}
} }
.header-logo { .header-logo {
@ -59,12 +72,14 @@ header {
} }
.nav-burger { .nav-burger {
grid-column: 3 / span 1;
justify-self: end;
margin-right: 0.5rem; margin-right: 0.5rem;
} }
.sm-menu { .sm-menu {
display: flex; display: flex;
margin-left: 0.5rem; grid-column: 1 / span 1;
a { a {
margin-left: 0.5rem; margin-left: 0.5rem;
@ -82,8 +97,18 @@ header {
} }
@media screen and (min-width: $small) { @media screen and (min-width: $small) {
display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
& > .header-brand > .sm-menu {
display: flex;
margin-left: 0.5rem;
}
& > .sm-menu {
display: none;
}
nav { nav {
flex-wrap: wrap; flex-wrap: wrap;
justify-content: right; justify-content: right;

7
layouts/_default/baseof.html
View File

@ -17,13 +17,10 @@
</head> </head>
<body> <body>
<header> <header>
{{ partial "sm-menu.html" . }}
<div class="header-brand"> <div class="header-brand">
<a href="{{ .Site.BaseURL }}"><img alt="Logo von kontakt &ndash; dem Kulturprojekt" class="header-logo" src="/logo.svg"></a> <a href="{{ .Site.BaseURL }}"><img alt="Logo von kontakt &ndash; dem Kulturprojekt" class="header-logo" src="/logo.svg"></a>
<div class="sm-menu"> {{ partial "sm-menu.html" . }}
{{ 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>
</div> </div>
<input class="nav-toggle" id="toggleMainNav" type="checkbox"> <input class="nav-toggle" id="toggleMainNav" type="checkbox">
<label class="nav-burger" for="toggleMainNav"> <label class="nav-burger" for="toggleMainNav">

6
layouts/partials/sm-menu.html Normal file
View File

@ -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>