Refactor.

Author: Maikuolan

assets/bluemetal/frontend.css

@@ -9,7 +9,6 @@ body,input,select,textarea,.idx{font-size:calc((12px * {magnification}) + .03vw)
 body{font-family:'Tahoma','Verdana','Noto Sans','Arial';letter-spacing:1px;text-decoration:none;border-style:none;margin:0;white-space:normal;background-color:#333;color:#cde;background-image:url(data:image/png;base64,{Base64Encode}{Asset:texture.png}{/Base64Encode});background-attachment:fixed}
 code{background-color:rgba(85,85,85,.5);color:#eee;vertical-align:0;display:inline-block;height:calc(1em + 2px)}
 hr{border-style:solid none none;border-width:1px;margin:5px 2px 0;padding:2px;color:#89b}
-img.ico{width:16px;height:16px;border:0;filter:hue-rotate(180deg) brightness(.8)}
 input[type=file]{margin:0;padding:0;border:none;background:none;width:auto}
 input,input[type=file]::file-selector-button,select,option,textarea{background-color:#345;border:none;color:#ccc;margin:2px;padding:2px}
 input,select{width:150px;background-repeat:no-repeat;background-position:top {FE_Align_Reverse}}
@@ -28,6 +27,7 @@ select:disabled,textarea:disabled,input:disabled{filter:grayscale(1) brightness(
 select:focus,textarea:focus,input:focus,select:hover,textarea:hover:not([readonly]),input:hover{filter:grayscale(0) brightness(1)}
 .mainbox{display:flex;flex-direction:row;gap:auto;flex-basis:100%;justify-content:center;align-items:stretch}
 nav{display:flex;flex-direction:column;gap:2px;justify-content:start;align-items:start;font-size:calc((14px * {magnification}) + .03vw);flex-basis:20%;flex-shrink:2;flex-grow:1;letter-spacing:calc(1px + .03vw)}
+nav:lang(ja){letter-spacing:-1px}
 nav a:not(.idx a){display:block}
 main{flex-basis:80%;flex-shrink:1;flex-grow:2}
 .subNav{display:block;text-align:center;font-size:calc((10px * {magnification}) + .03vw);color:rgba(204,221,238,.6);text-shadow:2px 2px 1px rgba(255,255,255,.2)}
@@ -42,7 +42,7 @@ a:hover,a:active,a:focus,.txtRd{color:#fca}
 .bNav{height:64px}
 .cat,.exp,.bNav,.gen,nav,.s,.tip,.txtGn,.txtOe,.txtRd,.spanner,a,input,input[type=file]::file-selector-button,select,textarea{font-weight:700}
 .ci,.co,.gen,.center{margin:auto}
-.ci,.co,.ng1,.ng2{width:calc(100% - 32px)}
+.ci,.co,.ng1:not(.quad .ng1,.duo .ng1,.col>.ng1),.ng2:not(.quad .ng2,.duo .ng2,.col>.ng2){width:calc(100% - 32px)}
 .ci{background-color:rgba(102,119,136,.5);text-align:{FE_Align};border-top-{FE_Align_Reverse}-radius:24px;padding:12px}
 .co,body,.center{text-align:center}
 .co,body{padding:0}
@@ -51,11 +51,10 @@ a:hover,a:active,a:focus,.txtRd{color:#fca}
 .gen,input,select,textarea{font-family:'Verdana','Arial','Helvetica'}
 .gen{letter-spacing:0;white-space:nowrap}
 .h1,.h1f,.h2,.h2f,.h3,.h3f,.h4,.h4f,.ng1,.ng2,.r,.rf,.spanner{margin:0;padding:4px}
-.h1,.h1f,.h2,.h2f,.r,.rf{width:25%}
+td.h1,td.h1f,td.h2,td.h2f,td.r,td.rf{width:25%}
 .h1,.h3,.spanner{background-color:rgba(102,119,136,.5)}
 .h2,.h4{background-color:rgba(85,102,119,.5)}
-.h3,.h3f,.h4,.h4f{width:50%}
-.nav:lang(ja){letter-spacing:-1px}
+td.h3,td.h3f,td.h4,td.h4f{width:50%}
 .ng1,.h1f,.h3f{background:linear-gradient({90deg},rgba(102,119,136,.5),#89a)}
 .ng2,.h2f,.h4f{background:linear-gradient({90deg},rgba(85,102,119,.5),#789)}
 .hFd:hover,.r{background-color:rgba(153,102,51,.6)}
@@ -82,7 +81,7 @@ input[id=homebutton]{border-top-{FE_Align_Reverse}-radius:0;border-bottom-{FE_Al
   .big,.dt{display:none}
   .mob{display:block}
   .tip,.bNav,.gen{float:none;height:auto;text-align:center}
-  .h1,.h1f,.h2,.h2f,.r,.rf{width:50%}
+  td.h1,td.h1f,td.h2,td.h2f,td.r,td.rf{width:50%}
 }
 .hB{background-color:rgba(0,0,0,.125)}
 .hW{background-color:rgba(255,255,255,.125)}
@@ -157,10 +156,13 @@ input[type=checkbox],input[type=radio]{accent-color:#89b}
 .clockSeconds{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:clockseconds.svg}{/Base64Encode});position:relative;inset:0 -32px}
 .clockFace{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:clockface.svg}{/Base64Encode});position:relative;inset:0 -48px}
 .col{display:flex;flex-direction:column;gap:2px;justify-content:start;align-items:start;flex-basis:100%;width:100%}
-.col>.ng1,.col>.ng2,.flexstretch{width:calc(100% - 10px)}
+.col>.ng1,.col>.ng2,.flexstretch,.spanner{width:calc(100% - 10px)}
 .configInitPos{transform:scaleY(0);transform-origin:top center;opacity:0;max-height:0;margin-top:-2px}
 .configOpenPos{transform:scaleY(1);transform-origin:top center;opacity:1;max-height:auto}
 .spanner+table,.toggleTable{margin:-2px -2px 0 -2px}
 .spanner+table~table{margin:-4px -2px 0 -2px}
-.col>form{display:contents}
+.col>form,.quad>form,.duo>form{display:contents}
 input[type=hidden],script{display:none}
+.quad{display:grid;gap:2px;grid-template-columns:repeat(4,1fr);justify-content:stretch;justify-items:stretch}
+.duo{display:grid;gap:2px;grid-template-columns:1fr 1fr;justify-content:stretch;justify-items:stretch}
+.col+.quad,.col+.duo,.quad+.col,.quad+.duo,.duo+.col,.duo+.quad{margin-top:2px;margin-{FE_Align_Reverse}:1px}

assets/default/_upload_test.html

@@ -8,7 +8,7 @@
       <div id="upload_fields" class="inline">
         <div class="spanner">
           <input type="button" onclick="javascript:more()" value="{field.More fields}" />
-          <input type="submit" value="{field.OK}" />
+          <input type="submit" class="auto" value="{field.OK}" />
         </div>
         <div class="spanner"><input type="file" name="upload_test[]" value="" /></div>
       </div>

assets/default/download.svg

@@ -9,7 +9,6 @@ body,input,select,textarea,.idx{font-size:calc((12px * {magnification}) + .03vw)
 body{font-family:'Tahoma','Verdana','Noto Sans','Arial';letter-spacing:1px;text-decoration:none;border-style:none;margin:0;white-space:normal;background-color:#ccc;color:#033}
 code{vertical-align:0;display:inline-block;height:calc(1em + 2px)}
 hr{border-style:solid none none;border-width:1px;margin:5px 2px 0;padding:2px;color:rgba(153,0,0,.6)}
-img.ico{width:16px;height:16px;border:0}
 input[type=file]{margin:0;padding:0;border:none;background:none;width:auto}
 input,input[type=file]::file-selector-button,select,option,textarea{background-color:#ffe;border:1px solid #900;color:#033;margin:2px;padding:2px}
 input,select{width:150px;background-repeat:no-repeat;background-position:top {FE_Align_Reverse}}
@@ -28,6 +27,7 @@ select:disabled,textarea:disabled,input:disabled{filter:grayscale(1) brightness(
 select:focus,textarea:focus,input:focus,select:hover,textarea:hover:not([readonly]),input:hover{filter:grayscale(0) brightness(1)}
 .mainbox{display:flex;flex-direction:row;gap:auto;flex-basis:100%;justify-content:center;align-items:stretch}
 nav{display:flex;flex-direction:column;gap:2px;justify-content:start;align-items:start;font-size:calc((14px * {magnification}) + .03vw);flex-basis:20%;flex-shrink:2;flex-grow:1;letter-spacing:calc(1px + .03vw)}
+nav:lang(ja){letter-spacing:-1px}
 nav a:not(.idx a){display:block}
 main{flex-basis:80%;flex-shrink:1;flex-grow:2}
 .subNav{display:block;text-align:center;font-size:calc((10px * {magnification}) + .03vw);color:rgba(0,51,51,.6);text-shadow:2px 2px 1px rgba(0,0,0,.2)}
@@ -43,7 +43,7 @@ a:active,a:focus{color:red}
 .bNav{height:64px}
 .cat,.exp,.bNav,.gen,nav,.s,.tip,.txtGn,.txtOe,.txtRd,.spanner,a,input,input[type=file]::file-selector-button,select,textarea{font-weight:700}
 .ci,.co,.gen,.center{margin:auto}
-.ci,.co,.ng1,.ng2{width:calc(100% - 32px)}
+.ci,.co,.ng1:not(.quad .ng1,.duo .ng1,.col>.ng1),.ng2:not(.quad .ng2,.duo .ng2,.col>.ng2){width:calc(100% - 32px)}
 .ci{background-color:#fff;border-style:solid;border-width:1px;border-color:#aaa;text-align:{FE_Align};border-top-{FE_Align_Reverse}-radius:24px;padding:12px}
 .co,body,.center{text-align:center}
 .co,body{padding:0}
@@ -52,13 +52,12 @@ a:active,a:focus{color:red}
 .gen,input,select,textarea{font-family:'Verdana','Arial','Helvetica'}
 .gen{letter-spacing:0;white-space:nowrap}
 .h1,.h1f,.h2,.h2f,.h3,.h3f,.h4,.h4f,.ng1,.ng2,.r,.rf,.spanner{margin:0;padding:4px;border-style:{Half_Border};border-width:1px;border-color:#999}
-.h1,.h1f,.h2,.h2f,.r,.rf{width:25%}
+td.h1,td.h1f,td.h2,td.h2f,td.r,td.rf{width:25%}
 .h1,.h3,.spanner{background-color:#eee}
 .h2,.h4,code{background-color:#ddd}
-.h3,.h3f,.h4,.h4f{width:50%}
+td.h3,td.h3f,td.h4,td.h4f{width:50%}
 .icon48x48,input,select{background-repeat:no-repeat}
 .icon48x48{background-image:url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEAAAAAAAD/7gAOQWRvYmUAZAAAAAAB/9sAQwAGBAQEBQQGBQUGCQYFBgkLCAYGCAsMCgoLCgoMEAwMDAwMDBAMDg8QDw4MExMUFBMTHBsbGxwfHx8fHx8fHx8f/9sAQwEHBwcNDA0YEBAYGhURFRofHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8f/8IAEQgAMAAwAwERAAIRAQMRAf/EABsAAAIDAAMAAAAAAAAAAAAAAAUHAgQGAAED/8QAJBAAAgICAQIHAQAAAAAAAAAAAgMBBAAFEVASECEyExQ0FQb/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/EAC8RAAECBQEFBwQDAAAAAAAAAAECAwARITESBBBRYYEiQZGxMlJyE6HB4WIjM3P/xAAUEgEAAAAAAAAAAAAAAAAAAABQ/8QAJxMBAAICAQMEAwADAQAAAAAAAREhADFBUWFxEIGRsVChwSAwQOH/2gAMAwEAAhADEAAAAWoRFWADcm8KhSFWWgaPEEEEW6gjWoz1GHSLFapvzUHkUEDLiRpBw4QKZbBgXP/aAAgBAQABBQLCKBjb7a+Vgb+wCdN/RE9uOtITLrVN6djfm2Xzan5YVTKqE8hZ+2wBnN1AjdwgIFpaDU2/Kyfq24si3rw7revrcoqJ9mtdWRLASszfot2S6okt2vOTDwKeIqIhWEtZSsOy3n//2gAIAQIAAQUC6J//2gAIAQMAAQUC6J//2gAIAQICBj8CE//aAAgBAwIGPwIT/9oACAEBAQY/AomTIC5hTYK9O0PKmqSRvPbWMm9S4k+6Y7jA0usAS8r+twWV+dgDipTtQnwhSA6OdLV4Q30fGlpOCROZ5mDp8JvGWPSOnecr1hepFCyQpB4i/wBDCSbkQP8AP7wAROClNAANjelABccBU8hIuB4UEIdR5VgEc4QfUkjuMGM1WcGaPbCNyeo8oc1Sul7VTxVfFvshtr0JAgKTVbZyA37xFAQ0fMo0nwEOuIImwtSGG+CaGvGHW3JtrwUmRpWPgeSAtlKCnH0kU2zvC5CQWrI3qTc1iakgkWJEOvmf8nSQf1tLZ//aAAgBAQMBPyHEphSlAYuoKzhjV9GeZmpvMo50/wCTfonHonxb9A8HAGFJLWUN9R1ylIslEdWFy1u0QiGRF4cPjWVXjO5aYOagCnkx19Pt/wCcgnAck7vBgKEd8BWDbmjvEYTM8uxn6kKxOCW0N5B/uP236xSMH8qQ+s7tJehbHVoaEumOZrBP1I60c98FOgGxr3BxXI0mYP66XA7CIBK/KFZMwLE+UPTXODLrgD5cSIcAADRR6O4JdN/WD34mVtQpiemCNHAU+cFzMEFEJkYum79P/9oACAECAwE/Ifwn/9oACAEDAwE/Ifwn/9oADAMBAAIRAxEAABCRISDJBdLjNZSNaCSST//aAAgBAQMBPxDEvKRANquK3kMPksIFhw+cHjEMNxqcb2yhxlXOa3dqehzjKzIEoUPB3zhm/wAQ4gttgUHojnn+ojEK65/auEu0nSrtS8RWmFFnzVCkcbPMZ2cl8gpzhNiUe2AELahCTLfkPbEDhvAiXAASkB3cghtnBpJFiSQmWMnVvshCAThJxNko8K+P1wptCHtT+Z5QdRUvmeJPC6BQcmki4h4w9Y8MKgvDJjiGocbVRCJPIOFt74p8LgCi7qjuGAUxCCMpML4A8xgHRJ0TPXNnRAVa2xdDT2jhLhi9PBOjIuziMaamA24IA4Cj0amMAB2QmLVvJGpAo5Wg2k9ms635gSaQpeIpxsgEWEPIL09P/9oACAECAwE/EP8AYf5H/F//2gAIAQMDAT8Q/Cf/2Q==);background-position:center;width:48px;height:48px;margin:auto}
-.nav:lang(ja){letter-spacing:-1px}
 .ng1,.h1f,.h3f{background:linear-gradient({90deg},#eee,#ccc)}
 .ng2,.h2f,.h4f{background:linear-gradient({90deg},#ddd,#bbb)}
 .hFd:hover,.r{background-color:#fda}
@@ -86,7 +85,7 @@ input[id=homebutton]{border-top-{FE_Align_Reverse}-radius:0;border-bottom-{FE_Al
   .big,.dt{display:none}
   .mob{display:block}
   .tip,.bNav,.gen{float:none;height:auto;text-align:center}
-  .h1,.h1f,.h2,.h2f,.r,.rf{width:50%}
+  td.h1,td.h1f,td.h2,td.h2f,td.r,td.rf{width:50%}
 }
 .hB{background-color:rgba(0,0,0,.125)}
 .hW{background-color:rgba(255,255,255,.125)}
@@ -149,7 +148,6 @@ input[type=button].reset:hover,input[type=button].reset:active{color:#f88}
 .txtGn::selection,.txtGn>*:not(.txtOe,.txtRd)::selection{color:#dfc}
 .txtOe::selection,.txtOe>*:not(.txtGn,.txtRd)::selection{color:#fec}
 .txtRd::selection,.txtRd>*:not(.txtGn,.txtOe)::selection{color:#fcc}
-input[type=file]::file-selector-button{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:folder.svg}{/Base64Encode});padding-{FE_Align}:20px;background-repeat:no-repeat;background-position:top 1px {FE_Align} 4px}
 .flexrow{display:flex;flex-direction:row}
 .flexin{margin-{FE_Align}:-1px;margin-{FE_Align_Reverse}:1px;width:auto;flex-grow:1}
 .comCat::before,.showlink::before,.shownlink::before,.unshownlink::before{filter:invert(14%) sepia(55%) saturate(1277%) hue-rotate(142deg) brightness(94%) contrast(101%)}
@@ -162,10 +160,13 @@ input[type=checkbox],input[type=radio]{accent-color:#900}
 .clockSeconds{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:clockseconds.svg}{/Base64Encode});position:relative;inset:0 -32px}
 .clockFace{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:clockface.svg}{/Base64Encode});position:relative;inset:0 -48px}
 .col{display:flex;flex-direction:column;gap:2px;justify-content:start;align-items:start;flex-basis:100%;width:100%}
-.col>.ng1,.col>.ng2,.flexstretch{width:calc(100% - 10px)}
+.col>.ng1,.col>.ng2,.flexstretch,.spanner{width:calc(100% - 10px)}
 .configInitPos{transform:scaleY(0);transform-origin:top center;opacity:0;max-height:0;margin-top:-2px}
 .configOpenPos{transform:scaleY(1);transform-origin:top center;opacity:1;max-height:auto}
 .spanner+table,.toggleTable{margin:-2px -2px 0 -2px}
 .spanner+table~table{margin:-4px -2px 0 -2px}
-.col>form{display:contents}
+.col>form,.quad>form,.duo>form{display:contents}
 input[type=hidden],script{display:none}
+.quad{display:grid;gap:2px;grid-template-columns:repeat(4,1fr);justify-content:stretch;justify-items:stretch}
+.duo{display:grid;gap:2px;grid-template-columns:1fr 1fr;justify-content:stretch;justify-items:stretch}
+.col+.quad,.col+.duo,.quad+.col,.quad+.duo,.duo+.col,.duo+.quad{margin-top:2px;margin-{FE_Align_Reverse}:1px}

assets/default/folder.svg

@@ -8,7 +8,6 @@ body,input,select,textarea{max-width:100%}
 body,input,select,textarea,.idx{font-size:calc((12px * {magnification}) + .03vw)}
 body{font-family:'Tahoma','Verdana','Noto Sans','Arial';letter-spacing:1px;text-decoration:none;border-style:none;margin:0;white-space:normal;background-color:#36393b;color:#c5bc8e;background-image:url('?phpmussel-asset=moon.jpg&theme={theme}');background-repeat:no-repeat;background-attachment:fixed;background-position:center center}
 hr{border-style:solid none none;border-width:1px;margin:5px 2px 0;padding:2px;color:#aaa}
-img.ico{width:16px;height:16px;border:0}
 input[type=file]{margin:0;padding:0;border:none;background:none;width:auto}
 input,input[type=file]::file-selector-button,select,option,textarea{background-color:rgba(54,57,59,.7);border:1px solid #aaa;color:#c5bc8e;margin:2px;padding:2px}
 input,select{width:150px;background-repeat:no-repeat;background-position:top {FE_Align_Reverse}}
@@ -27,6 +26,7 @@ select:disabled,textarea:disabled,input:disabled{filter:grayscale(1) brightness(
 select:focus,textarea:focus,input:focus,select:hover,textarea:hover:not([readonly]),input:hover{filter:grayscale(0) brightness(1)}
 .mainbox{display:flex;flex-direction:column;gap:0;width:100%;justify-content:center;align-items:start}
 nav{display:flex;flex-direction:column;gap:0;justify-content:center;align-items:center;align-self:stretch;border-style:none none solid;border-width:1px;border-color:#aaa}
+nav:lang(ja){letter-spacing:-1px}
 nav a{display:inline}
 .subNav,nav .big{display:none}
 main{align-self:stretch}
@@ -39,7 +39,7 @@ a:link,a:visited{color:#eee6ab}
 a:hover,a:active,a:focus{color:#fff7bc}
 .cat,.exp,.gen,nav,.s,.txtGn,.txtOe,.txtRd,.spanner,a,input,input[type=file]::file-selector-button,select,textarea{font-weight:700}
 .ci,.co,.gen,.center{margin:auto}
-.ci,.co,.ng1:not(nav .ng1),.ng2:not(nav .ng2){width:calc(100% - 32px)}
+.ci,.co,.ng1:not(nav .ng1,.quad .ng1,.duo .ng1,.col>.ng1),.ng2:not(nav .ng2,.quad .ng2,.duo .ng2,.col>.ng2){width:calc(100% - 32px)}
 .ci{background-color:rgba(69,84,75,.5);border-style:solid;border-width:1px;border-color:#aaa;text-align:{FE_Align};border-top-{FE_Align_Reverse}-radius:24px;padding:12px}
 .co,body,.center{text-align:center}
 .co,body{padding:0}
@@ -49,10 +49,10 @@ a:hover,a:active,a:focus{color:#fff7bc}
 .gen,input,select,textarea{font-family:'Verdana','Arial',Helvetica}
 .gen{letter-spacing:0;white-space:nowrap}
 .h1,.h1f,.h2,.h2f,.h3,.h3f,.h4,.h4f,.ng1:not(nav .ng1),.ng2:not(nav .ng2),.r,.rf,.spanner{margin:0;padding:4px;border-style:{Half_Border};border-width:1px;border-color:#999}
-.h1,.h1f,.h2,.h2f,.r,.rf{width:25%}
+td.h1,td.h1f,td.h2,td.h2f,td.r,td.rf{width:25%}
 .h1,.h3,.spanner{background-color:rgba(103,106,109,.5)}
 .h2,.h4,code{background-color:rgba(86,89,92,.5)}
-.h3,.h3f,.h4,.h4f{width:50%}
+td.h3,td.h3f,td.h4,td.h4f{width:50%}
 code,nav{font-family:'Courier New','Courier','Arial'}
 .ng1:not(nav .ng1),.h1f,.h3f{background:linear-gradient({90deg},rgba(103,106,109,.5),#555)}
 .ng2:not(nav .ng2),.h2f,.h4f{background:linear-gradient({90deg},rgba(86,89,92,.5),#444)}
@@ -79,7 +79,7 @@ input[id=homebutton]{border-top-{FE_Align_Reverse}-radius:0;border-bottom-{FE_Al
   .big,.dt{display:none}
   .mob{display:block}
   .gen{float:none;height:auto;text-align:center}
-  .h1,.h1f,.h2,.h2f,.r,.rf{width:50%}
+  td.h1,td.h1f,td.h2,td.h2f,td.r,td.rf{width:50%}
   nav{border-style:none}
 }
 .hB{background-color:rgba(0,0,0,.125)}
@@ -154,10 +154,13 @@ input[type=checkbox],input[type=radio]{accent-color:#cca}
 .clockSeconds{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:clockseconds.svg}{/Base64Encode});position:relative;inset:0 -32px}
 .clockFace{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:clockface.svg}{/Base64Encode});position:relative;inset:0 -48px}
 .col{display:flex;flex-direction:column;gap:2px;justify-content:start;align-items:start;flex-basis:100%;width:100%}
-.col>.ng1,.col>.ng2,.flexstretch{width:calc(100% - 10px)}
+.col>.ng1,.col>.ng2,.flexstretch,.spanner{width:calc(100% - 10px)}
 .configInitPos{transform:scaleY(0);transform-origin:top center;opacity:0;max-height:0;margin-top:-2px}
 .configOpenPos{transform:scaleY(1);transform-origin:top center;opacity:1;max-height:auto}
 .spanner+table,.toggleTable{margin:-2px -2px 0 -2px}
 .spanner+table~table{margin:-4px -2px 0 -2px}
-.col>form{display:contents}
+.col>form,.quad>form,.duo>form{display:contents}
 input[type=hidden],script{display:none}
+.quad{display:grid;gap:2px;grid-template-columns:repeat(4,1fr);justify-content:stretch;justify-items:stretch}
+.duo{display:grid;gap:2px;grid-template-columns:1fr 1fr;justify-content:stretch;justify-items:stretch}
+.col+.quad,.col+.duo,.quad+.col,.quad+.duo,.duo+.col,.duo+.quad{margin-top:2px;margin-{FE_Align_Reverse}:1px}