1 files changed, 93 insertions, 0 deletions
diff --git a/animism-align/frontend/app/views/paragraph/paragraph.css b/animism-align/frontend/app/views/paragraph/paragraph.css
new file mode 100644
index 0000000..8cd502c
--- /dev/null
+++ b/animism-align/frontend/app/views/paragraph/paragraph.css
@@ -0,0 +1,93 @@
+.paragraphs {
+  width: 100%;
+  height: calc(100% - 3.125rem);
+  overflow: scroll;
+  background: white;
+  color: black;
+  padding: 1rem;
+}
+
+/* general paragraph styles */
+
+.paragraphs .content {
+  font-family: 'Georgia', serif;
+  width: 650px;
+  margin: 0 auto;
+  padding-bottom: 6rem;
+  position: relative;
+}
+
+.paragraphs .content > div {
+  margin-bottom: 16px;
+}
+
+/* paragraph subtypes */
+
+.paragraphs .header {
+  font-size: 32px;
+}
+
+.paragraphs .paragraph {
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.paragraphs .blockquote {
+  padding-left: 3rem;
+}
+
+.paragraphs .hidden {
+  opacity: 0.5;
+}
+
+/* media image */
+
+.paragraphs .media.image img {
+  width: 100%;
+}
+
+/* current paragraph */
+
+.paragraphs .paragraph.current {
+  background: rgba(0,0,0,0.0);
+}
+
+/* sentences */
+
+.paragraphs span {
+  margin-right: 4px;
+  cursor: pointer;
+}
+
+.paragraphs .paragraph .current {
+  box-shadow: -2px -3px 0 #fff,
+               2px -3px 0 #fff,
+              -2px  3px 0 #fff,
+               2px  3px 0 #fff;
+  box-decoration-break: clone;
+  background: black;
+  color: white;
+}
+
+/* paragraph form */
+
+.paragraphForm {
+  position: absolute;
+  right: -305px;
+  width: 300px;
+  padding: 0.5rem;
+  background: #ddd;
+  box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
+}
+.paragraphForm .select div {
+  color: #ddd;
+  font-family: 'Roboto', sans-serif;
+}
+.paragraphForm .row {
+  justify-content: space-between;
+  align-items: center;
+}
+.paragraphForm .row > div {
+  display: flex;
+  align-items: center;
+}