diff --git a/.vuepress/components/Step2.vue b/.vuepress/components/Step2.vue index 1c08eb6..8bc5c41 100644 --- a/.vuepress/components/Step2.vue +++ b/.vuepress/components/Step2.vue @@ -9,45 +9,78 @@ -
- - - Sorry, canvas not supported - -
-
-

Upload a background image

- -
-
-
-
-
-
- - - - - - - - - -
-
-
+ @@ -142,61 +175,3 @@ export default { name: 'Step2' }; - - diff --git a/.vuepress/scss/pages/_hook.scss b/.vuepress/scss/pages/_hook.scss index 8e9a2e9..9bc32d8 100644 --- a/.vuepress/scss/pages/_hook.scss +++ b/.vuepress/scss/pages/_hook.scss @@ -162,10 +162,8 @@ } } -.hook__page__hero__claim { - input { - width: calc(100% - 10rem); - } +.hook__page__hero__claim input { + width: calc(100% - 10rem); } .hook__page__hero__support { @@ -188,10 +186,8 @@ -.hook__page__content { - &::after { - @include clearfix; - } +.hook__page__content::after { + @include clearfix; } .hook__page__content__card { @@ -211,3 +207,131 @@ width: 100%; } } + +.hook__page__content__meme { + padding-right: 1rem; + padding-left: 1rem; + + @media (min-width: 701px) { + width: 50%; + } + + @media (max-width: 700px) { + width: 100%; + } + + &.left { + margin-bottom: 2rem; + + img { + height: 0; + visibility: hidden; + } + + canvas { + width: 100%; height: 100%; + background-color: rgba($teal, 0.3); + } + } + + fieldset { + border: none; + + &:not(:last-of-type) { + margin-bottom: 1rem; + } + } + + label { + color: rgba($black, 0.3); + display: block; + font-size: 0.8rem; + font-weight: 600; + letter-spacing: 0.05rem; + margin-bottom: 0.025rem; + text-transform: uppercase; + width: 100%; + } + + input { + @media (min-width: 901px) { + &:not([type="checkbox"]):not([type="submit"]) { + font-size: 1.25rem; + } + } + + @media (max-width: 900px) { + &:not([type="checkbox"]):not([type="submit"]) { + font-size: 1.05rem; + } + } + + &:not([type="checkbox"]):not([type="file"]):not([type="submit"]) { + border-bottom: 2px solid; + padding-bottom: 0.15rem; + transition: all 0.2s; + width: 100%; + } + + &:not([type="file"]):not([type="submit"]) { + &:not(:hover):not(:active) { + border-color: $black; + } + + &:hover, + &:active { + border-color: $teal; + } + } + + &[type="checkbox"] { + width: 1.25rem; height: 1.25rem; + + border: 2px solid; + margin-right: 0.5rem; + position: relative; + top: 0.35rem; + + &::after { + width: 100%; height: 100%; + + content: "✓"; + font-size: 1.5rem; + line-height: 1rem; + position: absolute; + } + + &:not(:checked)::after { + color: transparent; + } + + &:checked::after { + color: $teal; + } + } + } +} + +.hook__page__content__meme__uploader { + @extend .__button-black; + text-align: center; + width: 11rem; + + > div:first-of-type { + width: 100%; height: 100%; + top: 0; left: 0; + + position: absolute; + } + + input { + top: 0; left: 0; + bottom: 0; right: 0; + + cursor: pointer; + opacity: 0; + position: absolute; + width: 100%; + z-index: 10; + } +}