andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Smooth scrolling update

Browse Source
This commit is contained in:
Angelos Chalaris
2018-09-08 13:12:00 +03:00
parent 6ee2cd43ca
commit f68fb53002
5 changed files with 32 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
docs/scss/style.scss
View File

@ -62,14 +62,20 @@ $header-fore-color-var: '--header-fore-color';
$header-fore-color: #fff; $header-fore-color: #fff;
$header-back-color-var: '--header-back-color'; $header-back-color-var: '--header-back-color';
$header-back-color: #202124; $header-back-color: #202124;
$nav-border-color-var: '--nav-border-color'; $nav-fore-color-var: '--nav-fore-color';
$nav-border-color: #e0e0e0; $nav-fore-color: #f0f0f0;
$nav-back-color-var: '--nav-back-color'; $nav-back-color-var: '--nav-back-color';
$nav-back-color: #fafafa; $nav-back-color: #202124;
$nav-link-border-color-var: '--nav-link-border-color'; $nav-link-border-color-var: '--nav-link-border-color';
$nav-link-border-color: #e5e5e5; $nav-link-border-color: #455a64;
$nav-link-fore-color-var: '--nav-link-fore-color';
$nav-link-fore-color: #e0e0e0;
$nav-link-hover-color-var: '--nav-link-hover-color'; $nav-link-hover-color-var: '--nav-link-hover-color';
$nav-link-hover-color: #f0f0f0; $nav-link-hover-color: #2b2c30;
$search-fore-color-var: '--search-fore-color';
$search-fore-color: #fafafa;
$search-back-color-var: '--search-back-color';
$search-back-color: #111;
$search-border-color-var: '--search-border-color'; $search-border-color-var: '--search-border-color';
$search-border-color: #9e9e9e; $search-border-color: #9e9e9e;
$search-hover-border-color-var: '--search-hover-border-color'; $search-hover-border-color-var: '--search-hover-border-color';
@ -177,18 +183,22 @@ $tertiary-fore-color: #222;
#{$advanced-color-var}: $advanced-color; #{$advanced-color-var}: $advanced-color;
#{$header-fore-color-var}: $header-fore-color; #{$header-fore-color-var}: $header-fore-color;
#{$header-back-color-var}: $header-back-color; #{$header-back-color-var}: $header-back-color;
#{$nav-border-color-var}: $nav-border-color; #{$nav-fore-color-var}: $nav-fore-color;
#{$nav-back-color-var}: $nav-back-color; #{$nav-back-color-var}: $nav-back-color;
#{$footer-fore-color-var}: $footer-fore-color; #{$footer-fore-color-var}: $footer-fore-color;
#{$footer-back-color-var}: $footer-back-color; #{$footer-back-color-var}: $footer-back-color;
#{$nav-link-fore-color-var}: $nav-link-fore-color;
#{$nav-link-border-color-var}: $nav-link-border-color; #{$nav-link-border-color-var}: $nav-link-border-color;
#{$nav-link-hover-color-var}: $nav-link-hover-color; #{$nav-link-hover-color-var}: $nav-link-hover-color;
#{$search-fore-color-var}: $search-fore-color;
#{$search-back-color-var}: $search-back-color;
#{$search-border-color-var}: $search-border-color; #{$search-border-color-var}: $search-border-color;
#{$search-hover-border-color-var}: $search-hover-border-color; #{$search-hover-border-color-var}: $search-hover-border-color;
} }
// Set up some basic styling for everything // Set up some basic styling for everything
html { html {
font-size: $base-font-size; font-size: $base-font-size;
scroll-behavior: smooth;
} }
html, * { html, * {
font-family: #{$base-font-family}; font-family: #{$base-font-family};
@ -445,6 +455,7 @@ $grid-large-breakpoint: 1280px;
grid-template-columns: repeat(12, 1fr); grid-template-columns: repeat(12, 1fr);
grid-column-gap: calc(0.5 * var(#{$universal-margin-var})); grid-column-gap: calc(0.5 * var(#{$universal-margin-var}));
&.card-container { &.card-container {
position: absolute;
padding-top: 3.5rem; padding-top: 3.5rem;
height: calc(100vh - 3.5rem); height: calc(100vh - 3.5rem);
} }
@ -695,23 +706,21 @@ header {
nav { nav {
position: fixed; position: fixed;
top: 0; top: 3.5rem;
left: -320px; left: -320px;
width: 320px; width: 320px;
transition: left 0.3s ease; transition: left 0.3s ease;
z-index: 1100; z-index: 1100;
height: 100vh; height: calc(100vh - 3.5rem);
box-sizing: border-box; box-sizing: border-box;
display: block; display: block;
background: var(#{$nav-back-color-var}); background: var(#{$nav-back-color-var});
border-right: $__1px solid var(#{$nav-border-color-var}); border: 0;
overflow-y: auto; overflow-y: auto;
@media screen and (max-width: 320px) { @media screen and (max-width: 320px) {
width: 100%; width: 100%;
} }
@media screen and (min-width: #{$grid-medium-breakpoint}) { @media screen and (min-width: #{$grid-medium-breakpoint}) {
top: 3.5rem;
height: calc(100vh - 3.5rem);
width: 33vw; width: 33vw;
left: -33vw; left: -33vw;
} }
@ -742,6 +751,7 @@ nav {
margin: var(#{$universal-margin-var}); margin: var(#{$universal-margin-var});
padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var})); padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
padding-left: 0; padding-left: 0;
color: var(#{$nav-fore-color-var});
} }
a { a {
display: block; display: block;
@ -757,18 +767,22 @@ nav {
+ a { + a {
margin-top: 0; margin-top: 0;
} }
&:link, &:visited {
color: var(#{$nav-link-fore-color-var});
}
} }
} }
[type="search"] { [type="search"] {
color: var(#{$search-fore-color-var});
background: var(#{$search-back-color-var});
outline: none; outline: none;
box-sizing: border-box; box-sizing: border-box;
background: transparent;
border: none; border: none;
border-bottom: $__1px solid var(#{$search-border-color-var}); border-bottom: $__1px solid var(#{$search-border-color-var});
width: calc(100% - 1rem); width: 100%;
margin: var(#{$universal-margin-var}); margin-bottom: var(#{$universal-margin-var});
padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var})); padding: calc(2 * var(#{$universal-padding-var})) calc(1.5 * var(#{$universal-padding-var})) var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
transition: all 0.3s ease; transition: all 0.3s ease;
&:hover, &:focus { &:hover, &:focus {
border-bottom: $__1px solid var(#{$search-hover-border-color-var}); border-bottom: $__1px solid var(#{$search-hover-border-color-var});

2
docs/style.css
View File

File diff suppressed because one or more lines are too long

2
scripts/web.js
View File

@ -307,7 +307,7 @@ try {
} }
output += output +=
'</nav><main class="col-centered">'; '</nav><main class="col-centered">';
output += '<a id="top">&nbsp;</a>'; output += '<span id="top"><br/><br/></span>';
// Loop over tags and snippets to create the list of snippets // Loop over tags and snippets to create the list of snippets
for (let tag of [...new Set(Object.entries(tagDbData).map(t => t[1][0]))] for (let tag of [...new Set(Object.entries(tagDbData).map(t => t[1][0]))]
.filter(v => v) .filter(v => v)

2
static-parts/page-end.html
View File

@ -8,7 +8,7 @@
license.</p> license.</p>
</div> </div>
</footer> </footer>
<!-- <button class="scroll-to-top"></button></div> --> <a class="scroll-to-top" href="#top"></a></div>
</div> </div>
</body> </body>
</html> </html>

8
static-parts/page-start.html
View File

@ -96,14 +96,6 @@
},300); },300);
},1700); },1700);
} }
else if (event.target.classList.contains('scroll-to-top')){
scrollToTop();
}
else if (event.target.matches('nav a')){
if(event.target.getAttribute("href").includes('./')) return;
event.preventDefault();
scrollTo(document.querySelector('.card-container'), document.getElementById(event.target.href.split('#')[1]).parentElement.offsetTop - 60, event.target.href.split('#')[1], 400);
}
}, false); }, false);
} }
</script> </script>