From 2fc9a18f9fdb709a158819405a5e4accbd3502ab Mon Sep 17 00:00:00 2001
From: "Luna D." <luna@nighty.cloud>
Date: Wed, 12 Jun 2024 20:50:46 +0200
Subject: [PATCH] editor styling + media list styling

---
 assets/css/elements/block.css                 | 13 +++-----
 assets/css/elements/form.css                  |  4 +++
 assets/css/elements/input.css                 | 14 ++++++--
 assets/css/elements/media.css                 |  6 ++++
 assets/css/options/compatibility.css          |  2 +-
 assets/css/options/extra-interaction-info.css |  7 ++++
 assets/css/themes/dark-blue.css               |  3 ++
 assets/css/themes/dark-purple.css             |  3 ++
 assets/css/themes/light-blue.css              |  3 ++
 assets/css/views/communication.css            | 32 ++++++++++++-------
 assets/css/views/interaction.css              | 12 +++++++
 .../templates/admin/report/show.html.slime    |  2 +-
 .../templates/communication/_body.html.slime  |  3 +-
 .../conversation/message/_form.html.slime     |  4 +--
 .../templates/conversation/new.html.slime     |  2 +-
 .../templates/image/_image_box.html.slime     |  9 +++---
 .../templates/image/comment/_form.html.slime  |  2 +-
 .../templates/image/comment/edit.html.slime   |  4 +--
 .../image/description/_form.html.slime        |  1 -
 .../templates/image/new.html.slime            |  2 +-
 .../templates/markdown/_help.html.slime       | 17 ----------
 .../templates/markdown/_input.html.slime      | 13 ++++----
 .../templates/markdown/_toolbar.html.slime    |  7 ++--
 .../templates/message/_message.html.slime     |  8 +----
 .../profile/description/edit.html.slime       |  2 +-
 .../profile/scratchpad/edit.html.slime        |  2 +-
 .../templates/topic/new.html.slime            |  4 +--
 .../templates/topic/post/_form.html.slime     |  2 +-
 .../templates/topic/post/edit.html.slime      |  4 +--
 lib/philomena_web/views/app_view.ex           |  5 +++
 priv/repo/seeds/pages/rules.md                |  1 +
 31 files changed, 113 insertions(+), 80 deletions(-)
 create mode 100644 assets/css/options/extra-interaction-info.css
 delete mode 100644 lib/philomena_web/templates/markdown/_help.html.slime

diff --git a/assets/css/elements/block.css b/assets/css/elements/block.css
index 3da040f9..ad373336 100644
--- a/assets/css/elements/block.css
+++ b/assets/css/elements/block.css
@@ -59,8 +59,7 @@
   border-bottom-right-radius: var(--border-radius-outer) !important;
 }
 
-.block__content,
-.block__tab {
+.block__content {
   border-radius: var(--border-radius-outer);
   padding: var(--padding-normal);
   background: var(--primary-dark-color);
@@ -146,14 +145,10 @@
   margin-top: 0;
 }
 
-.block__tab {
-  padding: var(--padding-normal);
-}
-
 .block__header--js-tabbed {
   display: flex;
   padding: 0;
-  gap: var(--padding-normal);
+  gap: var(--padding-small);
 }
 
 @mixin if-mobile {
@@ -169,11 +164,11 @@
 }
 
 .block__header--js-tabbed a:hover {
-  background: var(--background-color);
+  background: var(--primary-dark-color);
 }
 
 .block__header--js-tabbed .selected {
-  background: var(--background-color);
+  background: var(--primary-dark-color);
 }
 
 .block--spaced-top {
diff --git a/assets/css/elements/form.css b/assets/css/elements/form.css
index e992af50..75bc940d 100644
--- a/assets/css/elements/form.css
+++ b/assets/css/elements/form.css
@@ -4,6 +4,10 @@ form .field {
   margin-bottom: var(--padding-normal);
 }
 
+form .field:last-child {
+  margin-bottom: 0;
+}
+
 form .form--two-column {
   display: grid;
   grid: inherit;
diff --git a/assets/css/elements/input.css b/assets/css/elements/input.css
index bd973879..4e07ecab 100644
--- a/assets/css/elements/input.css
+++ b/assets/css/elements/input.css
@@ -1,16 +1,17 @@
 .input {
-  border: 1px solid var(--secondary-border-color);
+  border: 1px solid var(--invisible-color);
+  background: var(--primary-dark-color);
   border-radius: var(--border-radius-inner);
-  background: var(--secondary-dark-color);
   color: var(--text-color);
   padding: var(--padding-small);
   box-sizing: border-box;
   font-family: var(--font-family-monospace);
+  box-shadow: 0;
 }
 
 .input:hover,
 .input:focus {
-  background: var(--secondary-muted-color);
+  background: var(--secondary-dark-color);
 }
 
 .input:focus {
@@ -31,6 +32,13 @@
   cursor: text;
 }
 
+textarea.input:hover,
+textarea.input:focus,
+.input--text:hover,
+.input--text:focus {
+  border: 1px solid var(--secondary-border-color);
+}
+
 input[type="file"] {
   padding-top: var(--padding-small);
 }
diff --git a/assets/css/elements/media.css b/assets/css/elements/media.css
index bbc6b329..748e38e3 100644
--- a/assets/css/elements/media.css
+++ b/assets/css/elements/media.css
@@ -165,3 +165,9 @@
 .image-scaled {
   max-width: 100%;
 }
+
+@mixin if-phone {
+  .media-box__header--link-row {
+    grid-template-columns: 1fr 1fr 1.5fr 1fr 1fr;
+  }
+}
diff --git a/assets/css/options/compatibility.css b/assets/css/options/compatibility.css
index 41b66fa1..ec276268 100644
--- a/assets/css/options/compatibility.css
+++ b/assets/css/options/compatibility.css
@@ -33,7 +33,7 @@ nav.header__secondary > * {
 @mixin legacy-flex-gap block__header--js-tabbed, var(--padding-normal);
 @mixin legacy-flex-gap field, var(--padding-normal);
 @mixin legacy-flex-gap horizontal-list, var(--padding-normal);
-@mixin legacy-flex-gap communication-edit__actions, var(--padding-normal);
+@mixin legacy-flex-gap communication__edit-actions, var(--padding-normal);
 @mixin legacy-flex-gap header__link--user, var(--padding-normal);
 @mixin legacy-flex-gap tag-list, var(--padding-small);
 @mixin legacy-flex-gap tagsinput, var(--padding-small);
diff --git a/assets/css/options/extra-interaction-info.css b/assets/css/options/extra-interaction-info.css
new file mode 100644
index 00000000..a4238349
--- /dev/null
+++ b/assets/css/options/extra-interaction-info.css
@@ -0,0 +1,7 @@
+.interaction--optional {
+  display: inherit !important;
+}
+
+.media-box__header--link-row {
+  grid-template-columns: 0.5fr 1.5fr 1fr 1.5fr 1fr 1fr 1fr;
+}
diff --git a/assets/css/themes/dark-blue.css b/assets/css/themes/dark-blue.css
index 5a801a6e..f9652768 100644
--- a/assets/css/themes/dark-blue.css
+++ b/assets/css/themes/dark-blue.css
@@ -78,6 +78,9 @@ $spoiler-color: #0f0f0f;
   --spoiler-color: $spoiler-color;
   --spoiler-revealed-color: hsl(from $spoiler-color h s calc(l + 20));
 
+  /* The invisible color */
+  --invisible-color: #00000000;
+
   /* Type (information category) colors */
   @mixin type-color success, $success-color;
   @mixin type-color warning, $warning-color;
diff --git a/assets/css/themes/dark-purple.css b/assets/css/themes/dark-purple.css
index 99cd1766..fca9dde7 100644
--- a/assets/css/themes/dark-purple.css
+++ b/assets/css/themes/dark-purple.css
@@ -78,6 +78,9 @@ $spoiler-color: #0f0f0f;
   --spoiler-color: $spoiler-color;
   --spoiler-revealed-color: hsl(from $spoiler-color h s calc(l + 20));
 
+  /* The invisible color */
+  --invisible-color: #00000000;
+
   /* Type (information category) colors */
   @mixin type-color success, $success-color;
   @mixin type-color warning, $warning-color;
diff --git a/assets/css/themes/light-blue.css b/assets/css/themes/light-blue.css
index ff18c34e..aaa031d5 100644
--- a/assets/css/themes/light-blue.css
+++ b/assets/css/themes/light-blue.css
@@ -78,6 +78,9 @@ $spoiler-color: #0f0f0f;
   --spoiler-color: $spoiler-color;
   --spoiler-revealed-color: hsl(from $spoiler-color h s calc(l + 20));
 
+  /* The invisible color */
+  --invisible-color: #00000000;
+
   /* Type (information category) colors */
   @mixin type-color success, $success-color;
   @mixin type-color warning, $warning-color;
diff --git a/assets/css/views/communication.css b/assets/css/views/communication.css
index 241939f2..20669a6a 100644
--- a/assets/css/views/communication.css
+++ b/assets/css/views/communication.css
@@ -1,32 +1,42 @@
 .communication__toolbar {
+  display: flex;
+  flex-wrap: wrap;
   font-size: var(--font-size);
-  background: var(--secondary-color);
-  padding: 0 var(--padding-small);
+  background: var(--primary-dark-color);
+  padding: var(--padding-small);
   line-height: var(--block-header-height);
-  border: 1px solid var(--secondary-border-color);
-  border-bottom: 0;
-  box-sizing: border-box;
+  border-bottom: 1px solid var(--primary-border-color);
 }
 
 .communication__toolbar__button {
-  color: var(--text-color);
+  color: var(--text-color) !important;
   background: 0;
   border: 0;
-  padding: var(--padding-small);
+  border-radius: var(--border-radius-inner);
+  padding: 0 var(--padding-small);
 }
 
 .communication__toolbar__button:hover {
   background: var(--secondary-muted-color);
 }
 
-.communication-edit__actions {
+.communication__edit-tab {
+  border-radius: var(--border-radius-inner);
+  overflow: hidden;
+}
+
+.communication__edit-tab textarea {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.communication__edit-actions {
   display: flex;
   flex-direction: row;
   line-height: var(--block-header-height);
   border: 0;
-  margin: var(--padding-normal);
-  margin-top: 0;
-  gap: var(--padding-normal);
+  gap: var(--padding-small);
+  margin-top: var(--padding-small);
 }
 
 .communication__anonymous {
diff --git a/assets/css/views/interaction.css b/assets/css/views/interaction.css
index e3eeae10..96dbec7e 100644
--- a/assets/css/views/interaction.css
+++ b/assets/css/views/interaction.css
@@ -6,6 +6,10 @@
     width: 1rem;
   }
 
+  .interaction--$(type).interaction--nohover:hover {
+    color: var(--$(type)-color) !important;
+  }
+
   .interaction--$(type).active,
   .interaction--$(type):hover {
     color: var(--text-color) !important;
@@ -13,6 +17,14 @@
   }
 }
 
+.interaction--optional {
+  display: none;
+}
+
+.interaction--nohover:hover {
+  background: 0 !important;
+}
+
 @mixin interaction-type fave;
 @mixin interaction-type upvote;
 @mixin interaction-type downvote;
diff --git a/lib/philomena_web/templates/admin/report/show.html.slime b/lib/philomena_web/templates/admin/report/show.html.slime
index 9c227fae..fd7768fb 100644
--- a/lib/philomena_web/templates/admin/report/show.html.slime
+++ b/lib/philomena_web/templates/admin/report/show.html.slime
@@ -4,7 +4,7 @@ p
 
 article.block.communication
   .block__content.flex.flex--no-wrap
-    = render PhilomenaWeb.CommunicationView, "_body.html", object: @report, body: @body, conn: @conn
+    = render PhilomenaWeb.CommunicationView, "_body.html", object: @report, body: @body, conn: @conn, name: "report"
 
   .block__content.communication__options
     .flex.flex--wrap.flex--spaced-out
diff --git a/lib/philomena_web/templates/communication/_body.html.slime b/lib/philomena_web/templates/communication/_body.html.slime
index 90b3cd94..2b35fdf6 100644
--- a/lib/philomena_web/templates/communication/_body.html.slime
+++ b/lib/philomena_web/templates/communication/_body.html.slime
@@ -1,7 +1,7 @@
 elixir:
   anon = is_nil(assigns[:noanon]) or @noanon == false
   options = if is_nil(assigns[:options]), do: "", else: @options
-  deleted = Map.has_key?(@object, :hidden_from_users) and @object.hidden_from_users == true
+  deleted = if Map.has_key?(@object, :hidden_from_users), do: @object.hidden_from_users == true, else: false
   hidden_if_deleted = if deleted, do: "hidden", else: ""
   deleted_class = if deleted, do: "communication--deleted", else: ""
 
@@ -13,7 +13,6 @@ elixir:
     = render PhilomenaWeb.UserAttributionView, "_anon_user_avatar.html", object: @object, conn: @conn
   - true ->
     = render PhilomenaWeb.UserAttributionView, "_user_avatar.html", object: @object, conn: @conn, class: "avatar--small"
-
 - username = if anon do
   = render PhilomenaWeb.UserAttributionView, "_anon_user.html", object: @object, awards: true, conn: @conn
 - else
diff --git a/lib/philomena_web/templates/conversation/message/_form.html.slime b/lib/philomena_web/templates/conversation/message/_form.html.slime
index cbaec375..f03d7ad3 100644
--- a/lib/philomena_web/templates/conversation/message/_form.html.slime
+++ b/lib/philomena_web/templates/conversation/message/_form.html.slime
@@ -1,7 +1,7 @@
 = form_for @changeset, ~p"/conversations/#{@conversation}/messages", fn f ->
   .block
-    .communication-edit__wrap
+    .communication__edit-wrap
       = render PhilomenaWeb.MarkdownView, "_input.html", conn: @conn, f: f, action_icon: "pencil-alt", action_text: "Reply"
 
-    .block__content.communication-edit__actions
+    .block__content.communication__edit-actions
       = submit "Send", class: "button", autocomplete: "off", data: [disable_with: raw("Sending&hellip;")]
diff --git a/lib/philomena_web/templates/conversation/new.html.slime b/lib/philomena_web/templates/conversation/new.html.slime
index ef0f3758..6688ad25 100644
--- a/lib/philomena_web/templates/conversation/new.html.slime
+++ b/lib/philomena_web/templates/conversation/new.html.slime
@@ -38,5 +38,5 @@ h1 New Conversation
     div
       = render PhilomenaWeb.MarkdownView, "_input.html", changeset: @changeset, conn: @conn, f: fm, action_icon: "pencil-alt", action_text: "Compose"
 
-  .block__content.communication-edit__actions
+  .block__content.communication__edit-actions
     = submit "Send", class: "button", autocomplete: "off", data: [disable_with: "Sending..."]
diff --git a/lib/philomena_web/templates/image/_image_box.html.slime b/lib/philomena_web/templates/image/_image_box.html.slime
index a6a44ce9..ba2516f0 100644
--- a/lib/philomena_web/templates/image/_image_box.html.slime
+++ b/lib/philomena_web/templates/image/_image_box.html.slime
@@ -23,16 +23,17 @@ elixir:
     .media-box__header--link-row
       a.interaction--fave href="#" rel="nofollow" data-image-id=@image.id
         i.fa.fa-star title="Fave!"
+      span.interaction--fave.interaction--nohover.interaction--optional.hidden--phone = shorten_number(@image.faves_count)
       a.interaction--upvote href="#" rel="nofollow" data-image-id=@image.id
         i.fa.fa-arrow-up title="Yay!"
-      span.score title="Score" data-image-id=@image.id = @image.score
+      span.score title="Score" data-image-id=@image.id = shorten_number(@image.score)
       a.interaction--downvote href="#" rel="nofollow" data-image-id=@image.id
         i.fa.fa-arrow-down title="Neigh!"
+      a.interaction--hide.interaction--optional.hidden--phone href="#" rel="nofollow" data-image-id=@image.id
+        i.fa.fa-eye-slash title="Hide"
       a.interaction--comment href="/#{@image.id}#comments" title="Comments"
         i.fa.fa-comments>
         = if @image.comments_count > 0 do
-          span.comments-count data-image-id=@image.id = @image.comments_count
-      /a.interaction--hide href="#" rel="nofollow" data-image-id=@image.id
-        i.fa.fa-eye-slash title="Hide"
+          span.comments-count data-image-id=@image.id = shorten_number(@image.comments_count)
   .media-box__content class=size_class
     = render PhilomenaWeb.ImageView, "_image_container.html", link: link, image: @image, size: @size, conn: @conn
diff --git a/lib/philomena_web/templates/image/comment/_form.html.slime b/lib/philomena_web/templates/image/comment/_form.html.slime
index 84bf2bd6..0d1c4c37 100644
--- a/lib/philomena_web/templates/image/comment/_form.html.slime
+++ b/lib/philomena_web/templates/image/comment/_form.html.slime
@@ -9,6 +9,6 @@
     div
       = render PhilomenaWeb.MarkdownView, "_input.html", conn: @conn, f: f, placeholder: "Please read the site rules before posting and use ||spoilers|| for above-rating stuff."
 
-    .block.communication-edit__actions
+    .block.communication__edit-actions
       => submit "Post", class: "button button--important button--success", data: [disable_with: raw("Posting&hellip;")]
       = render PhilomenaWeb.MarkdownView, "_anon_checkbox.html", conn: @conn, f: f
diff --git a/lib/philomena_web/templates/image/comment/edit.html.slime b/lib/philomena_web/templates/image/comment/edit.html.slime
index 1b17c96a..236ba122 100644
--- a/lib/philomena_web/templates/image/comment/edit.html.slime
+++ b/lib/philomena_web/templates/image/comment/edit.html.slime
@@ -4,12 +4,12 @@
       p Oops, something went wrong! Please check the errors below.
 
   .block
-    .communication-edit__wrap
+    .communication__edit-wrap
       = render PhilomenaWeb.MarkdownView, "_input.html", conn: @conn, f: f, placeholder: "Please read the site rules before posting and use ||spoilers|| for above-rating stuff."
 
     .block__content.field
       = text_input f, :edit_reason, class: "input input--wide", placeholder: "Reason for edit"
       = error_tag f, :edit_reason
 
-    .block__content.communication-edit__actions
+    .block__content.communication__edit-actions
       => submit "Edit", class: "button", data: [disable_with: raw("Posting&hellip;")]
diff --git a/lib/philomena_web/templates/image/description/_form.html.slime b/lib/philomena_web/templates/image/description/_form.html.slime
index e47b5d3f..1f4fd36b 100644
--- a/lib/philomena_web/templates/image/description/_form.html.slime
+++ b/lib/philomena_web/templates/image/description/_form.html.slime
@@ -3,7 +3,6 @@
     .alert.alert-danger
       p Oops, something went wrong! Please check the errors below.
 
-  = render PhilomenaWeb.MarkdownView, "_help.html", conn: @conn
   = render PhilomenaWeb.MarkdownView, "_toolbar.html", conn: @conn
 
   .field
diff --git a/lib/philomena_web/templates/image/new.html.slime b/lib/philomena_web/templates/image/new.html.slime
index 68fe7471..42d9f940 100644
--- a/lib/philomena_web/templates/image/new.html.slime
+++ b/lib/philomena_web/templates/image/new.html.slime
@@ -80,7 +80,7 @@
 
   .field
     .block
-      .communication-edit__wrap
+      .communication__edit-wrap
         = render PhilomenaWeb.MarkdownView, "_input.html", conn: @conn, f: f, action_icon: "pencil-alt", action_text: "Description", placeholder: "Describe this image in plain words - this should generally be info about the image that doesn't belong in the tags or source.", name: :description, class: "js-image-descr-input", required: false
 
   = render PhilomenaWeb.MarkdownView, "_anon_checkbox.html", conn: @conn, f: f, label: "Post anonymously"
diff --git a/lib/philomena_web/templates/markdown/_help.html.slime b/lib/philomena_web/templates/markdown/_help.html.slime
deleted file mode 100644
index e2838ea3..00000000
--- a/lib/philomena_web/templates/markdown/_help.html.slime
+++ /dev/null
@@ -1,17 +0,0 @@
-.editor-syntax-reference
-  strong<> Syntax quick reference:
-
-  span
-    strong> **bold**
-    em> *italic*
-    span.spoiler> ||hide text||
-    code> `code`
-    ins> __underline__
-    del> ~~strike~~
-    sup> ^sup^
-    sub %sub%
-
-  p
-    a href="/pages/markdown"
-      i.fa.fa-question-circle>
-      strong Detailed syntax guide
diff --git a/lib/philomena_web/templates/markdown/_input.html.slime b/lib/philomena_web/templates/markdown/_input.html.slime
index 8e30b627..50724fc5 100644
--- a/lib/philomena_web/templates/markdown/_input.html.slime
+++ b/lib/philomena_web/templates/markdown/_input.html.slime
@@ -6,21 +6,20 @@
 - is_required = assigns[:required]
 - input_classes = assigns[:class]
 .block__header.block__header--js-tabbed
-  a.selected href="#" data-click-tab="write"
+  a.button.selected href="#" data-click-tab="write"
     i.fa> class="fa-#{action_icon}"
     = action_text
 
-  a href="#" data-click-tab="preview"
-    i.fa.fa-cog.icon--padded.small.fa-spin.js-preview-loading.hidden> title=raw('Loading preview&hellip;')
-    i.fa.fa-eye.icon--padded.small.js-preview-idle>
+  a.button href="#" data-click-tab="preview"
+    i.fa.fa-cog.fa-spin.js-preview-loading.hidden> title=raw('Loading preview&hellip;')
+    i.fa.fa-eye.js-preview-idle>
     | Preview
 
-.block__tab.communication-edit__tab.selected.js-preview-input-wrapper data-tab="write"
-  = render PhilomenaWeb.MarkdownView, "_help.html", conn: @conn
+.block__tab.communication__edit-tab.selected.js-preview-input-wrapper data-tab="write"
   = render PhilomenaWeb.MarkdownView, "_toolbar.html", conn: @conn
 
   .field
     = textarea form, field_name, class: add_classes("input input--wide input--text input--resize-vertical js-toolbar-input js-preview-input", input_classes), placeholder: field_placeholder, required: required?(is_required)
     = error_tag form, field_name
 
-.block__tab.communication-edit__tab.hidden.js-preview-content data-tab="preview"
+.block__tab.block__content.communication__edit-tab.hidden.js-preview-content data-tab="preview"
diff --git a/lib/philomena_web/templates/markdown/_toolbar.html.slime b/lib/philomena_web/templates/markdown/_toolbar.html.slime
index df4e7cf7..6a40884b 100644
--- a/lib/philomena_web/templates/markdown/_toolbar.html.slime
+++ b/lib/philomena_web/templates/markdown/_toolbar.html.slime
@@ -1,4 +1,4 @@
-.communication__toolbar.flex.flex--wrap
+.communication__toolbar
   button.communication__toolbar__button tabindex="-1" type="button" title="bold (ctrl+b)" data-syntax-id="bold"
     strong
       | B
@@ -23,14 +23,15 @@
   button.communication__toolbar__button tabindex="-1" type="button" title="subscript" data-syntax-id="subscript"
     sub
       | sub
-  .separator--vertical.separator--secondary
   button.communication__toolbar__button tabindex="-1" type="button" title="insert blockquote" data-syntax-id="quote"
     i.fa.fa-quote-right
   button.communication__toolbar__button tabindex="-1" type="button" title="insert hyperlink (ctrl+l)" data-syntax-id="link"
     i.fa.fa-link
   button.communication__toolbar__button tabindex="-1" type="button" title="insert image (ctrl+k)" data-syntax-id="image"
     i.fa.fa-image
-  .separator--vertical.separator--secondary
   button.communication__toolbar__button tabindex="-1" type="button" title="Text you want the parser to ignore" data-syntax-id="escape"
     span
       | escape
+  .flex__spacer
+  a.communication__toolbar__button href="/pages/markdown"
+    i.fa.fa-question-circle
diff --git a/lib/philomena_web/templates/message/_message.html.slime b/lib/philomena_web/templates/message/_message.html.slime
index 09864ccf..1b67d866 100644
--- a/lib/philomena_web/templates/message/_message.html.slime
+++ b/lib/philomena_web/templates/message/_message.html.slime
@@ -14,10 +14,4 @@ article.block.communication
                   ' Approve
 
   .block__content.flex.flex--no-wrap
-    = render PhilomenaWeb.CommunicationView, "_body.html", object: %{user: @message.from}, noanon: true, body: @body, conn: @conn, name: "message"
-
-  .block__content.communication__options
-    .flex.flex--wrap.flex--spaced-out
-      div
-        ' Posted
-        = pretty_time(@message.created_at)
+    = render PhilomenaWeb.CommunicationView, "_body.html", object: %{user: @message.from, created_at: @message.created_at}, noanon: true, body: @body, conn: @conn, name: "message"
diff --git a/lib/philomena_web/templates/profile/description/edit.html.slime b/lib/philomena_web/templates/profile/description/edit.html.slime
index 5174098c..de0375fa 100644
--- a/lib/philomena_web/templates/profile/description/edit.html.slime
+++ b/lib/philomena_web/templates/profile/description/edit.html.slime
@@ -17,5 +17,5 @@ h1 Updating Profile Description
     div
       = render PhilomenaWeb.MarkdownView, "_input.html", conn: @conn, f: f, action_text: "About Me", placeholder: "Description (up to 10000 characters)", name: :description, required: false
 
-    .block.communication-edit__actions
+    .block.communication__edit-actions
       => submit "Update", class: "button button--important button--success"
diff --git a/lib/philomena_web/templates/profile/scratchpad/edit.html.slime b/lib/philomena_web/templates/profile/scratchpad/edit.html.slime
index fd1fea17..a87045ad 100644
--- a/lib/philomena_web/templates/profile/scratchpad/edit.html.slime
+++ b/lib/philomena_web/templates/profile/scratchpad/edit.html.slime
@@ -8,5 +8,5 @@ h1 Updating Moderation Scratchpad
     div
       = render PhilomenaWeb.MarkdownView, "_input.html", conn: @conn, f: f, action_text: "Scratchpad", placeholder: "Scratchpad Contents", name: :scratchpad, required: false
 
-    .block.communication-edit__actions
+    .block.communication__edit-actions
       => submit "Update", class: "button button--important button--success"
diff --git a/lib/philomena_web/templates/topic/new.html.slime b/lib/philomena_web/templates/topic/new.html.slime
index 05236f7a..314d1a83 100644
--- a/lib/philomena_web/templates/topic/new.html.slime
+++ b/lib/philomena_web/templates/topic/new.html.slime
@@ -14,7 +14,7 @@
     = inputs_for f, :posts, fn fp ->
         = render PhilomenaWeb.MarkdownView, "_input.html", conn: @conn, f: fp, action_icon: "pencil-alt", action_text: "First Post", placeholder: "Please read the site rules before posting and use ||spoilers|| for NSFW stuff in SFW forums."
 
-    .block__content.communication-edit__wrap
+    .block__content.communication__edit-wrap
       = render PhilomenaWeb.MarkdownView, "_anon_checkbox.html", conn: @conn, f: f, label: "Post anonymously"
 
       = inputs_for f, :poll, fn fp ->
@@ -24,5 +24,5 @@
           .toggle-box-container
             = render PhilomenaWeb.Topic.PollView, "_form.html", Map.put(assigns, :f, fp)
 
-    .block__content.communication-edit__actions
+    .block__content.communication__edit-actions
       = submit "Post", class: "button", data: [disable_with: raw("Posting&hellip;")]
diff --git a/lib/philomena_web/templates/topic/post/_form.html.slime b/lib/philomena_web/templates/topic/post/_form.html.slime
index dcb15f40..b87e56c6 100644
--- a/lib/philomena_web/templates/topic/post/_form.html.slime
+++ b/lib/philomena_web/templates/topic/post/_form.html.slime
@@ -7,7 +7,7 @@
     div
       = render PhilomenaWeb.MarkdownView, "_input.html", conn: @conn, f: f, placeholder: "Please read the site rules before posting and use ||spoilers|| for NSFW stuff in SFW forums."
 
-    .block__content.communication-edit__actions
+    .block__content.communication__edit-actions
       => submit "Post", class: "button", data: [disable_with: raw("Posting&hellip;")]
 
       = render PhilomenaWeb.MarkdownView, "_anon_checkbox.html", conn: @conn, f: f
diff --git a/lib/philomena_web/templates/topic/post/edit.html.slime b/lib/philomena_web/templates/topic/post/edit.html.slime
index b7544121..cf387e7b 100644
--- a/lib/philomena_web/templates/topic/post/edit.html.slime
+++ b/lib/philomena_web/templates/topic/post/edit.html.slime
@@ -4,7 +4,7 @@
       p Oops, something went wrong! Please check the errors below.
 
   .block
-    .communication-edit__wrap
+    .communication__edit-wrap
       .field
         = render PhilomenaWeb.MarkdownView, "_input.html", conn: @conn, f: f, placeholder: "Please read the site rules before posting and use ||spoilers|| for NSFW stuff in SFW forums."
 
@@ -12,5 +12,5 @@
         = text_input f, :edit_reason, class: "input input--wide", placeholder: "Reason for edit"
         = error_tag f, :edit_reason
 
-    .block__content.communication-edit__actions
+    .block__content.communication__edit-actions
       => submit "Edit", class: "button", data: [disable_with: raw("Posting&hellip;")]
diff --git a/lib/philomena_web/views/app_view.ex b/lib/philomena_web/views/app_view.ex
index eadfa406..d6f3a7d8 100644
--- a/lib/philomena_web/views/app_view.ex
+++ b/lib/philomena_web/views/app_view.ex
@@ -258,4 +258,9 @@ defmodule PhilomenaWeb.AppView do
   def get_flash(_, _key), do: %{}
 
   def site_name, do: gettext("Philomena Site")
+
+  def shorten_number(n) when n >= 1_000_000_000, do: "#{Float.floor(n / 1_000_000_000, 1)}B"
+  def shorten_number(n) when n >= 1_000_000, do: "#{Float.floor(n / 1_000_000, 1)}M"
+  def shorten_number(n) when n >= 1_000, do: "#{Float.floor(n / 1_000, 1)}K"
+  def shorten_number(n), do: n
 end
diff --git a/priv/repo/seeds/pages/rules.md b/priv/repo/seeds/pages/rules.md
index e69de29b..4f2e970e 100644
--- a/priv/repo/seeds/pages/rules.md
+++ b/priv/repo/seeds/pages/rules.md
@@ -0,0 +1 @@
+PLACEHOLDER