diff --git a/assets/style/main.scss b/assets/style/main.scss index 8451677..1cb292f 100644 --- a/assets/style/main.scss +++ b/assets/style/main.scss @@ -58,6 +58,7 @@ a { @import 'pages/index'; @import 'pages/pages'; @import 'pages/event'; +@import 'pages/suggest'; @import 'pages/guide'; @import 'pages/auth'; @import 'pages/404'; \ No newline at end of file diff --git a/assets/style/pages/_pages.scss b/assets/style/pages/_pages.scss index cf6c5bd..30feaca 100644 --- a/assets/style/pages/_pages.scss +++ b/assets/style/pages/_pages.scss @@ -1,5 +1,6 @@ .about, .workshop, +.suggest, .privacy, .terms { padding: 4rem 8rem; @@ -55,6 +56,7 @@ @media only screen and (max-width: 768px) { .about, .workshop, + .suggest, .privacy, .terms { padding: 1rem .5rem; diff --git a/assets/style/pages/_suggest.scss b/assets/style/pages/_suggest.scss new file mode 100644 index 0000000..55d7c6a --- /dev/null +++ b/assets/style/pages/_suggest.scss @@ -0,0 +1,15 @@ +.suggest { + @import 'suggest/form'; + @import 'suggest/poll'; + + .success { + text-align: center; + margin: 8rem 6rem; + } +} + +@media only screen and (max-width: 600px) { + .suggest .success { + margin: 4rem 1rem; + } +} \ No newline at end of file diff --git a/assets/style/pages/index/_hero.scss b/assets/style/pages/index/_hero.scss index 6b16e0f..37523a4 100644 --- a/assets/style/pages/index/_hero.scss +++ b/assets/style/pages/index/_hero.scss @@ -1,5 +1,5 @@ .hero { - padding: calc(50vh - 240px) 0 10vh 0; + padding: calc(50vh - 280px) 0 14vh 0; h3 { color: $f-color; @@ -24,6 +24,12 @@ } } +@media only screen and (max-width: 1440px) { + .hero { + padding: calc(50vh - 240px) 0 10vh 0; + } +} + @media only screen and (max-width: 768px) { .hero { padding: 18vh 0; diff --git a/assets/style/pages/suggest/form.scss b/assets/style/pages/suggest/form.scss new file mode 100644 index 0000000..bfe0acd --- /dev/null +++ b/assets/style/pages/suggest/form.scss @@ -0,0 +1,84 @@ +form { + display: grid; + grid-template-columns: repeat(2, 1fr); + padding: 1rem 0; + + label { + display: block; + color: $fs-color; + font-family: $p-font; + font-size: .85rem; + font-weight: 300; + margin: 1rem .75rem .25rem .25rem; + text-transform: uppercase; + + sub { + display: inline-block; + font-size: .65rem; + opacity: .65; + padding: 0 0 0 .25rem; + } + } + + button, + textarea, + input { + width: 100%; + color: $w-color; + background: $b-color; + font-family: $p-font; + box-shadow: none; + } + + textarea, + input { + font-size: 1rem; + font-weight: 400; + padding: .5rem 1rem; + margin: .25rem 0; + border: 1px solid $i-color; + + &:focus { + border-color: $s-color; + outline: .1rem solid $s-color; + } + + &::placeholder { + font-family: $p-font; + font-size: 1rem; + opacity: .4; + } + } + + textarea { + min-height: 10rem; + font-family: $p-font; + padding: .75rem; + resize: vertical; + } + + .message { + grid-column: 1; + } + + button { + grid-column: 1/3; + font-size: .9rem; + font-weight: 500; + padding: .5rem 1rem .6rem 1rem; + margin: 1.5rem 0 0 0; + border: 1px solid $s-color; + text-align: center; + + &:hover { + cursor: pointer; + background: $sh-color; + } + } +} + +@media only screen and (max-width: 600px) { + form { + display: block; + } +} \ No newline at end of file diff --git a/assets/style/pages/suggest/poll.scss b/assets/style/pages/suggest/poll.scss new file mode 100644 index 0000000..5bf109d --- /dev/null +++ b/assets/style/pages/suggest/poll.scss @@ -0,0 +1,78 @@ +form .poll { + grid-row: 1/3; + grid-column: 2; + padding: 0 0 0 2rem; + + input, + label { + display: inline-block; + } + + .check{ + display: block; + position: absolute; + border: .15rem solid #AAAAAA; + border-radius: 100%; + height: 1rem; + width: 1rem; + top: .5rem; + left: .5rem; + } + + .group { + display: block; + position: relative; + margin: .5rem 0; + + .check::before { + display: block; + position: absolute; + content: ''; + border-radius: 100%; + height: .40rem; + width: .40rem; + top: .18rem; + left: .2rem; + } + + @-moz-document url-prefix() { + .check::before { + height: .35rem; + width: .35rem; + top: .2rem; + left: .2rem; + } + } + + label { + font-size: .9rem; + padding: .25rem 0 0 2rem; + margin: 0; + text-transform: none; + vertical-align: middle; + } + } + + input[type=radio] { + position: absolute; + visibility: hidden; + + &:checked ~ .check { + border: .15rem solid $s-color; + } + + &:checked ~ .check::before{ + background: $s-color; + } + + &:checked ~ label{ + color: $s-color; + } + } +} + +@media only screen and (max-width: 600px) { + form .poll { + padding: 1rem 0; + } +} \ No newline at end of file diff --git a/components/Footer.vue b/components/Footer.vue index ed7f662..518fc12 100644 --- a/components/Footer.vue +++ b/components/Footer.vue @@ -15,7 +15,7 @@
  • Community
  • Events
  • Workshops
  • -
  • Suggestions
  • +
  • Suggestions