Initial commit

Signed-off-by: Miquel Sabaté Solà <msabate@suse.com>

8 files changed, 369 insertions, 0 deletions

diff --git a/app/assets/stylesheets/actiontext.css b/app/assets/stylesheets/actiontext.css
new file mode 100644
index 0000000..3cfcb2b
--- /dev/null
+++ b/app/assets/stylesheets/actiontext.css
@@ -0,0 +1,31 @@
+/*
+ * Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
+ * the trix-editor content (whether displayed or under editing). Feel free to incorporate this
+ * inclusion directly in any other asset bundle and remove this file.
+ *
+ *= require trix
+*/
+
+/*
+ * We need to override trix.css’s image gallery styles to accommodate the
+ * <action-text-attachment> element we wrap around attachments. Otherwise,
+ * images in galleries will be squished by the max-width: 33%; rule.
+*/
+.trix-content .attachment-gallery > action-text-attachment,
+.trix-content .attachment-gallery > .attachment {
+  flex: 1 0 33%;
+  padding: 0 0.5em;
+  max-width: 33%;
+}
+
+.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
+.trix-content .attachment-gallery.attachment-gallery--2 > .attachment, .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
+.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
+  flex-basis: 50%;
+  max-width: 50%;
+}
+
+.trix-content action-text-attachment .attachment {
+  padding: 0 !important;
+  max-width: 100% !important;
+}
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
new file mode 100644
index 0000000..042a686
--- /dev/null
+++ b/app/assets/stylesheets/application.css
@@ -0,0 +1,40 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
+ * vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+ *= require simple
+ *= require_tree .
+ *= require_self
+ */
+
+body {
+    /* Make the central block wider as it is with the default simple.css layout. */
+    grid-template-columns: 1fr min(65rem,90%) 1fr !important;
+}
+
+header {
+  padding: 0px !important;
+}
+
+/* Tweaks on dark mode */
+@media (prefers-color-scheme: dark) {
+  /* Change the accent from simple.css */
+  :root,
+  ::backdrop {
+    --accent: #d7af87 !important;
+    --accent-hover: #ffe099 !important;
+  }
+
+  /* Make the buttons from Trix a bit more visible on dark mode */
+  trix-toolbar .trix-button {
+    background: var(--text) !important;
+  }
+}
diff --git a/app/assets/stylesheets/comment.css b/app/assets/stylesheets/comment.css
new file mode 100644
index 0000000..4472c62
--- /dev/null
+++ b/app/assets/stylesheets/comment.css
@@ -0,0 +1,27 @@
+/*
+ * Single comment.
+ */
+
+.comment {
+    margin: 1rem .5rem 1rem .5rem;
+    border: 1px solid var(--border);
+    border-radius: var(--standard-border-radius);
+    padding: .5rem 1rem;
+
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 10px;
+}
+
+.comment .comment-header {
+    display: flex;
+    gap: 10px;
+}
+
+.comment .comment-header .comment-header-title {
+    flex-grow: 1;
+}
+
+.comment .comment-header .comment-header-actions {
+    flex-grow: 0;
+}
diff --git a/app/assets/stylesheets/icons.css b/app/assets/stylesheets/icons.css
new file mode 100644
index 0000000..484265e
--- /dev/null
+++ b/app/assets/stylesheets/icons.css
@@ -0,0 +1,51 @@
+/*
+ * Icons taken and adapted from: https://github.com/astrit/css.gg.
+ */
+
+/*
+ * Arrow down.
+ */
+
+.gg-chevron-down {
+    box-sizing: border-box;
+    position: relative;
+    transform: scale(1);
+    border: 2px solid transparent;
+}
+.gg-chevron-down::after {
+    content: "";
+    display: block;
+    box-sizing: border-box;
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    border-bottom: 2px solid;
+    border-right: 2px solid;
+    transform: rotate(45deg);
+    left: -5px;
+    top: 4px
+}
+
+/*
+ * Arrow up.
+ */
+
+.gg-chevron-up {
+    box-sizing: border-box;
+    position: relative;
+    transform: scale(1);
+    border: 2px solid transparent;
+}
+.gg-chevron-up::after {
+    content: "";
+    display: block;
+    box-sizing: border-box;
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    border-top: 2px solid;
+    border-right: 2px solid;
+    transform: rotate(-45deg);
+    left: -5px;
+    bottom: 4px
+}
diff --git a/app/assets/stylesheets/search.css b/app/assets/stylesheets/search.css
new file mode 100644
index 0000000..eb72638
--- /dev/null
+++ b/app/assets/stylesheets/search.css
@@ -0,0 +1,75 @@
+/*
+ * Root
+ */
+
+#hidden-nav {
+    padding: 1rem .5rem 2rem .5rem;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    justify-content: center;
+}
+
+#hidden-nav div:not(:last-child) {
+    padding-right: 1rem;
+    border-right: 1px solid var(--border);
+}
+
+#hidden-nav a {
+    margin-left: .5rem;
+}
+
+/*
+ * New search.
+ */
+
+#search_form {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 10px;
+    padding-bottom: 1rem;
+    margin-bottom: 2rem;
+    border-bottom: 1px solid var(--border);
+}
+
+#search_form input[type=text] {
+    width: 100%;
+}
+
+/*
+ * Export.
+ */
+
+@media only screen and (max-width: 720px) {
+    #export-format-button {
+        width: 100%;
+        text-align: center;
+    }
+}
+
+/*
+ * Shared searches.
+ */
+
+#public-search-table {
+    margin: 0px;
+    width: 100%;
+}
+
+#public-search-table td {
+    padding: 0px;
+    border: 0px;
+}
+
+#public-search-table details {
+    background: 0;
+    margin: 0px;
+    border-radius: 0px;
+}
+
+#public-search-table .details-flex {
+    display: flex;
+    align-items: flex-start;
+    gap: 20px;
+    flex-wrap: wrap;
+}
diff --git a/app/assets/stylesheets/tags.css b/app/assets/stylesheets/tags.css
new file mode 100644
index 0000000..141cbca
--- /dev/null
+++ b/app/assets/stylesheets/tags.css
@@ -0,0 +1,27 @@
+#tag-index h2 span {
+    font-size: 1rem;
+    vertical-align: middle;
+}
+
+#tag-new h2 span {
+    font-size: 1rem;
+    vertical-align: middle;
+}
+
+#tags-list {
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+}
+
+.tag-container {
+    display: flex;
+    align-items: flex-start;
+}
+
+.tag-container .name {
+    flex-grow: 1;
+}
+
+.tag-container .action {
+    flex-grow: 0;
+}
diff --git a/app/assets/stylesheets/things.css b/app/assets/stylesheets/things.css
new file mode 100644
index 0000000..af8487f
--- /dev/null
+++ b/app/assets/stylesheets/things.css
@@ -0,0 +1,94 @@
+/*
+ * Thing form.
+ */
+
+#thing_form {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
+}
+
+@media only screen and (max-width: 720px) {
+    #thing_form {
+        grid-template-columns: 1fr;
+    }
+
+    #thing-delete-button {
+        width: 100%;
+    }
+}
+
+#thing_form input[type=text], input[type=number], input[type=date], select {
+    width: 100%;
+}
+
+#thing_form .thing_large {
+    grid-column: 1 / -1;
+}
+
+h5 a {
+    font-size: 1rem;
+}
+
+/*
+ * Listing things.
+ */
+
+.thing_row {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+.thing_head {
+    flex-grow: 0;
+}
+
+.thing_body {
+    flex-grow: 1;
+}
+
+.thing_body a {
+    text-decoration: none;
+    color: var(--text) !important;
+}
+
+.thing_body a:hover {
+    color: var(--accent) !important;
+}
+
+.thing_tail {
+    flex-grow: 0;
+}
+
+.dot {
+    height: 8px;
+    width: 8px;
+    border-radius: 50%;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.dot_other {
+    background-color: black;
+}
+
+.dot_poetry {
+    background-color: #facc15;
+}
+
+.dot_theater {
+    background-color: #c084fc;
+}
+
+.dot_essay {
+    background-color: #ef4444;
+}
+
+.dot_shorts {
+    background-color: #a3e635;
+}
+
+.dot_novel {
+    background-color: #60a5fa;
+}
diff --git a/app/assets/stylesheets/utils.css b/app/assets/stylesheets/utils.css
new file mode 100644
index 0000000..335e595
--- /dev/null
+++ b/app/assets/stylesheets/utils.css
@@ -0,0 +1,24 @@
+.width-100 {
+    width: 100%;
+}
+
+.center-contents {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+}
+
+.flex-list {
+    display: flex;
+    align-items: start;
+    gap: 10px 20px;
+}
+
+.flex-wrap {
+    display: flex;
+    align-items: start;
+    flex-wrap: wrap;
+}
+
+.hidden {
+    display: none !important;
+}