[design] improve theme preset controls

Author: zombieFox

src/css/theme.css

@@ -3,23 +3,22 @@
 flex-direction: column;
 justify-content: center;
 overflow: hidden;
-max-width:6em;
+max-width:var(--theme-preset-preview-size);
 }
 
 .theme-preset-button .button-text{
-margin-top:1em;
-margin-bottom:1em;
+margin-top:1.25em;
+margin-bottom:1.25em;
 margin-left:0;
-font-size:0.75em;
 }
 
 .theme-preset-button:after{
 content: none;
 }
 
 .theme-preset-preview{
-width:6em;
-height:6em;
+width:var(--theme-preset-preview-size);
+height:var(--theme-preset-preview-size);
 position: relative;
 }
 

src/css/variables.css

@@ -66,6 +66,7 @@
 --theme-preset-background-hotpepper-03:25,25,25;
 --theme-preset-background-hotpepper-04:25,25,25;
 --theme-preset-accent-hotpepper:25,25,25;
+--theme-preset-preview-size:6em;
 /* header */
 --header-area-width:100%;
 --header-shade-color:var(--theme-color-01);

src/index.html

@@ -1318,7 +1318,7 @@ <h1 class="menu-item-header-text">Presets</h1>
 <spanclass="theme-preset-background-04 theme-preset-background-nighttab-04"></span>
 <spanclass="theme-preset-accent theme-preset-accent-nighttab"></span>
 </div>
-<spanclass="button-text">nightTab</span>
+<spanclass="button-text small">nightTab</span>
 </button>
 </div>
 <divclass="button-wrap form-inline">
@@ -1330,7 +1330,7 @@ <h1 class="menu-item-header-text">Presets</h1>
 <spanclass="theme-preset-background-04 theme-preset-background-midnightblue-04"></span>
 <spanclass="theme-preset-accent theme-preset-accent-midnightblue"></span>
 </div>
-<spanclass="button-text">Midnight Blue</span>
+<spanclass="button-text small">Midnight Blue</span>
 </button>
 </div>
 <divclass="button-wrap form-inline">
@@ -1342,7 +1342,7 @@ <h1 class="menu-item-header-text">Presets</h1>
 <spanclass="theme-preset-background-04 theme-preset-background-bluegum-04"></span>
 <spanclass="theme-preset-accent theme-preset-accent-bluegum"></span>
 </div>
-<spanclass="button-text">Blue Gum</span>
+<spanclass="button-text small">Blue Gum</span>
 </button>
 </div>
 <divclass="button-wrap form-inline">
@@ -1354,7 +1354,7 @@ <h1 class="menu-item-header-text">Presets</h1>
 <spanclass="theme-preset-background-04 theme-preset-background-sharpmint-04"></span>
 <spanclass="theme-preset-accent theme-preset-accent-sharpmint"></span>
 </div>
-<spanclass="button-text">Sharp Mint</span>
+<spanclass="button-text small">Sharp Mint</span>
 </button>
 </div>
 <divclass="button-wrap form-inline">
@@ -1366,7 +1366,7 @@ <h1 class="menu-item-header-text">Presets</h1>
 <spanclass="theme-preset-background-04 theme-preset-background-snowblue-04"></span>
 <spanclass="theme-preset-accent theme-preset-accent-snowblue"></span>
 </div>
-<spanclass="button-text">Snow Blue</span>
+<spanclass="button-text small">Snow Blue</span>
 </button>
 </div>
 <divclass="button-wrap form-inline">
@@ -1378,7 +1378,7 @@ <h1 class="menu-item-header-text">Presets</h1>
 <spanclass="theme-preset-background-04 theme-preset-background-coralgreen-04"></span>
 <spanclass="theme-preset-accent theme-preset-accent-coralgreen"></span>
 </div>
-<spanclass="button-text">Coral Green</span>
+<spanclass="button-text small">Coral Green</span>
 </button>
 </div>
 <divclass="button-wrap form-inline">
@@ -1390,7 +1390,7 @@ <h1 class="menu-item-header-text">Presets</h1>
 <spanclass="theme-preset-background-04 theme-preset-background-purplegem-04"></span>
 <spanclass="theme-preset-accent theme-preset-accent-purplegem"></span>
 </div>
-<spanclass="button-text">Purple Gem</span>
+<spanclass="button-text small">Purple Gem</span>
 </button>
 </div>
 <divclass="button-wrap form-inline">
@@ -1402,7 +1402,7 @@ <h1 class="menu-item-header-text">Presets</h1>
 <spanclass="theme-preset-background-04 theme-preset-background-hotpepper-04"></span>
 <spanclass="theme-preset-accent theme-preset-accent-hotpepper"></span>
 </div>
-<spanclass="button-text">Hot Pepper</span>
+<spanclass="button-text small">Hot Pepper</span>
 </button>
 </div>
 </div>