Draw header page

4 files changed, 75 insertions, 34 deletions

diff --git a/_config.yml b/_config.yml
index 4294862..bea0c16 100644
--- a/_config.yml
+++ b/_config.yml
@@ -7,8 +7,8 @@ highlight:
   lightmode: 'atom-one-light'
   darkmode: 'atom-one-dark'
 navbar:
-  - ['https://google.com', 'fa fa-google']
-  - ['https://twitter.com', 'fa fa-twitter']
+  - ['https://init.blog', 'fa fa-cube']
+  - ['https://github.com/guiqiqi', 'fa fa-github']
   - ['/feed', 'fa fa-rss']
 menubar:
   - ['/about', 'About']
diff --git a/layout/_partial/head.ejs b/layout/_partial/head.ejs
index 3d4ee79..d20850c 100644
--- a/layout/_partial/head.ejs
+++ b/layout/_partial/head.ejs
@@ -21,6 +21,6 @@
     <!-- Scripts and styles -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma/css/bulma.min.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
-    <link rel="stylesheet" type="text/css" href="https://unpkg.com/bulma-prefers-dark" />
+    <link rel="stylesheet" href="https://unpkg.com/bulma-prefers-dark@0.1.0-beta.0/css/bulma-prefers-dark.min.css" />
     <%- css("css/style.css") %>
 </head>
\ No newline at end of file
diff --git a/layout/_partial/header.ejs b/layout/_partial/header.ejs
index 32d2d2a..f7fef30 100644
--- a/layout/_partial/header.ejs
+++ b/layout/_partial/header.ejs
@@ -1,33 +1,58 @@
-<header class="header">
-    <div class="header-topbar">
-        <div class="header-title">
-            <%= config.title %>
-        </div>
-        <div class="header-menu">
-            <% for (let item of theme.menubar) { %>
-                <a href="<%= item[0] %>"><%= item[1] %></a>
-            <% } %> 
-        </div>
+<section id="header-page" class="hero is-light is-fullheight">
+    <div class="hero-head">
+        <header class="navbar" aria-label="main navigation">
+            <div class="container">
+                <div class="navbar-brand header-title">
+                    <a class="navbar-item is-uppercase has-text-weight-semibold" href="<%= url_for('/') %>">
+                            <%= config.title %>
+                    </a>
+                    <a role="button" class="navbar-burger" data-target="header-menu" aria-label="menu" aria-expanded="false">
+                        <span aria-hidden="true"></span>
+                        <span aria-hidden="true"></span>
+                        <span aria-hidden="true"></span>
+                    </a>
+                </div>
+                <div class="navbar-menu" id="header-menu">
+                    <div class="navbar-end">
+                        <% for (let item of theme.menubar) { %>
+                            <a class="navbar-item is-uppercase" href="<%= item[0] %>">
+                                <%= item[1] %>
+                            </a>
+                        <% } %>
+                    </div>
+                </div>
+            </div>
+        </header>
     </div>
-    <% if (theme.logo) { %>
-        <div class="header-logo" style="background-image: url('<%= theme.logo %>');"></div>
-    <% } %>  
-    <div class="header-desc">
-        <%= config.description %> 
+
+    <div class="hero-body">
+        <div class="container has-text-centered">
+            <p class="title">
+                <% if (theme.logo) { %>
+                    <span class="header-logo" style="background-image: url('<%= theme.logo %>');">
+                    </span>
+                <% } else { %>
+                    <span class="header-title is-size-2 is-family-monospace is-uppercase">
+                        <%= config.title %>
+                    </span>
+                <% } %> 
+            </p>
+            <p class="subtitle is-size-6">
+                <%- config.description %>
+                <ul class="header-navbar">
+                    <% for (let index in theme.navbar) { %>
+                        <% 
+                            const mapping = theme.navbar[index];
+                            const link = mapping[0];
+                            const favicon = mapping[1];
+                            let outter = link.startsWith("https://") ? true : false;
+                        %>
+                        <a class="icon" href="<%= link %>" target="<%= outter ? '_blank' : '_self' %>">
+                            <i class="<%= favicon %>"></i>
+                        </a>
+                    <% } %>
+                </ul>
+            </p>
+        </div>
     </div>
-    <nav class="header-navbar">
-        <ul class="header-menu">
-            <% for (let index in theme.navbar) { %>
-                <% 
-                    const mapping = theme.navbar[index];
-                    const link = mapping[0];
-                    const favicon = mapping[1];
-                    let outter = link.startsWith("https://") ? true : false;
-                %>
-                <a href="<%= link %>" target="<%= outter ? '_blank' : '_self' %>">
-                    <i class="<%= favicon %>"></i>
-                </a>
-            <% } %>
-        </ul>
-    </nav>
-</header>
\ No newline at end of file
+</section>
\ No newline at end of file
diff --git a/source/css/style.css b/source/css/style.css
index 60e5df1..8ce9927 100644
--- a/source/css/style.css
+++ b/source/css/style.css
@@ -1,3 +1,19 @@
 pre {
     background-color: none !important;
+}
+
+@media (prefers-color-scheme: dark) {
+    * {
+        transition: backgourd-color 0.5s;
+    }
+}
+
+@media screen and (max-width: 1023px) {
+    .navbar-menu {
+        box-shadow: 0 8px 16px -8px rgb(10 10 10 / 10%) !important;
+    }
+}
+
+.navbar-brand .navbar-item:hover {
+    background-color: inherit !important;
 }
\ No newline at end of file