feat(front): add 28px font size large-section-heading tier

front/src/components/admin/SettingsGroup.vue

@@ -110,6 +110,7 @@ const save = async () => {
   <Section
     align-left
     :h2="group.label"
+    large-section-heading
   >
     <form
       :id="group.id"

front/src/components/ui/Heading.vue

@@ -4,7 +4,7 @@ import { computed } from 'vue'
 const props = defineProps<{
   [H in `h${ '1' | '2' | '3' | '4' | '5' | '6' }`]? : string
 } & {
-  [S in 'page-heading' | 'section-heading' | 'subsection-heading' | 'caption' | 'title' | 'radio' | 'secondary' ]? : true
+  [S in 'page-heading' | 'section-heading' | 'large-section-heading' | 'subsection-heading' | 'caption' | 'title' | 'radio' | 'secondary' ]? : true
 }>()
 
 const [level, title] = Object.entries(props).find(([key, value]) => value && key.startsWith('h')) || ['h1', '']
@@ -30,9 +30,10 @@ const size = computed(() => (Object.entries(props).find(([key, value]) => value
   /* Page heading */
   :is(*, .vp-doc h3).pageheading { font-size: 36px; font-weight: 900; letter-spacing: -1px; }
 
-  /* Section heading, Modal heading [DEFAULT] */
   /* TODO: Decide on a size. All mockups on https://design.funkwhale.audio/ have 20px. */
-  .sectionheading { font-size: 28px; font-weight: 700; letter-spacing: -.5px; }
+  :is(*, .vp-doc h3).largesectionheading { font-size: 28px; font-weight: 700; letter-spacing: -.5px; }
+
+  /* Section heading, Modal heading [DEFAULT] */
   :is(*, .vp-doc h3).sectionheading { font-size: 20px; font-weight: 700; letter-spacing: -.5px; }
 
   /* Form subsection */

front/src/components/ui/Section.vue

@@ -18,7 +18,7 @@ const props = defineProps<{
 } & {
   [H in `h${ '1' | '2' | '3' | '4' | '5' | '6' }`]? : string
 } & {
-  [S in 'page-heading' | 'section-heading' | 'subsection-heading' | 'caption' | 'title' | 'radio' | 'secondary' ]? : true
+  [S in 'page-heading' | 'section-heading' | 'large-section-heading' | 'subsection-heading' | 'caption' | 'title' | 'radio' | 'secondary' ]? : true
 } & {
   [Operation in 'expand' | 'collapse']?: () => void
 }>()