update intro text, move files around

css/style.css

@@ -0,0 +1,226 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+body{
+  font-family: arial;
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  margin: auto;
+  width: 900px;
+}
+
+.section {
+  margin: 10px 0;
+}
+
+.bottom-divider {
+  border-bottom: 2px solid #000000;
+  padding-bottom: 20px;
+}
+
+.sub-section {
+  clear: both;
+  margin-bottom: 1px;
+}
+
+.section,
+.sub-section {
+  width: 100%;
+}
+
+.column {
+  float: left;
+}
+
+.column-center {
+  min-width: 160px;
+  text-align: center;
+}
+
+.column-right {
+  float: right;
+}
+
+.sub-section-title {
+  margin: 0 0 10px;
+}
+
+p {
+  margin: 20px 0;
+}
+
+.table {
+  display: table;
+  margin: 10px 0 0;
+  width: 100%;
+}
+
+.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;
+}
+
+#format-caption-container div {
+  color: #505050;
+  display: none;
+  font-size: .9em;
+  line-height: 1.4em;
+  padding: 10px 0 15px;
+  width: 100%;
+}
+
+.upload-note {
+  max-width: 300px;
+}
+
+.byte-input {
+  min-height: 160px;
+  min-width: 360px;
+}
+
+.code-output {
+  height: 200px;
+  width: 100%;
+}
+
+.note {
+  color: #666666;
+  font-size: .9em;
+  line-height: 1.4em;
+  margin: 3px 0;
+}
+
+.file-input-entry {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+button,
+input[type="file"] {
+  background: #00CB99;
+  border-radius: 3px;
+  border: none;
+  color: #fff;
+  font-size: .9em;
+  font-weight: bold;
+  margin: 10px 0;
+  padding: 4px 8px;
+}
+
+input[type="file"] {
+  font-size: 1.0em;
+  padding: 6px 20px;
+}
+
+.generate-button {
+  margin: 40px 0 20px;
+}
+
+.remove-button {
+  margin: 0 0 0 10px;
+  padding: 1px 4px;
+}
+
+.file-info {
+  color: #505050;
+  font-size: .7em;
+  margin-left: 20px;
+  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;
+}
+
+#images-canvas-container canvas {
+  border: 3px solid #88DAC5;
+  margin: 10px 15px;
+}
+
+#images-canvas-container {
+  align-items: flex-start;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+#arduino-identifier,
+#adafruit-gfx-settings,
+#all-same-size {
+  display: none;
+}
+
+.msg {
+  font-size: 1.2em;
+}
+
+.error-msg {
+  color: #ff0000;
+  display: none;
+}
+
+h1{
+  padding: 10px;
+  color: white;
+  background-color: #00cb99;
+}
+
+.sp-block {
+  border: 1px solid rgb(65, 65, 65);
+  padding: .5rem;
+  border-radius: 1rem;
+}
+.sp-btn {
+  display: block;
+  margin-top: .5rem;
+}