diff options
| -rw-r--r-- | _config.yml | 4 | ||||
| -rw-r--r-- | layout/_partial/head.ejs | 2 | ||||
| -rw-r--r-- | layout/_partial/header.ejs | 87 | ||||
| -rw-r--r-- | source/css/style.css | 16 |
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 |