diff --git a/_layouts/default.html b/_layouts/default.html
index db3ffd9..2a1a2fb 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -1,7 +1,7 @@
{% include head.html %}
-
+
{{ content }}
\ No newline at end of file
diff --git a/_layouts/home.html b/_layouts/home.html
index aad54ed..47eb9f4 100644
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -1,32 +1,30 @@
-
-
-{% include head.html %}
-
-
-
-
-
-
Adrián Mato
-
Design Director at GitHub Copilot & startup investor.
-
- For the last 18+ years, I've designed digital products between Madrid, London and now, from
- San Francisco. I also co-founded and later sold my company Erasmusu.
-
-
- My career started as a Software Developer, but it soon became clear that my true passion was Design.
- I love combining both skillsets to create products that fulfill a clear purpose.
-
-
+---
+layout: default
+body_class: home
+---
+
+
+
+
+
Adrián Mato
+
Design Director at GitHub Copilot & startup investor.
+
+ For the last 18+ years, I've designed digital products between Madrid, London and now, from
+ San Francisco. I also co-founded and later sold my company Erasmusu.
+
+
+ My career started as a Software Developer, but it soon became clear that my true passion was Design.
+ I love combining both skillsets to create products that fulfill a clear purpose.
+
-
- {% include home-navigation.html %}
- {% include home-work.html %}
+
+
+{% include home-navigation.html %}
+{% include home-work.html %}
-
-
-
-
+
+
diff --git a/_sass/_base.scss b/_sass/_base.scss
index 8e63ba0..3650885 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -176,3 +176,22 @@ a {
.h-bradius {
border-radius: .1rem;
}
+
+/**
+ * Common placeholders for repeated patterns
+ */
+%transition-slow {
+ transition: all var(--base-trans-slow) ease-in-out;
+}
+
+%transition-base {
+ transition: all var(--base-trans) ease-in-out;
+}
+
+%transition-mid {
+ transition: all var(--base-trans-mid) ease-in-out;
+}
+
+%hover-brand-color:hover {
+ color: var(--brand-color);
+}
diff --git a/_sass/_layout.scss b/_sass/_layout.scss
index 59f91e3..99a7af3 100644
--- a/_sass/_layout.scss
+++ b/_sass/_layout.scss
@@ -94,11 +94,8 @@ pre {
text-decoration: none;
padding: 2rem 1.4rem;
position: relative;
- transition: all var(--base-trans-slow) ease-in-out;
-}
-
-.home-navigation a:hover {
- color: var(--brand-color);
+ @extend %transition-slow;
+ @extend %hover-brand-color;
}
@keyframes home-intro-desc-animation {
@@ -114,7 +111,7 @@ pre {
fill: var(--text-color);
visibility: hidden;
opacity: 0;
- transition: all var(--base-trans) ease-in-out;
+ @extend %transition-base;
position: fixed;
bottom: 5.2rem;
right: 4.8rem;
@@ -189,7 +186,8 @@ pre {
color: var(--title-color);
text-decoration: none;
outline: none;
- transition: all var(--base-trans-slow) ease-in-out;
+ @extend %transition-slow;
+ @extend %hover-brand-color;
}
}
@@ -203,10 +201,6 @@ pre {
color: var(--text-color);
}
-.home-work-grid__project-description a:hover {
- color: var(--brand-color);
-}
-
.home-work-grid__project-screenshot {
margin-bottom: 11.2rem;
}
@@ -262,7 +256,7 @@ pre {
position: relative;
text-decoration: none;
font-weight: 500;
- transition: all var(--base-trans) ease-in-out;
+ @extend %transition-base;
}
.post a:before {
@@ -272,7 +266,7 @@ pre {
bottom: 0;
left: 0;
right: 0;
- transition: all var(--base-trans) ease-in-out;
+ @extend %transition-base;
}
.post a:hover:before {
@@ -312,8 +306,8 @@ pre {
display: none;
}
-.post a:hover {
- color: var(--brand-color);
+.post a {
+ @extend %hover-brand-color;
}
.post ol li {
@@ -426,7 +420,7 @@ pre {
padding: 1.6rem 0;
overflow: hidden;
text-overflow: ellipsis;
- transition: all var(--base-trans-mid) ease-in-out;
+ @extend %transition-mid;
}
.blog-list-item a:before {
diff --git a/assets/js/s.js b/assets/js/s.js
index dbd33f9..f63e581 100644
--- a/assets/js/s.js
+++ b/assets/js/s.js
@@ -38,10 +38,15 @@
// HELPERS
- // HELPERS: scrolling function from A -> B (modified from: https://bit.ly/2H3JKMV)
+ // Get current time in milliseconds
+ function getCurrentTime() {
+ return "now" in window.performance ? performance.now() : new Date().getTime();
+ }
+
+ // 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 = getCurrentTime();
const documentHeight = Math.max(
document.body.scrollHeight,
@@ -71,8 +76,7 @@
}
function scroll() {
- const now =
- "now" in window.performance ? performance.now() : new Date().getTime();
+ const now = getCurrentTime();
const time = Math.min(1, (now - startTime) / duration);
const timeFunction = 0.5 * (1 - Math.cos(Math.PI * time));