diff --git a/index.html b/index.html
index e6b53cb..67236e1 100644
--- a/index.html
+++ b/index.html
@@ -21,10 +21,10 @@
font-family: arial;
}
.wrapper {
- width: 800px;
- margin: auto;
display: flex;
flex-direction: column;
+ margin: auto;
+ width: 800px;
}
.section {
margin: 10px 0;
@@ -37,7 +37,8 @@
clear: both;
margin-bottom: 1px;
}
- .section, .sub-section {
+ .section,
+ .sub-section {
width: 100%;
}
.column {
@@ -56,46 +57,77 @@
p {
margin: 20px 0;
}
- .table { display: table; width: 100%; margin: 10px 0 0;}
- .table-row { display: table-row; width: 100%; }
- .table-cell { display: table-cell; padding: 5px 0;}
- .table-cell:first-child { width: 30%; }
- .table-cell:last-child { width: 70%; }
- .table-cell:first-child label {font-weight: bold; }
- .table-cell:last-child label { margin-right: 10px; }
- .nested-table { margin: 0; }
- .nested-table .table-cell { font-size: .9em; color: #666; width: 200px; }
- .nested-table .table-cell:first-child { }
- #format-caption-container div {
- display: none;
+ .table {
+ display: table;
+ margin: 10px 0 0;
width: 100%;
- padding: 10px 0 15px;
+ }
+ .table-row {
+ display: table-row;
+ width: 100%;
+ }
+ .table-cell {
+ display: table-cell;
+ padding: 5px 0;
+ }
+ .table-cell:first-child {
+ width: 30%;
+ }
+ .table-cell:last-child {
+ width: 70%;
+ }
+ .table-cell:first-child label {
+ font-weight: bold;
+ }
+ .table-cell:last-child label {
+ margin-right: 10px;
+ }
+ .nested-table {
+ margin: 0;
+ }
+ .nested-table .table-cell {
+ color: #666;
+ font-size: .9em;
+ width: 200px;
+ }
+ .nested-table .table-cell:first-child { }
+
+ #format-caption-container div {
+ color: #505050;
+ display: none;
font-size: .9em;
line-height: 1.4em;
- color: #505050;
+ padding: 10px 0 15px;
+ width: 100%;
}
.byte-input {
- min-width: 360px;
min-height: 160px;
+ min-width: 360px;
}
.code-output {
- width: 100%;
height: 200px;
+ width: 100%;
}
- .note { color: #666666; margin: 3px 0; font-size: .9em; line-height: 1.4em; }
- button, input[type="file"]::-webkit-file-upload-button {
- margin: 10px 0;
- background: #00CB99;
- border: none;
- padding: 4px 8px;
- color: #fff;
- font-weight: 100;
+ .note {
+ color: #666666;
font-size: .9em;
+ line-height: 1.4em;
+ margin: 3px 0;
+ }
+ button,
+ input[type="file"]::-webkit-file-upload-button {
+ background: #00CB99;
border-radius: 3px;
+ border: none;
+ color: #fff;
+ font-size: .9em;
+ font-weight: 100;
+ margin: 10px 0;
+ padding: 4px 8px;
}
input[type="file"]::-webkit-file-upload-button {
- padding: 6px 20px;
font-size: 1.6em;
+ padding: 6px 20px;
}
.generate-button {
margin: 40px 0 20px;
@@ -105,29 +137,47 @@
padding: 1px 4px;
}
.file-info {
- font-size: .7em;
color: #505050;
+ font-size: .7em;
margin-left: 20px;
- white-space: pre;
max-width: 300px;
+ white-space: pre;
+ }
+ .size-input{
+ width: 45px;
+ }
+ .glyph-input {
+ width: 80px;
+ margin-left: 10px;
+ }
+ #image-size-settings {
+ list-style-type: none;
+ }
+ #image-size-settings li {
+ margin: 4px 0;
}
- .size-input{ width: 45px; }
- .glyph-input { width: 80px; margin-left: 10px; }
- #image-size-settings { list-style-type: none; }
- #image-size-settings li { margin: 4px 0; }
#images-canvas-container canvas {
border: 3px solid #88DAC5;
margin: 10px 15px;
}
#images-canvas-container {
+ align-items: flex-start;
display: flex;
flex-wrap: wrap;
- align-items: flex-start;
}
#extra-settings-container { }
- #arduino-identifier, #adafruit-gfx-settings, #all-same-size { display: none; }
- .msg { font-size: 1.2em; }
- .error-msg { color: #ff0000; display: none; }
+ #arduino-identifier,
+ #adafruit-gfx-settings,
+ #all-same-size {
+ display: none;
+ }
+ .msg {
+ font-size: 1.2em;
+ }
+ .error-msg {
+ color: #ff0000;
+ display: none;
+ }