update: adjust header and banner
This commit is contained in:
Jeffrey Tse
parent
ce43bb9a6a
commit
8a4923aea8
3 changed files with 55 additions and 49 deletions
|
|
@ -51,7 +51,7 @@
|
|||
<h3 class="page-banner-subheading">
|
||||
{{ subheading | default: page.subtitle | escape }}
|
||||
</h3>
|
||||
<div>
|
||||
</div>
|
||||
|
||||
{%- endif -%}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,45 +16,47 @@
|
|||
<header class="site-header {{ header_transparent_class }}" role="banner">
|
||||
|
||||
<div class="wrapper">
|
||||
{%- assign default_paths = site.pages | where: "dir", "/" | map: "path" -%}
|
||||
{%- assign page_paths = site.header_pages | default: default_paths -%}
|
||||
<div class="site-header-inner">
|
||||
{%- assign default_paths = site.pages | where: "dir", "/" | map: "path" -%}
|
||||
{%- assign page_paths = site.header_pages | default: default_paths -%}
|
||||
|
||||
<span class="site-brand">
|
||||
{%- include views/site-brand.html -%}
|
||||
</span>
|
||||
<span class="site-brand">
|
||||
{%- include views/site-brand.html -%}
|
||||
</span>
|
||||
|
||||
{%- if page_paths -%}
|
||||
<nav class="site-nav">
|
||||
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
|
||||
<label for="nav-trigger">
|
||||
<span class="menu-icon">
|
||||
<svg viewBox="0 0 18 15" width="18px" height="15px">
|
||||
<path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
|
||||
</svg>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<div class="trigger">
|
||||
{%- for path in page_paths -%}
|
||||
{%- assign my_page = site.pages | where: "path", path | first -%}
|
||||
{%- if my_page.title -%}
|
||||
<a class="page-link" href="{{ my_page.url | relative_url }}">
|
||||
{{ my_page.title | upcase | escape }}
|
||||
</a>
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
|
||||
{%- assign name = 'translate_langs' -%}
|
||||
{%- include functions.html func='get_value' -%}
|
||||
{%- assign translate_langs = return -%}
|
||||
{%- if translate_langs.size > 0 -%}
|
||||
<span class="page-link">
|
||||
{%- include extensions/google-translate.html -%}
|
||||
{%- if page_paths -%}
|
||||
<nav class="site-nav">
|
||||
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
|
||||
<label for="nav-trigger">
|
||||
<span class="menu-icon">
|
||||
<svg viewBox="0 0 18 15" width="18px" height="15px">
|
||||
<path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
|
||||
</svg>
|
||||
</span>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</nav>
|
||||
{%- endif -%}
|
||||
</label>
|
||||
|
||||
<div class="trigger">
|
||||
{%- for path in page_paths -%}
|
||||
{%- assign my_page = site.pages | where: "path", path | first -%}
|
||||
{%- if my_page.title -%}
|
||||
<a class="page-link" href="{{ my_page.url | relative_url }}">
|
||||
{{ my_page.title | upcase | escape }}
|
||||
</a>
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
|
||||
{%- assign name = 'translate_langs' -%}
|
||||
{%- include functions.html func='get_value' -%}
|
||||
{%- assign translate_langs = return -%}
|
||||
{%- if translate_langs.size > 0 -%}
|
||||
<span class="page-link">
|
||||
{%- include extensions/google-translate.html -%}
|
||||
</span>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</nav>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
|
|
|||
|
|
@ -11,12 +11,10 @@ html {
|
|||
&[data-scroll-status='top'] {
|
||||
header.site-header-transparent {
|
||||
height: 0;
|
||||
text-shadow: 0 0 3px #08080880;
|
||||
}
|
||||
|
||||
header.site-header .page-link {
|
||||
text-shadow: 0 0 2px #080808d0;
|
||||
filter: drop-shadow(0 0 2px #08080880);
|
||||
&.site-header {
|
||||
text-shadow: 0 0 2px #505050a0;
|
||||
}
|
||||
}
|
||||
|
||||
footer.site-footer {
|
||||
|
|
@ -56,6 +54,10 @@ html {
|
|||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.site-header-inner {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.site-brand {
|
||||
|
|
@ -65,17 +67,15 @@ html {
|
|||
.site-brand-inner {
|
||||
@include relative-font-size(1.125);
|
||||
font-weight: $base-font-weight;
|
||||
filter: drop-shadow(0 0 2px #08080880);
|
||||
text-shadow: 0 0 2px #080808d0;
|
||||
letter-spacing: -1px;
|
||||
transition: drop-shadow 0.2s;
|
||||
transition: filter 0.2s;
|
||||
|
||||
&, &:visited {
|
||||
color: $header-text-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
filter: drop-shadow(0 0 3px #080808a0);
|
||||
filter: drop-shadow(0 0 2px #08080880);
|
||||
}
|
||||
|
||||
.site-favicon {
|
||||
|
|
@ -88,8 +88,10 @@ html {
|
|||
|
||||
.site-nav {
|
||||
@include relative-font-size(1.025);
|
||||
float: right;
|
||||
line-height: $header-height;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
||||
.nav-trigger {
|
||||
display: none;
|
||||
|
|
@ -112,12 +114,10 @@ html {
|
|||
@include media-query($on-palm) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: $spacing-unit / 2;
|
||||
text-align: left;
|
||||
|
||||
label[for="nav-trigger"] {
|
||||
display: block;
|
||||
float: right;
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -361,6 +361,10 @@ html {
|
|||
> :nth-child(2) {
|
||||
font-weight: $base-font-weight * 1.5;
|
||||
}
|
||||
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue