diff --git a/app/javascript/src/styles/base.scss b/app/javascript/src/styles/base.scss
index 6ec5cfc2f..227cdab7f 100644
--- a/app/javascript/src/styles/base.scss
+++ b/app/javascript/src/styles/base.scss
@@ -42,6 +42,8 @@
 @import "common/user_styles.scss";
 @import "common/voting.scss";
 
+@import "views/posts/posts";
+
 @import "specific/admin_dashboards.scss";
 @import "specific/api_keys.scss";
 @import "specific/artists.scss";
@@ -68,8 +70,6 @@
 @import "specific/popular.scss";
 @import "specific/post_delete.scss";
 @import "specific/post_flags.scss";
-@import "specific/post_index.scss";
-@import "specific/post_mode_menu.scss";
 @import "specific/posts.scss";
 @import "specific/post_replacements.scss";
 @import "specific/post_versions.scss";
diff --git a/app/javascript/src/styles/base/_themable.scss b/app/javascript/src/styles/base/_themable.scss
index 2c7dee3aa..4634774d1 100644
--- a/app/javascript/src/styles/base/_themable.scss
+++ b/app/javascript/src/styles/base/_themable.scss
@@ -19,3 +19,15 @@
 @function themed($key) {
   @return var(--#{$key});
 }
+
+@mixin with-theme($key, $value) {
+  body[data-th-#{$key}="#{$value}"] {
+    @content;
+  }
+}
+
+@mixin with-setting($key, $value) {
+  body[data-st-#{$key}="#{$value}"] {
+    @content;
+  }
+}
diff --git a/app/javascript/src/styles/specific/post_index.scss b/app/javascript/src/styles/specific/post_index.scss
deleted file mode 100644
index 751a66ef5..000000000
--- a/app/javascript/src/styles/specific/post_index.scss
+++ /dev/null
@@ -1,287 +0,0 @@
-body.c-posts.a-index, body.c-favorites.a-index {
-  #page {
-    // Override the theme to instead
-    // project it upon the content area
-    background: none;
-    padding: 0;
-  }
-
-  // Exhibit A
-  // Makes the content area take up the
-  // full height of the page. Yes, really.
-  #page, #c-posts, #c-favorites, #a-index {
-    // I hate both this and myself
-    display: flex;
-    flex-flow: column;
-    flex: 1;
-  }
-}
-
-.post-index {
-  display: grid;
-
-  grid-template-areas:
-    "search " 
-    "content" 
-    "sidebar";
-  grid-template-columns: 1fr;
-  grid-template-rows: min-content 1fr min-content;
-
-  flex: 1; // See Exhibit A
-
-  // 1. Searchbox
-  .search {
-    grid-area: search;
-
-    padding: 0.5rem 0.25rem;
-    background-color: #152f56;
-    background-color: themed("color-foreground");
-    box-shadow: inset 0px -0.25rem 0.25rem -0.25rem themed("color-background");
-
-    h1 {
-      font-size: $h3-size;
-    }
-
-    .search-controls {
-      display: none;
-      flex-flow: column;
-    }
-  }
-
-  // 2. Content
-  .content {
-    display: flex; // See Exhibit A
-    flex-flow: column;
-
-    grid-area: content;
-
-    // Imported from #page
-    padding: 0.5rem 0.25rem themed("content-padding-bottom");
-    background-color: #152f56;
-    background-color: themed("color-foreground");
-    background-image: themed("image-foreground");
-    background-position: themed("image-foreground-position");
-    background-repeat: themed("image-foreground-repeat");
-
-    // Quick tag edit
-    #edit-dialog textarea {
-      margin-bottom: 0.25rem;
-    }
-
-    // Actual content area:
-    // posts and pagination
-    .post-index-gallery {
-      display: flex;
-      flex-flow: column;
-      gap: 1rem;
-
-      flex: 1; // See Exhibit A
-
-      .posts-container {
-        flex: 1; // See Exhibit A
-        grid-auto-rows: min-content;
-      }
-    }
-  }
-
-  // 3. Sidebar
-  .sidebar {
-    grid-area: sidebar;
-
-    display: flex;
-    flex-flow: column;
-    gap: 1em;
-
-    padding: 0.5rem 0.25rem;
-    background-color: #152f56;
-    background-color: themed("color-foreground");
-    box-shadow: inset 0px 0.25rem 0.25rem -0.25rem themed("color-background");
-
-    // Mode selection
-    #mode-box-mode, #mode-box #set-id {
-      width: 100%;
-
-      // Match the searchbox
-      padding: 0.5em;
-      font-family: Verdana, sans-serif;
-      font-size: 1.05em;
-    }
-  }
-}
-
-
-// Desktop
-.post-index {
-  @include window-larger-than(50rem) {
-    grid-template-areas:
-      "search  content" 
-      "sidebar content";
-    grid-template-columns: 14rem 1fr;
-    grid-template-rows: min-content 1fr;
-
-    .search {
-      box-shadow: inset -0.25rem 0px 0.25rem -0.25rem themed("color-background");
-      margin-top: 0.25rem;
-      border-top-left-radius: 0.25rem;
-      padding: 0.5rem;
-
-      .search-controls {
-        display: flex;
-        margin-top: 0.5rem;
-      }
-    }
-
-    .sidebar {
-      box-shadow: inset -0.25rem 0px 0.25rem -0.25rem themed("color-background");
-      margin-bottom: 0.25rem;
-      border-bottom-left-radius: 0.25rem;
-      padding: 0.5rem
-    }
-
-    .content {
-      border-radius: 0.25rem;
-    }
-  }
-}
-
-
-// Fullscreen
-body.c-posts.a-index[data-st-fullscreen="true"] {
-  // Desktop-only, for obvious reasons
-  @include window-larger-than(50rem) {
-    .post-index {
-      grid-template-areas:
-        "search " 
-        "content";
-      grid-template-columns: 1fr;
-
-      .search {
-        display: flex;
-
-        border-radius: 0.25rem 0.25rem 0 0;
-        box-shadow: inset 0px -0.25rem 0.25rem -0.25rem themed("color-background");
-
-        .post-search {
-          flex: 1;
-        }
-
-        .search-controls {
-          display: flex;
-          justify-content: right;
-          align-self: end;
-          margin: 0 0 0 0.5rem;
-
-          .st-button.w100 {
-            width: unset;
-            span { display: none; }
-          }
-        }
-      }
-      .sidebar { display: none; }
-      .content {
-        border-radius: 0 0 0.25rem 0.25rem;
-      }
-    }
-  }
-}
-
-
-// FEATURES
-// Wiki Excerpt
-.wiki-excerpt {
-  display: flex;
-  flex-flow: column;
-  position: relative;
-
-  background: themed("color-section");
-  border-radius: 0.25rem;
-
-  &.hidden { display: none; }
-
-  // header
-  h3 {
-    display: flex;
-    align-items: center;
-
-    font-size: 1rem;
-    padding: 0.5rem;
-
-    cursor: pointer;
-
-    & > svg {
-      transition: transform 0.25s;
-
-      height: 1.5rem;
-      width: 1.5rem;
-    }
-
-    .wiki-excerpt-dismiss { margin-left: auto; }
-  }
-
-  // body
-  .styled-dtext {
-    background: linear-gradient(to top, themed("color-section"), themed("color-text"));
-    -webkit-background-clip: text;
-    background-clip: text;
-    color: transparent;
-
-    min-height: 0rem;
-    max-height: 0rem;
-    max-width: 50rem;
-    overflow: hidden;
-    padding: 0 0.5rem;
-
-    transition: max-height 0.25s;
-
-    // Disable links
-    pointer-events: none;
-    cursor: unset;
-
-    a {
-      color: unset;
-      text-decoration: underline;
-      &::after { content: none; }
-    }
-
-    p:last-child { margin-bottom: 0; }
-  }
-
-  // wiki link
-  .wiki-excerpt-readmore {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-
-    height: 3rem;
-    max-width: 50rem;
-    box-sizing: border-box;
-
-    // Makes the button appear in the middle of the animation
-    transition: visibility 0s 0.125s;
-    visibility: hidden;
-
-    span {
-      padding: 0.5rem 1rem;
-      background: themed("color-section");
-      border-radius: 0.25rem;
-    }
-  }
-
-  &.open{
-    .wiki-excerpt-toggle svg { transform: rotate(90deg); }
-    .styled-dtext {
-      max-height: 10rem;
-      min-height: 2rem;
-    }
-    .wiki-excerpt-readmore { visibility: visible; }
-  }
-
-  &.loading {
-    h3::after, .styled-dtext { transition: none; }
-  }
-}
diff --git a/app/javascript/src/styles/views/posts/_posts.scss b/app/javascript/src/styles/views/posts/_posts.scss
new file mode 100644
index 000000000..833ab2586
--- /dev/null
+++ b/app/javascript/src/styles/views/posts/_posts.scss
@@ -0,0 +1,15 @@
+// Main themes
+@import "index/index";
+@include window-larger-than(50rem) {
+  @import "index/index.desktop";
+}
+
+// Features
+@import "index/partials/mode_menu";
+@import "index/partials/wiki_excerpt";
+
+@include window-larger-than(50rem) {
+  @include with-setting("fullscreen", "true") {
+    @import "index/partials/fullscreen";
+  }
+}
diff --git a/app/javascript/src/styles/views/posts/index/_index.desktop.scss b/app/javascript/src/styles/views/posts/index/_index.desktop.scss
new file mode 100644
index 000000000..ccb999563
--- /dev/null
+++ b/app/javascript/src/styles/views/posts/index/_index.desktop.scss
@@ -0,0 +1,32 @@
+// Desktop-only
+// Rollout at 50rem
+.post-index {
+  grid-template-areas:
+    "search  content" 
+    "sidebar content";
+  grid-template-columns: 14rem 1fr;
+  grid-template-rows: min-content 1fr;
+
+  .search {
+    box-shadow: inset -0.25rem 0px 0.25rem -0.25rem themed("color-background");
+    margin-top: 0.25rem;
+    border-top-left-radius: 0.25rem;
+    padding: 0.5rem;
+
+    .search-controls {
+      display: flex;
+      margin-top: 0.5rem;
+    }
+  }
+
+  .sidebar {
+    box-shadow: inset -0.25rem 0px 0.25rem -0.25rem themed("color-background");
+    margin-bottom: 0.25rem;
+    border-bottom-left-radius: 0.25rem;
+    padding: 0.5rem
+  }
+
+  .content {
+    border-radius: 0.25rem;
+  }
+}
diff --git a/app/javascript/src/styles/views/posts/index/_index.scss b/app/javascript/src/styles/views/posts/index/_index.scss
new file mode 100644
index 000000000..0d75e5c0e
--- /dev/null
+++ b/app/javascript/src/styles/views/posts/index/_index.scss
@@ -0,0 +1,112 @@
+body.c-posts.a-index, body.c-favorites.a-index {
+  #page {
+    // Override the theme to instead
+    // project it upon the content area
+    background: none;
+    padding: 0;
+  }
+
+  // Exhibit A
+  // Makes the content area take up the
+  // full height of the page. Yes, really.
+  #page, #c-posts, #c-favorites, #a-index {
+    // I hate both this and myself
+    display: flex;
+    flex-flow: column;
+    flex: 1;
+  }
+}
+
+
+// Post gallery
+.post-index {
+  display: grid;
+
+  grid-template-areas:
+    "search " 
+    "content" 
+    "sidebar";
+  grid-template-columns: 1fr;
+  grid-template-rows: min-content 1fr min-content;
+
+  flex: 1; // See Exhibit A
+
+  // 1. Searchbox
+  .search {
+    grid-area: search;
+
+    padding: 0.5rem 0.25rem;
+    background-color: #152f56;
+    background-color: themed("color-foreground");
+    box-shadow: inset 0px -0.25rem 0.25rem -0.25rem themed("color-background");
+
+    h1 {
+      font-size: $h3-size;
+    }
+
+    .search-controls {
+      display: none;
+      flex-flow: column;
+    }
+  }
+
+  // 2. Content
+  .content {
+    display: flex; // See Exhibit A
+    flex-flow: column;
+
+    grid-area: content;
+
+    // Imported from #page
+    padding: 0.5rem 0.25rem themed("content-padding-bottom");
+    background-color: #152f56;
+    background-color: themed("color-foreground");
+    background-image: themed("image-foreground");
+    background-position: themed("image-foreground-position");
+    background-repeat: themed("image-foreground-repeat");
+
+    // Quick tag edit
+    #edit-dialog textarea {
+      margin-bottom: 0.25rem;
+    }
+
+    // Actual content area:
+    // posts and pagination
+    .post-index-gallery {
+      display: flex;
+      flex-flow: column;
+      gap: 1rem;
+
+      flex: 1; // See Exhibit A
+
+      .posts-container {
+        flex: 1; // See Exhibit A
+        grid-auto-rows: min-content;
+      }
+    }
+  }
+
+  // 3. Sidebar
+  .sidebar {
+    grid-area: sidebar;
+
+    display: flex;
+    flex-flow: column;
+    gap: 1em;
+
+    padding: 0.5rem 0.25rem;
+    background-color: #152f56;
+    background-color: themed("color-foreground");
+    box-shadow: inset 0px 0.25rem 0.25rem -0.25rem themed("color-background");
+
+    // Mode selection
+    #mode-box-mode, #mode-box #set-id {
+      width: 100%;
+
+      // Match the searchbox
+      padding: 0.5em;
+      font-family: Verdana, sans-serif;
+      font-size: 1.05em;
+    }
+  }
+}
diff --git a/app/javascript/src/styles/views/posts/index/partials/_fullscreen.scss b/app/javascript/src/styles/views/posts/index/partials/_fullscreen.scss
new file mode 100644
index 000000000..6730b7019
--- /dev/null
+++ b/app/javascript/src/styles/views/posts/index/partials/_fullscreen.scss
@@ -0,0 +1,31 @@
+// Fullscreen mode
+// Only relevant on desktop
+.post-index {
+  grid-template-areas:
+    "search " 
+    "content";
+  grid-template-columns: 1fr;
+
+  .search {
+    display: flex;
+    border-radius: 0.25rem 0.25rem 0 0;
+    box-shadow: inset 0px -0.25rem 0.25rem -0.25rem themed("color-background");
+    .post-search {
+      flex: 1;
+    }
+    .search-controls {
+      display: flex;
+      justify-content: right;
+      align-self: end;
+      margin: 0 0 0 0.5rem;
+      .st-button.w100 {
+        width: unset;
+        span { display: none; }
+      }
+    }
+  }
+  .sidebar { display: none; }
+  .content {
+    border-radius: 0 0 0.25rem 0.25rem;
+  }
+}
diff --git a/app/javascript/src/styles/specific/post_mode_menu.scss b/app/javascript/src/styles/views/posts/index/partials/_mode_menu.scss
similarity index 99%
rename from app/javascript/src/styles/specific/post_mode_menu.scss
rename to app/javascript/src/styles/views/posts/index/partials/_mode_menu.scss
index 467f43954..2bf3f62b8 100644
--- a/app/javascript/src/styles/specific/post_mode_menu.scss
+++ b/app/javascript/src/styles/views/posts/index/partials/_mode_menu.scss
@@ -32,4 +32,4 @@ $modes: (
 
   input { flex: 1; }
   button { padding: 0 0.25em; }
-}
\ No newline at end of file
+}
diff --git a/app/javascript/src/styles/views/posts/index/partials/_wiki_excerpt.scss b/app/javascript/src/styles/views/posts/index/partials/_wiki_excerpt.scss
new file mode 100644
index 000000000..4160e55a6
--- /dev/null
+++ b/app/javascript/src/styles/views/posts/index/partials/_wiki_excerpt.scss
@@ -0,0 +1,97 @@
+.wiki-excerpt {
+  display: flex;
+  flex-flow: column;
+  position: relative;
+
+  background: themed("color-section");
+  border-radius: 0.25rem;
+
+  &.hidden { display: none; }
+
+  // header
+  h3 {
+    display: flex;
+    align-items: center;
+
+    font-size: 1rem;
+    padding: 0.5rem;
+
+    cursor: pointer;
+
+    & > svg {
+      transition: transform 0.25s;
+
+      height: 1.5rem;
+      width: 1.5rem;
+    }
+
+    .wiki-excerpt-dismiss { margin-left: auto; }
+  }
+
+  // body
+  .styled-dtext {
+    background: linear-gradient(to top, themed("color-section"), themed("color-text"));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+
+    min-height: 0rem;
+    max-height: 0rem;
+    max-width: 50rem;
+    overflow: hidden;
+    padding: 0 0.5rem;
+
+    transition: max-height 0.25s;
+
+    // Disable links
+    pointer-events: none;
+    cursor: unset;
+
+    a {
+      color: unset;
+      text-decoration: underline;
+      &::after { content: none; }
+    }
+
+    p:last-child { margin-bottom: 0; }
+  }
+
+  // wiki link
+  .wiki-excerpt-readmore {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    height: 3rem;
+    max-width: 50rem;
+    box-sizing: border-box;
+
+    // Makes the button appear in the middle of the animation
+    transition: visibility 0s 0.125s;
+    visibility: hidden;
+
+    span {
+      padding: 0.5rem 1rem;
+      background: themed("color-section");
+      border-radius: 0.25rem;
+    }
+  }
+
+  &.open{
+    .wiki-excerpt-toggle svg { transform: rotate(90deg); }
+    .styled-dtext {
+      max-height: 10rem;
+      min-height: 2rem;
+    }
+    .wiki-excerpt-readmore { visibility: visible; }
+  }
+
+  &.loading {
+    h3::after, .styled-dtext { transition: none; }
+  }
+}