mirror of
https://github.com/PotentiaRobotics/website.git
synced 2025-04-15 18:00:19 -04:00
Add media queries for more devices
This commit is contained in:
Aditya Vasantharao
parent
359f376827
commit
283bf8eee6
5
package-lock.json
generated
5
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -5,14 +5,15 @@ import hero from "./assets/img/olympian_hero.png";
|
|||
|
||||
export default function Home(props) {
|
||||
return (
|
||||
<main className="hero">
|
||||
<body>
|
||||
<section className="hero">
|
||||
<div className="landing-header">
|
||||
<h1 id="potentia">Potentia</h1>
|
||||
<h1 id="robotics">Robotics</h1>
|
||||
</div>
|
||||
<div className="landing-subheader">
|
||||
<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>
|
||||
</div>
|
||||
<img
|
||||
|
|
@ -20,7 +21,23 @@ export default function Home(props) {
|
|||
src={hero}
|
||||
alt=""
|
||||
/>
|
||||
|
||||
</main>
|
||||
</section>
|
||||
{/* <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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 500 KiB After Width: | Height: | Size: 418 KiB |
BIN
src/components/assets/img/olympian_hero_backup.png
Normal file
BIN
src/components/assets/img/olympian_hero_backup.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 500 KiB |
Loading…
Reference in New Issue
Block a user