diff --git a/_layouts/default.html b/_layouts/default.html index db3ffd9..b66bd3b 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..d175838 100644 --- a/_sass/_base.scss +++ b/_sass/_base.scss @@ -151,6 +151,22 @@ a { } +/** + * Transition helpers + */ +%transition-base { + transition: all var(--base-trans) ease-in-out; +} + +%transition-mid { + transition: all var(--base-trans-mid) ease-in-out; +} + +%transition-slow { + transition: all var(--base-trans-slow) ease-in-out; +} + + /** * Helpers */ diff --git a/_sass/_layout.scss b/_sass/_layout.scss index 59f91e3..949900a 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; + @extend %transition-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; + @extend %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; + @extend %transition-slow; } } @@ -262,7 +262,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 +272,7 @@ pre { bottom: 0; left: 0; right: 0; - transition: all var(--base-trans) ease-in-out; + @extend %transition-base; } .post a:hover:before { @@ -426,7 +426,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..a5ed164 100644 --- a/assets/js/s.js +++ b/assets/js/s.js @@ -35,66 +35,4 @@ // initialize scroll hint showScrollHint(3); } - - // HELPERS - - // 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 documentHeight = Math.max( - document.body.scrollHeight, - document.body.offsetHeight, - document.documentElement.clientHeight, - document.documentElement.scrollHeight, - document.documentElement.offsetHeight - ); - const windowHeight = - window.innerHeight || - document.documentElement.clientHeight || - document.getElementsByTagName("body")[0].clientHeight; - const destinationOffset = - typeof destination === "number" ? destination : destination.offsetTop; - let destinationOffsetToScroll = Math.round( - documentHeight - destinationOffset < windowHeight - ? documentHeight - windowHeight - : destinationOffset - ) - if (start >= destinationOffsetToScroll) { // going up - destinationOffsetToScroll -= extraPadding; - } - - if ("requestAnimationFrame" in window === false) { - window.scroll(0, destinationOffsetToScroll); - return; - } - - function scroll() { - const now = - "now" in window.performance ? performance.now() : new Date().getTime(); - - const time = Math.min(1, (now - startTime) / duration); - const timeFunction = 0.5 * (1 - Math.cos(Math.PI * time)); - window.scroll( - 0, - Math.ceil(timeFunction * (destinationOffsetToScroll - start) + start) - ); - - if (start >= destinationOffsetToScroll) { // going up - if (Math.round(window.pageYOffset) <= Math.ceil(destinationOffsetToScroll)) { - return; - } - } - else { // going down - if (Math.round(window.pageYOffset) >= Math.ceil(destinationOffsetToScroll)) { - return; - } - } - - requestAnimationFrame(scroll); - } - - scroll(); - } })(); \ No newline at end of file