diff --git a/assets/images/tab-corner.svg b/assets/images/tab-corner.svg deleted file mode 100644 index a1daf86..0000000 --- a/assets/images/tab-corner.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/assets/images/tornado_black.png b/assets/images/tornado_black.png deleted file mode 100644 index d448456..0000000 Binary files a/assets/images/tornado_black.png and /dev/null differ diff --git a/assets/images/tornado_mark.png b/assets/images/tornado_mark.png deleted file mode 100644 index 22f6766..0000000 Binary files a/assets/images/tornado_mark.png and /dev/null differ diff --git a/assets/styles/app.scss b/assets/styles/app.scss index e0c7dc6..4ae2db5 100644 --- a/assets/styles/app.scss +++ b/assets/styles/app.scss @@ -39,6 +39,10 @@ background-image: url('../images/discoverer.svg'); background-size: contain; background-repeat: no-repeat; + + @include mobile { + margin-top: -1.5rem; + } } .delete { diff --git a/assets/styles/components/_step.scss b/assets/styles/components/_step.scss index fd1da25..c1310f5 100644 --- a/assets/styles/components/_step.scss +++ b/assets/styles/components/_step.scss @@ -4,15 +4,18 @@ .step { margin: 1.25rem 0; - background: #1F1F1F; + background-color: #151515; border-radius: 6px; - padding: 1.25rem; - display: flex; - align-items: center; - overflow: hidden; - @include mobile { - flex-wrap: wrap; + .step-container { + display: flex; + align-items: center; + border-radius: 6px; + background: #1F1F1F; + + @include mobile { + flex-wrap: wrap; + } } &:first-child { @@ -21,18 +24,26 @@ .diamond { - margin-right: 1.25rem; + margin: 1.25rem 0 1.25rem 1.25rem; @include mobile { - align-self: flex-start; + flex: none; + width: 100%; + margin-left: 0; + margin-right: 0; + margin-bottom: 0; } } &-body { + padding: 1.25rem; flex-grow: 1; @include mobile { - width: calc(100% - 60px - 1.25rem); + flex: none; + width: 100%; + text-align: center; + padding-bottom: 0; } h4 { @@ -51,23 +62,49 @@ color: #6B6B6B; text-overflow: ellipsis; overflow: hidden; + white-space: nowrap; + } + } + + &-more-button { + padding: 1.25rem; + + @include mobile { + flex: none; + width: 100%; + text-align: center; + padding: .75rem 1.25rem; + } + + .button { + padding: 0; + background-color: transparent; + border: 0; + color: $primary; + font-size: 0.875rem; + + &:focus:not(:active), &.is-focused:not(:active) { + box-shadow: none; + } } } &-tail { background-color: #191919; align-self: stretch; - margin: -1.25rem; display: flex; justify-content: center; align-items: center; padding: 1.25rem; width: 148px; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; @include mobile { - margin-top: 1.25rem; - flex-basis: 100%; - flex-grow: 1; + flex: none; + width: 100%; + border-top-right-radius: 0; + border-bottom-left-radius: 6px; } .completed { @@ -82,4 +119,12 @@ } } } + + &-more { + font-size: 0.813rem; + + p { + padding: 1.25rem; + } + } } diff --git a/components/Step.vue b/components/Step.vue index 5c9a4a7..6844165 100644 --- a/components/Step.vue +++ b/components/Step.vue @@ -1,72 +1,85 @@ + + + + diff --git a/static/favicon/favicon.ico b/static/favicon/favicon.ico index 9269b5b..69f6d47 100644 Binary files a/static/favicon/favicon.ico and b/static/favicon/favicon.ico differ