mirrors/mycorrhiza
1
0
Fork 0
mirror of https://github.com/osmarks/mycorrhiza.git synced 2024-10-30 03:36:16 +00:00
Code Issues Releases Wiki Activity

Make visual layout better

Browse Source
This commit is contained in:
bouncepaw 2021-02-19 21:56:31 +05:00
parent d9cc757546
commit 20ef0fade4
3 changed files with 43 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
main.go
View File

@ -33,7 +33,7 @@ func HttpErr(w http.ResponseWriter, status int, name, title, errMsg string) {
base( base(
title, title,
fmt.Sprintf( fmt.Sprintf(
`<main><p>%s. <a href="/page/%s">Go back to the hypha.<a></p></main>`, `<main class="main-width"><p>%s. <a href="/page/%s">Go back to the hypha.<a></p></main>`,
errMsg, errMsg,
name, name,
), ),

31
templates/asset.qtpl.go
View File

@ -25,6 +25,7 @@ func StreamDefaultCSS(qw422016 *qt422016.Writer) {
//line templates/asset.qtpl:2 //line templates/asset.qtpl:2
qw422016.N().S(`/* General element positions, from small to big */ qw422016.N().S(`/* General element positions, from small to big */
/* Phones and whatnot */ /* Phones and whatnot */
.layout { display: grid; row-gap: 1rem; }
header { width: 100%; margin-bottom: 1rem; } header { width: 100%; margin-bottom: 1rem; }
.header-links__list, .hypha-tabs__flex { margin: 0; padding: 0; display: flex; flex-wrap: wrap; } .header-links__list, .hypha-tabs__flex { margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.header-links__entry, .hypha-tabs__tab { list-style-type: none; } .header-links__entry, .hypha-tabs__tab { list-style-type: none; }
@ -38,10 +39,12 @@ header { width: 100%; margin-bottom: 1rem; }
.hypha-tabs__link { display: inline-block; padding: .25rem; text-decoration: none; } .hypha-tabs__link { display: inline-block; padding: .25rem; text-decoration: none; }
.hypha-tabs__selection { display: inline-block; padding: .25rem; font-weight: bold; } .hypha-tabs__selection { display: inline-block; padding: .25rem; font-weight: bold; }
.relative-hyphae { margin-top: .5rem; } .layout-card li { list-style-type: none; }
.relative-hyphae li { list-style-type: none; } .backlinks__list { padding: 0; margin: 0; }
.backlinks__link { text-decoration: none; display: block; padding: .25rem; padding-left: 1.25rem; }
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
.layout { grid-template-column: auto; grid-template-row: auto auto auto; }
.main-width { width: 100%; } .main-width { width: 100%; }
main { padding: 1rem; margin: 0; } main { padding: 1rem; margin: 0; }
} }
@ -50,7 +53,7 @@ header { width: 100%; margin-bottom: 1rem; }
@media screen and (min-width: 801px) { @media screen and (min-width: 801px) {
.main-width { padding: 1rem 2rem; width: 800px; margin: 0 auto; } .main-width { padding: 1rem 2rem; width: 800px; margin: 0 auto; }
main { border-radius: .25rem; } main { border-radius: .25rem; }
.relative-hyphae { margin: .5rem auto 0 auto; } .layout-card { width: 800px; margin: 0 auto; }
.header-links { padding: 0; } .header-links { padding: 0; }
.header-links__entry { margin-right: 1.5rem; } .header-links__entry { margin-right: 1.5rem; }
@ -65,18 +68,24 @@ header { width: 100%; margin-bottom: 1rem; }
} }
/* Wide enough to fit two columns ok */ /* Wide enough to fit two columns ok */
@media screen and (min-width: 1200px) { @media screen and (min-width: 1100px) {
.layout { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; margin: 0 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; min-width: 10rem; max-width: 18rem; margin: 0 auto 0 0; } .relative-hyphae { grid-column: 2 / span 1; grid-row: 1 / span 1; }
.layout-card { width: 100%; }
} }
@media screen and (min-width: 1300px) { @media screen and (min-width: 1250px) {
.layout { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } .layout { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.layout-card { max-width: 16rem; }
.main-width { margin: 0 auto; } .main-width { margin: 0 auto; }
.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; } .relative-hyphae { grid-column: 3 / span 1; margin-left: 0; }
.backlinks__title { text-align: right; }
.backlinks__link { text-align: right; padding-right: 1.25rem; padding-left: .25rem; }
} }
*, *::before, *::after {box-sizing: border-box;} *, *::before, *::after {box-sizing: border-box;}
@ -175,7 +184,7 @@ caption { caption-side: top; font-size: small; }
.navitree > .navitree__trunk { border-left: none; } .navitree > .navitree__trunk { border-left: none; }
.navitree > .navitree__trunk > a { font-weight: bold; } .navitree > .navitree__trunk > a { font-weight: bold; }
.navitree__link { text-decoration: none; display: block; padding: .25rem; } .navitree__link { text-decoration: none; display: block; padding: .25rem; }
.navitree__link:hover { background-color: #eee; }
/* Color stuff */ /* Color stuff */
/* Lighter stuff #eee */ /* Lighter stuff #eee */
@ -223,6 +232,8 @@ blockquote { border-left: 4px black solid; }
.upload-amnt { border: #eee 1px solid; } .upload-amnt { border: #eee 1px solid; }
td { border: #ddd 1px solid; } td { border: #ddd 1px solid; }
.navitree__link:hover, .backlinks__link:hover { background-color: #eee; }
/* Dark theme! */ /* Dark theme! */
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
html { background: #222; color: #ddd; } html { background: #222; color: #ddd; }
@ -231,7 +242,7 @@ main, article, .hypha-tabs__tab, header, .layout-card { background-color: #3434
a, .wikilink_external { color: #f1fa8c; } a, .wikilink_external { color: #f1fa8c; }
a:visited, .wikilink_external:visited { color: #ffb86c; } a:visited, .wikilink_external:visited { color: #ffb86c; }
.wikilink_new, .wikilink_new:visited { color: #dd4444; } .wikilink_new, .wikilink_new:visited { color: #dd4444; }
.navitree__link:hover { background-color: #444; } .navitree__link:hover, .backlinks__link:hover { background-color: #444; }
.header-links__link, .header-links__link:visited, .header-links__link, .header-links__link:visited,
.prevnext__el, .prevnext__el:visited { color: #ddd; } .prevnext__el, .prevnext__el:visited { color: #ddd; }

31
templates/default.css
View File

@ -1,5 +1,6 @@
/* General element positions, from small to big */ /* General element positions, from small to big */
/* Phones and whatnot */ /* Phones and whatnot */
.layout { display: grid; row-gap: 1rem; }
header { width: 100%; margin-bottom: 1rem; } header { width: 100%; margin-bottom: 1rem; }
.header-links__list, .hypha-tabs__flex { margin: 0; padding: 0; display: flex; flex-wrap: wrap; } .header-links__list, .hypha-tabs__flex { margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.header-links__entry, .hypha-tabs__tab { list-style-type: none; } .header-links__entry, .hypha-tabs__tab { list-style-type: none; }
@ -13,10 +14,12 @@ header { width: 100%; margin-bottom: 1rem; }
.hypha-tabs__link { display: inline-block; padding: .25rem; text-decoration: none; } .hypha-tabs__link { display: inline-block; padding: .25rem; text-decoration: none; }
.hypha-tabs__selection { display: inline-block; padding: .25rem; font-weight: bold; } .hypha-tabs__selection { display: inline-block; padding: .25rem; font-weight: bold; }
.relative-hyphae { margin-top: .5rem; } .layout-card li { list-style-type: none; }
.relative-hyphae li { list-style-type: none; } .backlinks__list { padding: 0; margin: 0; }
.backlinks__link { text-decoration: none; display: block; padding: .25rem; padding-left: 1.25rem; }
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
.layout { grid-template-column: auto; grid-template-row: auto auto auto; }
.main-width { width: 100%; } .main-width { width: 100%; }
main { padding: 1rem; margin: 0; } main { padding: 1rem; margin: 0; }
} }
@ -25,7 +28,7 @@ header { width: 100%; margin-bottom: 1rem; }
@media screen and (min-width: 801px) { @media screen and (min-width: 801px) {
.main-width { padding: 1rem 2rem; width: 800px; margin: 0 auto; } .main-width { padding: 1rem 2rem; width: 800px; margin: 0 auto; }
main { border-radius: .25rem; } main { border-radius: .25rem; }
.relative-hyphae { margin: .5rem auto 0 auto; } .layout-card { width: 800px; margin: 0 auto; }
.header-links { padding: 0; } .header-links { padding: 0; }
.header-links__entry { margin-right: 1.5rem; } .header-links__entry { margin-right: 1.5rem; }
@ -40,18 +43,24 @@ header { width: 100%; margin-bottom: 1rem; }
} }
/* Wide enough to fit two columns ok */ /* Wide enough to fit two columns ok */
@media screen and (min-width: 1200px) { @media screen and (min-width: 1100px) {
.layout { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; margin: 0 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; min-width: 10rem; max-width: 18rem; margin: 0 auto 0 0; } .relative-hyphae { grid-column: 2 / span 1; grid-row: 1 / span 1; }
.layout-card { width: 100%; }
} }
@media screen and (min-width: 1300px) { @media screen and (min-width: 1250px) {
.layout { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } .layout { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.layout-card { max-width: 16rem; }
.main-width { margin: 0 auto; } .main-width { margin: 0 auto; }
.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; } .relative-hyphae { grid-column: 3 / span 1; margin-left: 0; }
.backlinks__title { text-align: right; }
.backlinks__link { text-align: right; padding-right: 1.25rem; padding-left: .25rem; }
} }
*, *::before, *::after {box-sizing: border-box;} *, *::before, *::after {box-sizing: border-box;}
@ -150,7 +159,7 @@ caption { caption-side: top; font-size: small; }
.navitree > .navitree__trunk { border-left: none; } .navitree > .navitree__trunk { border-left: none; }
.navitree > .navitree__trunk > a { font-weight: bold; } .navitree > .navitree__trunk > a { font-weight: bold; }
.navitree__link { text-decoration: none; display: block; padding: .25rem; } .navitree__link { text-decoration: none; display: block; padding: .25rem; }
.navitree__link:hover { background-color: #eee; }
/* Color stuff */ /* Color stuff */
/* Lighter stuff #eee */ /* Lighter stuff #eee */
@ -198,6 +207,8 @@ blockquote { border-left: 4px black solid; }
.upload-amnt { border: #eee 1px solid; } .upload-amnt { border: #eee 1px solid; }
td { border: #ddd 1px solid; } td { border: #ddd 1px solid; }
.navitree__link:hover, .backlinks__link:hover { background-color: #eee; }
/* Dark theme! */ /* Dark theme! */
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
html { background: #222; color: #ddd; } html { background: #222; color: #ddd; }
@ -206,7 +217,7 @@ main, article, .hypha-tabs__tab, header, .layout-card { background-color: #3434
a, .wikilink_external { color: #f1fa8c; } a, .wikilink_external { color: #f1fa8c; }
a:visited, .wikilink_external:visited { color: #ffb86c; } a:visited, .wikilink_external:visited { color: #ffb86c; }
.wikilink_new, .wikilink_new:visited { color: #dd4444; } .wikilink_new, .wikilink_new:visited { color: #dd4444; }
.navitree__link:hover { background-color: #444; } .navitree__link:hover, .backlinks__link:hover { background-color: #444; }
.header-links__link, .header-links__link:visited, .header-links__link, .header-links__link:visited,
.prevnext__el, .prevnext__el:visited { color: #ddd; } .prevnext__el, .prevnext__el:visited { color: #ddd; }