Add a black border on the top of the page
MODIFY
website/src/styles/_global.scss
website/src/styles/_global.scss
@@ -17,6 +17,9 @@ html {
body {
font-size: 16px;
margin: 0;
+ @include desktop-only() {
+ border-top: $unit / 3 solid $text-color;
+ }
}
h1,

MODIFY
website/src/styles/_header.scss
website/src/styles/_header.scss
top: 0;
align-items: center;
padding: 0 $unit;
+ border-top: $unit / 3 solid $text-color;
.stretch {
flex-grow: 1;

MODIFY
website/src/styles/_mixins.scss
website/src/styles/_mixins.scss
@mixin transition-timing{
transition-duration: 200ms;
transition-timing-function: cubic-bezier(0.57, 0.33, 0.19, 0.97);
+ transition-property: all;
}
@mixin pattern-white{
background-position: 50%;
z-index: -1;
}
+
+@mixin top-border{
+ @include transition-timing;
+ border-top: $unit / 3 solid $text-color;
+}
\ No newline at end of file

MODIFY
website/src/styles/index.scss
website/src/styles/index.scss
height: 100vh;
border-right: 1px solid $gray-color;
background-color: #ffffff;
- transition-property: transform;
+ transition-property: transform, border-top-width;
z-index: 2;
min-width: 256px;
+ @include desktop-only() {
+ @include top-border;
+ border-top-width: 0;
+ transition-duration: 150ms;
+ }
+
@include mobile-only() {
transform: translateX(-100%);
position: fixed;

MODIFY
website/static/js/index.js
website/static/js/index.js
@@ -69,7 +69,10 @@ const toc = {
}
},
- handleScroll(){
+}
+
+
+function handleScroll(){
if(isMobile()){
return false;
@@ -77,7 +80,12 @@ const toc = {
toc.highlight();
+ if(window.scrollY > 6){
+ elements.sidebar.style['border-top-width'] = '5.3333333333px';
+ } else {
+ elements.sidebar.style['border-top-width'] = '0px';
}
+
}
function mobileToggleEvent(event){
@@ -95,4 +103,4 @@ elements.toc.addEventListener('click', toc.handleClick, false);
elements.mobileHandle.addEventListener('click', mobileToggleEvent, false);
elements.overlay.addEventListener('click', mobileToggleEvent, false);
elements.overlay.addEventListener("touchstart", mobileToggleEvent, false);
-window.addEventListener('scroll', toc.handleScroll, false);
\ No newline at end of file
+window.addEventListener('scroll', handleScroll, false);
\ No newline at end of file

Add a black border on the top of the page