progress

assets/css/application.scss

@@ -48,5 +48,6 @@ $fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
 @import "~views/markdown";
 @import "~views/metabar";
 @import "~views/pagination";
+@import "~views/staff";
 @import "~views/statistics";
 @import "~views/tag";

assets/css/common/_measurements.scss

@@ -12,6 +12,9 @@ $font-family-monospace: "Droid Sans Mono", monospace;
   --padding-normal: 0.75rem;
   --padding-large: 1.5rem;
 
+  --default-line-height: 1.15;
+  --readable-line-height: 1.35rem;
+
   --block-header-height: 2rem;
 
   --navbar-size: 4rem;
@@ -51,11 +54,11 @@ $font-family-monospace: "Droid Sans Mono", monospace;
   --font-size: 14px;
   --font-tiny-size: 12px;
   --font-header-size: 16px;
-  --font-h1-size: 1.5rem;
+  --font-h1-size: 1.75rem;
-  --font-h2-size: 1.35rem;
+  --font-h2-size: 1.5rem;
-  --font-h3-size: 1.2rem;
+  --font-h3-size: 1.35rem;
-  --font-h4-size: 1.1rem;
+  --font-h4-size: 1.2rem;
-  --font-h5-size: 1rem;
+  --font-h5-size: 1.1rem;
   --font-h6-size: 1rem;
 
   --input-text-height: 9rem;
@@ -65,5 +68,5 @@ $font-family-monospace: "Droid Sans Mono", monospace;
   --medium-layout-width: #{$medium-layout-width};
   --narrow-layout-width: #{$narrow-layout-width};
 
-  --transition-animation-duration: 0.2s;
+  --transition-animation-duration: 0.15s;
 }

assets/css/elements/_base.scss

@@ -8,10 +8,11 @@ body {
   margin: 0;
   background: var(--background-color);
   color: var(--text-color);
+  line-height: var(--default-line-height);
 }
 
 main {
-  padding: var(--padding-normal);
+  padding: var(--padding-large);
   flex-grow: 1;
 }
 
@@ -33,3 +34,10 @@ a:hover {
 .hidden {
   display: none !important;
 }
+
+p, .paragraph {
+  hyphens: none;
+  line-height: var(--readable-line-height);
+  margin: var(--padding-small);
+  margin-right: 0;
+}

assets/css/elements/_block.scss

@@ -103,6 +103,15 @@
 .block--fixed {
   padding: var(--padding-normal);
   border-radius: var(--border-radius-inner);
+  background: var(--primary-muted-color);
+}
+
+.block__content > *:last-child, .block--fixed > *:last-child {
+  margin-bottom: 0;
+}
+
+.block__content > *:first-child, .block--fixed > *:first-child {
+  margin-top: 0;
 }
 
 .block__tab {

assets/css/elements/_button.scss

@@ -38,7 +38,9 @@
   font-size: var(--padding-normal);
   padding: var(--padding-small);
   border: 1px solid var(--primary-border-color);
+  border-radius: var(--border-radius-inner);
   box-sizing: border-box;
+  overflow: hidden;
 
   &:hover {
     @include animated-transition;
@@ -110,6 +112,10 @@
   }
 }
 
+.button--borderless {
+  border-width: 0;
+}
+
 @include button-type(success);
 @include button-type(warning);
 @include button-type(danger);

assets/css/elements/_heading.scss

@@ -2,7 +2,9 @@
   #{$el} {
     font-size: var(--font-#{$el}-size);
     font-weight: bold;
+    font-variant: small-caps;
     padding: var(--padding-small) 0;
+    margin-top: 0;
     border-bottom: 1px solid var(--primary-border-color);
   }
 }

assets/css/elements/_table.scss

@@ -3,6 +3,18 @@
   width: 100%;
 }
 
+.table > thead {
+  border-radius: var(--border-radius-inner);
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.table > tbody {
+  border-radius: var(--border-radius-inner);
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
 .table td, th {
   padding: var(--padding-small);
   border: 1px solid var(--secondary-muted-color);

assets/css/themes/dark-blue.scss

@@ -3,11 +3,11 @@ $text-color: #e0e0e0;
 
 $primary-color: #2e4c80;
 $secondary-color: #434f69;
-$danger-color: #57261f;
+$danger-color: #672a21;
-$warning-color: #5c472a;
+$warning-color: #684f2c;
-$success-color: #255339;
+$success-color: #25603e;
-$information-color: #1f5057;
+$information-color: #205861;
-$purple-color: #501f57;
+$purple-color: #561e5e;
 
 $upvote-color: #5b9b26;
 $downvote-color: #da3412;

assets/css/views/_header.scss

@@ -1,7 +1,7 @@
 header {
   display: flex;
   line-height: var(--navbar-size);
-  padding: 0 var(--padding-normal);
+  padding: 0 var(--padding-large);
   font-size: var(--font-header-size);
   gap: var(--padding-large);
   align-items: center;
@@ -18,7 +18,7 @@ header {
 }
 
 .header__logo {
-  font-size: var(--font-h1-size)
+  font-size: var(--font-h2-size)
 }
 
 .header__search {
@@ -71,7 +71,7 @@ header {
 nav.header__secondary {
   display: flex;
   line-height: var(--navbar-secondary-size);
-  padding: 0 var(--padding-normal);
+  padding: 0 var(--padding-large);
   font-size: var(--font-header-size);
   gap: var(--padding-large);
   align-items: center;
@@ -87,6 +87,7 @@ nav.dropdown__content {
     gap: var(--padding-normal);
     flex-wrap: wrap;
     margin-bottom: var(--padding-normal);
+    padding: 0 var(--padding-normal);
   }
 
   nav.header__secondary {

assets/css/views/_staff.scss

@@ -2,18 +2,18 @@
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   grid-auto-rows: 1fr;
-  grid-gap: 0.5em;
+  grid-gap: 0.5rem;
 }
 
 .staff-block__user-card {
   display: grid;
-  grid-template-columns: auto 8em;
+  grid-template-columns: auto 8rem;
 }
 
 .staff-block__user {
   flex-grow: 1;
   width: auto;
-  padding: 1em;
+  padding: 1rem;
 }
 
 .staff-block__info {
@@ -27,15 +27,16 @@
 }
 
 .staff-block__description {
-  margin: 1em 0;
+  margin: 1rem 0;
 }
 
 .staff-block__separator {
-  margin: 0.75em 0.5em;
+  margin: 0.75rem 0.5rem;
+  border-color: var(--primary-color);
 }
 
 .staff-block__category {
-  margin-top: 1em;
+  margin-top: 1rem;
 }
 
 .staff-block__user-description {

assets/css/views/_statistics.scss

@@ -1,6 +1,8 @@
 .statistics {
   @extend .flex__column;
-  border: 1px solid var(--secondary-color);
+  border: 1.5px solid var(--secondary-color);
+  border-radius: var(--border-radius-inner);
+  overflow: hidden;
 }
 
 .statistics__statistic {

lib/philomena_web/templates/profile/_admin_block.html.slime

@@ -47,9 +47,9 @@
       i.fas.fa-fw.fa-unlock>
       ' Not currently locked
 
-    hr.separator.separator--secondary
+    hr.separator.separator--danger
 
-    a.button.button--warning href="#" data-click-toggle=".js-admin__options__toggle" title="Toggle Controls"
+    a.button.button--danger href="#" data-click-toggle=".js-admin__options__toggle" title="Toggle Controls"
       i.fa.fa-fw.fa-bars
       span Toggle Controls
 

lib/philomena_web/views/staff_view.ex

@@ -32,7 +32,7 @@ defmodule PhilomenaWeb.StaffView do
   def category_class("Technical Team"), do: "block--warning"
   def category_class("Public Relations"), do: "block--warning"
   def category_class("Moderators"), do: "block--success"
-  def category_class("Assistants"), do: "block--assistant"
+  def category_class("Assistants"), do: "block--purple"
   def category_class(_), do: ""
 
   def staff_description(%{description: desc}) when desc not in [nil, ""] do