diff --git a/config.go b/config.go index e325a85..20ae30c 100644 --- a/config.go +++ b/config.go @@ -2,7 +2,6 @@ package main const ( FooterText = ` -
This website runs MycorrhizaWiki. ` TitleTemplate = `%s at MycorrhizaWiki` @@ -10,6 +9,6 @@ This website runs MycorrhizaWi ` DefaultHeader = ` -

MycorrhizaWiki

+

MycorrhizaWiki 🍄

` // TODO: Search input ) diff --git a/render.go b/render.go index d8267d2..79c30e2 100644 --- a/render.go +++ b/render.go @@ -13,15 +13,27 @@ func Layout(f map[string]string) string { %s -
%s
+
+ +
%s
- - +
+
+
+ +
+
+
%s
+ + +
+
+
%s ` - return fmt.Sprintf(template, f["title"], f["head"], f["header"], f["main"], f["sidebar"], FooterText, f["bodyBottom"]) + return fmt.Sprintf(template, f["title"], f["head"], f["main"], f["header"], f["sidebar"], FooterText, f["bodyBottom"]) } func EditHyphaPage(name, text_mime, binary_mime, content, tags string) string { @@ -76,24 +88,39 @@ func EditHyphaPage(name, text_mime, binary_mime, content, tags string) string { } func HyphaPage(hyphae map[string]*Hypha, rev Revision, content string) string { - template := ` + sidebar := `
-
- - - - -
- %s +
+ +
` + + bodyBottom := ` + +` + args := map[string]string{ - "title": fmt.Sprintf(TitleTemplate, rev.FullName), - "head": DefaultStyles, - "header": DefaultHeader, - "main": fmt.Sprintf(template, content), - "sidebar": "", - "footer": FooterText, + "title": fmt.Sprintf(TitleTemplate, rev.FullName), + "head": DefaultStyles, + "header": DefaultHeader, + "main": content, + "sidebar": sidebar, + "footer": FooterText, + "bodyBottom": bodyBottom, } return Layout(args) diff --git a/w/m/sys/main.css/1.txt b/w/m/sys/main.css/1.txt index 2ab4057..e08d902 100644 --- a/w/m/sys/main.css/1.txt +++ b/w/m/sys/main.css/1.txt @@ -1,7 +1,236 @@ -b { color: red; } -article { border: 1px black solid; } +*, *::before, *::after { + box-sizing: border-box; +} + +html { + height: 100%; +} + +body { + font: 15px/1.5 system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Helvetica', 'Roboto', 'Arial', sans-serif; + max-width: 500px; + min-height: 100%; + margin: 0 auto; + padding: 12px 24px; +} + +@media (min-width: 700px) { + body { + + /* + display: grid; + grid-template-columns: 1fr 250px; + grid-template-rows: auto 1fr auto; + grid-column-gap: 24px; + grid-template-areas: + "main header" + "main sidebar" + "main footer"; + */ + } +} + +.shroom { + /*margin: 8px 0 24px;*/ + /*margin: -12px;*/ + margin: 0; +} + +.shroom__button { + /* + padding: 2px 12px; + border: 1px solid #ddd; + */border-radius: 8px;/* + background: none; + */ + padding: 8px 16px 8px 0; + border: none; + background: #f0f2f4; + color: #444; + font: inherit; + font-size: 15px; + font-weight: 500; + text-align: left; +} + +.shroom span { + margin-left: 16px; + margin-right: 8px; + font-size: 20px; + vertical-align: -0.04em; +} + +.mushroom .shroom__button { + background: #44484a; + color: #dddfe4; +} + +/* +header { + grid-area: header; +} + +main { + grid-area: main; +} + +aside { + grid-area: sidebar; +} + +footer { + grid-area: footer; +} +*/ + + +.header { + padding: 8px 0; +} + +.header h1 { + margin: 0; + font-size: 18px; + font-weight: 600; + letter-spacing: 0.02em; + color: #222428; +} + + +a { + color: #44e; +} + +a:visited { + color: #44a; +} + +h1, h2, h3, h4, h5, h6 { + margin: 1em 0 0.25em; +} + +.page { + font-family: 'Georgia', serif; + font-size: 16px; + line-height: 1.666; + max-width: 40em; + hyphens: auto; +} + +.page__title { + font-size: 36px; + font-weight: normal; +} + .edit-box { display: grid; grid-template-columns: 7fr 5fr; } .edit-box .naviwrapper__buttons { grid-column: 1; grid-row: 2 } .edit-box__left { grid-column: 1; grid-row: 2 } .edit-box__right { grid-column: 2; grid-row: 1 / span 2 } +footer { + /*margin-top: 40px; + border-top: 1px solid #ddd;*/ + padding: 1em 0; + font-size: 12px; + color: #888; +} + +footer a, footer a:visited { + color: #666; +} + +.left-panel { + display: none; +} + +.left-panel.active { + display: block; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: #fafafa; +} + +.left-panel.active .sidebar { + background: #fff; +} + +.left-panel__in { + width: 100%; + height: 100%; + max-width: 500px; + margin: 0 auto; + padding: 12px 24px; + +} + +.left-panel__contents { + width: 100%; + display: grid; + grid-template-rows: auto 1fr auto; +} + +.left-panel .shroom { + margin-bottom: 16px; +} + +@media (min-width: 700px) { + body { + max-width: 1200px; + padding: 8px 16px; + padding-right: 274px; /* 250px + 16px + 16px */ + } + + .shroom { + display: none; + } + + .page { + font-size: 18px; + } + + .left-panel { + display: block; + position: fixed; + top: 0; + bottom: 0; + width: 274px; /* 250px + 24px * 2 */ + /*right: calc(50% + 900px / 2 + 24px);*/ + right: 0; + } + + .left-panel__contents { + height: 100%; + } +} + +.sidebar { + padding: 16px 0; + border-radius: 8px; + background: #f4f4f4; +} + +.hypha-actions ul { + margin: 0; + padding: 0; +} + +.hypha-actions li { + list-style: none; +} + +.hypha-actions a { + display: block; + padding: 6px 16px; + font: inherit; + text-decoration: none; + color: #666; + transition: 0.1s background; +} + +aside .hypha-actions a:hover { + background: #eaeaea; +} +