diff --git a/client/src/components/issues/index.css b/client/src/components/issues/index.css
index 5f75ebb..3fe776d 100644
--- a/client/src/components/issues/index.css
+++ b/client/src/components/issues/index.css
@@ -1,7 +1,7 @@
/* issues page styles */
.issues-header {
font-size: xx-large;
- letter-spacing: 0.7em;
+ /* letter-spacing: 0.7em; */
font-weight: 400;
margin-top: 1em;
margin-bottom: 1em;
@@ -21,11 +21,11 @@
padding: 0.5em;
margin-top: 1em;
margin-bottom: 1em;
- border: 1px solid #fff;
+ border: 4px solid #fff;
}
.issue-row:hover {
- border: 1px solid #444;
+ border: 4px dashed #ede98b;
}
@@ -49,6 +49,9 @@
text-align: left;
width: 100%;
margin-left: 1em;
+ font-style: italic;
+ color: #97efbd;
+ text-shadow: 2px 2px #ade1ff;
}
@@ -58,8 +61,11 @@
}
.issue-toc {
+ color: #ffb2e4;
+ text-shadow: 4px 4px #affbff;
+ margin-top: 4em;
padding-top: 2em;
- border-bottom: 1px solid #ccc;
+ border-bottom: 1px solid #19ecff;
}
.issue-toc-header {
@@ -68,14 +74,14 @@
justify-content: center;
margin-top: 1em;
margin-bottom: 1em;
- border-bottom: 1px solid #ccc;
+ border-bottom: 1px solid #19ecff;
}
.issue-toc-title {
font-size: xx-large;
letter-spacing: 0.7em;
font-weight: 400;
- border-bottom: 1px solid #ccc;
+ border-bottom: 1px solid #19ecff;
}
.issue-toc-subheader {
@@ -152,6 +158,8 @@
}
.issue-poem {
+ color: #ffb2e4;
+ text-shadow: 4px 4px #affbff;
padding-bottom: 10em;
}
@@ -201,4 +209,4 @@
.issue-page-container {
width: 80%;
}
-}
\ No newline at end of file
+}
diff --git a/client/src/components/issues/issues.js b/client/src/components/issues/issues.js
index 0602f75..cdaf8d8 100644
--- a/client/src/components/issues/issues.js
+++ b/client/src/components/issues/issues.js
@@ -33,10 +33,23 @@ export class issues extends Component {
issues,
} = this.props
+ const pageStyle = {
+ display: 'flex',
+ flexDirection: 'column',
+ width: '100%',
+ margin: '2em 25% 5em 25%',
+ }
+
+ const headerStyle = {
+ color: '#ffb2e4',
+ fontSize: '4em',
+ textShadow: '4px 4px #affbff',
+ }
+
return (
-
-
volumes
+
+
volumes
{
map(
issues,
@@ -63,10 +76,16 @@ export class IssueRow extends Component {
description,
} = this.props.issue
+ const contentStyle = {
+ fontSize: '2.3em',
+ color: '#19ecff',
+ textShadow: '2px 2px #ffb2e4',
+ }
+
return (
-
+
{`Vol. ${volume}`}
diff --git a/client/src/components/poets/index.css b/client/src/components/poets/index.css
index 0da8028..f98c670 100644
--- a/client/src/components/poets/index.css
+++ b/client/src/components/poets/index.css
@@ -21,7 +21,7 @@
}
.poet-row:hover {
- border: 4px dashed #ade1ff;
+ border: 4px dashed #ede98b;
}
.poet-row-name-line {
@@ -53,7 +53,7 @@
flex-direction: column;
align-items: flex-start;
padding-bottom: 2em;
- border-bottom: 1px solid #ccc;
+ border-bottom: 1px dotted #19ecff;
}
.poet-header-name {
@@ -125,27 +125,44 @@
.poet-overview {
display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ color: #19ecff;
+ text-shadow: 2px 2px #ffb2e4;
+ font-size: 2.5em;
+ margin-top: 2em;
}
.poet-overview-details {
- /* flex-grow: 1; */
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- width: 50%;
- border-right: 1px solid #ccc;
- padding-right: 2em;
+ text-align: left;
+ font-size: 0.7em;
}
-.poet-overview-details-birthday {
- font-size: 1.4em;
+.poet-overview-detail {
+ text-align: left;
white-space: pre-wrap;
}
-.poet-overview-details-description {
- font-size: 1.6em;
- white-space: pre-wrap;
- padding-top: 1em;
+.poet-overview-detail-value {
+ text-align: center;
+ font-weight: bold;
+ color: #ffb2e4;
+ text-shadow: 3px 3px #19ecff;
+}
+
+.poet-overview-header {
+ margin-top: 2em;
+ font-weight: bold;
+ font-size: 3em;
+ color: #ffb2e4;
+ text-shadow: 3px 3px #affbff;
+}
+
+.poet-overview-description {
+ margin-top: 1em;
+ width: 100%;
+ padding-bottom: 2em;
+ border-bottom: 1px dotted #19ecff;
text-align: justify;
}
@@ -160,20 +177,21 @@
.poet-overview-generate-poem-button {
padding: 1em;
- background-color: #222;
- border: 1px solid #222;
- font-size: 1.3em;
- color: #eee;
+ background-color: #ffffff;
+ border: 1px solid #f28cce;
+ font-size: 0.6em;
+ color: #f28cce;
font-weight: 500;
cursor:pointer;
margin-bottom: 2em;
+ margin-top: 3em;
}
.poet-overview-generate-poem-button:hover {
- background-color: #fff;
- border: 1px solid #222;
- color: #222;
+ background-color: #ffb2e4;
+ border: 1px solid #ffb2e4;
+ color: #ffffff;
}
/* ----------- MOBILE MEDIA QUERIES ----------- */
diff --git a/client/src/components/poets/poet.js b/client/src/components/poets/poet.js
index 60729b5..e26559d 100644
--- a/client/src/components/poets/poet.js
+++ b/client/src/components/poets/poet.js
@@ -88,7 +88,7 @@ export class poet extends Component {
}
const subheaderStyle = {
- color: '#bc75ff',
+ color: '#75b0ff',
textShadow: '4px 4px #affbff',
}
@@ -109,29 +109,8 @@ export class poet extends Component {
-
- this.chooseView('overview')}
- >
- overview
-
- this.chooseView('code')}
- >
- code
-
-
-
- {
- this.state.view === 'overview' ?
-
- :
- }
-
+
+
@@ -151,24 +130,40 @@ export class PoetOverview extends Component {
return (
-
-
- birthday: {formatDate(poet.birthDate)}
-
-
- {poet.description}
-
-
-
+
+
+ birthday |
+
+ {formatDate(poet.birthDate)}
+ |
+
+
+ published works |
+
+ {'-'}
+ |
+
+
+ volumes curated |
+
+ {'-'}
+ |
+
+
+
+
+ {poet.description}
+
+
writePoem(poet.id)}
>
generate a poem
- {
- isEmpty(generatedPoem) ? null :
- }
+ {
+ isEmpty(generatedPoem) ? null :
+ }
)
}
@@ -182,6 +177,7 @@ export class PoetCode extends Component {
return (