Rework header and navbar
This commit is contained in:
timvisee
parent
a727923046
commit
c7c9dccd04
|
|
@ -0,0 +1,3 @@
|
|||
<svg id="glyphicons-halflings" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path id="menu" d="M17,4V5a1,1,0,0,1-1,1H4A1,1,0,0,1,3,5V4A1,1,0,0,1,4,3H16A1,1,0,0,1,17,4ZM16,8H4A1,1,0,0,0,3,9v1a1,1,0,0,0,1,1H16a1,1,0,0,0,1-1V9A1,1,0,0,0,16,8Zm0,5H4a1,1,0,0,0-1,1v1a1,1,0,0,0,1,1H16a1,1,0,0,0,1-1V14A1,1,0,0,0,16,13Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 336 B |
|
|
@ -1,34 +1,50 @@
|
|||
/**
|
||||
* Logo banner.
|
||||
*/
|
||||
header#banner .logo {
|
||||
display: inline-block;
|
||||
margin: 0.5em 0;
|
||||
padding: 1rem 1.75rem;
|
||||
overflow: visible;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
transition: border-color 0.2s ease-in-out,
|
||||
color 0.2s ease-in-out,
|
||||
background-color 0.2s ease-in-out;
|
||||
color: $logo-color;
|
||||
border: $logo-color solid 5px;
|
||||
font-family: $font-logo;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.075em;
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
header#banner {
|
||||
.logo {
|
||||
display: inline-block;
|
||||
margin: 0.5em 0;
|
||||
padding: 0.5em 1em;
|
||||
overflow: visible;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
transition: border-color 0.2s ease-in-out,
|
||||
color 0.2s ease-in-out,
|
||||
background-color 0.2s ease-in-out;
|
||||
color: $logo-color;
|
||||
border: $logo-color solid 0.2em;
|
||||
font-family: $font-logo;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.075em;
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover {
|
||||
border-color: $logo-color-hover !important;
|
||||
color: $logo-color-hover !important;
|
||||
&:hover {
|
||||
border-color: $logo-color-hover !important;
|
||||
color: $logo-color-hover !important;
|
||||
}
|
||||
&:active {
|
||||
border-color: $logo-color-hover !important;
|
||||
color: $logo-color-hover !important;
|
||||
background-color: rgba($logo-color-hover, 0.2) !important;
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
border-color: $logo-color-hover !important;
|
||||
color: $logo-color-hover !important;
|
||||
background-color: rgba($logo-color-hover, 0.2) !important;
|
||||
|
||||
section.actions {
|
||||
a.theme-toggle,
|
||||
a.navbar-toggle {
|
||||
padding: 0.35em;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
|
||||
svg {
|
||||
max-width: none !important;
|
||||
max-height: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -105,15 +121,6 @@ content {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Theme toggle button.
|
||||
*/
|
||||
.theme-toggle {
|
||||
font-size: 1.1rem;
|
||||
line-height: 2.2em;
|
||||
float: right;
|
||||
}
|
||||
|
||||
/**
|
||||
* Text style modifiers.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ $color-link: #02c39a;
|
|||
$color-link-hover: lighten($color-link, 15%);
|
||||
|
||||
// Top logo and landing page
|
||||
$logo-color: #ddd;
|
||||
// $logo-color: #ddd;
|
||||
$logo-color: $color-text;
|
||||
$logo-color-hover: $color-link-hover;
|
||||
$landing-color-shadow: $color-main-border;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,71 @@
|
|||
body > header {
|
||||
text-align: center;
|
||||
margin: 1em 0;
|
||||
padding: 0 2.5em 0 2.5em;
|
||||
}
|
||||
|
||||
body > header {
|
||||
display: grid;
|
||||
column-gap: 1em;
|
||||
|
||||
grid-template-columns: min-content auto min-content;
|
||||
grid-template-areas:
|
||||
"logo nav actions";
|
||||
|
||||
a.logo {
|
||||
grid-area: logo;
|
||||
place-self: center;
|
||||
}
|
||||
|
||||
section.navbar {
|
||||
grid-area: nav;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
display: inline;
|
||||
line-height: 2;
|
||||
width: 100%;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
padding: 0 1em;
|
||||
font-family: $font-main;
|
||||
|
||||
&.active {
|
||||
background-color: rgba($color-link, 0.1);
|
||||
}
|
||||
&:active {
|
||||
background-color: rgba($color-link-hover, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li.sub > a {
|
||||
padding-left: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section.actions {
|
||||
grid-area: actions;
|
||||
justify-self: end;
|
||||
align-self: center;
|
||||
display: flex;
|
||||
|
||||
a {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
a.navbar-toggle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
margin: 0 1em 3em 1em;
|
||||
margin: 0 0 3em 0;
|
||||
display: flex;
|
||||
color: $color-text;
|
||||
transition: color 0.2s ease;
|
||||
|
|
@ -12,8 +73,7 @@ main {
|
|||
|
||||
content {
|
||||
font-family: $font-read;
|
||||
padding: 2.5em;
|
||||
background: $color-main-bg;
|
||||
padding: 0.5em 2.5em 2.5em 2.5em;
|
||||
flex: 1;
|
||||
overflow-x: auto;
|
||||
overflow-y: visible;
|
||||
|
|
|
|||
|
|
@ -9,30 +9,43 @@
|
|||
|
||||
sidebar {
|
||||
width: auto;
|
||||
border-left: none;
|
||||
border-top: 1px dashed $color-main-border;
|
||||
}
|
||||
|
||||
header#banner {
|
||||
grid-template-columns: min-content auto;
|
||||
grid-template-rows: min-content auto;
|
||||
grid-template-areas:
|
||||
"logo actions"
|
||||
"nav nav";
|
||||
|
||||
// Use vertical navbar under header
|
||||
section.navbar {
|
||||
display: none;
|
||||
&.visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
ul li a {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
section.actions .navbar-toggle {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $responsive-mini) {
|
||||
header#banner {
|
||||
font-size: 0.7rem;
|
||||
margin: 0.5em 0;
|
||||
|
||||
p.greeting.top {
|
||||
margin-top: 2.5em;
|
||||
}
|
||||
a {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
header#banner .logo {
|
||||
padding: 0.7rem 1.25rem;
|
||||
font-size: 1.5rem;
|
||||
border-width: 4px;
|
||||
}
|
||||
|
||||
content {
|
||||
padding: 1.5em 1em;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
body > header {
|
||||
padding: 0 1em 0 1em;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -29,3 +29,7 @@ theme_set(localStorage.getItem('theme-toggled'));
|
|||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
document.body.classList.remove('notransition');
|
||||
});
|
||||
|
||||
function navbar_toggle() {
|
||||
document.getElementById('navbar').classList.toggle('visible');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -99,6 +99,33 @@
|
|||
{% block header %}
|
||||
<header id="banner">
|
||||
<a href="/" class="logo">{{ config.extra.zenn_title }}</a>
|
||||
|
||||
{% if config.extra.zenn_menu -%}
|
||||
<section id="navbar" class="navbar">
|
||||
<ul>
|
||||
<nav itemscope itemtype="http://schema.org/SiteNavigationElement">
|
||||
{% for item in config.extra.zenn_menu %}
|
||||
<li>
|
||||
<a itemprop="url"
|
||||
class="{% if item.url | replace(from="$BASE_URL", to=config.base_url) == current_url %}active{% endif %}"
|
||||
href="{{ item.url | safe | replace(from="$BASE_URL", to=config.base_url) }}">
|
||||
<span itemprop="name">{{ item.name }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</nav>
|
||||
</ul>
|
||||
</section>
|
||||
{%- endif %}
|
||||
|
||||
<section class="actions">
|
||||
<a href="#" class="theme-toggle" onclick="theme_toggle(); return false;" title="Toggle light/dark mode">
|
||||
{{ load_data(path="static/icons/glyphicons-halflings-51-contrast.svg") | safe -}}
|
||||
</a>
|
||||
<a href="#" class="navbar-toggle" onclick="navbar_toggle(); return false;" title="Show/hide navbar">
|
||||
{{ load_data(path="static/icons/glyphicons-halflings-227-menu.svg") | safe -}}
|
||||
</a>
|
||||
</section>
|
||||
</header>
|
||||
{% endblock header %}
|
||||
{%- endif -%}
|
||||
|
|
@ -106,10 +133,6 @@
|
|||
{% block main %}
|
||||
<main>
|
||||
<content>
|
||||
<a href="#" class="theme-toggle" onclick="theme_toggle(); return false;" title="Toggle light/dark mode">
|
||||
{{ load_data(path="static/icons/glyphicons-halflings-51-contrast.svg") | safe -}}
|
||||
</a>
|
||||
|
||||
{% if section.title -%}
|
||||
<header>
|
||||
<h1>
|
||||
|
|
|
|||
Loading…
Reference in New Issue