Migrate assets to use Webpacker

app/javascript/src/styles/common/000_vars.scss

@@ -0,0 +1,92 @@
+@charset "UTF-8";
+
+$menu_color: #F5F5FF;
+$link_color: hsl(213, 100%, 50%);
+$link_hover_color: lighten($link_color, 25%);
+$link_dark_color: darken($link_color, 25%);
+$highlight_color: lighten($link_color, 45%);
+$h1_size: 2em;
+$h2_size: 1.5em;
+$h3_size: 1.16667em;
+$h4_size: 1em;
+$dtext_h1_size: 2em;
+$dtext_h2_size: 1.8em;
+$dtext_h3_size: 1.6em;
+$dtext_h4_size: 1.4em;
+$dtext_h5_size: 1.2em;
+$dtext_h6_size: 1em;
+$h1_padding: 0.8em 0 0.25em 0;
+$h2_padding: 0.8em 0 0.25em 0;
+$h3_padding: 0.8em 0 0.25em 0;
+$h4_padding: 0.8em 0 0.25em 0;
+$baseline: 1em;
+$basefont: 100%;
+$base_font_family: Verdana, Helvetica, sans-serif;
+$preview_has_children_color: #0F0;
+$preview_has_parent_color: #CC0;
+$preview_deleted_color: #000;
+$preview_pending_color: #00F;
+$preview_flagged_color: #F00;
+$preview_sample_warning_color:  hsl(0,  100%, 90%); // light red
+$preview_quality_warning_color: hsl(50, 100%, 90%); // light yellow
+
+$note_highlight_color: $preview_pending_color;
+
+$error_color: hsl(0, 100%, 95%); // light red
+$success_color: hsl(120, 100%, 95%); // light green
+
+@mixin border-radius($val) {
+  -moz-border-radius: $val;
+  -webkit-border-radius: $val;
+  -ms-border-radius: $val;
+  -o-border-radius: $val;
+  border-radius: $val;
+}
+
+@mixin box-shadow($val) {
+  -moz-box-shadow: $val;
+  -webkit-box-shadow: $val;
+  -ms-box-shadow: $val;
+  -o-box-shadow: $val;
+  box-shadow: $val;
+}
+
+@mixin text-shadow($val) {
+  -moz-text-shadow: $val;
+  -webkit-text-shadow: $val;
+  -ms-text-shadow: $val;
+  -o-text-shadow: $val;
+  text-shadow: $val;
+}
+
+@mixin inline-block {
+  display: -moz-inline-box;
+  -moz-box-orient: vertical;
+  display: inline-block;
+  vertical-align: baseline;
+  zoom: 1;
+  *display: inline;
+  *vertical-align: auto;
+}
+
+@mixin animated-icon {
+  content: "►";
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  color: white; 
+  background-color: rgba(0,0,0,0.5);
+  margin: 2px;
+  text-align: center;
+}
+
+@mixin sound-icon {
+  content: "♪";
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  color: white; 
+  background-color: rgba(0,0,0,0.5);
+  margin: 2px;
+  text-align: center;
+}

app/javascript/src/styles/common/010_reset.scss

@@ -0,0 +1,171 @@
+// Source: https://github.com/FrogBot/sassy_bootstrap/blob/master/lib/_reset.sass
+
+@import "000_vars.scss";
+
+// Reset.sass
+// Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an
+// adapted version here	that cuts out some of the reset HTML elements we will
+// never need here (i.e., dfn, samp, etc).
+
+// ERIC MEYER RESET
+// ----------------
+
+html, body {
+  margin: 0;
+  padding: 0;
+}
+
+h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
+  margin: 0;
+  padding: 0;
+  border: 0;
+/*  font-weight: normal;*/
+/*  font-style: normal;*/
+  font-size: 100%;
+  line-height: 1.25em;
+  font-family: inherit;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+q:before, q:after, blockquote:before, blockquote:after {
+  content: "";
+}
+
+// Normalize.css
+// Pulling in select resets form the normalize.css project
+// --------------------------------------------------
+
+// Display in IE6-9 and FF3
+// -------------------------
+// Source: http://github.com/necolas/normalize.css
+html {
+  overflow-y: scroll;
+  font-size: 100%;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+
+// Focus states
+a:focus {
+  outline: thin dotted;
+}
+
+// Hover & Active
+
+a:hover,
+a:active {
+  outline: 0;
+}
+
+// Display in IE6-9 and FF3
+// -------------------------
+// Source: http://github.com/necolas/normalize.css
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section {
+  display: block;
+}
+
+// Prevents sub and sup affecting line-height in all browsers
+// -------------------------
+// Source: http://github.com/necolas/normalize.css
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+// Img border in a's and image quality
+// -------------------------
+// Source: http://github.com/necolas/normalize.css
+img {
+  border: 0;
+  -ms-interpolation-mode: bicubic;
+}
+
+// Forms
+// -------------------------
+// Source: http://github.com/necolas/normalize.css
+
+// Font size in all browsers, margin changes, misc consistency
+
+button,
+input,
+select,
+textarea {
+  font-size: 100%;
+  margin: 0;
+  vertical-align: middle;
+}
+
+button,
+input {
+  line-height: normal;
+  // FF3/4 have !important on line-height in UA stylesheet
+  *overflow: visible;
+  // Inner spacing ie IE6/7
+}
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  // Inner padding and border oddities in FF3/4
+  border: 0;
+  padding: 0;
+}
+
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+  cursor: pointer;
+  // Cursors on all buttons applied consistently
+  -webkit-appearance: button;
+  // Style clickable inputs in iOS
+}
+
+input[type="search"] {
+  // Appearance in Safari/Chrome
+  -webkit-appearance: textfield;
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+  // Inner-padding issues in Chrome OSX, Safari 5
+}
+
+textarea {
+  overflow: auto;
+  // Remove vertical scrollbar in IE6-9
+  vertical-align: top;
+  // Readability and alignment cross-browser
+}

app/javascript/src/styles/common/020_base.scss

@@ -0,0 +1,136 @@
+@import "000_vars.scss";
+
+body {
+  background-color: #FFF;
+  font-family: $base_font_family;
+  padding: 0;
+  margin: 0;
+  font-size: 87.5%;
+  line-height: 1.25em;
+}
+
+article, section {
+  display: block;
+}
+
+abbr[title=required] {
+  display: none;
+}
+
+blockquote {
+  margin: 0 0 1em 0;
+  padding: 1em 1em 0.2em;
+  border: 1px solid #666;
+  background: #EEE;
+}
+
+code {
+  font-family: monospace;
+  font-size: 1.2em;
+}
+
+dd {
+  margin-bottom: 1em;
+}
+
+dt {
+  font-weight: bold;
+}
+
+em {
+  font-style: italic;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: Tahoma, Verdana, Helvetica, sans-serif;
+  font-weight: bold;
+  line-height: 1.5em;
+}
+
+h1 {
+  font-size: $h1_size;
+}
+
+h2 {
+  font-size: $h2_size;
+}
+
+h3, h4, h5, h6 {
+  font-weight: bold;
+  font-size: $h3_size;
+}
+
+fieldset {
+  margin-bottom: 1em;
+}
+
+header {
+  margin: 0 0 1em 0;
+  padding: 0;
+  display: block;
+}
+
+img {
+  border: none;
+  vertical-align: middle;
+}
+
+img.wait {
+  margin-left: 5px;
+}
+
+legend {
+  font-size: $h2_size;
+  font-weight: bold;
+  margin-bottom: 0.5em;
+}
+
+menu {
+  margin: 0;
+  padding: 0;
+
+  ul {
+    margin: 0;
+    padding: 0;
+  }
+
+  li {
+    margin: 0;
+    padding: 0 0.2em;
+    list-style-type: none;
+    display: inline;
+  }
+}
+
+p {
+  margin-bottom: 1em;
+}
+
+section {
+  display: block;
+}
+
+strong {
+  font-weight: bold;
+}
+
+table tfoot {
+  margin-top: 2em;
+}
+
+.hint {
+  color: #666;
+  font-style: italic;
+  max-width: 70%;
+}
+
+.tn {
+  font-size: 0.8em;
+  color: gray;
+}
+
+p.info {
+  color: #AAA;
+  font-style: italic;
+  font-size: 80%;
+}

app/javascript/src/styles/common/030_links.scss

@@ -0,0 +1,38 @@
+@import "000_vars.scss";
+
+a:link {
+  color: $link_color;
+  text-decoration: none;
+}
+
+a:visited {
+  color: $link_color;
+  text-decoration: none;
+}
+
+a:hover {
+  color: $link_hover_color;
+  text-decoration: none;
+}
+
+a:active {
+  color: $link_color;
+  text-decoration: none;
+}
+
+a.active {
+  font-weight: bold;
+}
+
+a.login {
+  font-weight: bold;
+  color: #e00;
+}
+
+a.forum-updated {
+  font-style: italic;
+}
+
+a.wiki-link {
+  margin-right: 0.3em;
+}

app/javascript/src/styles/common/autocomplete.scss

@@ -0,0 +1,19 @@
+.ui-autocomplete {
+  font-size: 0.9em;
+
+  .ui-state-active {
+    border: none;
+    margin: 0 -1px;
+    background-color: #F0F0F0;
+    border-left: 1px solid #C5C5C5;
+    border-right: 1px solid #C5C5C5;
+  }
+
+  .ui-menu-item a {
+    padding: 1px .2em;
+  }
+
+  .autocomplete-arrow {
+    color: black;
+  }
+}

app/javascript/src/styles/common/diffs.scss

@@ -0,0 +1,21 @@
+.diff-list {
+  ins, ins a {
+    color: green;
+    text-decoration: none;
+    margin-right: 0.5em;
+  }
+
+  ins.obsolete, ins.obsolete a {
+    color: darkGreen;
+  }
+
+  del, del a {
+    color: red;
+    text-decoration: line-through;
+    margin-right: 0.5em;
+  }
+
+  del.obsolete, del.obsolete a {
+    color: darkRed;
+  }
+}

app/javascript/src/styles/common/dtext.scss

@@ -0,0 +1,95 @@
+@import "000_vars.scss";
+
+div.prose {
+  line-height: 1.4em;
+
+  h1, h2, h3 {
+    line-height: 1em;
+  }
+
+  h1 {
+    font-size: $dtext_h1_size;
+    padding: $h1_padding;
+  }
+
+  h2 {
+    font-size: $dtext_h2_size;
+    padding: $h2_padding;
+  }
+
+  h3 {
+    font-size: $dtext_h3_size;
+    padding: $h3_padding;
+  }
+
+  h4 {
+    font-size: $dtext_h4_size;
+    padding: $h4_padding;
+  }
+
+  h5 {
+    font-size: $dtext_h5_size;
+    padding: $h4_padding;
+  }
+
+  h6 {
+    font-size: $dtext_h6_size;
+    padding: $h4_padding;
+  }
+
+  ul {
+    margin-left: 1em;
+    margin-bottom: 1em;
+
+    ul {
+      margin-bottom: 0;
+    }
+  }
+
+  li {
+    list-style-type: disc;
+  }
+  
+  pre {
+    font-family: monospace;
+    font-size: 1.2em;
+    margin: 0.5em 0;
+    padding: 0.5em 1em;
+    background: #EEE;
+    white-space: pre-wrap;
+  }
+
+  code {
+    font-family: monospace;
+    background: #EEE;
+  }
+
+  div.expandable {
+    margin-bottom: 1em;
+    border: 1px inset #666;
+  }
+
+  div.expandable-header {
+    padding: 0.4em;
+
+    span {
+      margin-right: 0.5em;
+      font-weight: bold;
+    }
+  }
+
+  div.expandable-content {
+    padding: 0.4em;
+    border-top: 1px solid #666;
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+div.dtext-preview {
+  ul {
+    margin-left: 1em;
+  }
+}

app/javascript/src/styles/common/inline.scss

@@ -0,0 +1,43 @@
+@import "000_vars.scss";
+
+span.error {
+  display: block;
+  font-weight: bold;
+  color: red;
+}
+
+span.link {
+  color: $link_color;
+  cursor: pointer;
+}
+
+span.wait {
+  color: #CCC;
+}
+
+span.count {
+  color: #CCC;
+  margin-left: 0.5em;
+}
+
+span.edit-options {
+}
+
+kbd.key {
+  background: #333;
+  border: 1px solid #333;
+  padding: 1px 6px;
+  color: white;
+/*  width: 1em;*/
+  text-align: center;
+  @include inline-block;
+  @include border-radius(3px);
+}
+
+span.inactive {
+  color: #AAA;
+}
+
+td a.last-page {
+  color: #666;
+}

app/javascript/src/styles/common/jquery_ui_custom.scss

@@ -0,0 +1,66 @@
+@import "./000_vars.scss";
+
+.ui-widget {
+  font-family: $base_font_family;
+
+  input, select, textarea, button {
+    font-family: $base_font_family;
+  }
+}
+
+div.ui-dialog {
+  height: auto! important;
+  overflow: visible;
+  font-size: 1em;
+  z-index: 999 !important;
+  box-shadow: 2px 2px 1px grey;
+
+  ul {
+    margin-left: 1em;
+    margin-bottom: 1em;
+  }
+}
+
+.ui-state-highlight {
+  border: 1px solid #FCEEC1;
+  background: #FDF5D9;
+  color: #363636;
+}
+
+.ui-state-error {
+  border: 1px solid #FBC7C6;
+  background: #FDDFDE;
+}
+
+.ui-button {
+  margin: 0;
+  padding: 0.25em 1em;
+  background-color: #f6f6f6;
+  border: 1px solid #c5c5c5;
+
+  &.sub {
+    font-size: 90%;
+  }
+
+  &.tiny {
+    font-size: 90%;
+    padding: 0.25em 0.5em;
+  }
+
+  &.gradient {
+    background: linear-gradient(#f6f6f6, #e5e5e5);
+  }
+}
+
+.ui-button:hover {
+  box-shadow: 1px 1px grey;
+  transform: translateY(-1px);
+
+  &.gradient {
+    background: linear-gradient(#fefefe, #f0f0f0);
+  }
+}
+
+.ui-front {
+  z-index: 1000;
+}

app/javascript/src/styles/common/main_layout.scss

@@ -0,0 +1,114 @@
+@import "000_vars.scss";
+
+div#search {
+  margin-bottom: 1em;
+}
+
+div#search-box button {
+  -webkit-appearance: button;
+  border: 1px solid $link_color;
+  background-color: $link_color;
+  color: #FFF;
+  &:hover, &:focus {
+    border: 1px solid $link_hover_color;
+    background-color: $link_hover_color;
+  }
+}
+
+div#page {
+  overflow: visible;
+  margin: 0 20px;
+  padding: 0 10px;
+
+  div#upgrade-account-notice, div#sign-up-notice, div#tos-notice, div#ban-notice, div#dmail-notice, div#mod-notice {
+    margin: 1em 0;
+    padding: 1em;
+    text-align: center;
+    position: relative;
+
+    h1 {
+      font-size: $h2_size;
+      font-weight: bold;
+    }
+
+    p {
+      margin: 0;
+    }
+  }
+
+  aside#sidebar {
+    width: 15em;
+    float: left;
+
+    h1 {
+      font-size: $h3_size;
+    }
+
+    ul {
+      list-style-type: none;
+    }
+
+    input[type=text] {
+      /* ensure expanded search box renders above post thumbnails. */
+      z-index: 1;
+      position: relative;
+    }
+
+    button[type=submit] {
+      padding: 2px 6px;
+      background: #EEE;
+      border-left: none;
+    }
+  }
+
+  aside#sidebar > section {
+    margin-bottom: 1em;
+  }
+
+  aside#sidebar > section#blacklist-box ul {
+    margin-left: 1em;
+
+    li {
+      list-style-type: disc;
+    }
+
+    a {
+      color: $link_color;
+      cursor: pointer;
+    }
+
+    span {
+      color: #AAA;
+    }
+  }
+
+  section#content {
+    overflow: visible;
+    margin-left: 15em;
+    padding-left: 1em;
+  }
+}
+
+footer#page-footer {
+  clear: both;
+  width: 100%;
+  margin-top: 1em;
+  text-align: center;
+  padding: 1em 0 1em;
+  border-top: 1px solid #EEE;
+}
+
+div.clearfix {
+  clear: both;
+}
+
+div#more-links {
+  z-index: 5000;
+  position: absolute;
+  background: white;
+  border: 1px solid #999;
+  width: 8em;
+  line-height: 1.3em;
+  padding: 0.2em 0.6em;
+  @include box-shadow(2px 2px 2px #ccc);
+}

app/javascript/src/styles/common/news.scss

@@ -0,0 +1,24 @@
+div#news-updates {
+  padding: 5px;
+  background: #EEE;
+  border-bottom: 2px solid #666;
+  overflow: hidden;
+  font-size: 0.8em;
+
+  ul {
+    float: left;
+    margin: 0;
+    padding: 0;
+  }
+
+  li {
+    list-style-type: none;
+    float: left;
+    margin: 0 2em 0 0;
+    padding: 0;
+  }
+
+  a#close-news-ticker-link {
+    float: right;
+  }
+}

app/javascript/src/styles/common/notices.scss

@@ -0,0 +1,28 @@
+div.error-messages {
+  margin: 1em 0;
+  padding: 1em;
+
+  h1 {
+    font-size: 1em;
+    color: #A00;
+  }
+}
+
+div#notice {
+  padding: 0.25em;
+  position: fixed;
+  top: 0.5em;
+  left: 25%;
+  width: 50%;
+  z-index: 100;
+
+  &:not(.ui-state-error) {
+    background-color: #FFFBBF;
+    border: 1px solid #CCC999;
+  }
+}
+
+a#close-notice-link {
+  position: absolute;
+  right: 1em;
+}

app/javascript/src/styles/common/page_header.scss

@@ -0,0 +1,45 @@
+@import "000_vars.scss";
+
+#maintoggle {
+  display: none;
+}
+
+header#top {
+  h1 {
+    font-size: 2.5em;
+    margin: 5px 30px 0 30px;
+  }
+
+  menu {
+    margin-top: -2px;
+    background: $menu_color;
+    padding: 6px 20px;
+
+    form {
+      display: inline-block;
+
+      input {
+        width: 9.5em;
+      }
+    }
+
+    li {
+      margin: 0;
+      padding: 0;
+    }
+
+    li a {
+      padding: 6px 10px;
+    }
+  }
+
+  menu.main {
+    margin-top: 0;
+    background: none;
+
+    li.current a {
+      background: $menu_color;
+      font-weight: bold;
+    }
+  }
+}

app/javascript/src/styles/common/paginator.scss

@@ -0,0 +1,35 @@
+@import "000_vars.scss";
+
+div.paginator {
+  display: block;
+  padding: 2em 0 1em 0;
+  text-align: center;
+  clear: both;
+
+  li {
+    a {
+      margin: 0 0.25em;
+      padding: 0.25em 0.75em;
+    }
+
+    &.more {
+      color: grey;
+    }
+
+    a.arrow:hover {
+      background: white;
+      color: $link_color;
+    }
+
+    a:hover {
+      background: $link_color;
+      color: white;
+    }
+
+    span {
+      margin: 0 0.25em;
+      padding: 0.25em 0.75em;
+      font-weight: bold;
+    }
+  }
+}

app/javascript/src/styles/common/simple_form.scss

@@ -0,0 +1,92 @@
+form.simple_form {
+  margin: 0 0 1em 0;
+
+  div.input.boolean {
+    label {
+      display: inline;
+      vertical-align: middle;
+      margin-left: 0.5em;
+
+      input {
+        margin-right: 0.25em;
+      }
+    }
+  }
+
+  div.input {
+    margin-bottom: 1em;
+
+    input[type=text], input[type=file], input[type=password], input[type=email] {
+      max-width: 20em;
+    }
+
+    span.hint {
+      display: block;
+      font-size: 70%;
+    }
+
+    textarea {
+      width: 70%;
+      font-size: 1.2em;
+    }
+
+    label {
+      display: block;
+      font-weight: bold;
+      line-height: 1.5em;
+    }
+
+    fieldset {
+      border: none;
+      display: inline;
+      margin: 0;
+      padding: 0;
+
+      label {
+        font-weight: normal;
+        width: auto;
+        margin-right: 2em;
+        display: inline;
+      }
+    }
+  }
+}
+
+form.inline-form {
+  display: table;
+
+  > div.input {
+    display: table-row;
+    line-height: 2em;
+
+    label {
+      text-align: right;
+    }
+
+    label, input {
+      display: table-cell;
+      padding-right: 1em;
+      white-space: nowrap;
+    }
+  }
+}
+
+form.one-line-form {
+  > input, > div.input {
+    display: inline;
+
+    label {
+      display: inline;
+      margin-right: 1em;
+    }
+  }
+}
+
+div.ui-dialog {
+  div.input {
+    input[type="text"] {
+      width: 100%;
+      max-width: 100%;
+    }
+  }
+}

app/javascript/src/styles/common/spoiler.scss

@@ -0,0 +1,16 @@
+.spoiler {
+  color: black;
+  background: black;
+}
+
+.spoiler a {
+  color: black;
+}
+
+.spoiler:hover {
+  color: white;
+}
+
+.spoiler:hover a{
+  color: white;
+}

app/javascript/src/styles/common/tables.scss

@@ -0,0 +1,85 @@
+@import "000_vars.scss";
+
+table.striped {
+  p {
+    margin: 0;
+  }
+
+  td, th {
+    padding: 4px 6px;
+  }
+
+  tbody {
+    tr {
+      border-bottom: 1px solid #CCC;
+
+      &:hover {
+        background-color: $highlight_color;
+      }
+    }
+  }
+
+  .number, .links {
+    text-align: right;
+  }
+
+  thead {
+    tr {
+      border-bottom: 2px solid #666;
+    }
+
+    th {
+      font-weight: bold;
+      text-align: left;
+      color: #333;
+    }
+  }
+
+  tr.even {
+    background-color: #FAFAFA;
+  }
+}
+
+/*
+ * A table where one column expands to fill the screen, while the
+ * other columns shrink to fit their contents.
+ */
+table.autofit {
+  td, th, .col-fit {
+    white-space: nowrap;
+    padding-right: 2em;
+  }
+
+  .col-expand {
+    white-space: normal;
+    width: 100%;
+  }
+
+  .col-normal {
+    white-space: normal;
+  }
+}
+
+table.search {
+  tr {
+    height: 2em;
+  }
+
+  th {
+    text-align: right;
+    padding-right: 1em;
+    vertical-align: top;
+  }
+
+  td {
+    vertical-align: top;
+  }
+}
+
+table.aligned-vertical {
+  @extend table.search;
+
+  tr {
+    height: 1.75em;
+  }
+}

app/javascript/src/styles/common/tags.scss.erb

@@ -0,0 +1,35 @@
+@import "./000_vars.scss";
+
+<% TagCategory.css_mapping.each do |category,cssmap| %>
+  .category-<%= category %> a, a.tag-type-<%= category %>, .ui-state-active a.tag-type-<%= category %> {
+    color: <%= cssmap["color"] %>;
+
+    &:hover {
+      color: <%= cssmap["hover"] %>;
+    }
+  }
+<% end %>
+
+.category-banned a, a.tag-type-banned, .ui-state-active a.tag-type-banned {
+  color: black;
+  background-color: red;
+}
+
+.inline-tag-list {
+  ul {
+    display: inline;
+
+    li {
+      display: inline;
+      margin-right: 0.5em;
+    }
+  }
+}
+
+.split-inline-tag-list {
+  @extend .inline-tag-list;
+
+  ul {
+    display: block;
+  }
+}

app/javascript/src/styles/common/user_styles.scss

@@ -0,0 +1,27 @@
+a.user-admin.with-style {
+  color: red;
+}
+
+a.user-moderator.with-style {
+  color: orange;
+}
+
+a.user-contributor.with-style {
+  color: purple;
+}
+
+a.user-builder.with-style {
+  color: #6633FF;
+}
+
+a.user-platinum.with-style {
+  color: gray;
+}
+
+a.user-gold.with-style {
+  color: #0000FF;
+}
+
+a.user-member.with-style {
+  color: auto;
+}

app/javascript/src/styles/specific/admin_dashboards.scss

@@ -0,0 +1,5 @@
+#c-admin-dashboards {
+  .section {
+    margin-bottom: 2em;
+  }
+}

app/javascript/src/styles/specific/api_keys.scss

@@ -0,0 +1,11 @@
+@import "../common/020_base.scss";
+
+#c-maintenance-user-api-keys {
+  #api-key {
+    @extend code;
+  }
+
+  .button_to {
+    display: inline-block;
+  }
+}

app/javascript/src/styles/specific/artists.scss

@@ -0,0 +1,46 @@
+@import "../common/000_vars.scss";
+
+div#c-artists, div#excerpt {
+  span.new-artist {
+    font-weight: bold;
+    color: #A00;
+  }
+
+  div#a-banned {
+  }
+
+  ul ul {
+    margin-left: 1em;
+  }
+
+  div#a-show {
+    p.legend {
+      margin-bottom: 2em;
+      font-size: 0.8em;
+      font-style: italic;
+    }
+  }
+
+  div#a-edit, div#a-new {
+    textarea {
+      height: 10em;
+      
+      &#artist_other_names_comma {
+        height: 3em;
+      }
+    }
+
+    .hint {
+      display: block;
+    } 
+  }
+
+  div.recent-posts {
+    margin-top: 1em;
+
+    h1 {
+      font-size: $h2_size;
+      margin: 0;
+    }
+  }
+}

app/javascript/src/styles/specific/bans.scss

@@ -0,0 +1,19 @@
+@import "../common/000_vars.scss";
+
+#c-bans #a-index {
+  tr[data-expired="true"] {
+    background-color: $success_color !important;
+
+    &:hover {
+      background-color: darken($success_color, 5%) !important;
+    }
+  }
+
+  tr[data-expired="false"] {
+    background-color: $error_color !important;
+
+    &:hover {
+      background-color: darken($error_color, 5%) !important;
+    }
+  }
+}

app/javascript/src/styles/specific/bulk_update_requests.scss

@@ -0,0 +1,9 @@
+#c-bulk-update-requests {
+  s.approved {
+    color: green;
+  }
+
+  s.failed {
+    color: red;
+  }
+}

app/javascript/src/styles/specific/comments.scss

@@ -0,0 +1,140 @@
+@import "../common/000_vars.scss";
+
+div.comments-for-post {
+  div.notices {
+    margin: 1em 0;
+  }
+
+  div.list-of-comments {
+    article.comment {
+      margin-bottom: 2em;
+      word-wrap: break-word;
+      padding: 5px;
+
+      &[data-is-sticky="true"] {
+        background: $menu_color;
+      }
+
+      div.author {
+        width: 12em;
+        float: left;
+        overflow: hidden;
+        margin-right: 1em;
+
+        h1 {
+          display: block;
+          font-size: $h3_size;
+        }
+      }
+
+      div.content {
+        margin-left: 13em;
+        min-width: 17em;
+
+        menu {
+          li {
+            margin-right: 1em;
+          }
+        }
+      }
+    }
+
+    article.comment.below-threshold:not([data-is-sticky="true"]) {
+      opacity: 0.3;
+    }
+
+    article.comment.below-threshold:hover {
+      opacity: 1.0;
+    }
+  }
+}
+
+div#c-posts {
+  div.comments-for-post {
+    float: left;
+  }
+}
+
+div#c-comments {
+  div#a-index, div#a-show {
+    div.header {
+      span.info {
+        margin-right: 1.5em;
+      }
+
+      strong, time {
+        margin-right: 0.3em;
+      }
+
+      div.notices {
+        margin: 1em 0;
+      }
+    }
+
+    div.preview {
+      float: left;
+      width: 154px;
+      height: 154px;
+      margin-right: 30px;
+      overflow: hidden;
+      text-align: center;
+    }
+
+    div.post-preview {
+      &[data-tags~=animated], &[data-file-ext=swf], &[data-file-ext=webm], &[data-file-ext=zip], &[data-file-ext=mp4] {
+        div.preview {
+          position: relative;
+
+          &:before {
+            @include animated-icon;
+          }
+        }
+      }
+
+      &[data-has-sound=true] {
+        div.preview {
+          position: relative;
+
+          &:before {
+            @include sound-icon;
+          }
+        }
+      }
+    }
+
+    div.post {
+      margin-bottom: 4em;
+
+      div.comments-for-post {
+        margin-left: 184px;
+        min-width: 30em;
+        
+        div.list-of-comments {
+          float: left;
+          width: 100%;
+        }
+      }
+    }
+    
+    div.comments-for-post {
+      div.post {
+        article.comment {
+          margin-left: 184px;
+        }
+      }
+    }
+
+    div.post.blacklisted.blacklisted-active {
+      display: none;
+    }
+  }
+}
+
+form.edit_comment div.input.boolean {
+  display: inline-block;
+
+  label {
+    font-weight: normal;
+    vertical-align: initial;
+  }
+}

app/javascript/src/styles/specific/dmails.scss

@@ -0,0 +1,18 @@
+@import "../common/000_vars.scss";
+
+div#c-dmails {
+  tr.read-false {
+    font-weight: bold;
+  }
+
+  div#preview {
+    margin: 1em 0;
+    border: 1px solid #CCC;
+    padding: 1em;
+    width: 40em;
+
+    h1 {
+      font-size: $h2_size;
+    }
+  }
+}

app/javascript/src/styles/specific/dropzone.scss

@@ -0,0 +1,41 @@
+#filedropzone {
+  border: 4px dashed #DDD;
+  padding: 0;
+  min-height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+
+  .placeholder {
+    font-style: italic;
+    color: #333;
+    height: 100%;
+  }
+
+  &.error {
+    border-color: darken(#f2dede, 30%);
+    background-color: #f2dede;
+  }
+
+  &.success {
+    border-color: darken(#dff0d8, 30%);
+    background-color: #dff0d8;
+  }
+}
+
+.dz-preview {
+  margin-bottom: 1em;
+}
+
+.dz-progress {
+  height: 20px;
+  width: 300px;
+  border: 1px solid #CCC;
+
+  .dz-upload {
+    background-color: #F5F5FF;
+    display: block;
+    height: 20px;
+  }
+}

app/javascript/src/styles/specific/explore.scss

@@ -0,0 +1,27 @@
+@import "../common/000_vars.scss";
+
+div#c-explore-posts {
+  header {
+    text-align: center;
+
+    h1 {
+      font-size: 3em;
+    }
+
+    p.byline {
+      font-size: 1.2em;
+      font-style: italic;
+    }
+  }
+
+  div.posts {
+    padding: 1em;
+    margin-bottom: 2em;
+  }
+
+  div#a-intro {
+    width: 870px;
+    margin: 0 auto;
+    text-align: center;
+  }
+}

app/javascript/src/styles/specific/favorite_groups.scss

@@ -0,0 +1,5 @@
+#c-favorite-groups #a-edit {
+  textarea {
+    height: 10em;
+  }
+}

app/javascript/src/styles/specific/favorites.scss

@@ -0,0 +1,7 @@
+@import "../common/000_vars.scss";
+
+div#c-favorites {
+  section#content > h1 {
+    font-size: $h3_size;
+  }
+}

app/javascript/src/styles/specific/forum.scss

@@ -0,0 +1,98 @@
+div.list-of-forum-posts {
+  article {
+    border: 1px solid #AAA;
+    margin: 1em 0em;
+    word-wrap: break-word;
+    box-shadow: 1px 1px 2px #AAA;
+
+    a.voted {
+      font-weight: bold;
+    }
+    
+    span.desc {
+      color: grey;
+    }
+
+    &:target {
+      background-color: #FFC;
+    }
+
+    .vote-score-up {
+      color: green;
+    }
+
+    .vote-score-meh {
+      color: goldenrod;
+    }
+
+    .vote-score-down {
+      color: red;
+    }
+
+    div.author {
+      padding: 1em 1em 0 1em;
+      width: 12em;
+      float: left;
+
+      time {
+        font-style: italic;
+      }
+    }
+
+    div.content {
+      padding: 1em;
+      margin-left: 14em;
+
+      menu {
+        margin-top: 0.5em;
+
+        ul.votes {
+          margin: 0.5em 0;
+        }
+
+        li {
+          margin-right: 1em;
+        }
+      }
+    }
+  }
+}
+
+div#c-forum-topics {
+  div.single-forum-post {
+  }
+
+  div#a-show {
+  }
+
+  span.info {
+    color: #AAA;
+  }
+
+  span.new {
+    font-size: 80%;
+    color: red;
+    margin-right: 0.5em;
+  }
+
+  span.locked-topic {
+    color: gray;
+  }
+
+  span.level-topic {
+    color: #f66;
+    font-weight: bold;
+  }
+  
+  tr.forum-topic-row td:last-child {
+    white-space: nowrap;
+  }
+}
+
+#c-forum-posts #a-index {
+  tr[data-topic-is-deleted="true"] .forum-post-topic-title::after,
+  tr[data-is-deleted="true"] .forum-post-excerpt::after {
+    content: " (deleted)";
+    color: gray;
+  }
+}

app/javascript/src/styles/specific/iqdb_queries.scss

@@ -0,0 +1,17 @@
+div#c-iqdb-queries {
+  div#a-check {
+    article.post-preview {
+      height: 180px;
+      width: 180px;
+      border: lightgrey solid 1px;
+
+      img {
+        margin-top: 10px;
+      }
+    }
+
+    #filedropzone {
+      margin: 1em 0;
+    }
+  }
+}

app/javascript/src/styles/specific/keyboard_shortcuts.scss

@@ -0,0 +1,21 @@
+@import "../common/000_vars.scss";
+
+div#c-static {
+  div#a-keyboard-shortcuts {
+    overflow: visible;
+
+    section {
+      min-width: 20%;
+      float: left;
+      margin-bottom: 1em;
+
+      h1 {
+        font-size: $h3_size;
+      }
+
+      li {
+        margin-bottom: 0.5em;
+      }
+    }
+  }
+}

app/javascript/src/styles/specific/maintenance.scss

@@ -0,0 +1,5 @@
+div#c-maintenance-user-login-reminders {
+  div#a-new {
+    width: 50em;
+  }
+}

app/javascript/src/styles/specific/meta_searches.scss

@@ -0,0 +1,5 @@
+#c-meta-searches {
+  section {
+    margin-bottom: 2em;
+  }
+}

app/javascript/src/styles/specific/mod_queue.scss.erb

@@ -0,0 +1,60 @@
+@import "../common/000_vars.scss";
+
+div#c-moderator-post-queues {
+  div.post {
+    margin-bottom: 4em;
+    overflow: hidden;
+
+    &.post-pos-score {
+      background: rgb(230, 255, 230);
+    }
+
+    &.post-neg-score {
+      background: rgb(255, 230, 230);
+    }
+
+    aside {
+      float: left;
+      width: 220px;
+      text-align: right;
+      padding-right: 20px;
+    }
+
+    section {
+      float: left;
+      width: 800px;
+    }
+
+    <% Danbooru.config.modqueue_quality_warning_tags.each do |tag| %>
+      &[data-tags~="<%= tag %>"] {
+        background-color: $preview_quality_warning_color;
+      }
+    <% end %>
+
+    <% Danbooru.config.modqueue_sample_warning_tags.each do |tag| %>
+      &[data-tags~="<%= tag %>"] {
+        background-color: $preview_sample_warning_color;
+      }
+    <% end %>
+
+    &[data-tags~=animated], &[data-file-ext=swf], &[data-file-ext=webm], &[data-file-ext=zip], &[data-file-ext=mp4] {
+      aside:before {
+        @include animated-icon;
+      }
+    }
+
+    &[data-has-sound=true] {
+      aside:before {
+        @include sound-icon;
+      }
+    }
+  }
+
+  div#moderation-guideline {
+    width: 900px;
+
+    h1 {
+      font-size: $h2_size;
+    }
+  }
+}

app/javascript/src/styles/specific/moderator_dashboard.scss

@@ -0,0 +1,42 @@
+div#c-moderator-dashboards {
+  div#col1 {
+    width: 45%;
+    float: left;
+    padding-right: 5%;
+  }
+
+  div#col2 {
+    width: 45%;
+    float: left;
+  }
+
+  div.activity {
+    margin-bottom: 1em;
+  }
+
+  div#ip-addr-search {
+    margin-bottom: 2em;
+
+    .hint {
+      display: block;
+    }
+  }
+
+  div#activity-search {
+    margin-bottom: 2em;
+  }
+
+  table {
+    width: 100%;
+  }
+
+  caption {
+    font-size: 1.1em;
+    font-weight: bold;
+    text-align: left;
+  }
+
+  th {
+    text-align: left;
+  }
+}

app/javascript/src/styles/specific/news_updates.scss

@@ -0,0 +1,7 @@
+div#c-news-updates {
+  div#a-edit, div#a-new {
+    .hint {
+      display: block;
+    } 
+  }
+}

app/javascript/src/styles/specific/notes.scss

@@ -0,0 +1,114 @@
+@import "../common/000_vars.scss";
+
+div#note-container {
+  position: absolute;
+  z-index: 50;
+
+  div.note-body {
+    position: absolute;
+    border: 1px solid black;
+    background: #FFE;
+    min-width: 140px;
+    min-height: 1em;
+    line-height: normal;
+    cursor: pointer;
+    padding: 4px;
+    z-index: 150;
+    overflow: auto;
+
+    h1, h2, h3, h4, h5, h6, a, span, div, blockquote, br, p, ul, li, ol, em, strong, small, big, b, i, font, u, s, code, center {
+      line-height: normal;
+    }
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+
+    b, strong {
+      font-weight: bold;
+    }
+
+    i, em {
+      font-style: italic;
+    }
+
+    small {
+      font-size: 0.8em;
+    }
+
+    ruby {
+      rt {
+        font-size: 0.8em;
+      }
+    }
+
+    ul {
+      margin-left: 1em;
+      margin-bottom: 1em;
+
+      ul {
+        margin-bottom: 0;
+      }
+
+      li {
+        list-style-type: disc;
+
+        + br {
+          display: none;
+        }
+      }
+    }
+  }
+
+  div.note-box {
+    position: absolute;
+    border: 1px solid white;
+    min-width: 5px;
+    min-height: 5px;
+    width: 100px;
+    height: 100px;
+    cursor: move;
+    background: transparent;
+    line-height: normal;
+
+    div.note-box-inner-border {
+      border: 1px solid black;
+      background: #FFE;
+    }
+
+    div.note-box-inner-border.unsaved {
+      border: 1px solid red;
+    }
+
+    &.embedded {
+      div.bg {
+        height: 100%;
+        text-align: center;
+        display: table-cell;
+        vertical-align: middle;
+      }
+
+      div.note-box-inner-border {
+        text-align: center;
+        display: table-cell;
+        vertical-align: middle;
+      }
+    }
+
+    &.note-box-highlighted {
+      outline: 2px solid $note_highlight_color;
+    }
+  }
+}
+
+div#note-preview {
+  position: absolute;
+  border: 1px solid red;
+  opacity: 0.6;
+  display: none;
+  background: white;
+}
+
+div.note-edit-dialog {
+  font-size: 0.8em;
+}

app/javascript/src/styles/specific/pools.scss

@@ -0,0 +1,92 @@
+@import "../common/000_vars.scss";
+
+a.pool-category-series, .pool-category-series a {
+  color: #A0A;
+
+  &:hover {
+    color: #B6B;
+  }
+}
+
+a.pool-category-collection, .pool-category-collection a {
+  color: $link_color;
+
+  &:hover {
+    color: $link_hover_color;
+  }
+}
+
+div#add-to-pool-dialog {
+  font-size: 0.8em;
+
+  form {
+    margin-bottom: 1em;
+  }
+
+  li {
+    margin-left: 1em;
+    cursor: pointer;
+  }
+
+  h1 {
+    font-size: $h3_size;
+  }
+  
+  .hint {
+    display: block;
+  }
+}
+
+div#c-pools {
+  h1 {
+    font-size: $h2_size;
+  }
+
+  textarea {
+    height: 10em;
+  }
+
+  div#a-show {
+    div#description {
+      margin-bottom: 1em;
+    }
+  }
+}
+
+div#c-pool-orders, div#c-favorite-group-orders {
+  h1 {
+    font-size: $h2_size;
+  }
+
+  div#a-edit {
+    ul.ui-sortable {
+      list-style-type: none;
+
+      li {
+        cursor: pointer;
+        margin-right: 20px;
+        margin-bottom: 20px;
+        min-width: 150px;
+        min-height: 150px;
+        padding: 10px;
+        @include inline-block;
+      }
+
+      li.ui-state-default {
+        background: none;
+      }
+
+      li.ui-state-placeholder {
+        background: none;
+      }
+    }
+  }
+}
+
+ul.inline-pool-list {
+  display: inline;
+
+  li {
+    display: inline;
+  }
+}

app/javascript/src/styles/specific/post_appeals.scss

@@ -0,0 +1,5 @@
+div#c-post-appeals {
+  li {
+    list-style-type: disc;
+  }
+}

app/javascript/src/styles/specific/post_events.scss

@@ -0,0 +1,11 @@
+div#c-post-events {
+  #a-index {
+    tr.resolved-true {
+      background: #DDD;
+    }
+
+    tr.resolved-false {
+      background: #FFF;
+    }
+  }
+}

app/javascript/src/styles/specific/post_flags.scss

@@ -0,0 +1,13 @@
+div#c-post-flags {
+  li {
+    list-style-type: disc;
+  }
+
+  tr.resolved-true {
+    background: #DDD !important;
+  }
+
+  tr.resolved-false {
+    background: #FFF !important;
+  }
+}

app/javascript/src/styles/specific/post_mode_menu.scss

@@ -0,0 +1,71 @@
+body.mode-view {
+  background-color: #FFF;
+}
+
+body.mode-edit {
+  background-color: #5C5;
+}
+
+body.mode-tag-script {
+  background-color: #D6D;
+}
+
+body.mode-add-fav {
+  background-color: #FFA;
+}
+
+body.mode-remove-fav {
+  background-color: #FFA;
+}
+
+body.mode-rating-s {
+  background-color: #6F6;
+}
+
+body.mode-rating-q {
+  background-color: #AAA;
+}
+
+body.mode-rating-e {
+  background-color: #F66;
+}
+
+body.mode-vote-up {
+  background-color: #AFA;
+}
+
+body.mode-vote-down {
+  background-color: #FAA;
+}
+
+body.mode-lock-rating {
+  background-color: #AA3;
+}
+
+body.mode-lock-note {
+  background-color: #3AA;
+}
+
+body.mode-approve {
+  background-color: #48C;
+}
+
+body.mode-unapprove {
+  background-color: #F66;
+}
+
+body.mode-add-to-pool {
+  background-color: #26A;
+}
+
+body.mode-translation {
+  background-color: #5CD;
+}
+
+body.mode-ban {
+  background-color: #F33;
+}
+
+#page, #top, #page-footer {
+  background-color: white;
+}

app/javascript/src/styles/specific/post_tooltips.scss

@@ -0,0 +1,117 @@
+@import "../common/000_vars.scss";
+
+$tooltip-line-height: 16px;
+$tooltip-body-height: $tooltip-line-height * 6; // 6 lines high.
+$tooltip-width: 164px * 3 - 10; // 3 thumbnails wide.
+
+@mixin thin-scrollbar {
+  &::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+  }
+
+  &::-webkit-scrollbar-button {
+    width: 0px;
+    height: 0px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #999999;
+    border: 0px none #FFFFFF;
+    border-radius: 0px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: #AAAAAA;
+  }
+
+  &::-webkit-scrollbar-thumb:active {
+    background: #AAAAAA;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #EEEEEE;
+    border: 0px none #ffffff;
+    border-radius: 0px;
+  }
+
+  &::-webkit-scrollbar-track:hover {
+    background: #EEEEEE;
+  }
+
+  &::-webkit-scrollbar-track:active {
+    background: #EEEEEE;
+  }
+
+  &::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+}
+
+
+.post-tooltip {
+  max-width: $tooltip-width;
+  min-width: $tooltip-width;
+  box-sizing: border-box;
+  font-size: 11px;
+  line-height: $tooltip-line-height;
+  border-color: #767676;
+
+  .qtip-content {
+    padding: 0;
+
+    > * {
+      padding: 2px 6px;
+    }
+
+    .post-tooltip-body {
+      @include thin-scrollbar;
+      max-height: $tooltip-body-height;
+      overflow-y: auto;
+
+      li {
+        margin-right: 0;
+      }
+    }
+
+    .post-tooltip-header {
+      background-color: $menu_color;
+      display: flex;
+      white-space: nowrap;
+      overflow: hidden;
+
+      .post-tooltip-header-left {
+        flex: 1;
+      }
+
+      .post-tooltip-header-right {
+        flex: 1;
+        text-align: right;
+      }
+
+      .fa-xs {
+        vertical-align: baseline;
+      }
+
+      .post-tooltip-disable {
+        margin-left: 0.5em;
+      }
+    }
+
+    .post-tooltip-info {
+      margin-left: 0.5em;
+      color: #555;
+      font-size: 10px;
+    }
+  }
+
+  &:not(:hover) {
+    a, span {
+      color: #777 !important;
+    }
+  }
+
+  &.post-tooltip-loading {
+    visibility: hidden;
+  }
+}

app/javascript/src/styles/specific/post_versions.scss

@@ -0,0 +1,9 @@
+@import "../common/000_vars.scss";
+
+div#c-post-versions {
+  div#a-index {
+    tr.hilite {
+      background: $highlight_color;
+    }
+  }
+}

app/javascript/src/styles/specific/posts.scss

@@ -0,0 +1,550 @@
+@import "../common/000_vars.scss";
+
+article.post-preview {
+  height: 154px;
+  width: 154px;
+  margin: 0 10px 10px 0;
+  overflow: hidden;
+  text-align: center;
+  @include inline-block;
+  position: relative;
+
+  a {
+    @include inline-block;
+  }
+
+  &.pooled {
+    height: 214px;
+  }
+
+  .desc {
+   font-size: 80%;
+  }
+
+  img {
+    margin: auto;
+  }
+
+  &[data-tags~=animated]:before, &[data-file-ext=swf]:before, &[data-file-ext=webm]:before, &[data-file-ext=mp4]:before, &[data-file-ext=zip]:before {
+    @include animated-icon;
+  }
+
+  &[data-has-sound=true]:before {
+    @include sound-icon;
+  }
+}
+
+#iqdb-similar {
+  overflow: hidden;
+
+  .post-preview {
+    height: auto;
+    margin-bottom: 0;
+  }
+
+  p {
+    margin-bottom: 0;
+  }
+}
+
+#saved-searches-nav {
+  margin-top: 1em;
+}
+
+a.blacklisted-active {
+  text-decoration: line-through;
+}
+
+.post-preview.blacklisted-active, #image-container.blacklisted-active {
+  display: none;
+}
+
+#excerpt p.links {
+  margin-top: 1em;
+}
+
+#image-container p.desc {
+  font-size: 80%;
+  color: grey;
+  font-style: italic;
+}
+
+#open-edit-dialog {
+  padding: 0;
+}
+
+#edit-dialog textarea {
+  margin-bottom: 0.25em;
+}
+
+.post-preview {
+  img {
+    border: 2px solid transparent;
+  }
+
+
+  &.post-status-has-children img {
+    border-color: $preview_has_children_color;
+  }
+
+  &.post-status-has-parent img {
+    border-color: $preview_has_parent_color;
+  }
+  
+  &.post-status-has-children.post-status-has-parent img {
+    border-color: $preview_has_children_color $preview_has_parent_color $preview_has_parent_color $preview_has_children_color;
+  }
+
+
+  &.post-status-deleted img {
+    border-color: $preview_deleted_color;
+  }
+
+  &.post-status-has-children.post-status-deleted img {
+    border-color: $preview_has_children_color $preview_deleted_color $preview_deleted_color $preview_has_children_color;
+  }
+
+  &.post-status-has-parent.post-status-deleted img {
+    border-color: $preview_has_parent_color $preview_deleted_color $preview_deleted_color $preview_has_parent_color;
+  }
+
+  &.post-status-has-children.post-status-has-parent.post-status-deleted img {
+    border-color: $preview_has_children_color $preview_deleted_color $preview_deleted_color $preview_has_parent_color;
+  }
+
+
+  /* Pending and flagged posts have blue borders (except in the modqueue). */
+  &.post-status-pending:not(.mod-queue-preview) img,
+  &.post-status-flagged:not(.mod-queue-preview) img {
+    border-color: $preview_pending_color;
+  }
+
+  &.post-status-has-children.post-status-pending:not(.mod-queue-preview) img,
+  &.post-status-has-children.post-status-flagged:not(.mod-queue-preview) img {
+    border-color: $preview_has_children_color $preview_pending_color $preview_pending_color $preview_has_children_color;
+  }
+
+  &.post-status-has-parent.post-status-pending:not(.mod-queue-preview) img,
+  &.post-status-has-parent.post-status-flagged:not(.mod-queue-preview) img {
+    border-color: $preview_has_parent_color $preview_pending_color $preview_pending_color $preview_has_parent_color;
+  }
+
+  &.post-status-has-children.post-status-has-parent.post-status-pending:not(.mod-queue-preview) img,
+  &.post-status-has-children.post-status-has-parent.post-status-flagged:not(.mod-queue-preview) img {
+    border-color: $preview_has_children_color $preview_pending_color $preview_pending_color $preview_has_parent_color;
+  }
+}
+
+/* Flagged posts have red borders for approvers. */
+body[data-user-can-approve-posts="true"] .post-preview {
+  &.post-status-flagged img {
+    border-color: $preview_flagged_color;
+  }
+
+  &.post-status-has-children.post-status-flagged img {
+    border-color: $preview_has_children_color $preview_flagged_color $preview_flagged_color $preview_has_children_color;
+  }
+
+  &.post-status-has-parent.post-status-flagged img {
+    border-color: $preview_has_parent_color $preview_flagged_color $preview_flagged_color $preview_has_parent_color;
+  }
+
+  &.post-status-has-children.post-status-has-parent.post-status-flagged img {
+    border-color: $preview_has_children_color $preview_flagged_color $preview_flagged_color $preview_has_parent_color;
+  }
+}
+
+.post-preview.current-post {
+  background-color: rgba(0,0,0,0.1);
+}
+
+#has-parent-relationship-preview, #has-children-relationship-preview {
+  overflow-x: auto;
+  white-space: nowrap;
+  
+  article.post-preview {
+    width: auto;
+    border: none;
+    margin: 0;
+    padding: 5px 5px 10px;
+  }
+}
+
+.post-count {
+  color: #CCC;
+  margin-left: 0.2em;
+}
+
+.low-post-count {
+  color: red;
+}
+
+div#c-posts {
+  .fav-buttons {
+    font-size: 14pt;
+    text-align: center;
+    margin: 0.5em 0;
+
+    input[type=submit] {
+      padding: 0.2em 0.75em;
+    }
+  }
+
+  #ugoira-controls {
+    div#seek-slider {
+      margin-top: 0.5em;
+      float: right;
+      overflow: visible;
+      background: #EEE;
+
+      .ui-progressbar-value {
+        background: white;
+      }
+    }
+
+    #save-video-link {
+      margin: 0.5em 0;
+    }
+
+    button {
+      margin-top: 0.3em;
+    }
+
+    #ugoira-load-progress {
+      display: inline;
+      margin-left: 17px;
+    }
+  }
+
+  .outer-recent-searches {
+    overflow: hidden;
+  }
+
+  div.notice {
+    font-size: 0.8em;
+    padding: 0.5em;
+    margin-bottom: 0.5em;
+    overflow: hidden;
+
+    ul {
+      margin-left: 1em;
+    }
+
+    p {
+      margin: 0;
+    }
+
+    .resolved {
+      margin-left: 0.5em;
+      font-weight: bold;
+    }
+
+    &.notice-parent {
+      border-color: #C0FCC0;
+      background: #D8FCD9;
+    }
+
+    &.notice-child {
+      border-color: #FCFCC0;
+      background: #FBFCD8;
+    }
+
+    &.notice-pending {
+      border-color: #C0C0FC;
+      background: #D8D8FC;
+    }
+
+    &.notice-flagged {
+      border-color: #FCC0C0;
+      background: #FCD9D8;
+    }
+
+    &.notice-deleted {
+      border-color: #FF8C8C;
+      background: #FFA7A5;
+    }
+
+    &.notice-appealed {
+      border-color: #C0ECFC;
+      background: #D8F2FC;
+    }
+
+    &.notice-resized {
+      border-color: #E4C0FC;
+      background: #EED8FC;
+    }
+  }
+
+  div.nav-notice {
+    padding: 0.5em;
+    margin: 1em 0;
+    background: #EEE;
+    border: 1px solid #AAA;
+    position: relative;
+
+    p {
+      margin: 0;
+      text-align: center;
+    }
+  }
+
+  aside#sidebar #tag-list h2 {
+    font-size: $h4_size;
+  }
+
+  aside#sidebar > section > ul {
+    margin-bottom: 1em;
+  }
+
+  aside#sidebar > section > ul li {
+    list-style-type: none;
+  }
+
+  aside#sidebar > section > ul ul li {
+    margin-left: 1em;
+  }
+
+  div#a-index {
+    menu#post-sections {
+      margin-bottom: 0.5em;
+      font-size: $h3_size;
+
+      li {
+        padding: 0 1em 0.5em 0;
+
+        &.active {
+          font-weight: bold;
+        }
+      }
+    }
+  }
+
+  div#a-show {
+    .active {
+      font-weight: bold;
+    }
+
+    .recommended-posts {
+      margin-top: 1em;
+    }
+
+    #add-fav-button, #remove-fav-button {
+      margin-top: 1em;
+    }
+
+    menu#post-sections {
+      margin: 0;
+      font-size: $h3_size;
+
+      li {
+        padding: 0 1em 0 0;
+      }
+
+      div.share a {
+        margin: 0;
+      }
+    }
+
+    div.notices {
+      margin: 1em 0;
+    }
+
+    section {
+      margin-top: 1em;
+    }
+
+    span.quick-mod {
+      float: right;
+    }
+
+    .pool-name, .search-name {
+      word-wrap: break-word;
+    }
+
+    textarea {
+      margin-bottom: 0.25em;
+    }
+
+    #favlist {
+      margin-left: 1em;
+      word-wrap: break-word;
+    }
+
+    #search-seq-nav + #pool-nav, #search-seq-nav + #favgroup-nav, #pool-nav + #favgroup-nav {
+      margin-top: 0.5em;
+    }
+
+    #pool-nav, #search-seq-nav, #favgroup-nav {
+      li {
+        position: relative;
+        text-align: center;
+        padding: 0 5.5em;
+
+        .prev {
+          position: absolute;
+          left: 2em;
+          top: 0;
+        }
+
+        .next {
+          position: absolute;
+          right: 2em;
+          top: 0;
+        }
+
+        .first {
+          position: absolute;
+          left: 0.5em;
+          top: 0;
+        }
+
+        .last {
+          position: absolute;
+          right: 0.5em;
+          top: 0;
+        }
+
+        &:hover {
+          background: rgb(250, 250, 250);
+        }
+      }
+    }
+
+    span.close-button {
+      position: absolute;
+      top: 5px;
+      right: 5px;
+      cursor: pointer;
+    }
+    
+    div.comments-for-post {
+      width:100%
+    }
+
+    #artist-commentary {
+      border: 1px solid #CCC;
+      border-radius: 8px;
+      background-color: #F8F8F8;
+      margin-top: 1em;
+      padding: 0.5em;
+
+      #original-artist-commentary, #translated-artist-commentary {
+        max-height: 20em;
+        overflow-y: auto;
+      }
+
+      .disabled {
+        color: gray;
+      }
+    }
+  }
+
+  div#quick-edit-div {
+    textarea {
+      width: 70%;
+      height: 4em;
+      display: block;
+    }
+  }
+}
+
+div#c-post-versions, div#c-artist-versions {
+  div#a-index {
+    a {
+      word-wrap: break-word
+    }
+  }
+}
+
+div#c-posts, div#c-uploads {
+  /* Fetch source data box */
+  div#source-info {
+    border-radius: 4px;
+    margin: 1em 0;
+    padding: 1em;
+    border: 1px solid #666;
+
+    p {
+      margin: 0;
+    }
+
+    > ul {
+      display: none;
+
+      .source-tags {
+        a {
+          margin-right: 1em;
+        }
+      }
+    }
+  }
+}
+
+div#c-explore-posts {
+  a.desc {
+    font-weight: bold;
+    margin: 0 0.5em;
+  }
+
+  #popular-nav-links {
+    text-align: center;
+  }
+
+  .period {
+    margin: 0 5em;
+
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+}
+
+.inline-blacklist {
+  #blacklist-box {
+    margin-bottom: 1em;
+  }
+
+  #blacklist-list {
+    display: inline;
+  }
+
+  #blacklist-list li {
+    display: inline;
+    margin-right: 1em;
+
+    a {
+      color: $link_color;
+      cursor: pointer;
+    }
+
+    span.count {
+      color: #AAA;
+      margin-left: 0;
+    }
+  }
+}
+
+div#unapprove-dialog {
+  p {
+    margin-bottom: 1em;
+  }
+}
+
+textarea[data-autocomplete="tag-edit"] {
+  font-family: monospace;
+}
+
+#add-commentary-dialog {
+  input {
+    width: 70%;
+  }
+
+  input[type=checkbox] {
+    width: auto;
+  }
+
+  textarea {
+    font-size: 1em;
+    width: 100%;
+  }
+}

app/javascript/src/styles/specific/related_tags.scss

@@ -0,0 +1,52 @@
+@import "../common/000_vars.scss";
+
+div#related-tags-container {
+  padding-right: 2em;
+
+  h1 {
+    font-size: $h3_size;
+  }
+}
+
+div.related-tags {
+  width: 100%;
+  margin-bottom: 1em;
+  padding: 1em;
+  background: #EEE;
+  overflow: auto;
+  border-radius: 4px;
+
+  div.tag-column {
+    max-width: 15em;
+    margin-right: 2em;
+    float: left;
+
+    ul {
+      margin: 0;
+
+      li {
+        em {
+          font-weight: bold;
+        }
+
+        svg {
+          margin-top: 2px;
+          cursor: pointer;
+        }
+
+        a {
+          min-width: 3em;
+        }
+
+        a.selected {
+          background-color: $link_color;
+          color: white;
+        }
+      }
+    }
+  }
+  
+  div.wide-column {
+    max-width: 45em;
+  }
+}

app/javascript/src/styles/specific/reports.scss

@@ -0,0 +1,25 @@
+#c-reports {
+	#a-similar-users {
+    div.box {
+      h2, h3 {
+        color: #333;
+      }
+
+      margin-bottom: 2em;
+    }
+
+    span.accuracy {
+      color: #666;
+    }
+
+    /* clearfix hacks */
+    div.box:before, div.box:after {
+      content: "";
+      display: table;
+    }
+
+    div.box:after {
+      clear: both;
+    }
+  }
+}

app/javascript/src/styles/specific/saved_searches.scss

@@ -0,0 +1,7 @@
+#c-saved-searches {
+  #a-index {
+    table {
+      margin-bottom: 2em;
+    }
+  }
+}

app/javascript/src/styles/specific/sessions.scss

@@ -0,0 +1,11 @@
+@import "../common/000_vars.scss";
+
+div#c-sessions {
+  div#a-new {
+    label#remember-label {
+      display: inline;
+      font-weight: normal;
+      font-style: italic;
+    }
+  }
+}

app/javascript/src/styles/specific/site_map.scss

@@ -0,0 +1,25 @@
+@import "../common/000_vars.scss";
+
+div#c-static {
+  div#a-site-map {
+    width: 80em;
+
+    h1 {
+      display: none;
+    }
+
+    section {
+      width: 20em;
+      float: left;
+
+      h1 {
+        display: block;
+        font-size: $h3_size;
+      }
+
+      ul {
+        margin-bottom: 1.5em;
+      }
+    }
+  }
+}

app/javascript/src/styles/specific/tags.scss

@@ -0,0 +1,13 @@
+div#c-tags {
+  div#a-index table.striped {
+    td:nth-child(1), th:nth-child(1) {
+      width: 5em;
+      text-align: right;
+    }
+
+    td:nth-child(2), th:nth-child(2) {
+      padding-left: 1em;
+      width: 40em;
+    }
+  }
+}

app/javascript/src/styles/specific/terms_of_service.scss

@@ -0,0 +1,26 @@
+@import "../common/000_vars.scss";
+
+div#c-static div#a-terms-of-service {
+  width: 40em;
+
+  h1 {
+    font-size: $h2_size;
+  }
+
+  p {
+    margin-bottom: 1em;
+  }
+
+  ul {
+    margin-left: 1em;
+    margin-bottom: 1em;
+  }
+
+  li {
+    list-style-type: disc;
+  }
+
+  section {
+    margin-bottom: 2em;
+  }
+}

app/javascript/src/styles/specific/uploads.scss

@@ -0,0 +1,68 @@
+div#c-uploads {
+  div#a-new {
+    .artist-commentary {
+      margin-top: 1em;
+      margin-left: 1em;
+    }
+
+    div#upload-guide-notice {
+      margin-bottom: 2em;
+    }
+
+    ul#links {
+      margin-bottom: 1em;
+    }
+
+    label[for="upload_as_pending"] {
+      display: inline;
+    }
+
+    fieldset.ratings {
+      label {
+        display: inline;
+      }
+    }
+
+    textarea {
+      margin-bottom: 0.25em;
+    }
+
+    .hint {
+      display: block;
+    }
+
+    div.field_with_errors {
+      display: inline;
+    }
+  }
+
+  div#a-index {
+    .info {
+      margin-right: 1.5em;
+    }
+  }
+
+  div.upload-preview {
+    display: inline-block;
+
+    > a {
+      width: 154px;
+      height: 154px;
+      margin: 0 10px 10px 0;
+      display: inline-block;
+
+      img {
+        margin: auto;
+        border: 2px solid transparent;
+
+        max-width: 154px;
+        max-height: 154px;
+      }
+    }
+
+    .caption-top {
+      font-size: 0.8em;
+      margin-bottom: 0;
+    }
+  }
+}

app/javascript/src/styles/specific/user_deletions.scss

@@ -0,0 +1,10 @@
+div#c-maintenance-user-deletions {
+  ul {
+    margin-left: 1em;
+    margin-bottom: 1em;
+  }
+
+  li {
+    list-style-type: disc;
+  }
+}

app/javascript/src/styles/specific/user_feedback.scss

@@ -0,0 +1,17 @@
+div#c-user-feedbacks, div#c-moderator-dashboards div#col2 {
+  .feedback-category-positive {
+    background: #DDFFDD !important;
+  }
+
+  .feedback-category-negative {
+    background: #FFDDDD !important;
+  }
+
+  .feedback-category-neutral {
+    background: #FFFFFF !important;
+  }
+  
+  blockquote {
+    padding: 0.5em;
+  }
+}

app/javascript/src/styles/specific/user_name_change_requests.scss

@@ -0,0 +1,25 @@
+#c-user-name-change-requests {
+  .feedback-category-positive {
+    background: #DDFFDD !important;
+  }
+
+  .feedback-category-negative {
+    background: #FFDDDD !important;
+  }
+  
+  li {
+    margin-bottom: 1em;
+  }
+  
+  form {
+    margin-bottom: 2em;
+  }
+  
+  p {
+    margin: 0;
+  }
+  
+  section {
+    margin-bottom: 1em;
+  }
+}

app/javascript/src/styles/specific/user_upgrades.scss

@@ -0,0 +1,56 @@
+div#c-user-upgrades {
+  div#a-new {
+    max-width: 40em;
+    font-size: 1.2em;
+
+    form.stripe {
+      display: inline;
+    }
+
+    div.section {
+      margin-bottom: 2em;
+    }
+
+    div#feature-comparison {
+      overflow: hidden;
+      margin-bottom: 1em;
+
+      table {
+        width: 100%;
+
+        colgroup {
+          width: 10em;
+        }
+
+        colgroup#basic {
+        }
+
+        colgroup#gold  {
+          background-color: #FFF380;
+        }
+
+        colgroup#platinum {
+          background-color: #eee;
+        }
+
+        td, th {
+          text-align: center;
+          vertical-align: top;
+          padding: 0.5em 0;
+        }
+
+        tbody {
+          tr:hover {
+            background-color: #FEF;
+          }
+        }
+
+        p.cost-footnote {
+          font-size: 80%;
+          color: gray;
+          margin: 0;
+        }
+      }
+    }
+  }
+}

app/javascript/src/styles/specific/users.scss

@@ -0,0 +1,89 @@
+@import "../common/000_vars.scss";
+
+div#c-users {
+  div#a-show {
+    div.box {
+      h2, h3 {
+        color: #333;
+      }
+
+      margin-bottom: 2em;
+    }
+
+    /* clearfix hacks */
+    div.box:before, div.box:after {
+      content: "";
+      display: table;
+    }
+
+    div.box:after {
+      clear: both;
+    }
+
+    table.user-statistics {
+      tr {
+        height: 1.75em;
+      }
+
+      th {
+        width: 15%;
+        text-align: right;
+        padding-right: 1em;
+        vertical-align: top;
+      }
+
+      td {
+        width: 85%;
+        vertical-align: top;
+      }
+
+      p {
+        margin-bottom: 0.5em;
+      }
+    }
+  }
+
+  div#a-edit {
+    h1 {
+      margin: 0.5em 0;
+    }
+
+    h2 {
+      margin: 0.5em 0;
+    }
+
+    div.input {
+      margin-bottom: 2em;
+    }
+
+    div.input span.hint {
+      display: block;
+      max-width: 70%;
+    }
+
+    .active {
+      color: black;
+    }
+  }
+
+  div#a-new {
+    max-width: 60em;
+
+    p {
+      font-size: 1.2em;
+      margin-bottom: 1em;
+      line-height: 1.4em;
+    }
+
+    footer.nav-links {
+      font-size: 1.4545em;
+      font-weight: bold;
+      text-align: center;
+      display: block;
+    }
+
+    div#p2 ul {
+      margin-bottom: 2em;
+    }
+  }
+}

app/javascript/src/styles/specific/wiki_page_versions.scss

@@ -0,0 +1,25 @@
+div#c-wiki-page-versions {
+  #a-diff {
+    del {
+      background: #FCC;
+      text-decoration: none;
+    }
+
+    ins {
+      background: #CFC;
+      text-decoration: none;
+    }
+  }
+
+  #a-index {
+    table {
+      margin-bottom: 1em;
+    }
+  }
+
+  #a-show {
+    span.version {
+      color: #AAA;
+    }
+  }
+}

app/javascript/src/styles/specific/wiki_pages.scss

@@ -0,0 +1,19 @@
+div#c-wiki-pages {
+  form span.hint {
+    display: block;
+  }
+
+  #a-new {
+    div.notice {
+      font-size: 0.8em;
+      padding: 1em;
+      margin: 1em 0;
+    }
+  }
+}
+
+.wiki-other-name {
+  background-color: #EEE;
+  padding: 3px;
+  border-radius: 3px;
+}

app/javascript/src/styles/specific/z_responsive.scss

@@ -0,0 +1,283 @@
+@import "../common/000_vars.scss";
+
+#desktop-version-link {
+  display: none;
+}
+
+#searchbox-redirect-link {
+  display: none;
+}
+
+@media screen and (max-width: 660px) {
+  #desktop-version-link {
+    display: inline;
+  }
+
+  #searchbox-redirect-link {
+    display: inline;
+  }
+
+  #saved-searches-nav {
+    display: none;
+  }
+
+  div#page aside#sidebar {
+    padding: 5px;
+
+    input#tags {
+      width: 80%;
+    }
+
+    button[type=submit] {
+      font-size: 1.4em;
+      background-color: #EEE;
+      height: 42px;
+      padding: 2px 10px;
+    }
+  }
+
+  div#page {
+    padding: 0 0.25vw;
+    > div /* div#c-$controller */ {
+      > div /* div#a-$action */ {
+        display: flex;
+        flex-direction: column;
+
+        /* Move #sidebar below #content. */
+        > aside#sidebar {
+          font-size: 1.5em;
+          float: none;
+          width: auto;
+          order: 2;
+        }
+      }
+    }
+  }
+
+  #maintoggle {
+    display: block;
+    font-weight: bold;
+    position: absolute;
+    top: 3vw;
+    right: 4vw;
+    font-size: 2em;
+
+    &.toggler-active {
+      background-color: lighten($link_color, 25%);
+      color: #000;    
+    }
+  }
+
+  /* Make the quick search box in the navbar full width. */
+  header#top menu form input {
+    width: auto;
+  }
+
+  h1 {
+    display: none;
+  }
+
+  form {
+    input[type=text] {
+      vertical-align: top;
+      font-size: 24pt;
+      border: 1px solid #c5c5c5;
+    }
+
+    textarea {
+      vertical-align: top;
+      border: 1px solid #c5c5c5;
+    }
+
+    input[type=submit] {
+      font-size: 160%;
+    }
+
+    input[type=submit].tiny {
+      font-size: 120%;
+      vertical-align: top;
+    }
+  }
+
+  div#page section#content {
+    margin: 0;
+    padding: 0;
+  }
+
+  #comments h2 {
+    display: none;
+  }
+
+  div.paginator {
+    font-size: 24pt;
+    font-weight: bold;
+    text-align: center;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    margin-top: 1em;
+
+    li {
+      display: inline-block;
+      margin: 0 0.25em;
+
+      a, span {
+        margin: 0;
+        padding: 0;
+        border: none;
+      }
+
+      &.current-page {
+        text-align: center;
+      }
+
+      &.arrow:last-child {
+        text-align: right;
+      }
+
+      &.numbered-page, &.more {
+        display: none;
+      }
+    }
+  }
+
+  #posts #posts-container {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-start;
+  }
+
+  article.post-preview {
+    float: none;
+    margin: 0; 
+    text-align: center;
+    vertical-align: middle;
+    display: inline-block;
+
+    a {
+      margin: 0 auto;
+    }
+
+    img {
+      width: 33.3vw;
+      border: none !important;
+    }
+
+    &[data-tags~=animated]:before, &[data-file-ext=swf]:before, &[data-file-ext=webm]:before, &[data-file-ext=mp4]:before, &[data-file-ext=zip]:before {
+      @include animated-icon;
+    }
+
+    &[data-has-sound=true]:before {
+      @include sound-icon;
+    }
+  }
+
+  .user-disable-cropped-false {
+    article.post-preview {
+      width: 33.3%;
+      height: 33.3vw;
+      overflow: hidden;
+    }
+
+    img {
+      width: 33.3vw;
+      height: 33.3vw;
+
+      &.has-cropped-false {
+        object-fit: cover;
+      }
+    }
+  }
+
+  img#image {
+    margin-top: 5px;
+  }
+
+  #image-container {
+    overflow: scroll;
+  }
+
+  div#options {
+    margin-top: 10px;
+    font-size: 24pt;
+    font-weight: bold;
+  }
+
+  div#tags {
+    margin-top: 30px;
+
+    li {
+      margin: 10px 0;
+    }
+
+    a.search-tag {
+      font-size: 24pt;
+      font-weight: bold;
+    }
+  }
+
+  div#page {
+    div.comments-for-post div.list-of-comments article.comment div.content {
+      clear: both;
+      margin: 0;
+    }
+  }
+
+  #nav {
+    font-size: 2em;
+    line-height: 2em;
+    display: none;
+  }
+  
+  header#top menu.main {
+    background-color: lighten($link_color, 25%);
+    padding: 5px 10px;
+  }
+  
+  h1 {
+    display: block;
+    font-size: 2em;
+    margin: 1em 0 0 0;
+  }
+  
+  h2 {
+    font-size: 0.825em;
+    margin: 1em 0 0 0;
+  }
+  
+  header {
+    text-align: center;
+    line-height: 2em;
+    h1 {
+      display: inline; //Needed for menu button
+    }
+  }
+  
+  div#page {
+    margin: 0;
+  }
+}
+
+@media screen and (max-width: 440px) {
+  input#expand-search {
+    display: none;
+  }
+
+  body {
+    width: 100%;
+  }
+
+  #post-sections {
+    font-size: 1em;
+  }
+  
+  div article.post-preview {
+    overflow: visible;
+  }
+}
+
+#tos-notice {
+  display: none;
+}