diff --git a/static/icons/glyphicons-halflings-227-menu.svg b/static/icons/glyphicons-halflings-227-menu.svg
new file mode 100644
index 0000000..1a247ab
--- /dev/null
+++ b/static/icons/glyphicons-halflings-227-menu.svg
@@ -0,0 +1,3 @@
+
diff --git a/themes/zenn/sass/_components.scss b/themes/zenn/sass/_components.scss
index 6e0eb13..b667b29 100644
--- a/themes/zenn/sass/_components.scss
+++ b/themes/zenn/sass/_components.scss
@@ -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.
*/
diff --git a/themes/zenn/sass/_config_dark.scss b/themes/zenn/sass/_config_dark.scss
index a247c30..6734a89 100644
--- a/themes/zenn/sass/_config_dark.scss
+++ b/themes/zenn/sass/_config_dark.scss
@@ -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;
diff --git a/themes/zenn/sass/_layout.scss b/themes/zenn/sass/_layout.scss
index 8b1815b..dd21467 100644
--- a/themes/zenn/sass/_layout.scss
+++ b/themes/zenn/sass/_layout.scss
@@ -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;
diff --git a/themes/zenn/sass/_responsive.scss b/themes/zenn/sass/_responsive.scss
index 621b5eb..6cb9a7c 100644
--- a/themes/zenn/sass/_responsive.scss
+++ b/themes/zenn/sass/_responsive.scss
@@ -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;
}
}
diff --git a/themes/zenn/static/js/theme.js b/themes/zenn/static/js/theme.js
index baa48ca..a25b2c0 100644
--- a/themes/zenn/static/js/theme.js
+++ b/themes/zenn/static/js/theme.js
@@ -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');
+}
diff --git a/themes/zenn/templates/site.html b/themes/zenn/templates/site.html
index 2ec688b..0d57e6d 100644
--- a/themes/zenn/templates/site.html
+++ b/themes/zenn/templates/site.html
@@ -99,6 +99,33 @@
{% block header %}
{% endblock header %}
{%- endif -%}
@@ -106,10 +133,6 @@
{% block main %}
-
- {{ load_data(path="static/icons/glyphicons-halflings-51-contrast.svg") | safe -}}
-
-
{% if section.title -%}