Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Completed live site. #89

Merged
merged 13 commits into from
Apr 9, 2021
Merged

Completed live site. #89

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
d69de0c
Merge pull request #88 from citrushack/master
Mar 22, 2021
dff8b03
Added scaffold for live page
r-jo1 Mar 22, 2021
d4ba20f
Added live page css file
r-jo1 Mar 22, 2021
c0ba796
Added countdown timer
r-jo1 Mar 22, 2021
24fd518
Abstracted countdown
r-jo1 Mar 22, 2021
63606cd
Add judges
r-jo1 Mar 22, 2021
f2b89d2
Dummy judges added
r-jo1 Mar 22, 2021
d2826b9
Added sponsors and some minor styling
Apr 3, 2021
4be15a0
Added all judges
Apr 8, 2021
8e84c46
Added schedule
Apr 9, 2021
0646af0
Added borders
Apr 9, 2021
54c0ece
Hide live site link
Apr 9, 2021
817d951
Hide live site link
Apr 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Added borders
  • Loading branch information
r-jo committed Apr 9, 2021
commit 0646af0083a473197fd79337ddb446cc1ada7b1a
21 changes: 15 additions & 6 deletions components/Countdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
import React from "react";
import Image from "next/image";
import Countdown from "react-countdown";
import Livestyles from "../styles/Live.module.css"
import Livestyles from "../styles/Live.module.css";

// Random component
const Completionist = () => <h2>Hacking has ended!</h2>;
const Completionist = () => (
<h1 className={Livestyles.timer}>Hacking has ended!</h1>
);

// Renderer callback with condition
const renderer = ({ days, hours, minutes, seconds, completed }) => {
Expand All @@ -14,14 +17,20 @@ const renderer = ({ days, hours, minutes, seconds, completed }) => {
// Render a countdown
return (
<>
<h1 className={Livestyles.timer}>
{days}d : {hours}hr : {minutes}min : {seconds}s left!
</h1>
<h1 className={Livestyles.timer}>
Citrus Hack 2021 <br />
{days}d : {hours}hr : {minutes}min : {seconds}s left!
</h1>
</>
);
}
};

export default function CountdownTimer() {
return <Countdown date={"2021-04-11T24:00:00"} renderer={renderer} />;
return (
<>
<Countdown date={"2021-04-11T09:00:00"} renderer={renderer} />
<div className={Livestyles.border1}></div>
</>
);
}
20 changes: 19 additions & 1 deletion pages/live.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,9 +155,27 @@ export default function Live() {
/>
</div>
</div>
<div className={Livestyles.border2}></div>
<h2 className={Livestyles.title}>Schedule</h2>
<iframe className={Livestyles.schedule} src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQKLXBJ7Aogv3r3wWA_oL5fwE2puEkTK-ZFZpmfMjJx2n62LkgyYfHlZ2LNez7cjw/pubhtml?gid=1015411112&amp;single=true&amp;widget=true&amp;headers=false"></iframe>
<iframe
className={Livestyles.schedule}
src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQKLXBJ7Aogv3r3wWA_oL5fwE2puEkTK-ZFZpmfMjJx2n62LkgyYfHlZ2LNez7cjw/pubhtml?gid=1015411112&amp;single=true&amp;widget=true&amp;headers=false"
width="1250"
scrolling="no"
frameborder="0"
marginheight="0"
marginwidth="0"
></iframe>
<div className={Livestyles.border3}></div>
<h2 className={Livestyles.title}>Resources</h2>
<a
className={Livestyles.resource}
href="https://github.com/citrushack/CitrusHackResources"
target="_blank"
>
Citrus Hack Resources
</a>
<div className={Livestyles.border4}></div>
<Sponsors />
</div>
</Container>
Expand Down
54 changes: 51 additions & 3 deletions styles/Live.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
.timer {
font-size: 63px;
text-align: center;
line-height: 2;
}
.title {
font-size: 40px;
Expand Down Expand Up @@ -27,15 +29,61 @@
margin-left: 10px;
text-align: left;
}
.schedule{
min-width: 1250px;
.schedule {
min-height: 100vh;
}
.resource {
font-size: 25px;
margin-bottom: 40px;
font-weight: 700;
color: #000;
border-bottom: 2px solid transparent;
transition: all 200ms ease-in-out;
}
.resource svg{
font-size: 10px;
}
.resource:hover {
color: #ff6060;
border-bottom: 2px solid #ff6060;
}
.border1{
width: 1200px;
height: 200px;
background-image: url("../public/backgrounds/Branch1.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.border2{
width: 1200px;
height: 200px;
background-image: url("../public/backgrounds/Branch2.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.border3{
width: 1200px;
height: 200px;
background-image: url("../public/backgrounds/Branch3.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.border4{
width: 1200px;
height: 200px;
background-image: url("../public/backgrounds/Branch4.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
@media (max-width: 768px) {
.timer {
font-size: 32px;
}
.schedule{
.schedule {
max-width: 50%;
padding: 0 20px;
}
Expand Down