diff --git a/src/about.html b/src/about.html index 240be40..506257a 100644 --- a/src/about.html +++ b/src/about.html @@ -6,10 +6,10 @@ -
+
-
-
+
+

About @@ -44,6 +44,7 @@ linux distros don't matter
  • my taste in music is objectively just ok
  • 🦐

    • -
    +
    + diff --git a/src/scss/about.scss b/src/scss/about.scss new file mode 100644 index 0000000..b463463 --- /dev/null +++ b/src/scss/about.scss @@ -0,0 +1 @@ +@import "ilia1"; diff --git a/src/scss/ilia1.scss b/src/scss/ilia1.scss index 0b9c46a..d5a038e 100644 --- a/src/scss/ilia1.scss +++ b/src/scss/ilia1.scss @@ -188,3 +188,37 @@ footer { background-image: url('../img/noise.gif'); background-size: 25%; } + +/* Animations */ +// GRADIENTS (you might need them!) +$rainbow-gradient: repeating-linear-gradient(to left, red, violet, indigo, blue, green, yellow, orange, red, violet); + +// ANIMATIONS (love to see them) +@keyframes gradient-bg { + from { + background-position: 0%; + } + to { + background-position: 100%; + } +} + +@mixin rainbow-text() { + animation: gradient-bg 4s linear infinite; +} + +// MARKS +mark.rainbow { + background-image: $rainbow-gradient; + background-size: 1000% 1000%; + color: transparent; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + @include rainbow-text(); +} + +// ALIASES +mark.internet { + @extend .rainbow; + font-weight: bold; +} diff --git a/src/scss/index.scss b/src/scss/index.scss index 07c7d4f..436df11 100644 --- a/src/scss/index.scss +++ b/src/scss/index.scss @@ -1,4 +1,4 @@ -@import 'ilia1'; +@import "ilia1"; footer { @extend .row;