mirror of
https://github.com/osmarks/mycorrhiza.git
synced 2024-10-30 03:36:16 +00:00
Improve page layout
This commit is contained in:
bouncepaw
parent
53192525c9
commit
2ae3974dbc
@ -23,27 +23,63 @@ func StreamDefaultCSS(qw422016 *qt422016.Writer) {
|
||||
qw422016.N().S(`
|
||||
`)
|
||||
//line templates/asset.qtpl:2
|
||||
qw422016.N().S(`/* Layout stuff */
|
||||
@media screen and (min-width: 800px) {
|
||||
main { padding:1rem 2rem; margin: 0 auto; min-width: 800px; max-width: 800px; border-radius: .25rem; }
|
||||
.hypha-tabs { padding: 1rem 2rem; margin: 0 auto; min-width: 500px; max-width: 800px; }
|
||||
header { width: 100%; }
|
||||
.header-links { margin: 0 auto; min-width: 500px; max-width: 800px; }
|
||||
qw422016.N().S(`/* General element positions, from small to big */
|
||||
/* Phones and whatnot */
|
||||
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; }
|
||||
|
||||
.header-links__entry { margin-right: .5rem; }
|
||||
.header-links__entry_user { font-style:italic; }
|
||||
.header-links__link { display: inline-block; padding: .25rem; text-decoration: none; }
|
||||
|
||||
.hypha-tabs { padding: 0; margin: 0; }
|
||||
.hypha-tabs__tab { margin-right: .5rem; padding: 0; }
|
||||
.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 > ul { margin: 0; padding: .5rem 1rem; }
|
||||
.relative-hyphae li { list-style-type: none; }
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.main-width { width: 100%; }
|
||||
main { padding: 1rem; margin: 0; }
|
||||
}
|
||||
|
||||
/* No longer a phone but still small screen: draw normal tabs, center main */
|
||||
@media screen and (min-width: 801px) {
|
||||
.main-width { padding: 1rem 2rem; width: 800px; margin: 0 auto; }
|
||||
main { border-radius: .25rem; }
|
||||
.relative-hyphae { width: 800px; margin: .5rem auto 0 auto; }
|
||||
|
||||
.header-links { padding: 0; }
|
||||
.header-links__entry { margin-right: 1.5rem; }
|
||||
.header-links__entry_user { margin: 0 2rem 0 auto; }
|
||||
.header-links__entry:nth-of-type(1),
|
||||
.hypha-tabs__tab:nth-of-type(1) { margin-left: 2rem; }
|
||||
.hypha-tabs__tab { padding: 0 .5rem; border-radius: .25rem .25rem 0 0; border: 1px #ddd solid; border-bottom: 2px #ddd solid; }
|
||||
.three-col { display: grid; grid-template-columns: 1fr auto 1fr; column-gap: 1rem; }
|
||||
main { grid-column: 2 / span 1; grid-row: 1 / span 2; }
|
||||
.relative-hyphae { grid-column: 3 / span 1; grid-row: 1 / span 1; min-width: 10rem; max-width: 20rem; }
|
||||
|
||||
.hypha-tabs { padding: 0; }
|
||||
.hypha-tabs__tab { border-radius: .25rem .25rem 0 0; margin-right: 0; }
|
||||
.hypha-tabs__selection, .hypha-tabs__link { padding: .25rem .5rem; }
|
||||
|
||||
.header-links__entry:nth-of-type(1), .hypha-tabs__tab:nth-of-type(1) { margin-left: 2rem; }
|
||||
}
|
||||
@media screen and (max-width: 800px) {
|
||||
main { padding: 1rem; margin: 0; width: 100%; }
|
||||
.hypha-tabs{ padding: 1rem; margin: 0; width: 100%; }
|
||||
.hypha-tabs__tab { box-shadow: none; margin-right: .5rem; padding: .25rem .5rem; }
|
||||
.header-links__entry { margin-right: .5rem; }
|
||||
|
||||
/* 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; }
|
||||
.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: 20rem; margin: 0 auto 0 0; }
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1300px) {
|
||||
.layout { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
|
||||
.main-width { margin: 0 auto; }
|
||||
main { grid-column: 2 / span 1; }
|
||||
.relative-hyphae { grid-column: 3 / span 1; }
|
||||
}
|
||||
|
||||
*, *::before, *::after {box-sizing: border-box;}
|
||||
html { height:100%; padding:0; }
|
||||
body {height:100%; margin:0; font-size:16px; font-family: 'PT Sans', 'Liberation Sans', sans-serif;}
|
||||
@ -103,14 +139,6 @@ figcaption { padding-bottom: .5rem; }
|
||||
|
||||
#new-name {width:100%;}
|
||||
|
||||
header { margin-bottom: .5rem; }
|
||||
.header-links__entry_user { font-style:italic; }
|
||||
.header-links__link { text-decoration: none; display: block; width: 100%; height: 100%; padding: .25rem; }
|
||||
.hypha-tabs { padding: 0; }
|
||||
.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; }
|
||||
.hypha-tabs__tab a { text-decoration: none; }
|
||||
.hypha-tabs__tab_active { font-weight: bold; }
|
||||
|
||||
.rc-entry { display: grid; list-style-type: none; padding: .25rem; grid-template-columns: 1fr 1fr; }
|
||||
.rc-entry__time { font-style: italic; }
|
||||
@ -145,7 +173,6 @@ article .codeblock,
|
||||
table { background-color: #eee; }
|
||||
|
||||
.hypha-tabs__tab { background-color: #eee; }
|
||||
.hypha-tabs__tab { clip-path: inset(-20px -20px 0 -20px); }
|
||||
.hypha-tabs__tab a { color: black; }
|
||||
.hypha-tabs__tab_active { border-bottom: 2px white solid; background: white; }
|
||||
|
||||
@ -154,6 +181,15 @@ table { background-color: #eee; }
|
||||
.hypha-tabs__tab { background-color: white; }
|
||||
}
|
||||
|
||||
@media screen and (min-width: 801px) {
|
||||
.hypha-tabs__tab { border: 1px #ddd solid; }
|
||||
.hypha-tabs__tab_active { border-bottom: 1px white solid; }
|
||||
}
|
||||
|
||||
.layout-card { border-radius: .25rem; background-color: white; }
|
||||
.layout-card__title { font-size: 1rem; margin: 0; padding: .25rem .5rem; border-radius: .25rem .25rem 0 0; }
|
||||
.layout-card__title { background-color: #eee; }
|
||||
|
||||
/* Other stuff */
|
||||
html { background-color: #ddd;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%23bbbbbb' fill-opacity='0.4'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
@ -175,7 +211,7 @@ td { border: #ddd 1px solid; }
|
||||
/* Dark theme! */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html { background: #222; color: #ddd; }
|
||||
main, article, .hypha-tabs__tab, header { background-color: #343434; color: #ddd; }
|
||||
main, article, .hypha-tabs__tab, header, .layout-card { background-color: #343434; color: #ddd; }
|
||||
|
||||
a, .wikilink_external { color: #f1fa8c; }
|
||||
a:visited, .wikilink_external:visited { color: #ffb86c; }
|
||||
@ -186,7 +222,7 @@ a:visited, .wikilink_external:visited { color: #ffb86c; }
|
||||
.header-links__link:hover { background-color: #444; }
|
||||
|
||||
.hypha-tabs__tab a, .hypha-tabs__tab { color: #ddd; background-color: #232323; border: 0; }
|
||||
.hypha-tabs__tab_active { background-color: #343434; }
|
||||
.layout-card__title, .hypha-tabs__tab_active { background-color: #343434; }
|
||||
|
||||
blockquote { border-left: 4px #ddd solid; }
|
||||
|
||||
@ -207,10 +243,12 @@ mark { background: rgba(130, 80, 30, 5); color: inherit; }
|
||||
@media screen and (max-width: 800px) {
|
||||
.hypha-tabs { background-color: #232323; }
|
||||
}
|
||||
@media screen and (min-width: 801px) {
|
||||
/* .hypha-tabs__tab { border: 1px #ddd solid; } */
|
||||
/* .hypha-tabs__tab_active { border-bottom: 1px white solid; } */
|
||||
}
|
||||
}
|
||||
|
||||
.layout-card { background-color: white; border-radius: .25rem; }
|
||||
.layout-card__title { font-size: 1rem; margin: 0; padding: .25rem .5rem; background-color: #eee; border-radius: .25rem .25rem 0 0; }
|
||||
|
||||
|
||||
`)
|
||||
|
||||
@ -23,21 +23,20 @@ var navEntries = []navEntry{
|
||||
{% code
|
||||
u := user.FromRequest(rq)
|
||||
%}
|
||||
|
||||
<nav class="hypha-tabs">
|
||||
<nav class="hypha-tabs main-width">
|
||||
<ul class="hypha-tabs__flex">
|
||||
{%- for _, entry := range navEntries -%}
|
||||
{%- if navType == "revision" && entry.path == "revision" -%}
|
||||
<li class="hypha-tabs__tab hypha-tabs__tab_active">
|
||||
{%s revisionHash[0] %}
|
||||
<span class="hypha-tabs__selection">{%s revisionHash[0] %}</span>
|
||||
</li>
|
||||
{%- elseif navType == entry.path -%}
|
||||
<li class="hypha-tabs__tab hypha-tabs__tab_active">
|
||||
{%s entry.title %}
|
||||
<span class="hypha-tabs__selection">{%s entry.title %}</span>
|
||||
</li>
|
||||
{%- elseif entry.path != "revision" && u.CanProceed(entry.path) -%}
|
||||
<li class="hypha-tabs__tab">
|
||||
<a href="/{%s entry.path %}/{%s hyphaName %}">{%s entry.title %}</a>
|
||||
<a class="hypha-tabs__link" href="/{%s entry.path %}/{%s hyphaName %}">{%s entry.title %}</a>
|
||||
</li>
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
|
||||
@ -54,161 +54,160 @@ func streamnavHTML(qw422016 *qt422016.Writer, rq *http.Request, hyphaName, navTy
|
||||
|
||||
//line templates/common.qtpl:25
|
||||
qw422016.N().S(`
|
||||
|
||||
<nav class="hypha-tabs">
|
||||
<nav class="hypha-tabs main-width">
|
||||
<ul class="hypha-tabs__flex">
|
||||
`)
|
||||
//line templates/common.qtpl:29
|
||||
//line templates/common.qtpl:28
|
||||
for _, entry := range navEntries {
|
||||
//line templates/common.qtpl:30
|
||||
//line templates/common.qtpl:29
|
||||
if navType == "revision" && entry.path == "revision" {
|
||||
//line templates/common.qtpl:30
|
||||
//line templates/common.qtpl:29
|
||||
qw422016.N().S(` <li class="hypha-tabs__tab hypha-tabs__tab_active">
|
||||
`)
|
||||
//line templates/common.qtpl:32
|
||||
<span class="hypha-tabs__selection">`)
|
||||
//line templates/common.qtpl:31
|
||||
qw422016.E().S(revisionHash[0])
|
||||
//line templates/common.qtpl:32
|
||||
qw422016.N().S(`
|
||||
//line templates/common.qtpl:31
|
||||
qw422016.N().S(`</span>
|
||||
</li>
|
||||
`)
|
||||
//line templates/common.qtpl:34
|
||||
//line templates/common.qtpl:33
|
||||
} else if navType == entry.path {
|
||||
//line templates/common.qtpl:34
|
||||
//line templates/common.qtpl:33
|
||||
qw422016.N().S(` <li class="hypha-tabs__tab hypha-tabs__tab_active">
|
||||
`)
|
||||
//line templates/common.qtpl:36
|
||||
<span class="hypha-tabs__selection">`)
|
||||
//line templates/common.qtpl:35
|
||||
qw422016.E().S(entry.title)
|
||||
//line templates/common.qtpl:36
|
||||
qw422016.N().S(`
|
||||
//line templates/common.qtpl:35
|
||||
qw422016.N().S(`</span>
|
||||
</li>
|
||||
`)
|
||||
//line templates/common.qtpl:38
|
||||
//line templates/common.qtpl:37
|
||||
} else if entry.path != "revision" && u.CanProceed(entry.path) {
|
||||
//line templates/common.qtpl:38
|
||||
//line templates/common.qtpl:37
|
||||
qw422016.N().S(` <li class="hypha-tabs__tab">
|
||||
<a href="/`)
|
||||
//line templates/common.qtpl:40
|
||||
<a class="hypha-tabs__link" href="/`)
|
||||
//line templates/common.qtpl:39
|
||||
qw422016.E().S(entry.path)
|
||||
//line templates/common.qtpl:40
|
||||
//line templates/common.qtpl:39
|
||||
qw422016.N().S(`/`)
|
||||
//line templates/common.qtpl:40
|
||||
//line templates/common.qtpl:39
|
||||
qw422016.E().S(hyphaName)
|
||||
//line templates/common.qtpl:40
|
||||
//line templates/common.qtpl:39
|
||||
qw422016.N().S(`">`)
|
||||
//line templates/common.qtpl:40
|
||||
//line templates/common.qtpl:39
|
||||
qw422016.E().S(entry.title)
|
||||
//line templates/common.qtpl:40
|
||||
//line templates/common.qtpl:39
|
||||
qw422016.N().S(`</a>
|
||||
</li>
|
||||
`)
|
||||
//line templates/common.qtpl:42
|
||||
//line templates/common.qtpl:41
|
||||
}
|
||||
//line templates/common.qtpl:43
|
||||
//line templates/common.qtpl:42
|
||||
}
|
||||
//line templates/common.qtpl:43
|
||||
//line templates/common.qtpl:42
|
||||
qw422016.N().S(` </ul>
|
||||
</nav>
|
||||
`)
|
||||
//line templates/common.qtpl:46
|
||||
//line templates/common.qtpl:45
|
||||
}
|
||||
|
||||
//line templates/common.qtpl:46
|
||||
//line templates/common.qtpl:45
|
||||
func writenavHTML(qq422016 qtio422016.Writer, rq *http.Request, hyphaName, navType string, revisionHash ...string) {
|
||||
//line templates/common.qtpl:46
|
||||
//line templates/common.qtpl:45
|
||||
qw422016 := qt422016.AcquireWriter(qq422016)
|
||||
//line templates/common.qtpl:46
|
||||
//line templates/common.qtpl:45
|
||||
streamnavHTML(qw422016, rq, hyphaName, navType, revisionHash...)
|
||||
//line templates/common.qtpl:46
|
||||
//line templates/common.qtpl:45
|
||||
qt422016.ReleaseWriter(qw422016)
|
||||
//line templates/common.qtpl:46
|
||||
//line templates/common.qtpl:45
|
||||
}
|
||||
|
||||
//line templates/common.qtpl:46
|
||||
//line templates/common.qtpl:45
|
||||
func navHTML(rq *http.Request, hyphaName, navType string, revisionHash ...string) string {
|
||||
//line templates/common.qtpl:46
|
||||
//line templates/common.qtpl:45
|
||||
qb422016 := qt422016.AcquireByteBuffer()
|
||||
//line templates/common.qtpl:46
|
||||
//line templates/common.qtpl:45
|
||||
writenavHTML(qb422016, rq, hyphaName, navType, revisionHash...)
|
||||
//line templates/common.qtpl:46
|
||||
//line templates/common.qtpl:45
|
||||
qs422016 := string(qb422016.B)
|
||||
//line templates/common.qtpl:46
|
||||
//line templates/common.qtpl:45
|
||||
qt422016.ReleaseByteBuffer(qb422016)
|
||||
//line templates/common.qtpl:46
|
||||
//line templates/common.qtpl:45
|
||||
return qs422016
|
||||
//line templates/common.qtpl:46
|
||||
//line templates/common.qtpl:45
|
||||
}
|
||||
|
||||
//line templates/common.qtpl:48
|
||||
//line templates/common.qtpl:47
|
||||
func streamuserMenuHTML(qw422016 *qt422016.Writer, u *user.User) {
|
||||
//line templates/common.qtpl:48
|
||||
//line templates/common.qtpl:47
|
||||
qw422016.N().S(`
|
||||
`)
|
||||
//line templates/common.qtpl:49
|
||||
//line templates/common.qtpl:48
|
||||
if user.AuthUsed {
|
||||
//line templates/common.qtpl:49
|
||||
//line templates/common.qtpl:48
|
||||
qw422016.N().S(`
|
||||
<li class="header-links__entry header-links__entry_user">
|
||||
`)
|
||||
//line templates/common.qtpl:51
|
||||
//line templates/common.qtpl:50
|
||||
if u.Group == "anon" {
|
||||
//line templates/common.qtpl:51
|
||||
//line templates/common.qtpl:50
|
||||
qw422016.N().S(`
|
||||
<a href="/login" class="header-links__link">Login</a>
|
||||
`)
|
||||
//line templates/common.qtpl:53
|
||||
//line templates/common.qtpl:52
|
||||
} else {
|
||||
//line templates/common.qtpl:53
|
||||
//line templates/common.qtpl:52
|
||||
qw422016.N().S(`
|
||||
<a href="/page/`)
|
||||
//line templates/common.qtpl:54
|
||||
//line templates/common.qtpl:53
|
||||
qw422016.E().S(util.UserHypha)
|
||||
//line templates/common.qtpl:54
|
||||
//line templates/common.qtpl:53
|
||||
qw422016.N().S(`/`)
|
||||
//line templates/common.qtpl:54
|
||||
//line templates/common.qtpl:53
|
||||
qw422016.E().S(u.Name)
|
||||
//line templates/common.qtpl:54
|
||||
//line templates/common.qtpl:53
|
||||
qw422016.N().S(`" class="header-links__link">`)
|
||||
//line templates/common.qtpl:54
|
||||
//line templates/common.qtpl:53
|
||||
qw422016.E().S(u.Name)
|
||||
//line templates/common.qtpl:54
|
||||
//line templates/common.qtpl:53
|
||||
qw422016.N().S(`</a>
|
||||
`)
|
||||
//line templates/common.qtpl:55
|
||||
//line templates/common.qtpl:54
|
||||
}
|
||||
//line templates/common.qtpl:55
|
||||
//line templates/common.qtpl:54
|
||||
qw422016.N().S(`
|
||||
</li>
|
||||
`)
|
||||
//line templates/common.qtpl:57
|
||||
//line templates/common.qtpl:56
|
||||
}
|
||||
//line templates/common.qtpl:57
|
||||
//line templates/common.qtpl:56
|
||||
qw422016.N().S(`
|
||||
`)
|
||||
//line templates/common.qtpl:58
|
||||
//line templates/common.qtpl:57
|
||||
}
|
||||
|
||||
//line templates/common.qtpl:58
|
||||
//line templates/common.qtpl:57
|
||||
func writeuserMenuHTML(qq422016 qtio422016.Writer, u *user.User) {
|
||||
//line templates/common.qtpl:58
|
||||
//line templates/common.qtpl:57
|
||||
qw422016 := qt422016.AcquireWriter(qq422016)
|
||||
//line templates/common.qtpl:58
|
||||
//line templates/common.qtpl:57
|
||||
streamuserMenuHTML(qw422016, u)
|
||||
//line templates/common.qtpl:58
|
||||
//line templates/common.qtpl:57
|
||||
qt422016.ReleaseWriter(qw422016)
|
||||
//line templates/common.qtpl:58
|
||||
//line templates/common.qtpl:57
|
||||
}
|
||||
|
||||
//line templates/common.qtpl:58
|
||||
//line templates/common.qtpl:57
|
||||
func userMenuHTML(u *user.User) string {
|
||||
//line templates/common.qtpl:58
|
||||
//line templates/common.qtpl:57
|
||||
qb422016 := qt422016.AcquireByteBuffer()
|
||||
//line templates/common.qtpl:58
|
||||
//line templates/common.qtpl:57
|
||||
writeuserMenuHTML(qb422016, u)
|
||||
//line templates/common.qtpl:58
|
||||
//line templates/common.qtpl:57
|
||||
qs422016 := string(qb422016.B)
|
||||
//line templates/common.qtpl:58
|
||||
//line templates/common.qtpl:57
|
||||
qt422016.ReleaseByteBuffer(qb422016)
|
||||
//line templates/common.qtpl:58
|
||||
//line templates/common.qtpl:57
|
||||
return qs422016
|
||||
//line templates/common.qtpl:58
|
||||
//line templates/common.qtpl:57
|
||||
}
|
||||
|
||||
@ -1,24 +1,60 @@
|
||||
/* Layout stuff */
|
||||
@media screen and (min-width: 800px) {
|
||||
main { padding:1rem 2rem; margin: 0 auto; min-width: 800px; max-width: 800px; border-radius: .25rem; }
|
||||
.hypha-tabs { padding: 1rem 2rem; margin: 0 auto; min-width: 500px; max-width: 800px; }
|
||||
header { width: 100%; }
|
||||
.header-links { margin: 0 auto; min-width: 500px; max-width: 800px; }
|
||||
/* General element positions, from small to big */
|
||||
/* Phones and whatnot */
|
||||
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; }
|
||||
|
||||
.header-links__entry { margin-right: .5rem; }
|
||||
.header-links__entry_user { font-style:italic; }
|
||||
.header-links__link { display: inline-block; padding: .25rem; text-decoration: none; }
|
||||
|
||||
.hypha-tabs { padding: 0; margin: 0; }
|
||||
.hypha-tabs__tab { margin-right: .5rem; padding: 0; }
|
||||
.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 > ul { margin: 0; padding: .5rem 1rem; }
|
||||
.relative-hyphae li { list-style-type: none; }
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.main-width { width: 100%; }
|
||||
main { padding: 1rem; margin: 0; }
|
||||
}
|
||||
|
||||
/* No longer a phone but still small screen: draw normal tabs, center main */
|
||||
@media screen and (min-width: 801px) {
|
||||
.main-width { padding: 1rem 2rem; width: 800px; margin: 0 auto; }
|
||||
main { border-radius: .25rem; }
|
||||
.relative-hyphae { width: 800px; margin: .5rem auto 0 auto; }
|
||||
|
||||
.header-links { padding: 0; }
|
||||
.header-links__entry { margin-right: 1.5rem; }
|
||||
.header-links__entry_user { margin: 0 2rem 0 auto; }
|
||||
.header-links__entry:nth-of-type(1),
|
||||
.hypha-tabs__tab:nth-of-type(1) { margin-left: 2rem; }
|
||||
.hypha-tabs__tab { padding: 0 .5rem; border-radius: .25rem .25rem 0 0; border: 1px #ddd solid; border-bottom: 2px #ddd solid; }
|
||||
.three-col { display: grid; grid-template-columns: 1fr auto 1fr; column-gap: 1rem; }
|
||||
main { grid-column: 2 / span 1; grid-row: 1 / span 2; }
|
||||
.relative-hyphae { grid-column: 3 / span 1; grid-row: 1 / span 1; min-width: 10rem; max-width: 20rem; }
|
||||
|
||||
.hypha-tabs { padding: 0; }
|
||||
.hypha-tabs__tab { border-radius: .25rem .25rem 0 0; margin-right: 0; }
|
||||
.hypha-tabs__selection, .hypha-tabs__link { padding: .25rem .5rem; }
|
||||
|
||||
.header-links__entry:nth-of-type(1), .hypha-tabs__tab:nth-of-type(1) { margin-left: 2rem; }
|
||||
}
|
||||
@media screen and (max-width: 800px) {
|
||||
main { padding: 1rem; margin: 0; width: 100%; }
|
||||
.hypha-tabs{ padding: 1rem; margin: 0; width: 100%; }
|
||||
.hypha-tabs__tab { box-shadow: none; margin-right: .5rem; padding: .25rem .5rem; }
|
||||
.header-links__entry { margin-right: .5rem; }
|
||||
|
||||
/* 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; }
|
||||
.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: 20rem; margin: 0 auto 0 0; }
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1300px) {
|
||||
.layout { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
|
||||
.main-width { margin: 0 auto; }
|
||||
main { grid-column: 2 / span 1; }
|
||||
.relative-hyphae { grid-column: 3 / span 1; }
|
||||
}
|
||||
|
||||
*, *::before, *::after {box-sizing: border-box;}
|
||||
html { height:100%; padding:0; }
|
||||
body {height:100%; margin:0; font-size:16px; font-family: 'PT Sans', 'Liberation Sans', sans-serif;}
|
||||
@ -78,14 +114,6 @@ figcaption { padding-bottom: .5rem; }
|
||||
|
||||
#new-name {width:100%;}
|
||||
|
||||
header { margin-bottom: .5rem; }
|
||||
.header-links__entry_user { font-style:italic; }
|
||||
.header-links__link { text-decoration: none; display: block; width: 100%; height: 100%; padding: .25rem; }
|
||||
.hypha-tabs { padding: 0; }
|
||||
.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; }
|
||||
.hypha-tabs__tab a { text-decoration: none; }
|
||||
.hypha-tabs__tab_active { font-weight: bold; }
|
||||
|
||||
.rc-entry { display: grid; list-style-type: none; padding: .25rem; grid-template-columns: 1fr 1fr; }
|
||||
.rc-entry__time { font-style: italic; }
|
||||
@ -120,7 +148,6 @@ article .codeblock,
|
||||
table { background-color: #eee; }
|
||||
|
||||
.hypha-tabs__tab { background-color: #eee; }
|
||||
.hypha-tabs__tab { clip-path: inset(-20px -20px 0 -20px); }
|
||||
.hypha-tabs__tab a { color: black; }
|
||||
.hypha-tabs__tab_active { border-bottom: 2px white solid; background: white; }
|
||||
|
||||
@ -129,6 +156,15 @@ table { background-color: #eee; }
|
||||
.hypha-tabs__tab { background-color: white; }
|
||||
}
|
||||
|
||||
@media screen and (min-width: 801px) {
|
||||
.hypha-tabs__tab { border: 1px #ddd solid; }
|
||||
.hypha-tabs__tab_active { border-bottom: 1px white solid; }
|
||||
}
|
||||
|
||||
.layout-card { border-radius: .25rem; background-color: white; }
|
||||
.layout-card__title { font-size: 1rem; margin: 0; padding: .25rem .5rem; border-radius: .25rem .25rem 0 0; }
|
||||
.layout-card__title { background-color: #eee; }
|
||||
|
||||
/* Other stuff */
|
||||
html { background-color: #ddd;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%23bbbbbb' fill-opacity='0.4'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
@ -150,7 +186,7 @@ td { border: #ddd 1px solid; }
|
||||
/* Dark theme! */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html { background: #222; color: #ddd; }
|
||||
main, article, .hypha-tabs__tab, header { background-color: #343434; color: #ddd; }
|
||||
main, article, .hypha-tabs__tab, header, .layout-card { background-color: #343434; color: #ddd; }
|
||||
|
||||
a, .wikilink_external { color: #f1fa8c; }
|
||||
a:visited, .wikilink_external:visited { color: #ffb86c; }
|
||||
@ -161,7 +197,7 @@ a:visited, .wikilink_external:visited { color: #ffb86c; }
|
||||
.header-links__link:hover { background-color: #444; }
|
||||
|
||||
.hypha-tabs__tab a, .hypha-tabs__tab { color: #ddd; background-color: #232323; border: 0; }
|
||||
.hypha-tabs__tab_active { background-color: #343434; }
|
||||
.layout-card__title, .hypha-tabs__tab_active { background-color: #343434; }
|
||||
|
||||
blockquote { border-left: 4px #ddd solid; }
|
||||
|
||||
@ -182,9 +218,11 @@ mark { background: rgba(130, 80, 30, 5); color: inherit; }
|
||||
@media screen and (max-width: 800px) {
|
||||
.hypha-tabs { background-color: #232323; }
|
||||
}
|
||||
@media screen and (min-width: 801px) {
|
||||
/* .hypha-tabs__tab { border: 1px #ddd solid; } */
|
||||
/* .hypha-tabs__tab_active { border-bottom: 1px white solid; } */
|
||||
}
|
||||
}
|
||||
|
||||
.layout-card { background-color: white; border-radius: .25rem; }
|
||||
.layout-card__title { font-size: 1rem; margin: 0; padding: .25rem .5rem; background-color: #eee; border-radius: .25rem .25rem 0 0; }
|
||||
|
||||
|
||||
|
||||
@ -30,41 +30,41 @@
|
||||
If `contents` == "", a helpful message is shown instead.
|
||||
{% func PageHTML(rq *http.Request, hyphaName, naviTitle, contents, relatives, prevHyphaName, nextHyphaName string, hasAmnt bool) %}
|
||||
{%= navHTML(rq, hyphaName, "page") %}
|
||||
<div class="three-col">
|
||||
<main>
|
||||
<article>
|
||||
{%s= naviTitle %}
|
||||
{% if contents == "" %}
|
||||
<p>This hypha has no text. Why not <a href="/edit/{%s hyphaName %}">create it</a>?</p>
|
||||
{% else %}
|
||||
{%s= contents %}
|
||||
{% endif %}
|
||||
</article>
|
||||
<section class="prevnext">
|
||||
{% if prevHyphaName != "" %}
|
||||
<a class="prevnext__el prevnext__prev" href="/page/{%s prevHyphaName %}" rel="prev">← {%s path.Base(prevHyphaName) %}</a>
|
||||
{% endif %}
|
||||
{% if nextHyphaName != "" %}
|
||||
<a class="prevnext__el prevnext__next" href="/page/{%s nextHyphaName %}" rel="next">{%s path.Base(nextHyphaName) %} →</a>
|
||||
{% endif %}
|
||||
</section>
|
||||
{% if u := user.FromRequest(rq); !user.AuthUsed || u.Group != "anon" %}
|
||||
<form action="/upload-binary/{%s hyphaName %}"
|
||||
method="post" enctype="multipart/form-data"
|
||||
class="upload-amnt">
|
||||
{% if hasAmnt %}
|
||||
<a class="upload-amnt__unattach" href="/unattach-ask/{%s hyphaName %}">Unattach current attachment?</a>
|
||||
{% endif %}
|
||||
<label for="upload-binary__input">Upload a new attachment</label>
|
||||
<br>
|
||||
<input type="file" id="upload-binary__input" name="binary"/>
|
||||
<input type="submit"/>
|
||||
</form>
|
||||
{% endif %}
|
||||
</main>
|
||||
<aside class="relative-hyphae layout-card">
|
||||
<h1 class="relative-hyphae__title layout-card__title">Relative hyphae</h1>
|
||||
{%s= relatives %}
|
||||
</aside>
|
||||
<div class="layout">
|
||||
<main class="main-width">
|
||||
<article>
|
||||
{%s= naviTitle %}
|
||||
{% if contents == "" %}
|
||||
<p>This hypha has no text. Why not <a href="/edit/{%s hyphaName %}">create it</a>?</p>
|
||||
{% else %}
|
||||
{%s= contents %}
|
||||
{% endif %}
|
||||
</article>
|
||||
<section class="prevnext">
|
||||
{% if prevHyphaName != "" %}
|
||||
<a class="prevnext__el prevnext__prev" href="/page/{%s prevHyphaName %}" rel="prev">← {%s path.Base(prevHyphaName) %}</a>
|
||||
{% endif %}
|
||||
{% if nextHyphaName != "" %}
|
||||
<a class="prevnext__el prevnext__next" href="/page/{%s nextHyphaName %}" rel="next">{%s path.Base(nextHyphaName) %} →</a>
|
||||
{% endif %}
|
||||
</section>
|
||||
{% if u := user.FromRequest(rq); !user.AuthUsed || u.Group != "anon" %}
|
||||
<form action="/upload-binary/{%s hyphaName %}"
|
||||
method="post" enctype="multipart/form-data"
|
||||
class="upload-amnt">
|
||||
{% if hasAmnt %}
|
||||
<a class="upload-amnt__unattach" href="/unattach-ask/{%s hyphaName %}">Unattach current attachment?</a>
|
||||
{% endif %}
|
||||
<label for="upload-binary__input">Upload a new attachment</label>
|
||||
<br>
|
||||
<input type="file" id="upload-binary__input" name="binary"/>
|
||||
<input type="submit"/>
|
||||
</form>
|
||||
{% endif %}
|
||||
</main>
|
||||
<aside class="relative-hyphae layout-card">
|
||||
<h1 class="relative-hyphae__title layout-card__title">Relative hyphae</h1>
|
||||
{%s= relatives %}
|
||||
</aside>
|
||||
</div>
|
||||
{% endfunc %}
|
||||
|
||||
@ -152,47 +152,47 @@ func StreamPageHTML(qw422016 *qt422016.Writer, rq *http.Request, hyphaName, navi
|
||||
streamnavHTML(qw422016, rq, hyphaName, "page")
|
||||
//line templates/readers.qtpl:32
|
||||
qw422016.N().S(`
|
||||
<div class="three-col">
|
||||
<main>
|
||||
<article>
|
||||
`)
|
||||
<div class="layout">
|
||||
<main class="main-width">
|
||||
<article>
|
||||
`)
|
||||
//line templates/readers.qtpl:36
|
||||
qw422016.N().S(naviTitle)
|
||||
//line templates/readers.qtpl:36
|
||||
qw422016.N().S(`
|
||||
`)
|
||||
`)
|
||||
//line templates/readers.qtpl:37
|
||||
if contents == "" {
|
||||
//line templates/readers.qtpl:37
|
||||
qw422016.N().S(`
|
||||
<p>This hypha has no text. Why not <a href="/edit/`)
|
||||
<p>This hypha has no text. Why not <a href="/edit/`)
|
||||
//line templates/readers.qtpl:38
|
||||
qw422016.E().S(hyphaName)
|
||||
//line templates/readers.qtpl:38
|
||||
qw422016.N().S(`">create it</a>?</p>
|
||||
`)
|
||||
`)
|
||||
//line templates/readers.qtpl:39
|
||||
} else {
|
||||
//line templates/readers.qtpl:39
|
||||
qw422016.N().S(`
|
||||
`)
|
||||
`)
|
||||
//line templates/readers.qtpl:40
|
||||
qw422016.N().S(contents)
|
||||
//line templates/readers.qtpl:40
|
||||
qw422016.N().S(`
|
||||
`)
|
||||
`)
|
||||
//line templates/readers.qtpl:41
|
||||
}
|
||||
//line templates/readers.qtpl:41
|
||||
qw422016.N().S(`
|
||||
</article>
|
||||
<section class="prevnext">
|
||||
`)
|
||||
</article>
|
||||
<section class="prevnext">
|
||||
`)
|
||||
//line templates/readers.qtpl:44
|
||||
if prevHyphaName != "" {
|
||||
//line templates/readers.qtpl:44
|
||||
qw422016.N().S(`
|
||||
<a class="prevnext__el prevnext__prev" href="/page/`)
|
||||
<a class="prevnext__el prevnext__prev" href="/page/`)
|
||||
//line templates/readers.qtpl:45
|
||||
qw422016.E().S(prevHyphaName)
|
||||
//line templates/readers.qtpl:45
|
||||
@ -201,17 +201,17 @@ func StreamPageHTML(qw422016 *qt422016.Writer, rq *http.Request, hyphaName, navi
|
||||
qw422016.E().S(path.Base(prevHyphaName))
|
||||
//line templates/readers.qtpl:45
|
||||
qw422016.N().S(`</a>
|
||||
`)
|
||||
`)
|
||||
//line templates/readers.qtpl:46
|
||||
}
|
||||
//line templates/readers.qtpl:46
|
||||
qw422016.N().S(`
|
||||
`)
|
||||
`)
|
||||
//line templates/readers.qtpl:47
|
||||
if nextHyphaName != "" {
|
||||
//line templates/readers.qtpl:47
|
||||
qw422016.N().S(`
|
||||
<a class="prevnext__el prevnext__next" href="/page/`)
|
||||
<a class="prevnext__el prevnext__next" href="/page/`)
|
||||
//line templates/readers.qtpl:48
|
||||
qw422016.E().S(nextHyphaName)
|
||||
//line templates/readers.qtpl:48
|
||||
@ -220,58 +220,58 @@ func StreamPageHTML(qw422016 *qt422016.Writer, rq *http.Request, hyphaName, navi
|
||||
qw422016.E().S(path.Base(nextHyphaName))
|
||||
//line templates/readers.qtpl:48
|
||||
qw422016.N().S(` →</a>
|
||||
`)
|
||||
`)
|
||||
//line templates/readers.qtpl:49
|
||||
}
|
||||
//line templates/readers.qtpl:49
|
||||
qw422016.N().S(`
|
||||
</section>
|
||||
`)
|
||||
</section>
|
||||
`)
|
||||
//line templates/readers.qtpl:51
|
||||
if u := user.FromRequest(rq); !user.AuthUsed || u.Group != "anon" {
|
||||
//line templates/readers.qtpl:51
|
||||
qw422016.N().S(`
|
||||
<form action="/upload-binary/`)
|
||||
<form action="/upload-binary/`)
|
||||
//line templates/readers.qtpl:52
|
||||
qw422016.E().S(hyphaName)
|
||||
//line templates/readers.qtpl:52
|
||||
qw422016.N().S(`"
|
||||
method="post" enctype="multipart/form-data"
|
||||
class="upload-amnt">
|
||||
`)
|
||||
method="post" enctype="multipart/form-data"
|
||||
class="upload-amnt">
|
||||
`)
|
||||
//line templates/readers.qtpl:55
|
||||
if hasAmnt {
|
||||
//line templates/readers.qtpl:55
|
||||
qw422016.N().S(`
|
||||
<a class="upload-amnt__unattach" href="/unattach-ask/`)
|
||||
<a class="upload-amnt__unattach" href="/unattach-ask/`)
|
||||
//line templates/readers.qtpl:56
|
||||
qw422016.E().S(hyphaName)
|
||||
//line templates/readers.qtpl:56
|
||||
qw422016.N().S(`">Unattach current attachment?</a>
|
||||
`)
|
||||
`)
|
||||
//line templates/readers.qtpl:57
|
||||
}
|
||||
//line templates/readers.qtpl:57
|
||||
qw422016.N().S(`
|
||||
<label for="upload-binary__input">Upload a new attachment</label>
|
||||
<br>
|
||||
<input type="file" id="upload-binary__input" name="binary"/>
|
||||
<input type="submit"/>
|
||||
</form>
|
||||
`)
|
||||
<label for="upload-binary__input">Upload a new attachment</label>
|
||||
<br>
|
||||
<input type="file" id="upload-binary__input" name="binary"/>
|
||||
<input type="submit"/>
|
||||
</form>
|
||||
`)
|
||||
//line templates/readers.qtpl:63
|
||||
}
|
||||
//line templates/readers.qtpl:63
|
||||
qw422016.N().S(`
|
||||
</main>
|
||||
<aside class="relative-hyphae layout-card">
|
||||
<h1 class="relative-hyphae__title layout-card__title">Relative hyphae</h1>
|
||||
`)
|
||||
</main>
|
||||
<aside class="relative-hyphae layout-card">
|
||||
<h1 class="relative-hyphae__title layout-card__title">Relative hyphae</h1>
|
||||
`)
|
||||
//line templates/readers.qtpl:67
|
||||
qw422016.N().S(relatives)
|
||||
//line templates/readers.qtpl:67
|
||||
qw422016.N().S(`
|
||||
</aside>
|
||||
</aside>
|
||||
</div>
|
||||
`)
|
||||
//line templates/readers.qtpl:70
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav class="header-links">
|
||||
<nav class="header-links main-width">
|
||||
<ul class="header-links__list">
|
||||
{%- for _, link := range util.HeaderLinks -%}
|
||||
<li class="header-links__entry"><a class="header-links__link" href="{%s link.Href %}">{%s link.Display %}</a></li>
|
||||
|
||||
@ -49,7 +49,7 @@ func StreamBaseHTML(qw422016 *qt422016.Writer, title, body string, u *user.User,
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav class="header-links">
|
||||
<nav class="header-links main-width">
|
||||
<ul class="header-links__list">
|
||||
`)
|
||||
//line templates/stuff.qtpl:17
|
||||
|
||||
Loading…
Reference in New Issue
Block a user