diff --git a/images/dropdown_button.svg b/images/dropdown_button.svg new file mode 100644 index 0000000..a168044 --- /dev/null +++ b/images/dropdown_button.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/index.html b/index.html index 277a9dd..dfc0743 100644 --- a/index.html +++ b/index.html @@ -58,25 +58,26 @@
- -
-
- -
-
- + +
+
+ +
+
+ +
diff --git a/scss/base/_resets.scss b/scss/base/_resets.scss index f888566..91a4b52 100644 --- a/scss/base/_resets.scss +++ b/scss/base/_resets.scss @@ -9,4 +9,6 @@ html { } body { box-sizing: inherit; + overflow-x: hidden; + width: 100vw; } \ No newline at end of file diff --git a/scss/layout/_header.scss b/scss/layout/_header.scss index c3f18a8..7c91cd2 100644 --- a/scss/layout/_header.scss +++ b/scss/layout/_header.scss @@ -1,83 +1,92 @@ header { - display: flex; - justify-content: space-between; - width: 74vw; - margin-top: 5%; - margin-left: 12%; + width: 75vw; + margin: 5% auto; .heading { - display: flex; - flex-direction: column; - width: 29.5vw; + width: 76.2vw; + height: 20vh; + margin: 0 auto; + position: relative; - & .logo { - width: 70px; - height: 70px; - margin-bottom: 3.6vh; - margin-top: 0; + & .site-logo { + width: 5vh; + position: absolute; + top: 0; + left: 0; & img { - width: 5vh; - transform: translateY(-15%); + width: 100%; } } } .searchbar { display: flex; width: 35.9vw; + min-width: 550px; + height: 4.5vh; font-family: inherit; + position: absolute; + right: 1.5%; .search { - flex-basis: 100%; - position: relative; - - &::after { - content: ''; - position: absolute; - background-image: url(../../images/icons/search.svg); - right: -3%; - top: .7rem; - width: 1.2rem; - height: 1.2rem; - transform: scale(.8); - } + width: 65%; & input { - font-family: inherit; - width: 100%; - height: 20%; - background-color: $col-green-2; + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + outline: none; border: none; + box-sizing: border-box; border: 1px solid $col-green-1; - padding: 0 3%; - border-radius: 4px; - margin-left: 1%; - - &:focus{ - outline-color: $col-green-1; - } + width: 100%; + height: 100%; + border-radius: .2em; + line-height: 1.3; + margin: 0; + font-size: 16px; + font-family: inherit; + background-color: $col-green-2; + background-image: url('/images/icons/search.svg'); + background-repeat: no-repeat; + background-position: right 1em top 50%; + background-size: 1em auto; + padding-left: 1em; + margin-left: 5px; } } - .select { - flex-basis: 30%; - min-width: 120px; - position: relative; - cursor: pointer; + .select{ + width: calc(35% - 5px); // account for the margin on the input & select { - border: none; + cursor: pointer; + font-size: 16px; // iOS Safari zooms in if less than 16px causing weird issues font-family: inherit; + color: $col-white; + padding: .6em 1.4em .5em .8em; + line-height: 1.3; + height: 100%; width: 100%; - height: 20%; - background-color: $col-green-1; - color: white; box-sizing: border-box; - font-size: 80%; - border-radius: 4px; - text-indent: 5%; - - &:focus{ - outline-color: $col-green-1; + margin: 0; + border-radius: .2em; + border-color: $col-green-1; + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + background-color: $col-green-1; + background-image: url('/images/dropdown_button.svg'), linear-gradient($col-green-1, $col-green-1); + background-repeat: no-repeat; + background-position: right .7em top 50%; + background-size: .65em auto; + + &::-ms-expand { + display: none; + } + &:focus, + &:active { + border-color: $col-green-2; + outline: none; } } } @@ -86,10 +95,17 @@ header { font-weight: $fw-medium; font-size: 150%; min-width: 500px; + position: absolute; + left: 0; + top: 10vh; & a { color: inherit; text-decoration-color: $col-green-1; + + &:hover{ + text-decoration-color: inherit; + } } } } \ No newline at end of file diff --git a/scss/layout/_section.scss b/scss/layout/_section.scss index 275086f..6c39899 100644 --- a/scss/layout/_section.scss +++ b/scss/layout/_section.scss @@ -9,13 +9,13 @@ main { &::after { content: ""; flex: auto; - } + } } .logo { box-sizing: border-box; width: 25%; border: 20px solid transparent; - margin-top: 8%; + margin-bottom: 8%; &__holder { border-radius: 4px; @@ -86,13 +86,6 @@ main { color: inherit; transition: all .5s ease-in-out; - // &:first-of-type > span { - // transform: translateY(25%); - // } - // &:last-of-type > span { - // transform: translateY(-25%); - // } - &:hover{ text-decoration: none; font-weight: $fw-medium; @@ -114,4 +107,4 @@ main { } } } -} \ No newline at end of file +} \ No newline at end of file diff --git a/scss/responsive/_header.scss b/scss/responsive/_header.scss index 73f9d91..0055c6b 100644 --- a/scss/responsive/_header.scss +++ b/scss/responsive/_header.scss @@ -1,71 +1,79 @@ -@media screen and (max-width: 750px){ - .searchbar { - min-width: 50vw; - - & .search { - margin-right: 6vw; - } - } -} - -@media screen and (max-width: 450px){ - header { - padding: 0; - overflow-x: hidden; - +@media screen and (max-width: 880px) { + header{ + width: 90vw; .heading { - width: 100vw; + height: 40vw; - & .logo { - - & img { - width: 5vh; - transform: translateX(32vw) translateY(2vh); - } + & .site-logo { + left: 50%; + transform: translateX(-56%); } } - h1{ - margin-bottom: 20vh; - width: 100vw; - } .searchbar { flex-direction: column; - justify-content: center; - align-items: center; - margin: 0 auto; - margin-left: -2vw; - margin-top: 30vh; - margin-bottom: 50vh; - padding: 0; - width: 80vw; - height: 20vh; - position: absolute; + justify-content: space-between; + width: 60vw; + height: 10vw; + min-width: 0; + right: 50%; + transform: translateX(50%); + bottom: 3vw; + // overflow: hidden; + + .search { + width: 100%; + margin-left: -1.2%; + min-width: 0; - & .search { - width: 94%; - height: 8vh; - - input{ - opacity: .7; + & select { + text-align: center; } - &::after { - right: -3%; - top: .4rem; - width: 1.2rem; - height: 1.2rem; - transform: scale(.6); + & input { + padding: .6em 0 .5em 1em; + width: 100%; + margin-top: 2%; } } - & .select { - position: absolute; - top: 5vh; - min-width: 100%; - height: 20vh; - font-size: 170%; - } + + .select { + width: 100%; + } + } + h1 { + top: 10vw; + text-align: center; + left: 50%; + transform: translateX(-50%); } } } +@media screen and (max-width: 600px) { + header{ + overflow-x: hidden; + .heading { + height: 60vw; + } + .searchbar { + bottom: 8vw; + .search { + margin-left: -2%; + + & input { + font-size: 100%; + } + } + .select { + & select { + font-size: 100%; + } + } + } + h1 { + top: 16vw; + } + + } +} \ No newline at end of file