[maud] Add options for themes

* bigger publish button
* wider column in advanced UI

Signed-off-by: lindwurm <lindwurm.q@gmail.com>

Author: lindwurm

app/javascript/styles/enable-big-and-wide.scss

@@ -0,0 +1,3 @@
+@import 'application';
+@import 'mods/big-publish';
+@import 'mods/wide-column';

app/javascript/styles/enable-big-publish.scss

@@ -0,0 +1,2 @@
+@import 'application';
+@import 'mods/big-publish';

app/javascript/styles/enable-wide-column.scss

@@ -0,0 +1,2 @@
+@import 'application';
+@import 'mods/wide-column';

app/javascript/styles/mods/big-publish.scss

@@ -0,0 +1,14 @@
+.compose-form__publish {
+    display: contents;
+  }
+  .compose-form__publish-button-wrapper {
+      height: 2em;
+      width: 100%;
+      font-size: 3rem;
+  }
+  
+  .compose-form__publish-button-wrapper > button {
+      height: 100%;
+      width: 100%;
+      font-size: 80%;
+  }

app/javascript/styles/mods/wide-column.scss

@@ -0,0 +1,72 @@
+// breakpoints
+$column-bp-1: 640px;
+$column-bp-2: 900px;
+$column-bp-3: 1366px;
+$column-bp-4: 1920px;
+$column-bp-5: 2560px;
+
+@mixin c1 {
+  @media screen and (max-width: $column-bp-1) {
+    @content;
+  }
+}
+
+@mixin c2 {
+  @media screen and (min-width: $column-bp-1 + 1px) and (max-width: $column-bp-2) {
+    @content;
+  }
+}
+
+@mixin c3 {
+  @media screen and (min-width: $column-bp-2 + 1px) and (max-width: $column-bp-3) {
+    @content;
+  }
+}
+
+@mixin c4 {
+  @media screen and (min-width: $column-bp-3 + 1px) and (max-width: $column-bp-4) {
+    @content;
+  }
+}
+
+@mixin c5 {
+  @media screen and (min-width: $column-bp-4 + 1px) and (max-width: $column-bp-5) {
+    @content;
+  }
+}
+
+@mixin c6 {
+  @media screen and (min-width: $column-bp-5 + 1px) {
+    @content;
+  }
+}
+
+.columns-area > div {
+  @include c6 {
+    width: 16.667%;
+    max-width: 16.667%;
+  }
+  @include c5 {
+    width: 20%;
+    max-width: 20%;
+  }
+  @include c4 {
+    width: 25%;
+    max-width: 25%;
+  }
+  @include c3 {
+    width: 33.333%;
+    max-width: 33.333%;
+  }
+  @include c2 {
+    width: 50%;
+    max-width: 50%;
+  }
+}
+
+.columns-area > div > .column,
+.columns-area > div > .mastodon-column-container > .column {
+  @include c1 {
+    width: 100%;
+  }
+}

config/locales/en.yml

@@ -1600,6 +1600,9 @@ en:
     contrast: Mastodon (High contrast)
     default: Mastodon (Dark)
     mastodon-light: Mastodon (Light)
+    big-publish: Enable big publish-button
+    wide-column: Enable wider column (only on Advanced UI)
+    big-and-wide: Enable both big publish-button and wider column
   time:
     formats:
       default: "%b %d, %Y, %H:%M"

config/locales/ja.yml

@@ -1466,6 +1466,9 @@ ja:
     contrast: Mastodon (ハイコントラスト)
     default: Mastodon (ダーク)
     mastodon-light: Mastodon (ライト)
+    big-publish: より大きな投稿ボタンを有効化
+    wide-column: より幅広なカラムを有効化 (上級者向けUI専用)
+    big-and-wide: 投稿ボタンと幅広カラムの両方を有効化
   time:
     formats:
       default: "%Y年%m月%d日 %H:%M"

config/themes.yml

@@ -1,3 +1,6 @@
 default: styles/application.scss
 contrast: styles/contrast.scss
 mastodon-light: styles/mastodon-light.scss
+big-publish: styles/enable-big-publish.scss
+wide-column: styles/enable-wide-column.scss
+big-and-wide: styles/enable-big-and-wide.scss