rushilwiz/website
1
0
Fork 0
mirror of https://github.com/PotentiaRobotics/website.git synced 2025-04-19 03:40:17 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add media queries for more devices

Browse Source
This commit is contained in:
Aditya Vasantharao 2021-03-05 01:08:31 -05:00
parent 359f376827
commit 283bf8eee6
6 changed files with 118 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package-lock.json generated
View File

@ -13626,6 +13626,11 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz", "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
"integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==" "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": { "react-is": {
"version": "17.0.1", "version": "17.0.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz",

25
src/components/Home.js
View File

@ -5,14 +5,15 @@ import hero from "./assets/img/olympian_hero.png";
export default function Home(props) { export default function Home(props) {
return ( return (
<main className="hero"> <body>
<section className="hero">
<div className="landing-header"> <div className="landing-header">
<h1 id="potentia">Potentia</h1> <h1 id="potentia">Potentia</h1>
<h1 id="robotics">Robotics</h1> <h1 id="robotics">Robotics</h1>
</div> </div>
<div className="landing-subheader"> <div className="landing-subheader">
<p> <p>
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.
</p> </p>
</div> </div>
<img <img
@ -20,7 +21,23 @@ export default function Home(props) {
src={hero} src={hero}
alt="" alt=""
/> />
</section>
</main> {/* <section className="intro-section">
<div className="intro-wrapper">
<div className="intro-content">
<h1>Who are we?</h1>
<p>
Content
</p>
</div>
<div className="mission-statement">
<h1>Our mission</h1>
<p>
Content
</p>
</div>
</div>
</section> */}
</body>
); );
} }

66
src/components/assets/Home.scss
View File

@ -1,10 +1,18 @@
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap");
$mobile-small: 575px;
$mobile: 768px; $mobile: 768px;
$tablet: 1024px; $tablet: 1024px;
$desktop-small: 1250px;
@mixin mobile-small {
@media (max-width: $mobile-small) {
@content;
}
}
@mixin mobile { @mixin mobile {
@media (max-width: $mobile) { @media (min-width: $mobile-small) and (max-width: $mobile) {
@content; @content;
} }
} }
@ -15,8 +23,14 @@ $tablet: 1024px;
} }
} }
@mixin desktop-small {
@media (min-width: $tablet) and (max-width: $desktop-small) {
@content;
}
}
@mixin desktop { @mixin desktop {
@media (min-width: $tablet) { @media (min-width: $desktop-small) {
@content; @content;
} }
} }
@ -35,8 +49,9 @@ $tablet: 1024px;
.landing-header { .landing-header {
position: absolute; position: absolute;
font-family: "Poppins", sans-serif; font-family: "Poppins", sans-serif;
font-size: 5vw; font-size: 4vw;
margin-left: 0.4em; margin-left: 0.4em;
padding-top: 0.2em;
#potentia { #potentia {
padding-left: 0.4em; padding-left: 0.4em;
@ -47,7 +62,7 @@ $tablet: 1024px;
#robotics { #robotics {
position: relative; position: relative;
top: -0.3em; top: -0.3em;
padding-left: 0.8em; padding-left: 1em;
z-index: 999 !important; z-index: 999 !important;
} }
} }
@ -76,23 +91,31 @@ $tablet: 1024px;
.landing-subheader { .landing-subheader {
font-family: "Poppins", sans-serif; font-family: "Poppins", sans-serif;
font-size: 3vw; font-size: 2vw;
position: absolute; position: absolute;
margin-top: 60vh; margin-top: 55vh;
// margin-right: 10%; // margin-right: 10%;
// right: 0; // right: 0;
margin-left: 3em; margin-left: 4em;
z-index: 999 !important; z-index: 999 !important;
width: 60%; width: 45%;
@include desktop-small {
margin-top: 40vh;
}
@include tablet { @include tablet {
margin-top: 40vh; margin-top: 33vh;
} }
@include mobile { @include mobile {
margin-top: 25vh; margin-top: 25vh;
} }
@include mobile-small {
margin-top: 17vh;
}
a { a {
color: inherit; color: inherit;
text-decoration: none; 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;
}

41
src/components/assets/Navbar.scss
View File

@ -3,11 +3,20 @@
$white: rgb(247, 247, 247); $white: rgb(247, 247, 247);
$gray: rgb(172, 172, 172); $gray: rgb(172, 172, 172);
$black: #000; $black: #000;
$mobile-small: 575px;
$mobile: 768px; $mobile: 768px;
$tablet: 1024px; $tablet: 1024px;
$desktop-small: 1200px;
@mixin mobile-small {
@media (max-width: $mobile-small) {
@content;
}
}
@mixin mobile { @mixin mobile {
@media (max-width: $mobile) { @media (min-width: $mobile-small) and (max-width: $mobile) {
@content; @content;
} }
} }
@ -18,8 +27,14 @@ $tablet: 1024px;
} }
} }
@mixin desktop-small {
@media (min-width: $tablet) and (max-width: $desktop-small) {
@content;
}
}
@mixin desktop { @mixin desktop {
@media (min-width: $tablet) { @media (min-width: $desktop-small) {
@content; @content;
} }
} }
@ -36,16 +51,26 @@ nav {
align-items: center; align-items: center;
min-height: 10vh; min-height: 10vh;
font-family: "Poppins", sans-serif; font-family: "Poppins", sans-serif;
padding-bottom: 0.75em; padding-bottom: 0.5em;
background: rgb(0, 0, 0); background: rgb(0, 0, 0);
//linear-gradient(135deg, rgb(80, 100, 147), 95%, #000c40) //linear-gradient(135deg, rgb(80, 100, 147), 95%, #000c40)
@media (max-width: $desktop-small) {
justify-content: space-between;
}
} }
.nav-logo { .nav-logo {
margin-top: 5px; margin-top: 5px;
float: left; float: left;
width: 167px; width: 150px;
height: 69px; height: 62px;
@media (max-width: $desktop-small) {
margin-left: 4vw;
}
} }
.nav-links { .nav-links {
@ -75,6 +100,10 @@ nav {
.burger { .burger {
display: none; display: none;
@media (max-width: $desktop-small) {
margin-right: 4vw;
}
div { div {
width: 25px; width: 25px;
height: 3px; height: 3px;
@ -84,7 +113,7 @@ nav {
} }
} }
@media (max-width: 1200px) { @media (max-width: $desktop-small) {
body { body {
overflow-x: hidden; overflow-x: hidden;
} }

BIN
src/components/assets/img/olympian_hero.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 500 KiB

After

Width:  |  Height:  |  Size: 418 KiB

BIN
src/components/assets/img/olympian_hero_backup.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 500 KiB