initial

themes/next/source/css/_common/components/header/github-banner.styl

@@ -0,0 +1,55 @@
+@keyframes octocat-wave {
+  0%, 100% {
+    transform: rotate(0);
+  }
+  20%, 60% {
+    transform: rotate(-25deg);
+  }
+  40%, 80% {
+    transform: rotate(10deg);
+  }
+}
+
+.github-corner {
+  scheme = hexo-config('scheme');
+  bg_color = unquote(hexo-config('android_chrome_color'));
+  mobile_layout_economy = hexo-config('mobile_layout_economy');
+
+  :hover .octo-arm {
+    animation: octocat-wave 560ms ease-in-out;
+  }
+  > svg {
+    fill: bg_color;
+    color: #fff;
+    position: absolute;
+    top: 0;
+    border: 0;
+    right: 0;
+  }
+  +tablet-mobile() {
+    > svg {
+      if (scheme == 'Pisces') || (scheme == 'Gemini') {
+        fill: #fff;
+        color: bg_color;
+      }
+    }
+    .github-corner:hover .octo-arm {
+      animation: none;
+    }
+    .github-corner .octo-arm {
+      animation: octocat-wave 560ms ease-in-out;
+    }
+  }
+  +mobile() {
+    > svg {
+      if (scheme == 'Mist') {
+        top: inherit;
+        if mobile_layout_economy {
+          +mobile-small() {
+            margin-top: initial;
+          }
+        }
+      }
+    }
+  }
+}

themes/next/source/css/_common/components/header/header.styl

@@ -0,0 +1,9 @@
+.header { background: $head-bg; }
+
+.header-inner { position: relative; }
+
+@import "headerband";
+@import "site-meta";
+@import "site-nav";
+@import "menu";
+@import "github-banner" if hexo-config('github_banner.enable');

themes/next/source/css/_common/components/header/headerband.styl

@@ -0,0 +1,4 @@
+.headband {
+  height: $headband-height;
+  background: $headband-bg;
+}

themes/next/source/css/_common/components/header/menu.styl

@@ -0,0 +1,32 @@
+// Menu
+// --------------------------------------------------
+.menu {
+  margin-top: 20px;
+  padding-left: 0;
+  text-align: center;
+}
+
+.menu .menu-item {
+  display: inline-block;
+  margin: 0 10px;
+  list-style: none;
+
+  +mobile() {
+    margin-top: 10px;
+  }
+
+  a, span.exturl {
+    show();
+    font-size: 13px;
+    line-height: inherit;
+    border-bottom: 1px solid $menu-link-border;
+    transition-property: border-color;
+    the-transition();
+
+    &:hover { border-bottom-color: $menu-link-hover-border; }
+  }
+
+  .fa { margin-right: 5px; }
+}
+
+.use-motion .menu-item { opacity: 0; }

themes/next/source/css/_common/components/header/site-meta.styl

@@ -0,0 +1,48 @@
+.site-meta {
+  margin: 0;
+  text-align: $site-meta-text-align;
+
+  +mobile() { text-align: center; }
+}
+
+.brand {
+  position: relative;
+  display: inline-block;
+  padding: 0 40px;
+  color: $brand-color;
+  background: $brand-bg;
+  border-bottom: none;
+  &:hover { color: $brand-hover-color; }
+}
+
+.logo {
+  display: inline-block;
+  margin-right: 5px;
+  line-height: 36px;
+  vertical-align: top;
+}
+
+.site-title {
+  display: inline-block;
+  vertical-align: top;
+  line-height: 36px;
+  font-size: $logo-font-size;
+  font-weight: normal;
+  font-family: $font-family-logo;
+}
+
+.site-subtitle {
+  margin-top: 10px;
+  font-size: $subtitle-font-size;
+  color: $subtitle-color;
+}
+
+.use-motion {
+  .brand { opacity: 0; }
+
+  .logo, .site-title, .site-subtitle, .custom-logo-image {
+    opacity: 0;
+    position: relative;
+    top: -10px;
+  }
+}

themes/next/source/css/_common/components/header/site-nav.styl

@@ -0,0 +1,28 @@
+.site-nav-toggle {
+  hide();
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  +mobile() {
+    show();
+  }
+
+  button {
+    margin-top: 2px;
+    padding: 9px 10px;
+    background: transparent;
+    border: none;
+  }
+}
+
+.site-nav {
+  +mobile() {
+    hide();
+    margin: 0 -10px;
+    padding: 0 10px;
+    clear: both;
+    border-top: 1px solid $gray-lighter;
+  }
+  +tablet() { display: block !important; }
+  +desktop() { display: block !important; }
+}