essay page

4 files changed, 65 insertions, 6 deletions

diff --git a/frontend/site/projects/museum/views/credits.css b/frontend/site/projects/museum/views/credits.css
index 5b560d6..7e24fdc 100644
--- a/frontend/site/projects/museum/views/credits.css
+++ b/frontend/site/projects/museum/views/credits.css
@@ -1,4 +1,4 @@
-.app > div.page-credits {
+.app > div.page {
   position: fixed;
   top: 0;
   left: 0;
@@ -9,7 +9,7 @@
   font-size: 1.2vmax;
   font-family: "Helvetica", sans-serif;
 }
-.page-credits a {
+.page a {
   color: #FF790D;
   text-decoration: none;
 }
@@ -22,6 +22,9 @@
   line-height: 1;
   white-space: nowrap;
 }
+.page-title span {
+  margin-left: -0.45vw;
+}
 .page-content {
   margin-left: 6rem;
   width: calc(100vw - 12rem);
@@ -29,6 +32,9 @@
   flex-direction: row;
   justify-content: space-around;
 }
+
+/* credits */
+
 .page-left {
   display: flex;
   flex-direction: column;
@@ -39,6 +45,7 @@
 .page-right {
   width: 33%;
 }
+.page-subtitle,
 .page-credits .curated-by,
 .page-artists div {
   text-align: center;
diff --git a/frontend/site/projects/museum/views/credits.js b/frontend/site/projects/museum/views/credits.js
index e7b8626..5230d04 100644
--- a/frontend/site/projects/museum/views/credits.js
+++ b/frontend/site/projects/museum/views/credits.js
@@ -24,8 +24,8 @@ export default class Credits extends Component {
 
   render() {
     return (
-      <div className="page-credits">
-        <div className="page-title">The Last Museum</div>
+      <div className="page page-credits">
+        <div className="page-title">The L<span>ast Museum</span></div>
         <div className="page-content">
           <div className="page-left">
             <div className="page-artists">
diff --git a/frontend/site/projects/museum/views/essay.css b/frontend/site/projects/museum/views/essay.css
index 4dc3e76..1f5248a 100644
--- a/frontend/site/projects/museum/views/essay.css
+++ b/frontend/site/projects/museum/views/essay.css
@@ -1 +1,10 @@
-.page-essay {}
+.page-essay .page-content {
+  flex-direction: column;
+  justify-content: flex-start;
+}
+.page-essay .page-subtitle {
+  margin: 0rem 0 2rem 0;
+}
+.page-essay p {
+  margin: 0 0 1rem 0;
+}
\ No newline at end of file
diff --git a/frontend/site/projects/museum/views/essay.js b/frontend/site/projects/museum/views/essay.js
index 5775e3a..589a859 100644
--- a/frontend/site/projects/museum/views/essay.js
+++ b/frontend/site/projects/museum/views/essay.js
@@ -21,7 +21,50 @@ export default class Artists extends Component {
 
   render() {
     return (
-      <div className="page-essay">
+      <div className="page page-essay">
+        <div className="page-title">Curatorial Essay</div>
+        <div className="page-subtitle">By Nadim Samman</div>
+        <div className="page-content">
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis mauris tristique diam venenatis ultricies ut sit amet justo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec efficitur tortor elit, non suscipit turpis commodo ut. Phasellus imperdiet nunc sit amet nulla ultricies maximus. Vivamus bibendum eu nunc ut ultricies. Quisque tempor turpis sem, ac ullamcorper mi congue et. Sed nec interdum sapien. Pellentesque laoreet mauris in orci fermentum, ut consectetur elit fermentum. Nam nec suscipit neque. In aliquet vitae ligula in mattis. Donec iaculis massa sed augue eleifend imperdiet. Fusce tempor euismod facilisis. Etiam in lobortis ante, eu varius enim. Mauris mattis suscipit faucibus. Sed posuere augue eget tortor pharetra, eget fermentum lacus accumsan. Mauris viverra vulputate magna, non blandit odio congue vel.
+          </p>
+          <p>
+            Pellentesque sem lacus, maximus ac efficitur id, mollis convallis eros. Sed faucibus, velit vel consectetur dignissim, leo lectus consectetur odio, et congue nunc massa id metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam nibh tortor, aliquam sed massa eu, tincidunt dignissim libero. Morbi ullamcorper in lorem sit amet ultrices. Suspendisse nec ante a ex eleifend condimentum. Curabitur porta sem sed diam lacinia, id egestas augue feugiat. Aenean non odio facilisis, consectetur mauris quis, ultricies lorem. Maecenas bibendum risus sapien, in semper tellus dignissim fringilla. Suspendisse tempor ligula augue, nec rutrum mauris rutrum quis. Pellentesque tristique dolor nec lectus imperdiet convallis. Phasellus eleifend ligula id nunc cursus fermentum. Etiam pellentesque libero at vestibulum placerat. Aenean vitae condimentum turpis. Curabitur vel leo et ipsum ultricies gravida vel eget lacus.
+          </p>
+          <p>
+            Nullam ac metus sodales, tincidunt erat in, ultrices tortor. Vivamus sed tincidunt magna, sed condimentum nisi. Etiam magna lacus, dictum quis mauris sed, commodo tempus velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ac turpis pretium, efficitur arcu ut, tincidunt odio. Suspendisse ut metus ut turpis condimentum tempor. Praesent facilisis, purus ut luctus vulputate, neque tortor facilisis nisi, vitae tempor elit lectus at eros. Donec id elementum neque. Ut vel eleifend nulla.
+          </p>
+          <p>
+            Curabitur tempus rhoncus nunc et iaculis. Nulla sodales, leo vitae fringilla aliquam, turpis felis ultrices sapien, ac euismod eros sem at metus. In tincidunt arcu eget dui malesuada congue. Aenean lacinia semper lectus, dapibus consectetur felis consequat quis. Cras gravida felis tincidunt, mattis odio et, gravida lectus. Quisque varius erat vel gravida mattis. Donec auctor augue lacinia, laoreet metus at, consectetur lorem.
+          </p>
+          <p>
+            Morbi vel mattis mi. Suspendisse sit amet ante erat. Aenean vel convallis erat, vel molestie quam. Nulla quis lectus felis. Aenean facilisis sem nec posuere malesuada. Cras sit amet leo dui. In posuere arcu vel erat dictum, quis suscipit risus suscipit. Vivamus tempus diam ac orci blandit, eget faucibus lorem blandit. Sed nec tellus sagittis, vulputate mauris sed, lobortis elit. Nunc sit amet molestie eros, vestibulum molestie ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis nec ipsum mollis, porta dolor non, porta nisi.
+          </p>
+          <p>
+            Integer elementum interdum tortor lobortis consectetur. Aliquam porta, felis id viverra rutrum, tellus risus tempor lorem, at imperdiet odio enim et risus. Donec tempus posuere leo. Etiam felis ligula, sagittis a pulvinar nec, venenatis in ligula. Cras faucibus cursus ligula in malesuada. Maecenas ac velit odio. Sed hendrerit elementum hendrerit. Praesent nec enim quis mi pellentesque lacinia a quis ligula. Aenean ex justo, pulvinar et augue sit amet, varius ornare turpis. Sed ultricies, lorem eu imperdiet pretium, magna lacus mattis turpis, ut faucibus odio justo et enim.
+          </p>
+          <p>
+            Quisque pharetra turpis vitae tellus commodo consectetur. Praesent sodales tellus non efficitur fermentum. Maecenas ullamcorper, mauris in bibendum dignissim, felis leo mollis augue, eget fringilla mauris tortor quis massa. Suspendisse volutpat ultricies orci. Maecenas eget malesuada ante. Integer porta lorem tellus, et tincidunt nunc rhoncus a. Donec cursus diam vel ullamcorper bibendum. Duis elit risus, tristique eu pharetra eu, ultricies eu mauris. Ut a nisi neque. Nulla vitae semper dolor. Duis blandit et enim sagittis faucibus. Phasellus vitae lobortis justo.
+          </p>
+          <p>
+            Curabitur pharetra orci quis ipsum vestibulum, at aliquet mauris mattis. Donec ut lorem sed urna cursus molestie vel non eros. Aliquam nec volutpat tellus. Etiam id rutrum turpis, eget aliquam libero. Ut ultricies mauris sit amet massa vulputate fermentum. Nunc convallis neque ac mi volutpat, a porta magna malesuada. Sed tincidunt orci posuere purus efficitur, vel hendrerit nisi sodales. Duis mollis eleifend dui. Morbi vitae imperdiet sem. Donec a condimentum purus, vel posuere neque.
+          </p>
+          <p>
+            Donec vitae bibendum nulla, vel dapibus leo. Curabitur in scelerisque ipsum. Sed eu hendrerit neque. Phasellus nec metus vitae elit tempus cursus quis in ante. Nulla sed nisl non ipsum bibendum varius. Nullam non tellus mi. Quisque bibendum sodales molestie.
+          </p>
+          <p>
+            Nulla molestie leo vel metus dignissim gravida. Aliquam id congue ipsum. Vivamus euismod, nisi vel maximus mattis, enim mauris dapibus velit, in varius orci mi vel tortor. Aenean aliquet pulvinar luctus. Nunc felis nisi, molestie vel magna cursus, iaculis malesuada nisl. Sed viverra lectus auctor molestie consectetur. Vestibulum egestas elementum fermentum.
+          </p>
+          <p>
+            In vel elit id magna molestie imperdiet a non quam. Ut non nisl cursus metus eleifend congue vel sit amet arcu. Curabitur non volutpat orci. Fusce varius turpis sed eleifend volutpat. Nulla odio tellus, lobortis nec eros at, fermentum accumsan lectus. Nullam eu vestibulum metus. Curabitur ac efficitur justo, vitae imperdiet ante. Etiam viverra nibh ut enim ullamcorper, ut vehicula augue lacinia.
+          </p>
+          <p>
+            Suspendisse libero orci, tempor et eros ut, porta semper massa. Pellentesque ac nisl a augue faucibus lacinia. Quisque pellentesque metus id eros lacinia, sit amet feugiat enim rhoncus. Nulla vestibulum est id felis iaculis bibendum. Ut malesuada rhoncus leo, sed dictum est pulvinar nec. Nulla non hendrerit elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quam est, interdum nec mi non, cursus facilisis odio. Ut euismod nibh tortor, quis malesuada magna commodo sed. Nulla a risus eros. Aenean porttitor ipsum non libero convallis maximus ut vitae odio. Morbi felis nibh, eleifend quis blandit eget, faucibus eget massa. Praesent pulvinar, turpis sit amet lacinia rhoncus, tortor mi auctor magna, a gravida ex lacus eget leo. Vestibulum a eleifend dui, sit amet venenatis massa. Aenean bibendum convallis pellentesque. Nullam vehicula ipsum nec nibh cursus gravida.
+          </p>
+          <p>
+            Donec ut mi interdum, malesuada lorem tincidunt, fringilla tellus. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at lectus pretium, egestas magna in, lobortis est. Ut id ligula finibus, condimentum arcu a, tincidunt diam. Aenean pharetra ligula a interdum semper. Phasellus rhoncus tincidunt augue, vehicula tristique dui pulvinar ut.
+          </p>
+        </div>
       </div>
     )
   }