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

Jump to bottom

Darkmode #77

Open
wants to merge 22 commits into
base: master
Choose a base branch
from
Open

Darkmode #77

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
7543fa3
dark mode for article and background
yunqiu21 Jan 26, 2022
8e6be27
add dark mode to masthead and articlecard
yunqiu21 Jan 28, 2022
a5e900b
darkmode toggle in Desktop masthead
yunqiu21 Feb 11, 2022
0652417
toggle darkmode
yunqiu21 Feb 18, 2022
481b6b7
darkmode for articles
yunqiu21 Mar 19, 2022
b2295cf
article and home done
yunqiu21 Mar 29, 2022
abff649
removed one console log
yunqiu21 Mar 29, 2022
6a35ebf
more pages done
yunqiu21 Apr 8, 2022
bec0c60
change darkmode icon
yunqiu21 Apr 9, 2022
07f02cc
fix invert
yunqiu21 May 3, 2022
66a9f02
toggle background components/Page/index.jsx for /editorial-board, etc.
kaylynphan May 5, 2022
99bf726
darkmode localstorage
yunqiu21 May 26, 2022
7e8c15b
Merge branch 'darkmode' of github.com:dailybruin/flamingo into darkmode
yunqiu21 May 26, 2022
c875a96
desktop darkmode
yunqiu21 May 26, 2022
e099e85
Merge branch 'master' into darkmode
yunqiu21 May 26, 2022
6eabaa5
move the darkmode switch to the left
yunqiu21 May 26, 2022
19d6d50
change darkmode icon
yunqiu21 Jan 12, 2023
1d6e236
index on darkmode: 19d6d50 change darkmode icon
yunqiu21 Feb 22, 2023
6849f41
WIP on darkmode: 19d6d50 change darkmode icon
yunqiu21 Feb 22, 2023
452ca57
popup
yunqiu21 Feb 25, 2023
81493da
done I guess
yunqiu21 Feb 25, 2023
1b70b2c
Fixed button position
helenquach Apr 13, 2023
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
19 changes: 12 additions & 7 deletions components/Article/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,9 @@ export default class Article extends React.Component {
margin: 20px 0;
`}
>

<AuthorCard
darkmode={this.props.darkmode}
image={
author.simple_local_avatar != null
? author.simple_local_avatar.full
Expand Down Expand Up @@ -89,7 +91,7 @@ export default class Article extends React.Component {
display: block;
padding: 10px;
box-shadow: ${globals.cardShadow};
background-color: #ffffff;
background-color: ${this.props.darkmode ? "#222" : "#fff"};
`}
>
<div
Expand Down Expand Up @@ -121,10 +123,10 @@ export default class Article extends React.Component {

font-family: ${globals.headlineFont};
font-style: normal;
font-weight: bold;
font-weight: ${this.props.darkmode ? 550 : "bold"};
font-size: 30px;
line-height: 1.25;
color: #000000;
color: ${this.props.darkmode ? "#ddd" : "#000"};
`}
style={{
fontStyle:
Expand Down Expand Up @@ -194,12 +196,12 @@ export default class Article extends React.Component {
line-height: 21px;
padding: 5px 0 0;

color: #000000;
color: ${this.props.darkmode ? "#ddd" : "#000"};

a {
text-decoration: none;
color: #0080c6;
background-color: #ffffff;
background-color: ${this.props.darkmode ? "#222" : "#fff"};
}
a:hover {
text-decoration: underline;
Expand All @@ -216,6 +218,7 @@ export default class Article extends React.Component {
font-weight: 300;
font-size: 12px;
line-height: 15px;
color: ${this.props.darkmode ? "#fff" : "000"};
`}
>
{moment.utc(this.props.date).format("MMM D, YYYY h:mm a")}
Expand All @@ -227,7 +230,7 @@ export default class Article extends React.Component {
css={css`
font-size: 12px;
font-family: ${globals.bodyFont};
color: ${globals.darkGray};
color: ${this.props.darkmode ? "#fff" : globals.darkGray};
max-width: 640px;
margin: 20px auto 0;
`}
Expand All @@ -243,7 +246,7 @@ export default class Article extends React.Component {
text-align: left;
line-height: 1.75;

color: #000000;
color: ${this.props.darkmode ? "#fff" : "#000"};
display: block;
max-width: 640px;
margin: auto;
Expand Down Expand Up @@ -294,6 +297,7 @@ export default class Article extends React.Component {
}

& iframe {
${this.props.darkmode ? "filter: brightness(0.6);" : ""}
width: 100%;
}

Expand Down Expand Up @@ -338,6 +342,7 @@ export default class Article extends React.Component {
/>
<div>
<ShareButtons
darkmode={this.props.darkmode}
title={this.props.headline}
url={this.props.link}
></ShareButtons>
Expand Down
18 changes: 11 additions & 7 deletions components/ArticleCard/Full.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default function Full(props) {
display: block;
padding: 10px;
box-shadow: ${globals.cardShadow};
background-color: #ffffff;
background-color: ${props.darkmode ? "#222" : "#fff"};
`}
>
<span>
Expand Down Expand Up @@ -43,16 +43,18 @@ export default function Full(props) {
dangerouslySetInnerHTML={{ __html: props.category.name }}
/>
</a>
<span
<span
css={css`
border-left: 1px solid #000;
border-left: 1px solid ${props.darkmode ? "#ddd" : "#000"};
margin: 0;
padding-left: 4px;
font-family: ${globals.bodyFont};
font-style: normal;
font-weight: 300;
font-size: 11px;
line-height: 14px;
color: ${props.darkmode ? "#ddd" : "#000"};

`}
>
{moment(props.date).format("MMM D, YYYY h:mm a")}
Expand All @@ -62,7 +64,7 @@ export default function Full(props) {
<div
css={css`
margin: 2px 0 6px;
${locals.headline};
${props.darkmode ? locals.darkheadline : locals.headline};
`}
style={{
fontStyle:
Expand All @@ -89,14 +91,15 @@ export default function Full(props) {
margin: 4px 0;
}

color: #000000;
color: ${props.darkmode ? "#ddd" : "#000"};

`}
dangerouslySetInnerHTML={{ __html: props.caption }}
/>
<div
css={css`
margin: 0 0 5px;
${locals.excerpt}
${props.darkmode ? locals.darkexcerpt : locals.excerpt}
`}
dangerouslySetInnerHTML={{ __html: props.excerpt }}
/>
Expand All @@ -110,7 +113,8 @@ export default function Full(props) {
font-weight: bold;
font-size: 11px;

color: #000000;
color: ${props.darkmode ? "#ddd" : "#000"};

`}
>
By {utilities.renderAuthors(props.authors)}
Expand Down
15 changes: 9 additions & 6 deletions components/ArticleCard/Horz.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default function Horz(props) {
display: flex;
box-shadow: ${globals.cardShadow};
padding: 0px;
background-color: #ffffff;
background-color: ${props.darkmode ? "#222" : "#fff"};
`}
>
<div
Expand Down Expand Up @@ -58,7 +58,7 @@ export default function Horz(props) {
font-size: 8px;
text-align: right;

color: #000000;
color: ${props.darkmode ? "#ddd" : "#000"};
`}
>
{props.photographer}
Expand Down Expand Up @@ -99,14 +99,16 @@ export default function Horz(props) {
</a>
<span
css={css`
border-left: 1px solid #000;
border-left: 1px solid ${props.darkmode ? "#ddd" : "#000"};
margin: 0;
padding-left: 4px;
font-family: ${globals.bodyFont};
font-style: normal;
font-weight: 300;
font-size: 11px;
line-height: 14px;
color: ${props.darkmode ? "#ddd" : "#000"};

`}
>
{moment(props.date).format("MMM D, YYYY h:mm a")}
Expand All @@ -116,7 +118,7 @@ export default function Horz(props) {
<div
css={css`
margin: 2px 0 4px;
${locals.headline};
${props.darkmode ? locals.darkheadline : locals.headline};
`}
style={{
fontStyle:
Expand All @@ -127,7 +129,7 @@ export default function Horz(props) {
<div
css={css`
margin: 0 0 5px;
${locals.excerpt}
${props.darkmode ? locals.darkexcerpt : locals.excerpt}
`}
dangerouslySetInnerHTML={{ __html: props.excerpt }}
/>
Expand All @@ -141,7 +143,8 @@ export default function Horz(props) {
font-weight: bold;
font-size: 11px;

color: #000000;
color: ${props.darkmode ? "#ddd" : "#000"};

`}
>
By {utilities.renderAuthors(props.authors)}
Expand Down
11 changes: 6 additions & 5 deletions components/ArticleCard/Long.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default function Long(props) {
box-shadow: ${globals.cardShadow};
height: 100%;
padding: 0px;
background-color: #ffffff;
background-color: ${props.darkmode ? "#222" : "#fff"};
`}
>
<div
Expand Down Expand Up @@ -51,14 +51,15 @@ export default function Long(props) {
</a>
<span
css={css`
border-left: 1px solid #000;
border-left: 1px solid ${props.darkmode ? "#ddd" : "#000"};
margin: 0;
padding-left: 4px;
font-family: ${globals.bodyFont};
font-style: normal;
font-weight: 300;
font-size: 11px;
line-height: 14px;
color: ${props.darkmode ? "#ddd" : "#000"};
`}
>
{moment(props.date).format("MMM D, YYYY h:mm a")}
Expand All @@ -68,7 +69,7 @@ export default function Long(props) {
<h1
css={css`
margin: 2px 0;
${locals.headline};
${props.darkmode ? locals.darkheadline : locals.headline};
`}
style={{
fontStyle:
Expand All @@ -80,7 +81,7 @@ export default function Long(props) {
<a href={props.as} style={{ textDecoration: "none" }}>
<div
css={css`
${locals.excerpt}
${props.darkmode ? locals.darkexcerpt : locals.excerpt}
`}
dangerouslySetInnerHTML={{ __html: props.excerpt }}
/>
Expand All @@ -94,7 +95,7 @@ export default function Long(props) {
font-weight: bold;
font-size: 11px;

color: #000000;
color: ${props.darkmode ? "#ddd" : "#000"};
`}
>
By {utilities.renderAuthors(props.authors)}
Expand Down
4 changes: 2 additions & 2 deletions components/ArticleCard/Mini.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default function Mini(props) {
display: flex;
box-shadow: ${globals.cardShadow};
padding: 0px;
background-color: #ffffff;
background-color: ${props.darkmode ? "#222" : "#fff"};
`}
>
<div
Expand Down Expand Up @@ -84,7 +84,7 @@ export default function Mini(props) {
<h1
css={css`
margin: 2px 0 4px;
${locals.headline};
${props.darkmode ? locals.darkheadline : locals.headline};
font-size: 0.85rem;
font-weight: 550;
`}
Expand Down
13 changes: 7 additions & 6 deletions components/ArticleCard/Podcast.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default function Podcast(props) {
display: block;
padding: 10px;
box-shadow: ${globals.cardShadow};
background-color: #ffffff;
background-color: ${props.darkmode ? "#222" : "#fff"};
height: 100%;
`}
>
Expand Down Expand Up @@ -50,7 +50,7 @@ export default function Podcast(props) {
font-size: 8px;
text-align: right;

color: #000000;
color: ${props.darkmode ? "#ddd" : "#000"};
`}
>
{props.photographer}
Expand Down Expand Up @@ -83,14 +83,15 @@ export default function Podcast(props) {
</a>
<span
css={css`
border-left: 1px solid #000;
border-left: 1px solid ${props.darkmode ? "#ddd" : "#000"};
margin: 0;
padding-left: 4px;
font-family: ${globals.bodyFont};
font-style: normal;
font-weight: 300;
font-size: 11px;
line-height: 14px;
color: ${props.darkmode ? "#ddd" : "#000"};
`}
>
{moment(props.date).format("MMM D, YYYY h:mm a")}
Expand All @@ -100,14 +101,14 @@ export default function Podcast(props) {
<div
css={css`
margin: 2px 0 4px;
${locals.headline}
${props.darkmode ? locals.darkheadline : locals.headline};
`}
dangerouslySetInnerHTML={{ __html: props.headline }}
/>
<div
css={css`
margin: 0 0 5px;
${locals.excerpt}
${props.darkmode ? locals.darkexcerpt : locals.excerpt}
`}
dangerouslySetInnerHTML={{ __html: props.excerpt }}
/>
Expand All @@ -121,7 +122,7 @@ export default function Podcast(props) {
font-weight: 700;
font-size: 11px;

color: #000000;
color: ${props.darkmode ? "#ddd" : "#000"};
`}
>
By {utilities.renderAuthors(props.authors)}
Expand Down
Loading