mirror of
https://github.com/osmarks/mycorrhiza.git
synced 2024-12-13 05:50:27 +00:00
Merge pull request #5 from bouncepaw/feature/templates
Hypha page styling
This commit is contained in:
Timur Ismagilov
GitHub
commit
f78ce434b0
@ -2,7 +2,6 @@ package main
|
||||
|
||||
const (
|
||||
FooterText = `
|
||||
<hr>
|
||||
This website runs <a href="https://github.com/bouncepaw/mycorrhiza">MycorrhizaWiki</a>.
|
||||
`
|
||||
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">
|
||||
`
|
||||
DefaultHeader = `
|
||||
<h1 class="header__site-title">MycorrhizaWiki</h1>
|
||||
<h1 class="site-title">MycorrhizaWiki 🍄</h1>
|
||||
` // TODO: Search input
|
||||
)
|
||||
|
||||
63
render.go
63
render.go
@ -13,15 +13,27 @@ func Layout(f map[string]string) string {
|
||||
%s
|
||||
</head>
|
||||
<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>
|
||||
<aside class="sidebar">%s</aside>
|
||||
<footer class="footer">%s</footer>
|
||||
<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>
|
||||
<footer class="footer">%s</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
%s
|
||||
</body>
|
||||
</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, content, tags string) string {
|
||||
@ -75,24 +87,39 @@ func EditHyphaPage(name, text_mime, content, tags string) string {
|
||||
}
|
||||
|
||||
func HyphaPage(hyphae map[string]*Hypha, rev Revision, content string) string {
|
||||
template := `
|
||||
sidebar := `
|
||||
<div class="naviwrapper">
|
||||
<form class="naviwrapper__buttons">
|
||||
<input type="submit" name="action" value="edit"/>
|
||||
<input type="submit" name="action" value="getBinary"/>
|
||||
<input type="submit" name="action" value="zen"/>
|
||||
<input type="submit" name="action" value="raw"/>
|
||||
</form>
|
||||
%s
|
||||
<div class="hypha-actions">
|
||||
<ul>
|
||||
<li><a href="?action=edit">Edit</a>
|
||||
<li><a href="?action=getBinary">Download</a>
|
||||
<li><a href="?action=zen">Zen mode</a>
|
||||
<li><a href="?action=raw">View raw</a>
|
||||
</ul>
|
||||
</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{
|
||||
"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)
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user