diff --git a/src/components/_button.scss b/src/components/_button.scss index 57ae898..ee0cb28 100644 --- a/src/components/_button.scss +++ b/src/components/_button.scss @@ -39,3 +39,42 @@ .paper-icon-button-light { border-radius: ab.$rounding-default; } + +// Skip Intro + +.skipIntro { + background: ab.$background-dark !important; + border-radius: 100vh; + overflow: hidden; + bottom: 12em; + color: white !important; + border: none; + box-shadow: 0 0 15px black; + padding: 0.5em; + font-size: 1.2em; + right: 8em; + + &:hover { + box-shadow: 0 0 15px black !important; + } + &::after { + content: ""; + position: absolute; + height: 100%; + width: 100%; + top: 0; + left: 0; + background: ab.$gradient-default; + z-index: 0; + opacity: 0; + transition: opacity ab.$transition-time-fast-1 linear; + } + .paper-icon-button-light { + z-index: 1; + color: white !important; + } + &:hover::after, + &:focus::after { + opacity: 1; + } +} diff --git a/src/pages/_indexPage.scss b/src/pages/_indexPage.scss index 96df527..79e0dfd 100644 --- a/src/pages/_indexPage.scss +++ b/src/pages/_indexPage.scss @@ -6,12 +6,12 @@ display: flex; flex-direction: row; flex-wrap: nowrap; - gap: 0.5em; color: white; align-items: center; font-size: 1.6em; &::before { content: ""; + margin-right: 0.5em; width: 1.3em; height: 2px; background: white;