jonas/blog
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

put polyring banner at bottom

Browse Source
This commit is contained in:
Jonas Maier 2024-05-12 14:56:09 +02:00
parent 4a3037f329
commit 61e6a6b973
1 changed files with 63 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
themes/m10c/layouts/_default/baseof.html
View File

@ -48,46 +48,70 @@
{{- end }}
</header>
<main class="app-container">
{{ block "main" . }}
{{ .Content }}
{{ end }}
<webring-banner theme="dark">
<p>Member of the <a href="https://polyring.ch">Polyring</a> webring</p>
</webring-banner>
<script async src="https://polyring.ch/embed.js" charset="utf-8" onload="try{patchPolyringCss()}catch{}"></script>
<script>
function patchPolyringCss() {
var host = document.querySelector('webring-banner');
if (host) {
var style = document.createElement('style');
style.innerHTML = `
div.webring-banner {
background-color: #242930;
border: none;
border-radius: 0;
}
span {
color: #afbac4 !important;
}
a {
color: #57cc8a !important;
}
a.webring-banner__info, div.webring-banner__header {
border-color: #afbac4;
}
`;
host.shadowRoot.appendChild(style)
<div class="app-content">
{{ block "main" . }}
{{ .Content }}
{{ end }}
</div>
<div class="app-footer">
<div class="app-footer-spacer"></div>
<webring-banner theme="dark">
<p>Member of the <a href="https://polyring.ch">Polyring</a> webring</p>
</webring-banner>
<script async src="https://polyring.ch/embed.js" charset="utf-8" onload="try{patchPolyringCss()}catch{}"></script>
<script>
function patchPolyringCss() {
var host = document.querySelector('webring-banner');
if (host) {
var style = document.createElement('style');
style.innerHTML = `
div.webring-banner {
background-color: #242930;
border: none;
border-radius: 0;
}
span {
color: #afbac4 !important;
}
a {
color: #57cc8a !important;
}
a.webring-banner__info, div.webring-banner__header {
border-color: #afbac4;
}
`;
host.shadowRoot.appendChild(style)
}
}
}
try {
// if webring loaded before patch function defined
patchPolyringCss();
} catch {
// if webring widget not yet loaded
}
</script>
</main>
try {
// if webring loaded before patch function defined
patchPolyringCss();
} catch {
// if webring widget not yet loaded
}
</script>
</div>
</main>
<style>
body, html {
height: 100%;
margin: 0;
}
main.app-container {
display: flex;
flex-direction: column;
min-height: 100%;
}
div.app-content {
flex-grow: 1;
}
div.app-footer {
margin-top: auto;
}
div.app-footer-spacer {
height: 40px;
}
</style>
</body>
</html>