index.templ.html (3991B)
1 <!DOCTYPE html> 2 <html class="no-js"> 3 4 <head> 5 @(head-content) 6 <link href="/manifest.json" rel="manifest" /> 7 <style> 8 html { 9 font-family: sans-serif; 10 font-size: 20px; 11 background: linear-gradient(#ddd, #777); 12 min-height: 100vh; 13 } 14 15 html.no-js { 16 background: #ddd; 17 } 18 19 html.no-js>body>header { 20 opacity: 1; 21 } 22 23 html.no-js>body>* { 24 opacity: 0.5; 25 pointer-events: none; 26 } 27 28 #no-js-message { 29 display: none; 30 background: black; 31 color: white; 32 } 33 34 html.no-js #no-js-message { 35 display: block; 36 } 37 38 body { 39 margin: 0; 40 padding: 0; 41 display: flex; 42 flex-direction: column; 43 } 44 45 h1, 46 h2, 47 h3, 48 h4, 49 p { 50 margin-top: 0.5rem; 51 margin-bottom: 0.5rem; 52 } 53 54 header h1 { 55 font-size: 1.5rem; 56 } 57 58 header h2 { 59 font-size: 1.2rem; 60 } 61 62 input, 63 button { 64 font-size: 1rem; 65 outline: solid 1px #bbb; 66 border: none; 67 } 68 69 #controls { 70 display: flex; 71 flex-wrap: wrap; 72 } 73 74 .margined { 75 margin: 0.5rem 1rem; 76 } 77 78 .padded { 79 padding: 0.25rem; 80 } 81 82 .rounded { 83 border-radius: 0.2rem; 84 } 85 86 #thebutton { 87 font-size: 1rem; 88 } 89 90 #renderzone { 91 display: flex; 92 flex-wrap: wrap; 93 margin: 0 0.75rem; 94 } 95 96 .renderblock { 97 flex-grow: 1; 98 box-sizing: border-box; 99 min-width: 25%; 100 padding: 2rem 3rem; 101 display: flex; 102 flex-direction: column; 103 margin: 0.25rem; 104 } 105 106 .renderblock button { 107 outline: none; 108 border: none; 109 border-radius: 0.2rem; 110 padding: 0.15rem 0.5rem 0.3rem; 111 font-size: 1rem; 112 width: 5rem; 113 margin: 0.5rem 0; 114 cursor: pointer; 115 transition: transform 0.1s; 116 } 117 118 .renderblock button:active { 119 transform: scale(0.95); 120 } 121 122 @media (max-width: 600px) { 123 html { 124 font-size: 18px; 125 } 126 127 .margined { 128 margin: 0.5rem; 129 } 130 131 #renderzone { 132 margin: 0.5em; 133 } 134 135 .renderblock { 136 margin: 0.25em 0; 137 } 138 139 label { 140 width: 100%; 141 } 142 } 143 </style> 144 <script type="module" src="shared/js/swatchbuckler.js"></script> 145 </head> 146 147 <body> 148 <header class="margined"> 149 <h1>swatchbuckler 🗡</h1> 150 <h2>generate foreground/background pairs from a midtone</h2> 151 <div id="no-js-message" class="padded rounded"> 152 This page requires JS to function. 153 </div> 154 </header> 155 <div id="controls"> 156 <label class="margined"> 157 <div>starting color<br /><small>choose a midtone</small></div> 158 <input id="midcolor" class="padded rounded" value="steelblue" /> 159 </label> 160 <label class="margined"> 161 <div>minimum contrast<br /><small>for normal text, AAA is 7, AA is 4.5</small></div> 162 <input type="number" id="mincontrast" class="padded rounded" value="7" /> 163 </label> 164 <label class="margined"> 165 <div>message<br /><small>optional heading for each swatch</small></div> 166 <input id="msg" class="padded rounded" value="example text" /> 167 </label> 168 </div> 169 <div class="margined"> 170 <button id="thebutton" class="padded rounded">generate</button> 171 </div> 172 <div id="renderzone" class="margined"></div> 173 </body> 174 175 </html>