diff --git a/README.md b/README.md index d6cd7f8..436cb86 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ Please create a new branch for development (i.e. `[NAME]-dev`). Pushing directly To build the site, run `npm run build`. -To view the site on your local network, run `npm build/index.js`. View the site at [localhost:9000](http://localhost:9000). +To view the site on your local network, run `npm run serve`. View the site at [localhost:9000](http://localhost:9000). ### Images diff --git a/src/public/assets/css/styles.css b/src/public/assets/css/styles.css index 654393d..4397c4a 100644 --- a/src/public/assets/css/styles.css +++ b/src/public/assets/css/styles.css @@ -232,7 +232,7 @@ a:hover { .cards { display: flex; - justify-content: space-around; + justify-content: center; flex-wrap: wrap; } @@ -273,11 +273,59 @@ a:hover { margin-bottom: 0.5em; } -/* .involve-card > img { - width: 20em; - margin-bottom: 1em; +.committees { + border-radius: 50% 50% 0 0 / 4rem; + transform: translateY(-4rem); +} + +.committee-card { + padding: 1.75em 3em; + border: var(--main) solid 0.37em; + border-radius: 1.5em; + color: var(--secondary); + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + margin: 1em; + background-color: var(--main); + background-blend-mode: multiply; + background-position: center; + background-size: cover; + width: 30em; +} + +.committee-img { + display: inline-block; + margin: 20px; + overflow: hidden; border-radius: 0.2em; -} */ + width: 10; +} + +.committee-card img { + display: block; + transition: transform 0.4s; + width: 20em; + border-radius: 0.2em; +} + +.committee-card:hover img { + transform: scale(1.1); + transform-origin: 50% 50%; +} + +.committee-title { + font-size: 3em; + color: var(--secondary); + margin-bottom: 0.5em; + text-align: center; +} + +.committee-description { + font-size: 1.25em; + font-weight: normal; +} .links { font-size: 1.5em; diff --git a/src/public/committees.tsx b/src/public/committees.tsx index 69c841a..aefc49e 100644 --- a/src/public/committees.tsx +++ b/src/public/committees.tsx @@ -4,10 +4,10 @@ import TopBar from "./components/TopBar"; import { ACTIVE_PAGES, SOCIALS, EMAIL, OFFICERS } from "./Config"; import Splash from "./components/Splash"; import DefaultSection from "./components/DefaultSection"; -import InvolveBox from "./components/InvolveBox"; import SocialCard from "./components/SocialCard"; import Carousel from "./components/Carousel"; import Footer from "./components/Footer"; +import CommitteeBox from "./components/CommitteeBox"; class Main extends React.Component { constructor() { @@ -27,36 +27,36 @@ class Main extends React.Component { - +
- - + - + - + - + + description="The Outreach Committee is responsible for hosting outreach events that will benefit K-12 students within the STEM fields including the annual Boy Scout STEM Merit Badge Fair, Girls STEM Fair, and Sumobot Robotics Competition. Up for the challenge to explain Ohm's Law to a 10-year-old?" + >
diff --git a/src/public/components/CommitteeBox.tsx b/src/public/components/CommitteeBox.tsx new file mode 100644 index 0000000..488890b --- /dev/null +++ b/src/public/components/CommitteeBox.tsx @@ -0,0 +1,29 @@ +import * as React from "react"; +import { Component } from "react"; + +interface CommitteeBoxProps { + boxTitle: string; + image: string; + description: string; +} + +export default class CommitteeBox extends Component { + constructor(props: CommitteeBoxProps) { + super(props); + this.state = {}; + } + + public render() { + return ( +
+
+ {this.props.boxTitle} +
+
+ {this.props.description} +
+
+ ); + } +} diff --git a/src/public/components/InvolveBox.tsx b/src/public/components/InvolveBox.tsx index 35f2c9a..e74aeb1 100644 --- a/src/public/components/InvolveBox.tsx +++ b/src/public/components/InvolveBox.tsx @@ -14,33 +14,19 @@ export default class InvolveBox extends Component { } public render() { - if (this.props.boxTitle) { - return ( - -
{this.props.boxTitle}
-
- -
-
- {this.props.description} -
-
- ); - } else { - return ( -
-
{this.props.boxTitle}
-
- -
-
- {this.props.description} -
+ return ( + +
{this.props.boxTitle}
+
+
- ); - } +
+ {this.props.description} +
+
+ ); } }