Lay out the forms on a grid.
From the live site: the submission, login and add editor forms use a two-column CSS grid in place of floats.
This commit is contained in:
+69
-84
@@ -1,86 +1,78 @@
|
||||
#main form #title, #main form #author, #main form #email, #main form #comments, #main form #story, #main form #username, #main form #password, #main form #remember {
|
||||
border: 1px dashed #006633;
|
||||
display: block;
|
||||
width: 250px;
|
||||
float: left;
|
||||
margin-bottom: 5px;
|
||||
margin-top: 5px;
|
||||
padding-left: 2px;
|
||||
input {
|
||||
font-family: "Noto Sans", "Verdana", sans-serif;
|
||||
}
|
||||
#main form input#remember {
|
||||
margin-left: -2px;
|
||||
#main .grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(75px, 125px) auto;
|
||||
}
|
||||
#main .grid > .rightcolumn {
|
||||
margin-top: 5px;
|
||||
align-self: end;
|
||||
margin-bottom: 5px;
|
||||
display: flex;
|
||||
}
|
||||
#main .grid .rightcolumn > input {
|
||||
display: block;
|
||||
width: 300px;
|
||||
font-size: 12pt;
|
||||
border: 1px dashed #006633;
|
||||
border-radius: 8px;
|
||||
}
|
||||
#main .grid .rightcolumn input#remember {
|
||||
margin-top: 7px;
|
||||
width: initial;
|
||||
}
|
||||
|
||||
#main form #story {
|
||||
width: 450px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
#main form #htmloptions {
|
||||
#main .grid > label {
|
||||
display: block;
|
||||
float: left;
|
||||
width: auto;
|
||||
border: 1px solid #006633;
|
||||
margin-top: 5px;
|
||||
text-align: right;
|
||||
width: calc(100% - 20px);
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
#main form .submission {
|
||||
margin-top: 10px;
|
||||
margin-left: 120px;
|
||||
#main .grid #uploadparent {
|
||||
min-height: 300px;
|
||||
}
|
||||
#main form #preview, #submit, #delete, #login, #adduser {
|
||||
#main .grid #textparent {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
#main .submission button {
|
||||
border: 1px dashed #006633;
|
||||
background-color: #FFFFFF;
|
||||
font-weight: bold;
|
||||
margin-right: 5px;
|
||||
}
|
||||
#main form #hidden {
|
||||
#main .grid #hidden {
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 5px 0;
|
||||
width: initial;
|
||||
}
|
||||
|
||||
#main form label {
|
||||
display: block;
|
||||
float: left;
|
||||
margin-bottom: 5px;
|
||||
margin-top: 5px;
|
||||
text-align: right;
|
||||
width: 100px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
#main form>div {
|
||||
overflow: auto;
|
||||
width: 100%
|
||||
}
|
||||
#main form>div.textarea {
|
||||
#main .grid .textarea {
|
||||
width: inherit;
|
||||
}
|
||||
#main form>div.g-recaptcha {
|
||||
overflow: inherit;
|
||||
}
|
||||
br.clear {
|
||||
clear: both;
|
||||
|
||||
#main .grid textarea.submission {
|
||||
margin-top: 10px;
|
||||
border: 1px dotted #006633;
|
||||
border-radius: 8px;
|
||||
font-size: 12pt;
|
||||
}
|
||||
|
||||
.note {
|
||||
float: left;
|
||||
div.note {
|
||||
display: block;
|
||||
text-align: justify;
|
||||
font-size: 8pt;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
margin-left: 100px;
|
||||
padding-left: 20px;
|
||||
font-size: 10.5pt;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.textarea .note {
|
||||
margin-left: -20px;
|
||||
.textarea div.note {
|
||||
}
|
||||
|
||||
.in-note {
|
||||
text-align: justify;
|
||||
font-size: 8pt;
|
||||
font-size: 12pt;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
@@ -90,25 +82,32 @@ br.clear {
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
||||
div.textarea {
|
||||
margin-left: 120px;
|
||||
#main .tabs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.tab {
|
||||
#main .tab,
|
||||
#main .counter {
|
||||
display: block;
|
||||
float: left;
|
||||
margin-bottom: 5px;
|
||||
margin-top: 5px;
|
||||
text-align: right;
|
||||
width: 100px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
#main .tab {
|
||||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
padding-right: 20px;
|
||||
padding-left: 5px;
|
||||
background-color: #006633;
|
||||
clear: left;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
border-radius: 8px 0 0 8px;
|
||||
}
|
||||
/* WordCount */
|
||||
#main .counter {
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
#uploadparent {
|
||||
@@ -120,19 +119,6 @@ div.textarea {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/* WordCount */
|
||||
|
||||
.counter {
|
||||
display: block;
|
||||
float: left;
|
||||
margin-bottom: 5px;
|
||||
margin-top: 5px;
|
||||
text-align: right;
|
||||
width: 100px;
|
||||
padding-right: 20px;
|
||||
clear: left;
|
||||
font-size: 8pt;
|
||||
}
|
||||
.yes {
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -141,10 +127,9 @@ div.textarea {
|
||||
}
|
||||
|
||||
.required {
|
||||
display: inline-flex;
|
||||
align-self: center;
|
||||
color: red;
|
||||
position: relative;
|
||||
top: 0.6em;
|
||||
font-family: Times New Roman, serif;
|
||||
}
|
||||
|
||||
ul.error-box {
|
||||
@@ -162,16 +147,16 @@ ul.error-box li {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#main .grid div.g-recaptcha {
|
||||
overflow: inherit;
|
||||
margin-left: 120px;
|
||||
}
|
||||
#captcha #recaptcha_image {
|
||||
margin-left: 120px;
|
||||
border: 1px dotted #006633;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
#captcha .icons {
|
||||
position:relative;
|
||||
top:0.6em;
|
||||
}
|
||||
|
||||
.g-recaptcha {
|
||||
margin-left: 120px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user