diff --git a/assets/_animations.scss b/assets/_animations.scss index d73a900..bb19738 100644 --- a/assets/_animations.scss +++ b/assets/_animations.scss @@ -1 +1,44 @@ @import 'variables'; +@import 'mixins'; + +@keyframes animate-aberration { + 0% { + @include aberration(0); + } + 40% { + @include aberration(0); + } + 40.1% { + @include aberration(0.2em); + } + 45% { + @include aberration(0.2em); + } + 45.1% { + @include aberration(-0.1em); + } + 60% { + @include aberration(-0.1em); + } + 60.1% { + @include aberration(0em); + } + 70% { + @include aberration(0); + } + 70.1% { + @include aberration(-0.4em); + } + 73% { + @include aberration(-0.4em); + } + 73.1% { + @include aberration(0.1em); + } + 99.9% { + @include aberration(0.1em); + } + 100% { + @include aberration(0); + } +} diff --git a/assets/style.scss b/assets/style.scss index b5d78ab..cd5e2e4 100644 --- a/assets/style.scss +++ b/assets/style.scss @@ -4,6 +4,10 @@ @import 'fonts'; @import 'mixins'; +:root { + --aberration-offset: 0.1em; +} + html { font-family: 'Space Mono', sans-serif; box-sizing: border-box; @@ -116,10 +120,6 @@ a { } } -.nav-logo { - text-decoration: none; -} - .block-link { display: block; } @@ -248,16 +248,34 @@ table { @include heading; text-decoration: none; color: currentColor; - margin: 0 auto; + animation: animate-aberration 2s linear infinite !important; img { width: 48px; - display: inline-block; margin-right: 1em; vertical-align: middle; } + .logotype { + font-size: 1.3em; + vertical-align: middle; + display: inline-block; + width: 3.5em; + line-height: 1; + text-align: center; + + :nth-child(1) { + letter-spacing: 0.2em; + } + :nth-child(2) { + letter-spacing: 0.14em; + } + :nth-child(3) { + letter-spacing: 0.39em; + } + } + @media screen and (min-width: $small) { margin-left: 0; } diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index b86ebb5..c4b8ce8 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -15,7 +15,13 @@