diff --git a/.gitignore b/.gitignore index c0b2358..486a294 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ build dist node_modules +src/public/fonts \ No newline at end of file diff --git a/src/public/components/HorizontalSection.tsx b/src/public/components/HorizontalSection.tsx new file mode 100644 index 0000000..c4a25ef --- /dev/null +++ b/src/public/components/HorizontalSection.tsx @@ -0,0 +1,21 @@ +import React, {Component} from "react"; + +interface HorizontalSectionProps { + link: string; + title: string; +} +interface HorizontalSectionState {} + +export default class HorizontalSection extends Component { + constructor(props: HorizontalSectionProps) { + super(props); + this.state = {}; + } + + public render() { + return
+ {this.props.title} + {this.props.children} +
; + } +} diff --git a/src/public/components/ImageGallery.tsx b/src/public/components/ImageGallery.tsx new file mode 100644 index 0000000..e774848 --- /dev/null +++ b/src/public/components/ImageGallery.tsx @@ -0,0 +1,36 @@ +import React, {Component} from "react"; + +interface ImageGalleryProps { + urls: string[]; + delay: number; + alt: string; +} +interface ImageGalleryState { + progress: number; +} + +export default class ImageGallery extends Component { + private interval: number; + + constructor(props: ImageGalleryProps) { + super(props); + this.state = { + progress: 0 + }; + this.interval = setInterval(this.changeImage.bind(this), this.props.delay) as any as number; + } + + private changeImage(): void { + if (this.state.progress < this.props.urls.length) { + this.setState({progress: this.state.progress + 1}); + } else { + this.setState({progress: 0}); + } + } + + public render() { + return
+ {this.props.alt} +
; + } +} diff --git a/src/public/components/ImageScrollPanel.tsx b/src/public/components/ImageScrollPanel.tsx new file mode 100644 index 0000000..93b5b02 --- /dev/null +++ b/src/public/components/ImageScrollPanel.tsx @@ -0,0 +1,17 @@ +import React, {Component} from "react"; + +interface ImageScrollPanelProps { + imageUrls: string[]; +} +interface ImageScrollPanelState {} + +export default class ImageScrollPanel extends Component { + constructor(props: ImageScrollPanelProps) { + super(props); + this.state = {}; + } + + public render() { + return <>; + } +} diff --git a/src/public/components/NavLink.tsx b/src/public/components/NavLink.tsx deleted file mode 100644 index 6614698..0000000 --- a/src/public/components/NavLink.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from "react"; - -interface NavLinkProps { - url: string; - text: string; -} -interface NavLinkState {} - -export default class NavLink extends React.Component { - constructor(props: NavLinkProps) { - super(props); - this.state = {}; - } - - public render() { - return
- {this.props.text} -
; - } -} \ No newline at end of file diff --git a/src/public/components/TopNav.tsx b/src/public/components/TopNav.tsx index 1869ad5..1c15dbd 100644 --- a/src/public/components/TopNav.tsx +++ b/src/public/components/TopNav.tsx @@ -1,9 +1,9 @@ import React from "react"; -import NavLink from "./NavLink"; interface TopNavProps { image: string; links: string[]; + names: string[]; alt: string; } interface TopNavState {} @@ -15,8 +15,8 @@ export default class TopNav extends React.Component { } public render() { - let navLinks = this.props.links.map(name=>{ - return ; + let navLinks = this.props.links.map((url, i)=>{ + return {this.props.names[i]}; }); return
diff --git a/src/public/css/fonts.css b/src/public/css/fonts.css new file mode 100644 index 0000000..f8d0a0d --- /dev/null +++ b/src/public/css/fonts.css @@ -0,0 +1,108 @@ +/* open-sans-300 - latin */ +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 300; + src: local(''), + url('../fonts/open-sans-v27-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ + url('../fonts/open-sans-v27-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + } + /* open-sans-regular - latin */ + @font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + src: local(''), + url('../fonts/open-sans-v27-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ + url('../fonts/open-sans-v27-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + } + /* open-sans-600 - latin */ + @font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 600; + src: local(''), + url('../fonts/open-sans-v27-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ + url('../fonts/open-sans-v27-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + } + /* open-sans-500 - latin */ + @font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 500; + src: local(''), + url('../fonts/open-sans-v27-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ + url('../fonts/open-sans-v27-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + } + /* open-sans-700 - latin */ + @font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + src: local(''), + url('../fonts/open-sans-v27-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ + url('../fonts/open-sans-v27-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + } + /* open-sans-800 - latin */ + @font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 800; + src: local(''), + url('../fonts/open-sans-v27-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ + url('../fonts/open-sans-v27-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + } + /* open-sans-300italic - latin */ + @font-face { + font-family: 'Open Sans'; + font-style: italic; + font-weight: 300; + src: local(''), + url('../fonts/open-sans-v27-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ + url('../fonts/open-sans-v27-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + } + /* open-sans-500italic - latin */ + @font-face { + font-family: 'Open Sans'; + font-style: italic; + font-weight: 500; + src: local(''), + url('../fonts/open-sans-v27-latin-500italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ + url('../fonts/open-sans-v27-latin-500italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + } + /* open-sans-italic - latin */ + @font-face { + font-family: 'Open Sans'; + font-style: italic; + font-weight: 400; + src: local(''), + url('../fonts/open-sans-v27-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ + url('../fonts/open-sans-v27-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + } + /* open-sans-600italic - latin */ + @font-face { + font-family: 'Open Sans'; + font-style: italic; + font-weight: 600; + src: local(''), + url('../fonts/open-sans-v27-latin-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ + url('../fonts/open-sans-v27-latin-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + } + /* open-sans-700italic - latin */ + @font-face { + font-family: 'Open Sans'; + font-style: italic; + font-weight: 700; + src: local(''), + url('../fonts/open-sans-v27-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ + url('../fonts/open-sans-v27-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + } + /* open-sans-800italic - latin */ + @font-face { + font-family: 'Open Sans'; + font-style: italic; + font-weight: 800; + src: local(''), + url('../fonts/open-sans-v27-latin-800italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ + url('../fonts/open-sans-v27-latin-800italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + } \ No newline at end of file diff --git a/src/public/css/styles.css b/src/public/css/styles.css index 8f456dc..0a506b1 100644 --- a/src/public/css/styles.css +++ b/src/public/css/styles.css @@ -20,7 +20,45 @@ /* Color vars should go here */ :root { - + --dark-blue: #00629b; + --med-blue: #4486c4; + --sky-blue: #6ab7ff; + --grey: #c4d2e3; + --black: #1f1f1f; + --white: #eeeeee; +} + +html { + color: var(--black); + font-family: "Open Sans", sans-serif; +} +body { + margin: 0; +} + +.top-nav { + width: 100%; + display: flex; + flex-direction: row; + background-color: var(--dark-blue); + align-items: center; + position: fixed; +} +.logo { + width: 10em; + height: auto; + padding: 0.5em; +} +.nav-link { + color: var(--white); + font-size: 1.5em; + margin-left: 0.75em; + margin-right: 0.75em; + text-decoration: none; +} + +.top-nav .nav-link:nth-of-type(1) { + margin-left: auto; } /* Responsive queries go here */ diff --git a/src/public/img/logo.png b/src/public/img/logo.png new file mode 100644 index 0000000..ead7813 Binary files /dev/null and b/src/public/img/logo.png differ diff --git a/src/public/index.tsx b/src/public/index.tsx index 5c7b577..9b4eac2 100644 --- a/src/public/index.tsx +++ b/src/public/index.tsx @@ -1,6 +1,10 @@ import * as ReactDom from "react-dom"; import * as React from "react"; import TopNav from "./components/TopNav"; +import HorizontalSection from "./components/HorizontalSection"; +import ImageGallery from "./components/ImageGallery"; + +const ACTIVE_PAGES = ["Events","Officers","Projects","Resources","Sponsors"]; interface MainProps {} interface MainState {} @@ -12,8 +16,14 @@ class Main extends React.Component { } public render() { return <> - + "/" + e.toLowerCase())} image="img/logo.png" alt="IEEE at UCSD Logo"> + + + + ; } } diff --git a/src/public/template.html b/src/public/template.html index c25c531..d3e7dfb 100644 --- a/src/public/template.html +++ b/src/public/template.html @@ -2,6 +2,7 @@ $TITLE +