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 @@
-
-
-
-
-
-
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;
+ }
+}