Skip to content

Commit

Permalink
merged main into branch for checking
Browse files Browse the repository at this point in the history
  • Loading branch information
@maxfukuh4ra
maxfukuh4ra committed Nov 4, 2024
2 parents b9433fb + 5d655f2 commit d5e20bb
Show file tree
Hide file tree
Showing 41 changed files with 2,976 additions and 10,420 deletions.
169 changes: 113 additions & 56 deletions package-lock.json
View file

Large diffs are not rendered by default.

5 changes: 4 additions & 1 deletion public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,10 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">


<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Moul&display=swap" rel="stylesheet">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-1S5BF4RKRZ"></script>
<script>
Expand Down
2 changes: 1 addition & 1 deletion src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
}

.App-header {
background-color: #282c34;
background-color: #265CA9;;
min-height: 100vh;
display: flex;
flex-direction: column;
Expand Down
25 changes: 18 additions & 7 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,11 @@ import React, { useState, useEffect } from "react";
import './App.css';
import Header from './components/Header';
import Footer from './components/Footer';
import ArticleGrid from "./components/articlegrid/articlegrid";
import ArticleGrid from "./components/ArticleGrid";
import Landing from './components/Landing';
import Background from './components/Background';
import Cursor from './images/PencilCursor.svg';
import CloudEffect from './components/CloudEffect';

function App() {
const [data, setData] = useState(null);
Expand All @@ -16,15 +20,22 @@ function App() {
}, []);

return data && (
<div className="App">
<div className="App" style={{background: '#94ccee', zIndex: -1, cursor: `url(${Cursor}), auto`}}>
<Header/>
Hello Daily Bruin!
<ArticleGrid articles={data.national} title="National" />
<ArticleGrid articles={data.state} title="State" />
<ArticleGrid articles={data.local} title="Local" />
<Landing/>
<br></br>
<br></br>
<br></br>
<CloudEffect/>
<div style={{ position: 'relative' }}>
<Background />
<ArticleGrid articles={data.national} title="NATIONAL" />
<ArticleGrid articles={data.state} title="STATE" />
<ArticleGrid articles={data.local} title="LOCAL" />
</div>
<Footer/>
</div>
);
}

export default App;
export default App;
115 changes: 104 additions & 11 deletions src/components/ArticleCard.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,63 @@
import styled from "styled-components";
import graphiteUnderline from '../images/ArticleCardGraphite.svg';
import bubble from '../images/ArticleCardBubble.svg';
import bubbleGraphite from '../images/ArticleCardBubbleGraphite.svg';

const GraphiteUnderline = styled("img")`
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: auto;
opacity: 0;
transition: opacity 0.3s ease;
`;

const BubbleWrapper = styled.div`
position: absolute;
display: flex;
align-items: center;
justify-content: flex-start;
margin-top: 2em;
bottom: 3em;
left: 0;
@media (max-width: 900px) {
justify-content: center;
margin-top: 1em;
}
`;

const Bubble = styled.img`
position: absolute;
width: 72px;
height: 42px;
flex-shrink: 0;
left: 0;
top: 0;
@media (max-width: 900px) {
margin: 0;
}
`;

const BubbleGraphite = styled.img`
position: absolute;
width: 70px;
height: 40px;
flex-shrink: 0;
opacity: 0;
transition: opacity 0.3s ease;
left: 0;
top: 0;
@media (max-width: 900px) {
margin: 0;
}
`;

const ArticleContainer = styled("div")`
position: relative;
display: flex;
flex-direction: row;
text-align: left;
Expand All @@ -10,42 +67,78 @@ const ArticleContainer = styled("div")`
font-style: normal;
margin: 2%;
background: white;
// flex-wrap: wrap;
max-width: 100%;
// padding-bottom: 2em;
@media (max-width: 900px) {
flex-direction: column;
align-items: center;
text-align: center;
}
&:hover ${GraphiteUnderline} { // graphite underline when hover
opacity: 1;
}
&:hover ${BubbleGraphite} { // graphite bubble fill in when hover
opacity: 1;
}
`;

const TitleContainer = styled("div")`
margin-top: 0.5em;
font-size: 33px;
font-weight: 500;
line-height: 43px; /* 130.303% */
&:hover {
text-decoration: underline;
}
max-width: 100%;
position: relative;
overflow-wrap: break-word;
word-break: break-word;
// &:hover {
// text-decoration: underline;
// }
`;

const ImgContainer = styled("div")`
border: 2px solid #000;
background: #949494;
width: 400.361px;
height: 300px;
max-width: 100%;
max-height: 100%;
display: flex;
flex-shrink: 0;
object-fit: cover;
// object-fit prevents the image being warped in mobile
`;

const ArticleCard = ({ props }) => {
return (
<ArticleContainer>
<ImgContainer>
<img
src={props.article_img}
src={props.article_image}
alt="Article"
style={{ width: "100%", height: "100%" }}
style={{ width: "100%", height: "100%", objectFit: "cover"}}
></img>
</ImgContainer>
<div>
<TitleContainer>{props.article_title}</TitleContainer>
<div style={{ fontSize: "28px", fontWeight: 300, lineHeight: "34px" }}>
{props.article_byline}
<br></br>
{props.article_url}
<div style={{ position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
<TitleContainer>{props.article_title}
<GraphiteUnderline src={graphiteUnderline} alt="Graphite Underline"/></TitleContainer>
<div style={{ marginTop: '10px', fontSize: "28px", fontWeight: 300, lineHeight: "34px" }}>
{props.article_byline}
</div>
<div>
{/* <br/> prevents the bubble from overlapping with text in different screen size*/}
<br/>
<br/>
<br/>
<BubbleWrapper>
<Bubble src={bubble} alt="Bubble" />
<BubbleGraphite src={bubbleGraphite} alt="Bubble Graphite" />
</BubbleWrapper>
</div>
</div>
</ArticleContainer>
Expand Down
2 changes: 1 addition & 1 deletion src/components/ArticleGrid.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,4 +69,4 @@ const ArticleGrid = ({ articles, title }) => {
);
};

export default ArticleGrid;
export default ArticleGrid;
161 changes: 161 additions & 0 deletions src/components/Background.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,161 @@
import styled from "styled-components";
import FlagRight from "../images/FlagRight.svg";
import FlagLeft from "../images/FlagLeft.svg";
import VoteSignRight from "../images/VoteSignRight.svg";
import VoteSignLeft1 from "../images/VoteSignLeft1.svg";
import VoteSignLeft2 from "../images/VoteSignLeft2.svg";
import FlagHighLow from "../images/FlagHighLow.svg";
import FlagLowHigh from "../images/FlagLowHigh.svg";

const FlagsContainer = styled.div`
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
`;

// Left Flag
const LeftFlag = styled.div`
position: absolute;
top: 0;
left: 0;
width: 21vw;
height: 100%;
background-image: url(${FlagLeft}), url(${FlagLeft}); /* Two instances */
background-repeat: no-repeat, no-repeat;
background-size: 100% 55vh, 100% 55vh; /* Adjusts each flag's size */
background-position: left 10vh, left 700vh; /* Creates spacing for zig-zag pattern */
z-index: 20;
`;

// Right Flag
const RightFlag = styled.div`
position: absolute;
top: 0;
right: 0;
width: 21vw;
height: 100%;
background-image: url(${FlagRight}), url(${FlagRight}); /* Two instances */
background-repeat: no-repeat, no-repeat;
background-size: 100% 55vh, 100% 55vh; /* Adjusts each flag's size */
background-position: right 50vh, right 850vh; /* Creates spacing for zig-zag pattern */
transform: scaleX(-1);
z-index: 20;
`;

// Left Vote Sign
const LeftVoteSign1 = styled.div`
position: absolute;
top: 400vh; /* Adjusted to provide spacing and ensure visibility */
left: 0;
width: 20vw;
height: auto;
min-height: 160vh;
background-image: url(${VoteSignLeft1});
background-repeat: repeat-y;
background-size: 100% 160vh; /* Scales to maintain spacing */
background-position: left 10vh;
z-index: 20; /* Above background flags and below article cards */
`;

const LeftVoteSign2 = styled.div`
position: absolute;
top: 20vh; /* Adjusted to provide spacing and ensure visibility */
left: -9vh;
width: 30vw;
height: auto;
min-height: 160vh;
background-image: url(${VoteSignLeft2});
background-repeat: repeat-y;
background-size: 100% 160vh; /* Scales to maintain spacing */
background-position: left 10vh;
z-index: 20; /* Above background flags and below article cards */
`;

// Right Vote Sign
const RightVoteSign = styled.div`
position: absolute;
top: 150vh;
right: 0;
width: 20vw;
height: auto;
min-height: 160vh;
background-image: url(${VoteSignRight});
background-repeat: repeat-y;
background-size: 100% 160vh;
background-position: right 20vh;
z-index: 20;
`;

// Horizontal Flag Strings (Background layer)
const HighLowFlag1 = styled.div`
position: absolute;
top: 200vh;
left: 0;
width: 100%;
height: 150vh;
background-image: url(${FlagHighLow});
background-repeat: repeat-y;
background-size: cover;
background-position: center;
z-index: 0;
`;

const HighLowFlag2 = styled.div`
position: absolute;
bottom: -20vh;
left: 0;
width: 100%;
height: 150vh;
background-image: url(${FlagHighLow});
background-repeat: repeat-y;
background-size: cover;
background-position: center;
z-index: 0;
`;

const LowHighFlag1 = styled.div`
position: absolute;
top: -5vh;
left: 0;
width: 100%;
height: calc(200vh + 300px);
background-image: url(${FlagLowHigh});
background-repeat: repeat-y;
background-size: cover;
background-position: center;
z-index: 0;
`;

const LowHighFlag2 = styled.div`
position: absolute;
top: 400vh;
left: 0;
width: 100%;
height: calc(200vh + 300px);
background-image: url(${FlagLowHigh});
background-repeat: repeat-y;
background-size: cover;
background-position: center;
z-index: 0;
`;

const Background = () => {
return (
<FlagsContainer>
<LeftFlag />
<RightFlag />
<HighLowFlag1 />
<HighLowFlag2 />
<LowHighFlag1 />
<LowHighFlag2 />
<LeftVoteSign1 />
<LeftVoteSign2 />
<RightVoteSign />
</FlagsContainer>
);
};

export default Background;
Loading

0 comments on commit d5e20bb

Please sign in to comment.