From 29db1fe554468f7e85d5ba0c1bfa53fb48d00f44 Mon Sep 17 00:00:00 2001 From: sharpshark28 Date: Sun, 16 Oct 2016 21:23:46 -0500 Subject: [PATCH] First load intro --- partials/header.html | 13 ++++-- src/app.scss | 103 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 112 insertions(+), 4 deletions(-) diff --git a/partials/header.html b/partials/header.html index 1810899..e89799a 100644 --- a/partials/header.html +++ b/partials/header.html @@ -9,17 +9,22 @@ - + +
[ sharpshark28@joewroten.com ] (master) ~/portfolio
- ⟩ npm start + ⟩ + █npm install
- Starting up server, serving ./ on port: 8080 ... + Starting up server, serving ./ on port: 8080 ...
- Resume accessible @ ./resume.pdf + Resume accessible @ ./resume.pdf
diff --git a/src/app.scss b/src/app.scss index 45f9a2d..04be87c 100644 --- a/src/app.scss +++ b/src/app.scss @@ -31,6 +31,11 @@ body { background: #F2F2F2 url(../../assets/site/bg.png); font-family: Rokkitt, serif; font-size: 20px; + + &.intro-undecided, + &:not(.intro-play) #intro-blink { + visibility: hidden; + } } .container { @@ -284,3 +289,101 @@ video { width: 100%; height: 9rem; } + +/** + * Intro + */ +.intro-play { + > header { + animation: introSlideUp 1s 5s backwards; + -webkit-animation: introSlideUp 1s 5s backwards; + } + + #intro-blink { + animation: introBlink 1s steps(5, start) 3 forwards; + -webkit-animation: introBlink 1s steps(5, start) 3 forwards; + } + + [id*='intro-cmd-'], + [id*='intro-response-'] { + visibility: hidden; + animation: introAppear 250ms 3s forwards; + -webkit-animation: introAppear 250ms 3s forwards; + } + + #intro-cmd-2 { + animation-delay: 3.1s; + } + #intro-cmd-2 { + animation-delay: 3.2s; + } + #intro-cmd-3 { + animation-delay: 3.3s; + } + #intro-cmd-4 { + animation-delay: 3.4s; + } + #intro-cmd-5 { + animation-delay: 3.5s; + } + #intro-cmd-6 { + animation-delay: 3.6s; + } + #intro-cmd-7 { + animation-delay: 3.7s; + } + #intro-cmd-8 { + animation-delay: 3.8s; + } + #intro-cmd-9 { + animation-delay: 3.9s; + } + #intro-cmd-10 { + animation-delay: 4s; + } + #intro-response-1 { + animation-delay: 4.2s; + } + #intro-response-2 { + animation-delay: 4.5s; + } +} + +@keyframes introSlideUp { + from { + padding-bottom: 100vh; + } + to { + padding-bottom: $spacing-md; + } +} +@-webkit-keyframes introSlideUp { + from { + padding-bottom: 100vh; + } + to { + padding-bottom: $spacing-md; + } +} + +@keyframes introBlink { + to { + visibility: hidden; + } +} +@-webkit-keyframes introBlink { + to { + visibility: hidden; + } +} + +@keyframes introAppear { + to { + visibility: visible; + } +} +@-webkit-keyframes introAppear { + to { + visibility: visible; + } +}