summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--_config.yml4
-rw-r--r--layout/_partial/head.ejs2
-rw-r--r--layout/_partial/header.ejs87
-rw-r--r--source/css/style.css16
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/[email protected]/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/[email protected]/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