mirrors/mycorrhiza
1
0
Fork 0
mirror of https://github.com/osmarks/mycorrhiza.git synced 2025-10-31 07:33:00 +00:00
Code Issues Releases Wiki Activity

Hypha page styling

Browse Source
This commit is contained in:
handlerug
2020-06-18 20:32:45 +07:00
parent 5f8739e936
commit 6b09e74993
3 changed files with 277 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
config.go
View File

@@ -2,7 +2,6 @@ package main
const ( const (
FooterText = ` FooterText = `
<hr>
This website runs <a href="https://github.com/bouncepaw/mycorrhiza">MycorrhizaWiki</a>. This website runs <a href="https://github.com/bouncepaw/mycorrhiza">MycorrhizaWiki</a>.
` `
TitleTemplate = `%s at MycorrhizaWiki` TitleTemplate = `%s at MycorrhizaWiki`
@@ -10,6 +9,6 @@ This website runs <a href="https://github.com/bouncepaw/mycorrhiza">MycorrhizaWi
<link rel="stylesheet" href="/sys/main.css?action=raw"> <link rel="stylesheet" href="/sys/main.css?action=raw">
` `
DefaultHeader = ` DefaultHeader = `
<h1 class="header__site-title">MycorrhizaWiki</h1> <h1 class="site-title">MycorrhizaWiki 🍄</h1>
` // TODO: Search input ` // TODO: Search input
) )

51
render.go
View File

@@ -13,15 +13,27 @@ func Layout(f map[string]string) string {
%s %s
</head> </head>
<body> <body>
<header class="header">%s</header> <div class="shroom">
<button class="shroom__button" id="shroomBtn"><span>🍄</span> Open mycelium</button>
</div>
<main class="main">%s</main> <main class="main">%s</main>
<div class="left-panel" id="shroomburgerMenu">
<div class="left-panel__in">
<div class="shroom mushroom">
<button class="shroom__button" id="mushroomBtn"><span>🍄</span> Close mycelium</button>
</div>
<div class="left-panel__contents">
<header class="header">%s</header>
<aside class="sidebar">%s</aside> <aside class="sidebar">%s</aside>
<footer class="footer">%s</footer> <footer class="footer">%s</footer>
</div>
</div>
</div>
%s %s
</body> </body>
</html> </html>
` `
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 { 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 { func HyphaPage(hyphae map[string]*Hypha, rev Revision, content string) string {
template := ` sidebar := `
<div class="naviwrapper"> <div class="naviwrapper">
<form class="naviwrapper__buttons"> <div class="hypha-actions">
<input type="submit" name="action" value="edit"/> <ul>
<input type="submit" name="action" value="getBinary"/> <li><a href="?action=edit">Edit</a>
<input type="submit" name="action" value="zen"/> <li><a href="?action=getBinary">Download</a>
<input type="submit" name="action" value="raw"/> <li><a href="?action=zen">Zen mode</a>
</form> <li><a href="?action=raw">View raw</a>
%s </ul>
</div>
</div> </div>
` `
bodyBottom := `
<script type="text/javascript">
var menu = document.getElementById('shroomburgerMenu');
document.getElementById('shroomBtn').addEventListener('click', function() {
menu.classList.add('active');
});
document.getElementById('mushroomBtn').addEventListener('click', function() {
menu.classList.remove('active');
});
</script>
`
args := map[string]string{ args := map[string]string{
"title": fmt.Sprintf(TitleTemplate, rev.FullName), "title": fmt.Sprintf(TitleTemplate, rev.FullName),
"head": DefaultStyles, "head": DefaultStyles,
"header": DefaultHeader, "header": DefaultHeader,
"main": fmt.Sprintf(template, content), "main": content,
"sidebar": "", "sidebar": sidebar,
"footer": FooterText, "footer": FooterText,
"bodyBottom": bodyBottom,
} }
return Layout(args) return Layout(args)

233
w/m/sys/main.css/1.txt
View File

@@ -1,7 +1,236 @@
b { color: red; } *, *::before, *::after {
article { border: 1px black solid; } 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 { display: grid; grid-template-columns: 7fr 5fr; }
.edit-box .naviwrapper__buttons { grid-column: 1; grid-row: 2 } .edit-box .naviwrapper__buttons { grid-column: 1; grid-row: 2 }
.edit-box__left { 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 } .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;
}