hexo

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";

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;
+
+  @media screen and (max-width: 767px) {
+    margin-top: 10px;
+  }
+
+  a {
+    display: block;
+    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 {
+    opacity: 0;
+    position: relative;
+    top: -10px;
+  }
+}

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

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