From bc9e5840fbdc681f9c2f0fa4c79ff90eac7f2ebb Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Tue, 20 Feb 2018 19:02:05 +0200 Subject: [PATCH] Website updates Updated the header bar to be slimmer and more usable, updated the search bar styling, added smooth-scrolling for links in the same page. --- .gitignore | 4 +++ docs/mini/flavor.scss | 53 ++++++++++------------------------- static-parts/index-start.html | 40 ++++++++++++++++++++------ 3 files changed, 50 insertions(+), 47 deletions(-) diff --git a/.gitignore b/.gitignore index d6b1b7f9c..a7eb01438 100644 --- a/.gitignore +++ b/.gitignore @@ -4,3 +4,7 @@ currentSnippet\.js .idea test.sh /*.log + +dist/flavor\.min\.css + +dist/flavor\.css diff --git a/docs/mini/flavor.scss b/docs/mini/flavor.scss index 59775783e..9c5ce4a87 100644 --- a/docs/mini/flavor.scss +++ b/docs/mini/flavor.scss @@ -92,7 +92,7 @@ $button-hover-border-color-var: '--btn-h-br-col'; $button-group-border-color-var: '--btn-grp-br-col'; -$_include-fluid-input-group: false; +$_include-fluid-input-group: true; @import 'input_control'; @@ -195,68 +195,45 @@ pre { border: 0.0625rem solid var(#{$secondary-border-color-var}); border-radius: var(#{$universal-border-radius-var}); } -.group{ - position:relative; - margin-top: 2em; - margin-bottom: 1em -} -.search{ + +.search { font-size: 0.875rem; - margin-top: -0.1em; - display:block; - width:100%; - border:none; - border-bottom: $__1px solid var(#{$nav-link-color-var}); -} -.search:focus{ - outline:none -} -label#search-label{ - color:var(#{$nav-link-color-var}); - font-size: 1.125rem; - font-weight:400; - position:absolute; - left: 0.3125rem; - top: 0.625rem; -} -.search:focus ~ label#search-label,.search:valid ~ label#search-label{ - top: -1.25rem; - font-size: 0.875rem; - color:var(#{$nav-link-color-var}); -} -label#menu-toggle { - width: 3.4375rem; } header h1.logo { margin-top: -0.8rem; text-align:center; + position: relative; + top: 0; + transition: top 0.3s; a { text-decoration:none; color: #111; } + @media screen and (min-width: 769px) { + &:hover { + top: -3.5rem; + } + } } header #title { position:relative; top: -1rem; - @media screen and (max-width: 500px) { font-size: 1rem; display: block } + @media screen and (max-width: 768px) { display: none; } } header h1 small { display:block; font-size: 0.875rem; color: #888; - margin-top: -0.8rem; - @media screen and (max-width: 768px) { font-size: 0.75rem; } - @media screen and (max-width: 600px) { font-size: 0.625rem; } - @media screen and (max-width: 500px) { font-size: 0.5rem; margin-top: -1.2rem; } + margin-top: 0.75rem; } label#menu-toggle { position: absolute; - left: 0.5rem; - top: 0.5rem; + left: 0rem; + top: 0rem; width: 3.4375rem; } diff --git a/static-parts/index-start.html b/static-parts/index-start.html index e5c0702d1..9cf20be62 100644 --- a/static-parts/index-start.html +++ b/static-parts/index-start.html @@ -34,11 +34,30 @@ document.querySelector('main').scrollTo(0, c - c / 4); } }; + function scrollTo(element, to, id, duration) { + if (duration <= 0) return; + var difference = to - element.scrollTop; + var perTick = difference / duration * 40; + + setTimeout(function() { + element.scrollTop = element.scrollTop + perTick; + if (element.scrollTop === to) { + window.location.href = "#"+id; + return; + } + scrollTo(element, to, id, duration - 40); + }, 40); + }; function loader() { registerClickListener(); } function registerClickListener() { document.addEventListener('click', function (event) { + if( document.getElementById('doc-drawer-checkbox').checked ) { + if(!document.querySelector('nav').contains(event.target) && !event.target.classList.contains('drawer-toggle') && !event.target.classList.contains('drawer')) { + document.getElementById('doc-drawer-checkbox').checked = false; + } + } if ( event.target.classList.contains('collapse') ) { event.target.classList = event.target.classList.contains('toggled') ? 'collapse' : 'collapse toggled'; } @@ -64,23 +83,26 @@ else if (event.target.classList.contains('scroll-to-top')){ scrollToTop(); } + else if (event.target.classList.contains('sublink-1')){ + event.preventDefault(); + scrollTo(document.querySelector('main'), document.getElementById(event.target.href.split('#')[1]).parentElement.offsetTop - 60, event.target.href.split('#')[1], 400); + document.getElementById('doc-drawer-checkbox').checked = false; + } }, false); } - -
-

logo 30 seconds of code - Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less. + +
+

logo 30 seconds of code +

-
+