diff options
| -rw-r--r-- | _includes/views/banner.html | 2 | ||||
| -rw-r--r-- | _includes/views/header.html | 78 | ||||
| -rw-r--r-- | _sass/yat/_layout.scss | 28 |
3 files changed, 57 insertions, 51 deletions
diff --git a/_includes/views/banner.html b/_includes/views/banner.html index 45ea62c..b62181a 100644 --- a/_includes/views/banner.html +++ b/_includes/views/banner.html @@ -51,7 +51,7 @@ <h3 class="page-banner-subheading"> {{ subheading | default: page.subtitle | escape }} </h3> - <div> + </div> {%- endif -%} </div> diff --git a/_includes/views/header.html b/_includes/views/header.html index 10637c2..835d4cb 100644 --- a/_includes/views/header.html +++ b/_includes/views/header.html @@ -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 -%} - - <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 -%} + <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> + + {%- 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> diff --git a/_sass/yat/_layout.scss b/_sass/yat/_layout.scss index 571bb4f..e4960f1 100644 --- a/_sass/yat/_layout.scss +++ b/_sass/yat/_layout.scss @@ -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; + } } } |