fix: update website design (#8)

* wip: replace actual api call with localhost in dev mode

* wip: update designs step 1

* wip: update designs step 2

* wip: update designs step 3

* test: specify test location host

* chore: remove obsolete console logs

* wip: add welcome and credits notes

* feat: add share and like alerts

* fix: make actions more visible on mobile

* chore: make poem more visible on mobile

* wip: position buttons better

* wip: scroll poem into page when first shown

* wip: update button shadows

README.md

@@ -4,10 +4,8 @@ Notes to the end of the line and back again.
 
 ## Attribution
 
-- [Design ideas](https://dribbble.com/shots/23237785-Glyph-Beer-15)
 - [Pacifico Font](https://fonts.google.com/specimen/Pacifico)
-- [CSS Doodle](https://css-doodle.com/)
+<!-- - [CSS Doodle](https://css-doodle.com/) -->
 - [ChatGPT](https://chat.openai.com/)
 - [Stable Diffusion](https://stablediffusionweb.com/#ai-image-generator)
 - [Logo](https://www.svgrepo.com/svg/528342/letter-opened)
-<!-- - [Pageflip](https://github.com/Nodlik/react-pageflip) -->

package.json

@@ -7,7 +7,6 @@
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.12",
     "react-list": "^0.8.17",
-    "react-pageflip": "^2.0.3",
     "react-query": "^3.39.3",
     "react-scripts": "5.0.1",
     "styled-components": "^6.1.6",

public/stories/credits.txt

@@ -0,0 +1,8 @@
+Well that was... something.
+
+And look at us, here, at the end of this little book.
+
+If you want more ravings then shoot me a
+message@letters-from-the-abyss.com
+
+Thanks for reading!

public/stories/deicide.txt

@@ -1,15 +1,49 @@
-If you understood what a god is, the futility of your task would be apparent.
-It is so tightly woven to into the fabric of existence that reality itself keeps it alive.
-You can not kill a god but you can make it mortal, and mortals are very easy to exterminate.
-But to do that you have to trap the god, for long enough that the fundamental universe... forgets.
-To even perform the entrapment is nigh impossible.
-You must take it by surprise and cut it off from all dimensions it has access to, spatial, temporal, etc.
-The older the god, the more causality attached to it, the harder it is for this to complete.
-The oldest gods are said to have access to even more dimensions so good luck trying to trap an ancient one.
-Even the young gods, if smart enough, can figure out extra dimensional travel after being trapped, before they are unmoored from their divinity.
-Escaping into folds of reality we cannot even know exist.
-Even gods do not directly act against their peers because infinity is a long time to carry a grudge and ample time to take revenge.
-Only the craziest or the most powerful gods attempt to kill others, they are sometimes called god killers.
-Their tools are not left for mortals to wield, if even mortals could.
-So to follow in their footsteps, and kill a god, you must first find a way to attract the attention of a god killer.
+If you understand what a god is,
+the futility of your task would be apparent.
+
+It is so tightly woven into the fabric of existence,
+that reality itself keeps it alive.
+
+You can not kill a god,
+but you can make it mortal.
+
+Mortals are very easy to exterminate.
+
+To you have to restrain the god,
+for long enough that the universe... forgets.
+
+Even this entrapment is nigh impossible.
+
+You must take it by surprise,
+cut it off from all known dimensions
+spatial, temporal, spiritual.
+
+The older and more powerful the god,
+the more causality attached to it,
+the harder it is for this to complete.
+
+The oldest gods are even rumored
+to access hidden dimensions,
+so good luck trapping an ancient one.
+
+Even the young gods, if smart or lucky,
+can figure out extra dimensional travel,
+before they are unmoored from their divinity.
+
+Escaping into folds of reality unknown to us.
+
+Even gods do not directly act against their peers,
+because infinity is a long time to carry a grudge,
+and ample time to execute revenge.
+
+Deicide is only attempted by
+the craziest or the most powerful gods,
+colloquial called god killers.
+
+Their tools are not left for mortals to wield,
+if even mortals could safely apply their methods.
+
+So to follow in their footsteps, and kill a god,
+you must first attract the attention of a god killer.
+
 And the attention of a god is no trivial thing.

public/stories/welcome.txt

@@ -0,0 +1,10 @@
+Traveller.
+
+How you arrived only you, and your stalkers, know.
+
+But while you are here, indulge me a moment and
+flip through my letters, written to myself
+from a dark place with hope for a brighter future.
+
+If you like any of them do not hesitate to share.
+See you all again at the finale ❤️

src/components/App.css

@@ -12,12 +12,14 @@
 .App-text {
   display: flex;
   flex-direction: column;
-  color: var(--color-bg);
+  color: var(--color-fg);
+  background-color: color-mix(in srgb, var(--color-bg), transparent 40%);
+  box-shadow: color-mix(in srgb, var(--color-bg), transparent 80%) 0 0 4px 4px;
   text-transform: capitalize;
   text-align: start;
-  align-items: flex-start;
+  align-items: center;
   justify-content: center;
-  /* position: sticky; */
+  position: fixed;
   top: 0;
   left: 0;
   padding: 12px;
@@ -54,7 +56,6 @@
   left: calc((200vmax - 100vw) * -0.5);
   width: 200vmax;
   height: 200vmax;
-  animation: App-logo-spin infinite 20s linear;
 }
 
 @media (prefers-reduced-motion: no-preference) {

src/components/App.tsx

@@ -2,7 +2,7 @@ import { Suspense } from "react";
 import Logo from "./Logo";
 import withAppWrapper from "./hocs/withAppWrapper";
 import ErrorResetBoundary from "./ErrorResetBoundary";
-import PoemList from "./PoemList";
+import PoemCollection from "./PoemCollection";
 import Doodle from "./Doodle";
 import "./App.css";
 import { logPageVisit } from "../utils/hitCounter";
@@ -15,16 +15,21 @@ function App() {
     <div className={cls``}>
       <div className={cls`doodle`}>
         <Doodle>{`
-@grid: 50x1 / 100%;
+@grid: 1/100%;
 
-@place: center;
-@size: calc(100vmax / @I * @i);
-
-transform: rotate(calc(@i * 5deg));
-
-border-radius: 30%;
-border: 1px solid hsla(
-calc(10 + 4 * @i), 70%, 68%, @r.8
+@content: @svg(
+  viewBox: 0 0 16 16 p 1;
+  stroke: var(--color-bh);
+  stroke-width: .1;
+  stroke-linecap: round;
+  line*16x16 {
+    draw: @r(2s);
+    x1, y1, x2, y2: @p(
+      @nx(-1) @ny(-1) @nx @ny,
+      @nx @ny(-1) @nx(-1) @ny,
+      @nx @ny(-1) @nx @ny
+    );
+  }
 );
         `}</Doodle>
       </div>
@@ -43,7 +48,7 @@ calc(10 + 4 * @i), 70%, 68%, @r.8
       </div>
       <ErrorResetBoundary>
         <Suspense fallback={<Spinner />}>
-          <PoemList />
+          <PoemCollection />
         </Suspense>
       </ErrorResetBoundary>
       <div className={cls`spacer`}>&nbsp;</div>

src/components/PoemCard.css

@@ -13,26 +13,45 @@
 .poem-card-content {
   flex-direction: column;
   transition: opacity 0.3s ease-in-out;
-  box-shadow: 1px 1px 4px 4px color(--color-hl);
+  margin-top: 100vh;
+  border-radius: 10px;
+  box-shadow: color-mix(in srgb, var(--color-bg), transparent 80%) 0 0 2px 2px;
 }
 
 .poem-card-content > *[class^="poem-card"] {
   background-color: var(--color-fg);
 }
 
+.poem-card-photo-wrap {
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  top: calc(4em + 64px);
+  height: calc(80vmin - 50px);
+  width: calc(80vmin - 50px);
+  /* min-width: 480px;
+  min-height: 480px; */
+  background-color: var(--color-bh);
+  border-radius: 20px;
+  border-color: var(--color-hl);
+  border-width: 4px;
+  border-style: solid;
+}
+
 .poem-card-photo {
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
-  overflow: hidden;
   height: 100%;
   width: 100%;
 
   background-color: transparent;
-  background-position: top center;
+  background-position: center;
   background-repeat: no-repeat;
-  background-size: contain;
+  background-size: cover;
 
   &.collapsed {
     width: 0vw;
@@ -48,13 +67,6 @@
   width: calc(100% - 64px);
 }
 
-/* .poem-card-text-sizer {
-  position: absolute;
-  top: 0;
-  left: 0;
-  visibility: hidden;
-} */
-
 .poem-card-timestamp {
   /* position: absolute;
   bottom: 0; */

src/components/PoemCard.tsx

@@ -11,7 +11,7 @@ export const PoemImage = React.forwardRef<
   }
 >(({ title }, ref) => {
   return (
-    <div ref={ref}>
+    <div className={cls`photo-wrap`} ref={ref}>
       <div
         className={cls`photo`}
         style={{ backgroundImage: cardBg(title) }}
@@ -40,7 +40,7 @@ export const PoemDetails = React.forwardRef<
   );
 });
 
-export function PoemCard({
+function PoemCard({
   date,
   lines,
   title,
@@ -51,11 +51,18 @@ export function PoemCard({
 }) {
   return (
     <div className={cls`content`}>
-      <a className={cls`title`} href={`#${title}`}>
+      <a
+        className={cls`title`}
+        href={`#${title}`}
+        onClick={(e) => {
+          e.preventDefault();
+          window.scrollTo({ top: window.screen.availHeight / 2 });
+        }}
+      >
         {formatTitle(title)}
       </a>
-      <div className={cls`text`}>{lines}</div>
       <div className={cls`timestamp`}>{formatDate(date)}</div>
+      <div className={cls`text`}>{lines}</div>
       <div className={cls`paper`}>
         <svg width="0">
           <filter id="filter">

src/components/PoemCollection.css

@@ -0,0 +1,39 @@
+.poem-list-wrapper {
+  /* display: flex; */
+  flex-direction: row;
+}
+
+input[type="button"] {
+  position: fixed;
+  top: 140px;
+  background-color: var(--color-fg);
+  color: var(--color-bg);
+  box-shadow: color-mix(in srgb, var(--color-bg), transparent 80%) 0 0 4px 4px;
+  border: solid 1px color-mix(in srgb, var(--color-bg), transparent 40%);
+  border-radius: 8px;
+  padding: 16px;
+  cursor: pointer;
+  z-index: 1;
+}
+
+input[type="button"][disabled] {
+  opacity: 0.3;
+}
+
+input#prev-btn, input#like-btn {
+  left: calc(50vw - (50px + 40vmin));
+  /* border-left: 0; */
+  /* border-top-left-radius: 0; */
+  /* border-bottom-left-radius: 0; */
+}
+
+input#next-btn, input#share-btn  {
+  right: calc(50vw - (50px + 40vmin));
+  /* border-right: 0; */
+  /* border-top-right-radius: 0; */
+  /* border-bottom-right-radius: 0; */
+}
+
+input#like-btn, input#share-btn {
+  top: 210px;
+}