From d5c2eff4baa04a4963892f42e29ef849f30f978c Mon Sep 17 00:00:00 2001 From: "Luna D." Date: Wed, 17 Apr 2024 16:52:50 +0200 Subject: [PATCH] progress --- assets/css/application.scss | 1 + assets/css/common/_measurements.scss | 15 +++++++++------ assets/css/elements/_base.scss | 10 +++++++++- assets/css/elements/_block.scss | 9 +++++++++ assets/css/elements/_button.scss | 6 ++++++ assets/css/elements/_heading.scss | 2 ++ assets/css/elements/_table.scss | 12 ++++++++++++ assets/css/themes/dark-blue.scss | 10 +++++----- assets/css/views/_header.scss | 7 ++++--- assets/css/views/_staff.scss | 13 +++++++------ assets/css/views/_statistics.scss | 4 +++- .../templates/profile/_admin_block.html.slime | 4 ++-- lib/philomena_web/views/staff_view.ex | 2 +- 13 files changed, 70 insertions(+), 25 deletions(-) diff --git a/assets/css/application.scss b/assets/css/application.scss index 119c822f..9082b403 100644 --- a/assets/css/application.scss +++ b/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"; diff --git a/assets/css/common/_measurements.scss b/assets/css/common/_measurements.scss index 0bb571ea..7bff0444 100644 --- a/assets/css/common/_measurements.scss +++ b/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-h2-size: 1.35rem; - --font-h3-size: 1.2rem; - --font-h4-size: 1.1rem; - --font-h5-size: 1rem; + --font-h1-size: 1.75rem; + --font-h2-size: 1.5rem; + --font-h3-size: 1.35rem; + --font-h4-size: 1.2rem; + --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; } diff --git a/assets/css/elements/_base.scss b/assets/css/elements/_base.scss index e64a9df6..68eefad6 100644 --- a/assets/css/elements/_base.scss +++ b/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; +} diff --git a/assets/css/elements/_block.scss b/assets/css/elements/_block.scss index 98ee8be8..7aa692c6 100644 --- a/assets/css/elements/_block.scss +++ b/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 { diff --git a/assets/css/elements/_button.scss b/assets/css/elements/_button.scss index 31d3af50..14ba7ab4 100644 --- a/assets/css/elements/_button.scss +++ b/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); diff --git a/assets/css/elements/_heading.scss b/assets/css/elements/_heading.scss index c18ed544..9251c0dd 100644 --- a/assets/css/elements/_heading.scss +++ b/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); } } diff --git a/assets/css/elements/_table.scss b/assets/css/elements/_table.scss index a9482972..b6ecfef8 100644 --- a/assets/css/elements/_table.scss +++ b/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); diff --git a/assets/css/themes/dark-blue.scss b/assets/css/themes/dark-blue.scss index efa50e9e..2dcf7cec 100644 --- a/assets/css/themes/dark-blue.scss +++ b/assets/css/themes/dark-blue.scss @@ -3,11 +3,11 @@ $text-color: #e0e0e0; $primary-color: #2e4c80; $secondary-color: #434f69; -$danger-color: #57261f; -$warning-color: #5c472a; -$success-color: #255339; -$information-color: #1f5057; -$purple-color: #501f57; +$danger-color: #672a21; +$warning-color: #684f2c; +$success-color: #25603e; +$information-color: #205861; +$purple-color: #561e5e; $upvote-color: #5b9b26; $downvote-color: #da3412; diff --git a/assets/css/views/_header.scss b/assets/css/views/_header.scss index fb01d67d..0b16dd94 100644 --- a/assets/css/views/_header.scss +++ b/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 { diff --git a/assets/css/views/_staff.scss b/assets/css/views/_staff.scss index 6bf58d49..a3252a1d 100644 --- a/assets/css/views/_staff.scss +++ b/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 { diff --git a/assets/css/views/_statistics.scss b/assets/css/views/_statistics.scss index 5743b2cd..2ed1ab26 100644 --- a/assets/css/views/_statistics.scss +++ b/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 { diff --git a/lib/philomena_web/templates/profile/_admin_block.html.slime b/lib/philomena_web/templates/profile/_admin_block.html.slime index 035a0545..135aef48 100644 --- a/lib/philomena_web/templates/profile/_admin_block.html.slime +++ b/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 diff --git a/lib/philomena_web/views/staff_view.ex b/lib/philomena_web/views/staff_view.ex index edceaa69..6296d3af 100644 --- a/lib/philomena_web/views/staff_view.ex +++ b/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