diff --git a/package-lock.json b/package-lock.json index 00b3b35..29d3e9e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13626,6 +13626,11 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz", "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==" }, + "react-icons": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.2.0.tgz", + "integrity": "sha512-rmzEDFt+AVXRzD7zDE21gcxyBizD/3NqjbX6cmViAgdqfJ2UiLer8927/QhhrXQV7dEj/1EGuOTPp7JnLYVJKQ==" + }, "react-is": { "version": "17.0.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz", diff --git a/src/components/Home.js b/src/components/Home.js index b59191b..8aea732 100644 --- a/src/components/Home.js +++ b/src/components/Home.js @@ -5,14 +5,15 @@ import hero from "./assets/img/olympian_hero.png"; export default function Home(props) { return ( -
+ +

Potentia

Robotics

- The first high school team to build a full-size bipedal humanoid robot. + The first high school team to design and build a full-size bipedal humanoid robot.

- -
+ + {/*
+
+
+

Who are we?

+

+ Content +

+
+
+

Our mission

+

+ Content +

+
+
+
*/} + ); } diff --git a/src/components/assets/Home.scss b/src/components/assets/Home.scss index eb019b6..513dab6 100644 --- a/src/components/assets/Home.scss +++ b/src/components/assets/Home.scss @@ -1,10 +1,18 @@ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap"); +$mobile-small: 575px; $mobile: 768px; $tablet: 1024px; +$desktop-small: 1250px; + +@mixin mobile-small { + @media (max-width: $mobile-small) { + @content; + } +} @mixin mobile { - @media (max-width: $mobile) { + @media (min-width: $mobile-small) and (max-width: $mobile) { @content; } } @@ -15,8 +23,14 @@ $tablet: 1024px; } } +@mixin desktop-small { + @media (min-width: $tablet) and (max-width: $desktop-small) { + @content; + } +} + @mixin desktop { - @media (min-width: $tablet) { + @media (min-width: $desktop-small) { @content; } } @@ -35,8 +49,9 @@ $tablet: 1024px; .landing-header { position: absolute; font-family: "Poppins", sans-serif; - font-size: 5vw; + font-size: 4vw; margin-left: 0.4em; + padding-top: 0.2em; #potentia { padding-left: 0.4em; @@ -47,7 +62,7 @@ $tablet: 1024px; #robotics { position: relative; top: -0.3em; - padding-left: 0.8em; + padding-left: 1em; z-index: 999 !important; } } @@ -76,23 +91,31 @@ $tablet: 1024px; .landing-subheader { font-family: "Poppins", sans-serif; - font-size: 3vw; + font-size: 2vw; position: absolute; - margin-top: 60vh; + margin-top: 55vh; // margin-right: 10%; // right: 0; - margin-left: 3em; + margin-left: 4em; z-index: 999 !important; - width: 60%; + width: 45%; + + @include desktop-small { + margin-top: 40vh; + } @include tablet { - margin-top: 40vh; + margin-top: 33vh; } @include mobile { margin-top: 25vh; } + @include mobile-small { + margin-top: 17vh; + } + a { color: inherit; text-decoration: none; @@ -102,3 +125,28 @@ $tablet: 1024px; } } } + +.intro-wrapper { + // position: relative; + justify-content: center; + + +} + +.intro-section { + position: absolute; + top: 50vw; + min-height: 50vh; + min-width: 100%; + background: rgb(235, 235, 235); +} + +.intro-content { + background: rgb(235, 235, 235); + float: left; +} + +.mission-statement { + background: rgb(235, 235, 235); + float: right; +} \ No newline at end of file diff --git a/src/components/assets/Navbar.scss b/src/components/assets/Navbar.scss index 978aa8d..8c1e465 100644 --- a/src/components/assets/Navbar.scss +++ b/src/components/assets/Navbar.scss @@ -3,11 +3,20 @@ $white: rgb(247, 247, 247); $gray: rgb(172, 172, 172); $black: #000; + +$mobile-small: 575px; $mobile: 768px; $tablet: 1024px; +$desktop-small: 1200px; + +@mixin mobile-small { + @media (max-width: $mobile-small) { + @content; + } +} @mixin mobile { - @media (max-width: $mobile) { + @media (min-width: $mobile-small) and (max-width: $mobile) { @content; } } @@ -18,8 +27,14 @@ $tablet: 1024px; } } +@mixin desktop-small { + @media (min-width: $tablet) and (max-width: $desktop-small) { + @content; + } +} + @mixin desktop { - @media (min-width: $tablet) { + @media (min-width: $desktop-small) { @content; } } @@ -36,16 +51,26 @@ nav { align-items: center; min-height: 10vh; font-family: "Poppins", sans-serif; - padding-bottom: 0.75em; + padding-bottom: 0.5em; background: rgb(0, 0, 0); //linear-gradient(135deg, rgb(80, 100, 147), 95%, #000c40) + + @media (max-width: $desktop-small) { + justify-content: space-between; + } + } .nav-logo { margin-top: 5px; float: left; - width: 167px; - height: 69px; + width: 150px; + height: 62px; + + @media (max-width: $desktop-small) { + margin-left: 4vw; + } + } .nav-links { @@ -75,6 +100,10 @@ nav { .burger { display: none; + @media (max-width: $desktop-small) { + margin-right: 4vw; + } + div { width: 25px; height: 3px; @@ -84,7 +113,7 @@ nav { } } -@media (max-width: 1200px) { +@media (max-width: $desktop-small) { body { overflow-x: hidden; } diff --git a/src/components/assets/img/olympian_hero.png b/src/components/assets/img/olympian_hero.png index dd695c5..8c18488 100644 Binary files a/src/components/assets/img/olympian_hero.png and b/src/components/assets/img/olympian_hero.png differ diff --git a/src/components/assets/img/olympian_hero_backup.png b/src/components/assets/img/olympian_hero_backup.png new file mode 100644 index 0000000..dd695c5 Binary files /dev/null and b/src/components/assets/img/olympian_hero_backup.png differ