Skip to content

Commit

Permalink
Rename sf -> sci-fi and update new-story page
Browse files Browse the repository at this point in the history
  • Loading branch information
@motform
motform committed Mar 26, 2022
1 parent 8b50125 commit 3f609f1
Show file tree
Hide file tree
Showing 10 changed files with 174 additions and 111 deletions.
20 changes: 10 additions & 10 deletions resources/public/css/colors.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,16 +54,16 @@
--fantasy-background: linear-gradient(90deg, #0b1418, #081416, #051414, #021412, #001410);
--fantasy-gradient: linear-gradient(90deg, #002d26, #00322a, #00372e, #003c32, #014237);

--sf-0: #1a1601;
--sf-1: #332b01;
--sf-2: #4c4002;
--sf-3: #655502;
--sf-4: #7e6a02;
--sf-5: #977f03;
--sf-6: #b09403;
--sf-7: #c9a903;
--sf-background: linear-gradient(90deg, #0b1418, #0e1412, #12150c, #161506, #1a1601);
--sf-gradient: linear-gradient(90deg, #332b01, #393001, #3f3501, #453a01, #4c4002);
--sci-fi-0: #1a1601;
--sci-fi-1: #332b01;
--sci-fi-2: #4c4002;
--sci-fi-3: #655502;
--sci-fi-4: #7e6a02;
--sci-fi-5: #977f03;
--sci-fi-6: #b09403;
--sci-fi-7: #c9a903;
--sci-fi-background: linear-gradient(90deg, #0b1418, #0e1412, #12150c, #161506, #1a1601);
--sci-fi-gradient: linear-gradient(90deg, #332b01, #393001, #3f3501, #453a01, #4c4002);

--poetic-0: #01111a;
--poetic-1: #012233;
Expand Down
169 changes: 106 additions & 63 deletions resources/public/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -222,6 +222,7 @@ textarea:focus {
.gap-eight { gap: var(--space-eight); }
.gap-quarter { gap: var(--space-quarter); }
.gap-half { gap: var(--space-half); }
.gap-3-4 { gap: var(--space-3-4); }
.gap-full { gap: var(--space-full); }
.gap-double { gap: var(--space-double); }

Expand Down Expand Up @@ -263,7 +264,7 @@ textarea:focus {
}

.background-neutral { background: var(--neutral-background); background-size: 400%; }
.background-sf { background: var(--sf-background); background-size: 400%; }
.background-sci-fi { background: var(--sci-fi-background); background-size: 400%; }
.background-fantasy { background: var(--fantasy-background); background-size: 400%; }
.background-poetic { background: var(--poetic-background); background-size: 400%; }
.background-landing { background: var(--background-mixed); background-size: 400%; }
Expand Down Expand Up @@ -408,11 +409,20 @@ textarea:focus {
.spinner-2 { animation: fade 1.75s ease infinite alternate; animation-delay: 0.5s;}
.spinner-3 { animation: fade 1.75s ease infinite alternate; animation-delay: 1s;}

.spinner-small-1 { animation: fade 1.75s ease infinite alternate; }
.spinner-small-2 { animation: fade 1.75s ease infinite alternate; animation-delay: 0.5s;}
.spinner-small-3 { animation: fade 1.75s ease infinite alternate; animation-delay: 1s;}

@keyframes fade {
0% { opacity: 100; }
100% { opacity: 0; transform: translate(0, 10px)}
}

@keyframes move {
0% { transform: translate(0); }
100% { transform: translate(0, 10px)}
}

.icon:hover {
fill: var(--accent-20);
stroke: var(--accent-20);
Expand Down Expand Up @@ -461,11 +471,14 @@ textarea:focus {
}

.new-story-container {
padding: var(--space-full) var(--space-double);
/* padding: var(--space-full) var(--space-double); */
}

.prompt {
margin: 0 -40px;
.prompt-background {
margin: 0 40px;
max-width: 750px;
width: 100%;

border: 1px solid var(--blurred-border);
background: var(--blurred-0);
}
Expand All @@ -480,6 +493,37 @@ textarea:focus {
border: 1px solid var(--blurred-0);
}

.prompt-personalities {
display: grid;
grid-template-columns: repeat(4, 1fr);
}

.prompt-personality-toggle {
cursor: pointer;
}
.prompt-personality-toggle label {
cursor: pointer;
}

.prompt-personality-toggle:hover {
background-color: var(--blurred-0);
}

.prompt-personality-toggle-active {
background-color: var(--blurred-0);
}

.personality-label {
font-size: 10px;
color: var(--fg);
font-weight: 600;
}

.prompt-description {
font-size: 11px;
color: var(--accent-20);
}

#prompt-textarea {
border-color: var(--blurred-0);
}
Expand Down Expand Up @@ -659,19 +703,19 @@ textarea:focus {


.personality-neutral-inactive { background-color: var(--accent-5); }
.personality-neutral-inactive:hover { background-color: var(--accent-15); }
.personality-neutral-inactive:hover, .prompt-personality-toggle:hover > .personality-neutral-inactive { background-color: var(--accent-15); }
.personality-neutral-active { background-color: var(--accent-30); }

.personality-fantasy-inactive { background-color: var(--fantasy-1); }
.personality-fantasy-inactive:hover { background-color: var(--fantasy-5); }
.personality-fantasy-inactive:hover, .prompt-personality-toggle:hover > .personality-fantasy-inactive { background-color: var(--fantasy-5); }
.personality-fantasy-active { background-color: var(--fantasy-7); }

.personality-sf-inactive { background-color: var(--sf-1); }
.personality-sf-inactive:hover { background-color: var(--sf-4); }
.personality-sf-active { background-color: var(--sf-6); }
.personality-sci-fi-inactive { background-color: var(--sci-fi-1); }
.personality-sci-fi-inactive:hover, .prompt-personality-toggle:hover > .personality-sci-fi-inactive { background-color: var(--sci-fi-4); }
.personality-sci-fi-active { background-color: var(--sci-fi-6); }

.personality-poetic-inactive { background-color: var(--poetic-1); }
.personality-poetic-inactive:hover { background-color: var(--poetic-5); }
.personality-poetic-inactive:hover, .prompt-personality-toggle:hover > .personality-poetic-inactive { background-color: var(--poetic-5); }
.personality-poetic-active { background-color: var(--poetic-7); }

@keyframes gradient {
Expand Down Expand Up @@ -745,8 +789,8 @@ textarea:focus {
.branch-mark.fantasy-branch-mark { border-color: var(--fantasy-6); }
.weak-branch-mark.fantasy-branch-mark { border-color: var(--fantasy-3); }

.branch-mark.sf-branch-mark { border-color: var(--sf-6); }
.weak-branch-mark.sf-branch-mark { border-color: var(--sf-3); }
.branch-mark.sci-fi-branch-mark { border-color: var(--sci-fi-6); }
.weak-branch-mark.sci-fi-branch-mark { border-color: var(--sci-fi-3); }

.branch-mark.poetic-branch-mark { border-color: var(--poetic-6); }
.weak-branch-mark.poetic-branch-mark { border-color: var(--poetic-3); }
Expand Down Expand Up @@ -818,36 +862,36 @@ textarea:focus {
font-variation-settings: "CASL" 0, "CRSV" 0, "slnt" 0;
}

/* SF */
/* SCI-FI */

.child.sf-visited {
.child.sci-fi-visited {
border-style: solid;
background-color: var(--sf-1);
border-color: var(--sf-1);
color: var(--sf-7);
background-color: var(--sci-fi-1);
border-color: var(--sci-fi-1);
color: var(--sci-fi-7);
}

.child.sf-unvisited {
.child.sci-fi-unvisited {
border-radius: 15px;
border: 1px dashed var(--sf-6);
background-color: var(--sf-0);
color: var(--sf-6);
border: 1px dashed var(--sci-fi-6);
background-color: var(--sci-fi-0);
color: var(--sci-fi-6);
font-variation-settings: "CASL" 1, "CRSV" 0, "slnt" -15;
}

.child.sf-unvisited.inactive,
.child.sf-visited.inactive {
color: var(--sf-3);
border-color: var(--sf-3);
.child.sci-fi-unvisited.inactive,
.child.sci-fi-visited.inactive {
color: var(--sci-fi-3);
border-color: var(--sci-fi-3);
}

.child.sf-visited:hover,
.child.sf-unvisited:hover,
.child.sf-unvisited.active {
.child.sci-fi-visited:hover,
.child.sci-fi-unvisited:hover,
.child.sci-fi-unvisited.active {
color: var(--fg);
border-style: solid;
background-color: var(--sf-5);
border-color: var(--sf-5);
background-color: var(--sci-fi-5);
border-color: var(--sci-fi-5);
font-variation-settings: "CASL" 0, "CRSV" 0, "slnt" 0;
}

Expand Down Expand Up @@ -945,9 +989,8 @@ h1 {
}

.landing-blurb {
margin-top: 15px;
max-width: 600px;
font-size: 20px;
max-width: 700px;
font-size: 18px;
}

.landing-blurb > p {
Expand Down Expand Up @@ -1105,7 +1148,7 @@ h1 {
.hidden {display: none;}
.neutral-hidden {display: none;}
.fantasy-hidden {display: none;}
.sf-hidden {display: none;}
.sci-fi-hidden {display: none;}
.poetic-hidden {display: none;}

.fantasy-tree-map-node-root {
Expand Down Expand Up @@ -1165,60 +1208,60 @@ h1 {
cursor: pointer;
}

.sf-tree-map-node-root {
fill: var(--sf-6);
stroke: var(--sf-6);
.sci-fi-tree-map-node-root {
fill: var(--sci-fi-6);
stroke: var(--sci-fi-6);
stroke-width: 3px;
cursor: pointer;
}

.sf-tree-map-node-current {
.sci-fi-tree-map-node-current {
cursor: pointer;
fill: var(--sf-4);
stroke: var(--sf-6);
fill: var(--sci-fi-4);
stroke: var(--sci-fi-6);
stroke-width: 3px;
}

.sf-tree-map-node-current-dim {
fill: var(--sf-3);
stroke: var(--sf-3);
.sci-fi-tree-map-node-current-dim {
fill: var(--sci-fi-3);
stroke: var(--sci-fi-3);
stroke-width: 3px;
cursor: pointer;
}

.sf-tree-map-node-current-superseded {
fill: var(--sf-6);
stroke: var(--sf-6);
.sci-fi-tree-map-node-current-superseded {
fill: var(--sci-fi-6);
stroke: var(--sci-fi-6);
cursor: pointer;
stroke-width: 3px;
}

.sf-tree-map-node-highlight {
.sci-fi-tree-map-node-highlight {
cursor: pointer;
fill: var(--sf-6);
stroke: var(--sf-6);
fill: var(--sci-fi-6);
stroke: var(--sci-fi-6);
stroke-width: 3px;
}

.sf-tree-map-node-active {
fill: var(--sf-6);
.sci-fi-tree-map-node-active {
fill: var(--sci-fi-6);
cursor: pointer;
}

.sf-tree-map-node-inactive {
fill: var(--sf-3);
.sci-fi-tree-map-node-inactive {
fill: var(--sci-fi-3);
cursor: pointer;
}

.sf-tree-map-node-prospective {
.sci-fi-tree-map-node-prospective {
fill: node;
stroke: var(--sf-5);
stroke: var(--sci-fi-5);
stroke-dasharray: 4;
cursor: pointer;
}

.sf-tree-map-node-active:hover, .sf-tree-map-node-root:hover, .sf-tree-map-node-current:hover, .sf-tree-map-node-inactive:hover {
fill: var(--sf-7);
.sci-fi-tree-map-node-active:hover, .sci-fi-tree-map-node-root:hover, .sci-fi-tree-map-node-current:hover, .sci-fi-tree-map-node-inactive:hover {
fill: var(--sci-fi-7);
cursor: pointer;
}

Expand Down Expand Up @@ -1317,21 +1360,21 @@ h1 {
stroke-dasharray: 4;
}

.sf-tree-map-link {
.sci-fi-tree-map-link {
fill: none;
stroke: var(--sf-3);
stroke: var(--sci-fi-3);
stroke-width: 1px;
}

.sf-tree-map-link-active {
.sci-fi-tree-map-link-active {
fill: none;
stroke: var(--sf-6);
stroke: var(--sci-fi-6);
stroke-width: 2px;
}

.sf-tree-map-link-prospective {
.sci-fi-tree-map-link-prospective {
fill: none;
stroke: var(--sf-6);
stroke: var(--sci-fi-6);
stroke-width: 1px;
stroke-dasharray: 4;
}
Expand Down
13 changes: 6 additions & 7 deletions src/org/motform/multiverse/components/header.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,10 +36,9 @@

(defn header []
(let [active-page @(rf/subscribe [:page/active])]
(when @(rf/subscribe [:db/stories])
[:header.header.h-stack.spaced.pad-3-4
[:section.header-content.h-stack.gap-half
[tabs]
[item :page/new-story active-page :new-story util/icon-plus]]
(when (= @(rf/subscribe [:page/active]) :page/story)
[reader/toggles])])))
[:header.header.h-stack.spaced.pad-3-4
[:section.header-content.h-stack.gap-half
[tabs]
[item :page/new-story active-page :new-story util/icon-plus]]
(when (= @(rf/subscribe [:page/active]) :page/story)
[reader/toggles])]))
4 changes: 2 additions & 2 deletions src/org/motform/multiverse/components/landing.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,8 @@
(defn landing-blurb []
[:section.landing-blurb.v-stack.gap-half
[:h1 "Multiverse"]
[:p "is a prototype system for interactive generative literature. It allows to user-reader to non-linearly explore a literary space generated by OpenAI’s GPT family of machine learning langauge models. Read more "[:a {:href "https://motform.org/multiverse" :target "_blank"} "here"] "."]
[:p "The system is requires an " [:a {:href "https://openai.com/api/" :target "_blank"} "OpenAI API key"] " to run. You will have to provide your own unless otherwise specified. All data is stored locally."]])
[:p "A vision of what the future of interactive generative literature might look like. Non-linearly explore a literary space generated on the fly by OpenAI’s GPT family of machine learning langauge models. Read more "[:a {:href "https://motform.org/multiverse" :target "_blank"} "here"] "."]
[:p "Requires an " [:a {:href "https://openai.com/api/" :target "_blank"} "OpenAI API key"] ". You will have to provide your own unless otherwise specified. All data is stored locally."]])

(defn landing []
[:div.landing-container.h-stack.gap-double
Expand Down
Loading

0 comments on commit 3f609f1

Please sign in to comment.