mirror of
https://github.com/osmarks/mycorrhiza.git
synced 2025-01-31 11:29:09 +00:00
Make the toolbar more responsive
This commit is contained in:
parent
9eff38fdc4
commit
a33b9625aa
@ -113,7 +113,8 @@ func StreamDefaultCSS(qw422016 *qt422016.Writer) {
|
|||||||
qw422016.N().S(`
|
qw422016.N().S(`
|
||||||
`)
|
`)
|
||||||
//line assets/assets.qtpl:10
|
//line assets/assets.qtpl:10
|
||||||
qw422016.N().S(`.amnt-grid { display: grid; grid-template-columns: 1fr 1fr; }
|
qw422016.N().S(`
|
||||||
|
.amnt-grid { display: grid; grid-template-columns: 1fr 1fr; }
|
||||||
.upload-binary__input { display: block; margin: .25rem 0; }
|
.upload-binary__input { display: block; margin: .25rem 0; }
|
||||||
|
|
||||||
.modal__title { font-size: 2rem; }
|
.modal__title { font-size: 2rem; }
|
||||||
@ -174,15 +175,19 @@ header { width: 100%; margin-bottom: 1rem; }
|
|||||||
.header-links__entry:nth-of-type(1), .hypha-tabs__tab:nth-of-type(1) { margin-left: 2rem; }
|
.header-links__entry:nth-of-type(1), .hypha-tabs__tab:nth-of-type(1) { margin-left: 2rem; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Wide enough to fit two columns ok */
|
/* Wide enough to fit two columns ok */
|
||||||
@media screen and (min-width: 1100px) {
|
@media screen and (min-width: 1100px) {
|
||||||
.layout { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; margin: 0 1rem; row-gap: 1rem; }
|
.layout { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; margin: 0 1rem; row-gap: 1rem; }
|
||||||
.main-width { margin: 0; }
|
.main-width { margin: 0; }
|
||||||
main { grid-column: 1 / span 1; grid-row: 1 / span 2; }
|
main { grid-column: 1 / span 1; grid-row: 1 / span 2; }
|
||||||
.relative-hyphae { grid-column: 2 / span 1; grid-row: 1 / span 1; }
|
.relative-hyphae, .edit-toolbar { grid-column: 2 / span 1; grid-row: 1 / span 1; }
|
||||||
.layout-card { width: 100%; }
|
.layout-card { width: 100%; }
|
||||||
.edit-toolbar { margin: 0 0 0 auto; }
|
.edit-toolbar__buttons {display: grid; }
|
||||||
.edit-toolbar__buttons { display: grid; grid-template-columns: 1fr 1fr; }
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1150px) {
|
||||||
|
.edit-toolbar__buttons { grid-template-columns: 1fr 1fr; }
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 1250px) {
|
@media screen and (min-width: 1250px) {
|
||||||
@ -191,12 +196,17 @@ header { width: 100%; margin-bottom: 1rem; }
|
|||||||
.main-width { margin: 0 auto; }
|
.main-width { margin: 0 auto; }
|
||||||
.backlinks { grid-column: 1 / span 1; margin-right: 0; }
|
.backlinks { grid-column: 1 / span 1; margin-right: 0; }
|
||||||
main { grid-column: 2 / span 1; }
|
main { grid-column: 2 / span 1; }
|
||||||
.relative-hyphae { grid-column: 3 / span 1; margin-left: 0; }
|
.relative-hyphae, .edit-toolbar { grid-column: 3 / span 1; margin-left: 0; }
|
||||||
|
.edit-toolbar__buttons { grid-template-columns: 1fr; }
|
||||||
|
|
||||||
.backlinks__title { text-align: right; }
|
.backlinks__title { text-align: right; }
|
||||||
.backlinks__link { text-align: right; padding-right: 1.25rem; padding-left: .25rem; }
|
.backlinks__link { text-align: right; padding-right: 1.25rem; padding-left: .25rem; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1400px) {
|
||||||
|
.edit-toolbar__buttons { grid-template-columns: 1fr 1fr; }
|
||||||
|
}
|
||||||
|
|
||||||
*, *::before, *::after {box-sizing: border-box;}
|
*, *::before, *::after {box-sizing: border-box;}
|
||||||
html { height:100%; padding:0; }
|
html { height:100%; padding:0; }
|
||||||
body {height:100%; margin:0; }
|
body {height:100%; margin:0; }
|
||||||
@ -384,6 +394,8 @@ mark { background: rgba(130, 80, 30, 5); color: inherit; }
|
|||||||
.hypha-tabs { background-color: #232323; }
|
.hypha-tabs { background-color: #232323; }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
`)
|
`)
|
||||||
//line assets/assets.qtpl:10
|
//line assets/assets.qtpl:10
|
||||||
qw422016.N().S(`
|
qw422016.N().S(`
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
|
||||||
.amnt-grid { display: grid; grid-template-columns: 1fr 1fr; }
|
.amnt-grid { display: grid; grid-template-columns: 1fr 1fr; }
|
||||||
.upload-binary__input { display: block; margin: .25rem 0; }
|
.upload-binary__input { display: block; margin: .25rem 0; }
|
||||||
|
|
||||||
@ -59,15 +60,19 @@ header { width: 100%; margin-bottom: 1rem; }
|
|||||||
.header-links__entry:nth-of-type(1), .hypha-tabs__tab:nth-of-type(1) { margin-left: 2rem; }
|
.header-links__entry:nth-of-type(1), .hypha-tabs__tab:nth-of-type(1) { margin-left: 2rem; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Wide enough to fit two columns ok */
|
/* Wide enough to fit two columns ok */
|
||||||
@media screen and (min-width: 1100px) {
|
@media screen and (min-width: 1100px) {
|
||||||
.layout { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; margin: 0 1rem; row-gap: 1rem; }
|
.layout { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; margin: 0 1rem; row-gap: 1rem; }
|
||||||
.main-width { margin: 0; }
|
.main-width { margin: 0; }
|
||||||
main { grid-column: 1 / span 1; grid-row: 1 / span 2; }
|
main { grid-column: 1 / span 1; grid-row: 1 / span 2; }
|
||||||
.relative-hyphae { grid-column: 2 / span 1; grid-row: 1 / span 1; }
|
.relative-hyphae, .edit-toolbar { grid-column: 2 / span 1; grid-row: 1 / span 1; }
|
||||||
.layout-card { width: 100%; }
|
.layout-card { width: 100%; }
|
||||||
.edit-toolbar { margin: 0 0 0 auto; }
|
.edit-toolbar__buttons {display: grid; }
|
||||||
.edit-toolbar__buttons { display: grid; grid-template-columns: 1fr 1fr; }
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1150px) {
|
||||||
|
.edit-toolbar__buttons { grid-template-columns: 1fr 1fr; }
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 1250px) {
|
@media screen and (min-width: 1250px) {
|
||||||
@ -76,12 +81,17 @@ header { width: 100%; margin-bottom: 1rem; }
|
|||||||
.main-width { margin: 0 auto; }
|
.main-width { margin: 0 auto; }
|
||||||
.backlinks { grid-column: 1 / span 1; margin-right: 0; }
|
.backlinks { grid-column: 1 / span 1; margin-right: 0; }
|
||||||
main { grid-column: 2 / span 1; }
|
main { grid-column: 2 / span 1; }
|
||||||
.relative-hyphae { grid-column: 3 / span 1; margin-left: 0; }
|
.relative-hyphae, .edit-toolbar { grid-column: 3 / span 1; margin-left: 0; }
|
||||||
|
.edit-toolbar__buttons { grid-template-columns: 1fr; }
|
||||||
|
|
||||||
.backlinks__title { text-align: right; }
|
.backlinks__title { text-align: right; }
|
||||||
.backlinks__link { text-align: right; padding-right: 1.25rem; padding-left: .25rem; }
|
.backlinks__link { text-align: right; padding-right: 1.25rem; padding-left: .25rem; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1400px) {
|
||||||
|
.edit-toolbar__buttons { grid-template-columns: 1fr 1fr; }
|
||||||
|
}
|
||||||
|
|
||||||
*, *::before, *::after {box-sizing: border-box;}
|
*, *::before, *::after {box-sizing: border-box;}
|
||||||
html { height:100%; padding:0; }
|
html { height:100%; padding:0; }
|
||||||
body {height:100%; margin:0; }
|
body {height:100%; margin:0; }
|
||||||
@ -269,3 +279,5 @@ mark { background: rgba(130, 80, 30, 5); color: inherit; }
|
|||||||
.hypha-tabs { background-color: #232323; }
|
.hypha-tabs { background-color: #232323; }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user