diff --git a/_includes/head.html b/_includes/head.html index be1b0a9..027c3e5 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -4,19 +4,7 @@ {% seo %} - - - - - - - - - - - - + {% include meta-tags.html %} diff --git a/_includes/meta-tags.html b/_includes/meta-tags.html new file mode 100644 index 0000000..4c1436f --- /dev/null +++ b/_includes/meta-tags.html @@ -0,0 +1,12 @@ + + + + + + + + + + + + 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..12f2f51 100644 --- a/_sass/_base.scss +++ b/_sass/_base.scss @@ -16,7 +16,7 @@ /** * Reset some basic elements */ -* { padding: 0; margin: 0; -moz-box-sizing: border-box; box-sizing: border-box; } +* { padding: 0; margin: 0; box-sizing: border-box; } html { font-size: 62.5%; @@ -127,8 +127,7 @@ ul{ a { color: var(--brand-color); text-decoration: none; - -webkit-transition: none; - transition: none; + transition: none; &:visited { color: var(--brand-color); @@ -176,3 +175,22 @@ a { .h-bradius { border-radius: .1rem; } + +/** + * Transition Mixins + */ +@mixin transition($speed: var(--base-trans)) { + transition: all $speed ease-in-out; +} + +%transition-base { + @include transition(var(--base-trans)); +} + +%transition-mid { + @include transition(var(--base-trans-mid)); +} + +%transition-slow { + @include transition(var(--base-trans-slow)); +} 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..65ae0cc 100644 --- a/assets/js/s.js +++ b/assets/js/s.js @@ -41,7 +41,8 @@ // 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 getTime = () => "now" in window.performance ? performance.now() : new Date().getTime(); + const startTime = getTime(); const documentHeight = Math.max( document.body.scrollHeight, @@ -71,8 +72,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));