From 3981dc4e70c92a37563e44c8847024d6bd25f0a4 Mon Sep 17 00:00:00 2001 From: ww2497 Date: Sat, 12 Sep 2020 18:32:18 -0400 Subject: [PATCH 1/9] +content min-height, adjusted media query cutoffs --- src/index.scss | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/index.scss b/src/index.scss index bd680b442..7ca532872 100644 --- a/src/index.scss +++ b/src/index.scss @@ -8,8 +8,8 @@ tablet has fixed widths and font sizes mobile has scaling widths and font sizes */ -$desktop-width: 1100px; -$mobile-width: 720px; +$desktop-width: 1050px; +$mobile-width: 750px; @mixin desktop { @media(min-width: #{$desktop-width}) { @content; } @@ -170,6 +170,7 @@ html, body, #root, #app, .full-height { height: 100%; display: flex; flex-direction: column; + min-height: 775px; } .content { @@ -330,8 +331,8 @@ lines of text may be wider than they appear .mobile-banner { @include tablet { display: inline-block; - margin-top: 1vh; - margin-bottom: 2.5vh; + margin-top: 10px; + margin-bottom: 10px; border-bottom-style: solid; color: $blue; From 4dfbe7d67933f39387c487d283b436152396ac82 Mon Sep 17 00:00:00 2001 From: ww2497 Date: Fri, 18 Sep 2020 18:24:33 -0400 Subject: [PATCH 2/9] Contact text is now blue --- src/index.scss | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/index.scss b/src/index.scss index 7ca532872..dd229c745 100644 --- a/src/index.scss +++ b/src/index.scss @@ -8,7 +8,7 @@ tablet has fixed widths and font sizes mobile has scaling widths and font sizes */ -$desktop-width: 1050px; +$desktop-width: 1165px; $mobile-width: 750px; @mixin desktop { @@ -348,10 +348,12 @@ lines of text may be wider than they appear #contact { p { + height: 25px; margin: 0; - font-weight: 500; + font-size: 20px; - height: 25px; + font-weight: 500; + color: $blue; a{ font-size: 16px; } From d5db23aa5a2406f7c8e3458e47d6c505978f97d5 Mon Sep 17 00:00:00 2001 From: ww2497 Date: Fri, 18 Sep 2020 18:28:00 -0400 Subject: [PATCH 3/9] Section only has a min-height on desktop --- src/index.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/index.scss b/src/index.scss index dd229c745..856997d13 100644 --- a/src/index.scss +++ b/src/index.scss @@ -8,7 +8,7 @@ tablet has fixed widths and font sizes mobile has scaling widths and font sizes */ -$desktop-width: 1165px; +$desktop-width: 1050px; $mobile-width: 750px; @mixin desktop { @@ -170,7 +170,9 @@ html, body, #root, #app, .full-height { height: 100%; display: flex; flex-direction: column; - min-height: 775px; + @include desktop{ + min-height: 775px; + } } .content { From cecb22f0ec7397a416a1bd6d8cc5c1f8154d9b77 Mon Sep 17 00:00:00 2001 From: ww2497 Date: Fri, 18 Sep 2020 22:25:07 -0400 Subject: [PATCH 4/9] Bumped up desktop min-height --- src/index.scss | 4 ++-- src/preregister.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/index.scss b/src/index.scss index 856997d13..b8ce0c186 100644 --- a/src/index.scss +++ b/src/index.scss @@ -8,7 +8,7 @@ tablet has fixed widths and font sizes mobile has scaling widths and font sizes */ -$desktop-width: 1050px; +$desktop-width: 1200px; $mobile-width: 750px; @mixin desktop { @@ -171,7 +171,7 @@ html, body, #root, #app, .full-height { display: flex; flex-direction: column; @include desktop{ - min-height: 775px; + min-height: 800px; } } diff --git a/src/preregister.js b/src/preregister.js index 066ef3e46..98972a30f 100644 --- a/src/preregister.js +++ b/src/preregister.js @@ -6,7 +6,7 @@ import CovidPopover from "./covid-popover.js"; var heroImage = require('./hero.svg'); var heroImageAlt = "A decorative hero graphic." -var noticeContent = "We're planning BrickHack 7 to be the best and safest event possible. We will publish relevant information upon receiving updates from RIT and NY State." +var noticeContent = "We're planning for BrickHack 7 to be the best and safest event possible. We will publish relevant information upon receiving updates from RIT and NY State." class PreRegister extends React.Component { render() { From dfd75e9481b0df1bc6a68aeaeb82202443ddc988 Mon Sep 17 00:00:00 2001 From: ww2497 Date: Fri, 18 Sep 2020 22:40:53 -0400 Subject: [PATCH 5/9] Fixed issues with styles reliant on $desktop-width --- src/index.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.scss b/src/index.scss index b8ce0c186..52601599d 100644 --- a/src/index.scss +++ b/src/index.scss @@ -171,14 +171,14 @@ html, body, #root, #app, .full-height { display: flex; flex-direction: column; @include desktop{ - min-height: 800px; + min-height: 750px; } } .content { width: 100%; - max-width: $desktop-width; + max-width: 1050px; text-align: center; margin: auto; From 2e5e352ca05ce91c464d9bcef6b922dad414d774 Mon Sep 17 00:00:00 2001 From: ww2497 Date: Sat, 19 Sep 2020 18:46:54 -0400 Subject: [PATCH 6/9] Missed some tablet styling w/ dependencies on $d-w --- src/index.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/index.scss b/src/index.scss index 52601599d..75bd5a146 100644 --- a/src/index.scss +++ b/src/index.scss @@ -8,7 +8,7 @@ tablet has fixed widths and font sizes mobile has scaling widths and font sizes */ -$desktop-width: 1200px; +$desktop-width: 1210px; $mobile-width: 750px; @mixin desktop { @@ -183,6 +183,7 @@ html, body, #root, #app, .full-height { margin: auto; @include tablet { + max-width: 100%; flex-direction: column; margin: 0px; } From fdf7ac7e95d778e391307615abf06fd743520005 Mon Sep 17 00:00:00 2001 From: ww2497 Date: Sun, 20 Sep 2020 12:36:17 -0400 Subject: [PATCH 7/9] Changed SASS indentation from 2 spaces to tabs --- src/index.scss | 536 ++++++++++++++++++++++++------------------------- 1 file changed, 268 insertions(+), 268 deletions(-) diff --git a/src/index.scss b/src/index.scss index 75bd5a146..dad0b4a9f 100644 --- a/src/index.scss +++ b/src/index.scss @@ -12,203 +12,203 @@ $desktop-width: 1210px; $mobile-width: 750px; @mixin desktop { - @media(min-width: #{$desktop-width}) { @content; } + @media(min-width: #{$desktop-width}) { @content; } } /*tablet mixin also applies to mobile*/ @mixin tablet { - @media(max-width: #{$desktop-width}) { @content; } + @media(max-width: #{$desktop-width}) { @content; } } @mixin mobile { - @media(max-width: #{$mobile-width}) { @content; } + @media(max-width: #{$mobile-width}) { @content; } } //override sass min() & max() fn's, use css's @function min($numbers...) { - @return m#{i}n(#{$numbers}); + @return m#{i}n(#{$numbers}); } @function max($numbers...) { - @return m#{a}x(#{$numbers}); + @return m#{a}x(#{$numbers}); } a:hover { - text-decoration: none; + text-decoration: none; } body { - margin: 0; - font-family: Poppins, sans-serif; + margin: 0; + font-family: Poppins, sans-serif; } html, body, #root, #app, .full-height { - height: 100%; + height: 100%; } .desktop-hide { - @include desktop { - display: none; - } + @include desktop { + display: none; + } } .mobile-hide { - @include tablet { - display: none; - } + @include tablet { + display: none; + } } .flex-container { - display: flex; - align-items: center; - flex-shrink: 0; + display: flex; + align-items: center; + flex-shrink: 0; } .desktop-banner { - width: 100%; + width: 100%; - padding: 12px 0px; + padding: 12px 0px; - font-size: 14px; - font-weight: 300; - text-align: center; + font-size: 14px; + font-weight: 300; + text-align: center; - background-color: $blue; - color: white; + background-color: $blue; + color: white; - span { - font-weight: 400; - } + span { + font-weight: 400; + } } #mlh-badge { - position: absolute; - height: 175px; - margin-left: 50px; - - @include tablet { - height: 150px; - margin-left: 40px; - } - - @include mobile { - /*68 px is the current height of the nav bar - will think of a better way to structure this later*/ - width: default; - height: max(68px, calc(35px + 10vh)); - margin-left: 15px; - } + position: absolute; + height: 175px; + margin-left: 50px; + + @include tablet { + height: 150px; + margin-left: 40px; + } + + @include mobile { + /*68 px is the current height of the nav bar + will think of a better way to structure this later*/ + width: default; + height: max(68px, calc(35px + 10vh)); + margin-left: 15px; + } } .navigation { - width: 100%; - - font-size: 15px; - font-weight: 500; - - color: $blue; - background-color: white; - - ul { - list-style-type: none; - float: right; - - margin: 0; - padding: 0; - - li { - padding: 25px 25px; - text-align: center; - text-decoration: none; - - a { - color: $blue; - - border-bottom-style: solid; - border-color: transparentize($blue, 1); - transition: border-color 0.2s; - - &:hover { - border-color: transparentize($blue, 0); - transition: border-color 0.2s; - } - } - } - } - - @include tablet { - display: inline-block; - - font-size: 12px; - font-weight: 400; - - color: white; - background-color: $blue; - - ul li { - padding: 25px 15px; - a { - color: white; - border-bottom-style: solid; - border-color: transparentize(white, 1); - - &:hover { - border-color: transparentize(white, 1); - } - &:active { - border-color: transparentize(white, 0); - } - } - } - } - - @include mobile { - /*no scaling for very short devices, - scaling matching the mlh badge scaling for avg devices, - high scaling for very tall devices - */ - - margin-bottom: max(1px, calc(10vh - 40px), calc(30vh - 190px)); - } + width: 100%; + + font-size: 15px; + font-weight: 500; + + color: $blue; + background-color: white; + + ul { + list-style-type: none; + float: right; + + margin: 0; + padding: 0; + + li { + padding: 25px 25px; + text-align: center; + text-decoration: none; + + a { + color: $blue; + + border-bottom-style: solid; + border-color: transparentize($blue, 1); + transition: border-color 0.2s; + + &:hover { + border-color: transparentize($blue, 0); + transition: border-color 0.2s; + } + } + } + } + + @include tablet { + display: inline-block; + + font-size: 12px; + font-weight: 400; + + color: white; + background-color: $blue; + + ul li { + padding: 25px 15px; + a { + color: white; + border-bottom-style: solid; + border-color: transparentize(white, 1); + + &:hover { + border-color: transparentize(white, 1); + } + &:active { + border-color: transparentize(white, 0); + } + } + } + } + + @include mobile { + /*no scaling for very short devices, + scaling matching the mlh badge scaling for avg devices, + high scaling for very tall devices + */ + + margin-bottom: max(1px, calc(10vh - 40px), calc(30vh - 190px)); + } } .section { - height: 100%; - display: flex; - flex-direction: column; - @include desktop{ - min-height: 750px; - } + height: 100%; + display: flex; + flex-direction: column; + @include desktop{ + + } } .content { - width: 100%; - - max-width: 1050px; - text-align: center; - margin: auto; - - @include tablet { - max-width: 100%; - flex-direction: column; - margin: 0px; - } + width: 100%; + + max-width: 1050px; + text-align: center; + margin: auto; + + @include tablet { + max-width: 100%; + flex-direction: column; + margin: 0px; + } } .right-half { - flex: 50%; + flex: 50%; } .left-half { - @extend .right-half; - margin-bottom: 2.5vh; + @extend .right-half; + margin-bottom: 2.5vh; } .hero-img { - width: 100%; + width: 100%; - @include mobile { - /* slightly smaller hero img for shorter screens */ - min-width: 80%; - width: min(50vh, 90%); - } + @include mobile { + /* slightly smaller hero img for shorter screens */ + min-width: 80%; + width: min(50vh, 90%); + } } .hero-img.mobile-hide { //temporary, push up the desktop hero image a bit - margin-bottom: 75px; + margin-bottom: 75px; } /* @@ -216,149 +216,149 @@ note: development on a mac may not have all font-weights, lines of text may be wider than they appear */ #hackathon-name { - height: 75px; - font-size: 70px; - font-weight: 700; - color: $blue; - - @include mobile { - height: 14.1vw; - font-size: 13vw; - } + height: 75px; + font-size: 70px; + font-weight: 700; + color: $blue; + + @include mobile { + height: 14.1vw; + font-size: 13vw; + } } #hackathon-description { - height: 43px; - font-size: 34px; - font-weight: 700; - color: $blue; - - @include mobile { - height: 8.2vw; - font-size: 6.3vw; - } + height: 43px; + font-size: 34px; + font-weight: 700; + color: $blue; + + @include mobile { + height: 8.2vw; + font-size: 6.3vw; + } } #hackathon-info { - height: 25px; - font-size: 17px; - font-weight: 500; - color: $blue; - - @include mobile { - height: 4vw; - font-size: 3.2vw; - } + height: 25px; + font-size: 17px; + font-weight: 500; + color: $blue; + + @include mobile { + height: 4vw; + font-size: 3.2vw; + } } .mailchimp-container { - height: 50px; - width: 450px; - margin: 20px auto; - - border-style: solid; - border-width: 1px; - border-color: $blue; - border-radius: 25px; - - @include mobile { - width: 80vw; - - // On mobile, only enforce top margin - margin: 1vh auto auto auto; - - height: 12vw; - border-radius: 6vw; - } + height: 50px; + width: 450px; + margin: 20px auto; + + border-style: solid; + border-width: 1px; + border-color: $blue; + border-radius: 25px; + + @include mobile { + width: 80vw; + + // On mobile, only enforce top margin + margin: 1vh auto auto auto; + + height: 12vw; + border-radius: 6vw; + } } .mailchimp-input { - flex: 50%; - height: 30px; - margin-left: 10px; - - text-align: center; - border-style: none; - - outline: none; - font-family: inherit; - font-size: 17px; - font-weight: 500; - - &::placeholder { /* this refers to the input placeholder text (enter your email...)*/ - color: $blue; - transition: color 0.4s; - } - &:focus::placeholder { - color: transparent; - } - - @include mobile { - height: 7vw; - font-size: 3.25vw; - } + flex: 50%; + height: 30px; + margin-left: 10px; + + text-align: center; + border-style: none; + + outline: none; + font-family: inherit; + font-size: 17px; + font-weight: 500; + + &::placeholder { /* this refers to the input placeholder text (enter your email...)*/ + color: $blue; + transition: color 0.4s; + } + &:focus::placeholder { + color: transparent; + } + + @include mobile { + height: 7vw; + font-size: 3.25vw; + } } .mailchimp-button { - height: 40px; - width: 40px; - - margin-right: 5px; - - border-style: solid; - border-width: 1px; - border-color: $blue; - border-radius: 20px; - - background-color: white; - background-image: url(./input-arrow.svg); - background-repeat: no-repeat; - background-position: 4.5px; - background-size: 25px; - - outline: none; - transition: 0.1s; - - @include desktop { - &:hover { - background-position: 6.5px; - } - } - - @include mobile { - height: 9vw; - width: 9vw; - border-radius: 4.5vw; - margin-right: 1.5vw; - background-position: 1.5vw; - background-size: 5vw; - } + height: 40px; + width: 40px; + + margin-right: 5px; + + border-style: solid; + border-width: 1px; + border-color: $blue; + border-radius: 20px; + + background-color: white; + background-image: url(./input-arrow.svg); + background-repeat: no-repeat; + background-position: 4.5px; + background-size: 25px; + + outline: none; + transition: 0.1s; + + @include desktop { + &:hover { + background-position: 6.5px; + } + } + + @include mobile { + height: 9vw; + width: 9vw; + border-radius: 4.5vw; + margin-right: 1.5vw; + background-position: 1.5vw; + background-size: 5vw; + } } .mobile-banner { - @include tablet { - display: inline-block; - margin-top: 10px; - margin-bottom: 10px; - border-bottom-style: solid; - color: $blue; - - font-size: 1rem; - font-weight: 400; - } - - @include mobile { - font-size: 3.5vw; - font-weight: 500; - } + @include tablet { + display: inline-block; + margin-top: 10px; + margin-bottom: 10px; + border-bottom-style: solid; + color: $blue; + + font-size: 1rem; + font-weight: 400; + } + + @include mobile { + font-size: 3.5vw; + font-weight: 500; + } } #contact { - p { - height: 25px; - margin: 0; - - font-size: 20px; - font-weight: 500; - color: $blue; - a{ - font-size: 16px; - } - } + p { + height: 25px; + margin: 0; + + font-size: 20px; + font-weight: 500; + color: $blue; + a{ + font-size: 16px; + } + } } \ No newline at end of file From dc98cb55734f97241501980d3081540c7449e971 Mon Sep 17 00:00:00 2001 From: ww2497 Date: Sun, 20 Sep 2020 13:04:07 -0400 Subject: [PATCH 8/9] Accidentally removed min-height line --- src/index.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.scss b/src/index.scss index dad0b4a9f..cc2c49a2f 100644 --- a/src/index.scss +++ b/src/index.scss @@ -171,7 +171,7 @@ html, body, #root, #app, .full-height { display: flex; flex-direction: column; @include desktop{ - + min-height: 775px; } } From 7d4f14c669f06514568d9e4ef05eaa1b48519c11 Mon Sep 17 00:00:00 2001 From: William Wu <31863372+ww2497@users.noreply.github.com> Date: Tue, 22 Sep 2020 02:54:00 -0400 Subject: [PATCH 9/9] Update src/index.scss Co-authored-by: Peter Kos --- src/index.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.scss b/src/index.scss index cc2c49a2f..92c114929 100644 --- a/src/index.scss +++ b/src/index.scss @@ -170,7 +170,7 @@ html, body, #root, #app, .full-height { height: 100%; display: flex; flex-direction: column; - @include desktop{ + @include desktop { min-height: 775px; } } @@ -361,4 +361,4 @@ lines of text may be wider than they appear font-size: 16px; } } -} \ No newline at end of file +}