@@ -28,5 +28,3 @@
Design Director at GitHub Copilot & start
-
-
diff --git a/_sass/_base.scss b/_sass/_base.scss
index 8e63ba0..6e7de5f 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -52,10 +52,7 @@ body {
/**
* Text selection
*/
-::selection {
- color: var(--title-color);
- background: var(--strong-color);
-}
+::selection,
::-moz-selection {
color: var(--title-color);
background: var(--strong-color);
diff --git a/_sass/_layout.scss b/_sass/_layout.scss
index 59f91e3..f7ec8fa 100644
--- a/_sass/_layout.scss
+++ b/_sass/_layout.scss
@@ -94,7 +94,7 @@ pre {
text-decoration: none;
padding: 2rem 1.4rem;
position: relative;
- transition: all var(--base-trans-slow) ease-in-out;
+ @include transition-base(var(--base-trans-slow));
}
.home-navigation a:hover {
@@ -114,7 +114,7 @@ pre {
fill: var(--text-color);
visibility: hidden;
opacity: 0;
- transition: all var(--base-trans) ease-in-out;
+ @include transition-base;
position: fixed;
bottom: 5.2rem;
right: 4.8rem;
@@ -189,7 +189,7 @@ pre {
color: var(--title-color);
text-decoration: none;
outline: none;
- transition: all var(--base-trans-slow) ease-in-out;
+ @include transition-base(var(--base-trans-slow));
}
}
@@ -234,7 +234,7 @@ pre {
}
/**
- * HOME: Intro
+ * POST: Article Layout
*/
.post {
@@ -262,7 +262,7 @@ pre {
position: relative;
text-decoration: none;
font-weight: 500;
- transition: all var(--base-trans) ease-in-out;
+ @include transition-base;
}
.post a:before {
@@ -272,7 +272,7 @@ pre {
bottom: 0;
left: 0;
right: 0;
- transition: all var(--base-trans) ease-in-out;
+ @include transition-base;
}
.post a:hover:before {
@@ -280,10 +280,20 @@ pre {
}
.post p a,
-.post li a {
+.post li a,
+.post h3 .anchor {
color: var(--text-color);
text-decoration: none;
}
+
+.post h3 .anchor {
+ margin-left: -1.1em !important;
+ padding: 0;
+}
+.post h3 .anchor:before {
+ display: none;
+}
+
.post-content a,
.post-summary a {
padding: 0.2rem 0;
@@ -302,16 +312,6 @@ pre {
}
}
-.post h3 .anchor {
- color: var(--text-color);
- text-decoration: none;
- margin-left: -1.1em !important;
- padding: 0;
-}
-.post h3 .anchor:before {
- display: none;
-}
-
.post a:hover {
color: var(--brand-color);
}
@@ -335,10 +335,10 @@ pre {
.post-meta {
@extend %font-xs;
line-height: 1.6rem;
-}
-
-.post-meta a {
- color: var(--text-color);
+
+ a {
+ color: var(--text-color);
+ }
}
.post-summary {
@@ -371,8 +371,10 @@ pre {
border-radius: 1px;
}
-.post-footer a {
- color: var(--text-color);
+.post-footer {
+ a {
+ color: var(--text-color);
+ }
}
.post-footer-signature {
@@ -426,7 +428,7 @@ pre {
padding: 1.6rem 0;
overflow: hidden;
text-overflow: ellipsis;
- transition: all var(--base-trans-mid) ease-in-out;
+ @include transition-base(var(--base-trans-mid));
}
.blog-list-item a:before {
diff --git a/_sass/main.scss b/_sass/main.scss
index 021b198..932d611 100644
--- a/_sass/main.scss
+++ b/_sass/main.scss
@@ -26,6 +26,11 @@
--font-size-m: 1.4rem;
}
+// Mixins
+@mixin transition-base($speed: var(--base-trans)) {
+ transition: all $speed ease-in-out;
+}
+
// Import partials
@import
"base",
diff --git a/assets/js/s.js b/assets/js/s.js
index dbd33f9..9cdd007 100644
--- a/assets/js/s.js
+++ b/assets/js/s.js
@@ -5,16 +5,16 @@
// HOME
if (isHome) {
- let arrow = document.querySelector('.home-intro-scroll');
+ const arrow = document.querySelector('.home-intro-scroll');
const arrowTreshold = 100; // when stops being visible
+ if (!arrow) return; // Early exit if arrow doesn't exist
+
// scroll hint
function showScrollHint(seconds) {
- if (arrow && document.scrollingElement.scrollTop <= arrowTreshold) {
+ if (document.scrollingElement.scrollTop <= arrowTreshold) {
setTimeout(function() {
- if (arrow) {
- arrow.classList.add("visible");
- }
+ arrow.classList.add("visible");
}, seconds * 1000);
}
}
@@ -23,11 +23,9 @@
document.addEventListener("scroll", scrollHandler);
function scrollHandler() {
- // scroll hint
- let scroll = document.scrollingElement.scrollTop;
-
// hide arrow when needed
- if (scroll >= arrowTreshold && arrow) {
+ const scroll = document.scrollingElement.scrollTop;
+ if (scroll >= arrowTreshold) {
arrow.classList.remove("visible");
}
}
@@ -38,10 +36,15 @@
// HELPERS
+ // Helper function to get current time consistently
+ function getTime() {
+ return "now" in window.performance ? performance.now() : new Date().getTime();
+ }
+
// HELPERS: scrolling function from A -> B (modified from: https://bit.ly/2H3JKMV)
function scrollToItem(destination, duration = 500, extraPadding) {
const start = window.pageYOffset;
- const startTime = "now" in window.performance ? performance.now() : new Date().getTime();
+ const startTime = getTime();
const documentHeight = Math.max(
document.body.scrollHeight,
@@ -71,8 +74,7 @@
}
function scroll() {
- const now =
- "now" in window.performance ? performance.now() : new Date().getTime();
+ const now = getTime();
const time = Math.min(1, (now - startTime) / duration);
const timeFunction = 0.5 * (1 - Math.cos(Math.PI * time));