diff --git a/css/style.less b/css/style.less index 1d30cc9..b578c69 100644 --- a/css/style.less +++ b/css/style.less @@ -1,7 +1,7 @@ @color-1: #047E7C; @color-2: #0C6D74; @color-3: #0C6D74; -@color-bg: #F1F2E3; +@color-white: #F1F2E3; @color-grey: #787970; /* ======== MIXINS ======== */ @@ -19,17 +19,31 @@ box-shadow: inset 0px 8px 6px -5px rgba(0, 0, 0, 0.5); } +/* ======== ANIMATIONS ======== */ + +@keyframes rotate-step-number { + 0% { + transform: rotate3d(0,0,0,0deg); + } + 50% { + transform: rotate3d(45, 45, 1, 90deg); + } + 100% { + transform: rotate3d(0,0,0,0deg); + } +} + /* ======== ======== */ body { cursor: default; - background-color: @color-bg; + background-color: @color-white; font-family: "Source Sans Pro", sans; font-weight: 300; } header { - background-color: @color-bg; + background-color: @color-white; padding: 1rem; h1 { @@ -41,7 +55,7 @@ header { } #steps { - color: @color-bg; + color: @color-white; .step-heading { .top-bottom-shadow; @@ -53,17 +67,19 @@ header { display: inline-block; margin: 0 0.5em; text-align: center; + font-weight: 400; width: 40px; height: 40px; border: 0px; border-radius: 50%; + + transition: background-color 0.5s, transform 0.5s; } .step-number:not(.done) { - font-weight: 400; - background-color: @color-bg; + background-color: @color-white; color: black; .number { display: inline; @@ -74,8 +90,11 @@ header { } .step-number.done { + &:not(.final) { // prevents animation to be shown at final step + animation: rotate-step-number 0.5s; + } background-color: #8ECA63; // green - color: @color-bg; + color: @color-white; .number { display: none; } @@ -105,6 +124,12 @@ header { color: rgba(255, 255, 255, 0.5); opacity: 1; } + // show numbers without spin box + -moz-appearance:textfield; + &::-webkit-outer-spin-button, + &::-webkit-inner-spin-button { + -webkit-appearance: none; + } } } @@ -113,7 +138,11 @@ header { height: 96px; padding-top: 2em; - a { + button { + /* unstyle button */ + background-color: transparent; + color: @color-white; + border: none; span { display: block; font-size: 24px; @@ -151,7 +180,7 @@ header { footer { .top-bottom-shadow; - background-color: @color-bg; + background-color: @color-white; padding: 2em 30vw; text-align: center; a { @@ -159,3 +188,20 @@ footer { border-bottom: dotted 1px rgba(0,0,0,0.25); } } + +/* ======== FINAL STEP ======== */ + +.step.final { + pre.address { + font-family: inherit; + font-size: inherit; + color: @color-white; + } + .download-wrapper { + text-align: center; + } + a { + color: @color-white; + border-bottom: dotted 1px rgba(0,0,0,0.25); + } +} diff --git a/index.html b/index.html index 9d1b400..884045a 100644 --- a/index.html +++ b/index.html @@ -39,32 +39,32 @@
- + + + +