diff --git a/main.go b/main.go
index 9e7ce22..7db388c 100644
--- a/main.go
+++ b/main.go
@@ -33,7 +33,7 @@ func HttpErr(w http.ResponseWriter, status int, name, title, errMsg string) {
base(
title,
fmt.Sprintf(
- `%s. Go back to the hypha.
`,
+ `%s. Go back to the hypha.
`,
errMsg,
name,
),
diff --git a/templates/asset.qtpl.go b/templates/asset.qtpl.go
index 2d6d279..bab8eb6 100644
--- a/templates/asset.qtpl.go
+++ b/templates/asset.qtpl.go
@@ -25,6 +25,7 @@ func StreamDefaultCSS(qw422016 *qt422016.Writer) {
//line templates/asset.qtpl:2
qw422016.N().S(`/* General element positions, from small to big */
/* Phones and whatnot */
+.layout { display: grid; row-gap: 1rem; }
header { width: 100%; margin-bottom: 1rem; }
.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; }
@@ -38,10 +39,12 @@ header { width: 100%; margin-bottom: 1rem; }
.hypha-tabs__link { display: inline-block; padding: .25rem; text-decoration: none; }
.hypha-tabs__selection { display: inline-block; padding: .25rem; font-weight: bold; }
-.relative-hyphae { margin-top: .5rem; }
-.relative-hyphae li { list-style-type: none; }
+.layout-card 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) {
+ .layout { grid-template-column: auto; grid-template-row: auto auto auto; }
.main-width { width: 100%; }
main { padding: 1rem; margin: 0; }
}
@@ -50,7 +53,7 @@ header { width: 100%; margin-bottom: 1rem; }
@media screen and (min-width: 801px) {
.main-width { padding: 1rem 2rem; width: 800px; margin: 0 auto; }
main { border-radius: .25rem; }
- .relative-hyphae { margin: .5rem auto 0 auto; }
+ .layout-card { width: 800px; margin: 0 auto; }
.header-links { padding: 0; }
.header-links__entry { margin-right: 1.5rem; }
@@ -65,18 +68,24 @@ header { width: 100%; margin-bottom: 1rem; }
}
/* Wide enough to fit two columns ok */
-@media screen and (min-width: 1200px) {
- .layout { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; margin: 0 1rem; }
+@media screen and (min-width: 1100px) {
+ .layout { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; margin: 0 1rem; row-gap: 1rem; }
.main-width { margin: 0; }
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-card { max-width: 16rem; }
.main-width { margin: 0 auto; }
+ .backlinks { grid-column: 1 / span 1; margin-right: 0; }
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;}
@@ -175,7 +184,7 @@ caption { caption-side: top; font-size: small; }
.navitree > .navitree__trunk { border-left: none; }
.navitree > .navitree__trunk > a { font-weight: bold; }
.navitree__link { text-decoration: none; display: block; padding: .25rem; }
-.navitree__link:hover { background-color: #eee; }
+
/* Color stuff */
/* Lighter stuff #eee */
@@ -223,6 +232,8 @@ blockquote { border-left: 4px black solid; }
.upload-amnt { border: #eee 1px solid; }
td { border: #ddd 1px solid; }
+.navitree__link:hover, .backlinks__link:hover { background-color: #eee; }
+
/* Dark theme! */
@media (prefers-color-scheme: dark) {
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:visited, .wikilink_external:visited { color: #ffb86c; }
.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,
.prevnext__el, .prevnext__el:visited { color: #ddd; }
diff --git a/templates/default.css b/templates/default.css
index f9dc2d1..e224ed8 100644
--- a/templates/default.css
+++ b/templates/default.css
@@ -1,5 +1,6 @@
/* General element positions, from small to big */
/* Phones and whatnot */
+.layout { display: grid; row-gap: 1rem; }
header { width: 100%; margin-bottom: 1rem; }
.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; }
@@ -13,10 +14,12 @@ header { width: 100%; margin-bottom: 1rem; }
.hypha-tabs__link { display: inline-block; padding: .25rem; text-decoration: none; }
.hypha-tabs__selection { display: inline-block; padding: .25rem; font-weight: bold; }
-.relative-hyphae { margin-top: .5rem; }
-.relative-hyphae li { list-style-type: none; }
+.layout-card 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) {
+ .layout { grid-template-column: auto; grid-template-row: auto auto auto; }
.main-width { width: 100%; }
main { padding: 1rem; margin: 0; }
}
@@ -25,7 +28,7 @@ header { width: 100%; margin-bottom: 1rem; }
@media screen and (min-width: 801px) {
.main-width { padding: 1rem 2rem; width: 800px; margin: 0 auto; }
main { border-radius: .25rem; }
- .relative-hyphae { margin: .5rem auto 0 auto; }
+ .layout-card { width: 800px; margin: 0 auto; }
.header-links { padding: 0; }
.header-links__entry { margin-right: 1.5rem; }
@@ -40,18 +43,24 @@ header { width: 100%; margin-bottom: 1rem; }
}
/* Wide enough to fit two columns ok */
-@media screen and (min-width: 1200px) {
- .layout { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; margin: 0 1rem; }
+@media screen and (min-width: 1100px) {
+ .layout { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; margin: 0 1rem; row-gap: 1rem; }
.main-width { margin: 0; }
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-card { max-width: 16rem; }
.main-width { margin: 0 auto; }
+ .backlinks { grid-column: 1 / span 1; margin-right: 0; }
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;}
@@ -150,7 +159,7 @@ caption { caption-side: top; font-size: small; }
.navitree > .navitree__trunk { border-left: none; }
.navitree > .navitree__trunk > a { font-weight: bold; }
.navitree__link { text-decoration: none; display: block; padding: .25rem; }
-.navitree__link:hover { background-color: #eee; }
+
/* Color stuff */
/* Lighter stuff #eee */
@@ -198,6 +207,8 @@ blockquote { border-left: 4px black solid; }
.upload-amnt { border: #eee 1px solid; }
td { border: #ddd 1px solid; }
+.navitree__link:hover, .backlinks__link:hover { background-color: #eee; }
+
/* Dark theme! */
@media (prefers-color-scheme: dark) {
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:visited, .wikilink_external:visited { color: #ffb86c; }
.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,
.prevnext__el, .prevnext__el:visited { color: #ddd; }