Updated styles

This commit is contained in:
Adam Gospodarczyk 2022-04-27 03:23:21 +02:00
parent 5cf5326df4
commit bdb547fc46
14 changed files with 50 additions and 24 deletions

View File

@ -70,11 +70,11 @@ async function drawGraph(url, baseUrl, pathColors, depth, enableDrag, enableLege
.on("end", enableDrag ? dragended : noop); .on("end", enableDrag ? dragended : noop);
} }
const height = 250 const height = 450
const width = document.getElementById("graph-container").offsetWidth const width = document.getElementById("graph-container").offsetWidth
const simulation = d3.forceSimulation(data.nodes) const simulation = d3.forceSimulation(data.nodes)
.force("charge", d3.forceManyBody().strength(-30)) .force("charge", d3.forceManyBody().strength(-2000))
.force("link", d3.forceLink(data.links).id(d => d.id)) .force("link", d3.forceLink(data.links).id(d => d.id))
.force("center", d3.forceCenter()); .force("center", d3.forceCenter());
@ -86,8 +86,8 @@ async function drawGraph(url, baseUrl, pathColors, depth, enableDrag, enableLege
if (enableLegend) { if (enableLegend) {
const legend = [ const legend = [
{ "Current": "var(--g-node-active)" }, { "Aktualna strona": "var(--g-node-active)" },
{ "Note": "var(--g-node)" }, { "Notatka": "var(--g-node)" },
...pathColors ...pathColors
] ]
legend.forEach((legendEntry, i) => { legend.forEach((legendEntry, i) => {
@ -186,7 +186,7 @@ async function drawGraph(url, baseUrl, pathColors, depth, enableDrag, enableLege
.attr("dx", 12) .attr("dx", 12)
.attr("dy", ".35em") .attr("dy", ".35em")
.text((d) => content[d.id]?.title || d.id.replace("-", " ")) .text((d) => content[d.id]?.title || d.id.replace("-", " "))
.style("opacity", 0) .style("opacity", 1)
.style("pointer-events", "none") .style("pointer-events", "none")
.call(drag(simulation)); .call(drag(simulation));
@ -194,8 +194,7 @@ async function drawGraph(url, baseUrl, pathColors, depth, enableDrag, enableLege
if (enableZoom) { if (enableZoom) {
svg.call(d3.zoom() svg.call(d3.zoom()
.extent([[0, 0], [width, height]]) .extent([[5, 5], [width, height]])
.scaleExtent([0.25, 4])
.on("zoom", ({ transform }) => { .on("zoom", ({ transform }) => {
link.attr("transform", transform); link.attr("transform", transform);
node.attr("transform", transform); node.attr("transform", transform);

View File

@ -65,12 +65,44 @@ body, body.theme-dark {
article a { article a {
color: rgb(238, 27, 231); background: none; color: rgb(238, 27, 231); background: none;
} }
a:hover {
color: #ee1be7 !important; text-decoration: underline !important;
}
article a.internal-link { background: none; } article a.internal-link { background: none; }
article h2 { article h2 {
margin-top: 2rem; margin-top: 2rem;
} }
p, article, article p, article li, article a, .page-end>.backlinks-container>ul>li {
font-family: "Poppins", sans-serif;
line-height: 29px;
font-size: 16px;
font-weight: 500;
}
#TableOfContents>ol>li::marker {
font-family: "Poppins", sans-serif;
}
header { justify-content: space-between; }
header>.spacer { display: none; }
.mainTOC {
margin: 1rem 0; cursor: pointer;
}
.mainTOC details summary, .mainTOC details[open] summary {
color: #888; cursor: pointer;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, ol a, ul a, thead a {
font-family: "Poppins", sans-serif;
font-weight: revert;
margin: revert;
padding: revert;
font-size: inherit;
}
body.theme-dark h1, body.theme-dark h1,
body.theme-dark h2, body.theme-dark h2,
body.theme-dark h3, body.theme-dark h3,

View File

@ -4,7 +4,6 @@
<body> <body>
<div class="singlePage"> <div class="singlePage">
{{partial "darkmode.html" .}}
<div class="centered"> <div class="centered">
<h1>404.</h1> <h1>404.</h1>
<h3>Hey! You look a little lost. This page doesn't exist (or may be private).</h3> <h3>Hey! You look a little lost. This page doesn't exist (or may be private).</h3>

View File

@ -10,7 +10,6 @@
<h1 id="page-title"><a href="{{ .Site.BaseURL }}">{{ .Site.Data.config.page_title }}</a></h1> <h1 id="page-title"><a href="{{ .Site.BaseURL }}">{{ .Site.Data.config.page_title }}</a></h1>
<svg tabindex="0" id="search-icon" aria-labelledby="title desc" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7"><title id="title">Search Icon</title><desc id="desc">Icon to open search</desc><g class="search-path" fill="none"><path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4"/><circle cx="8" cy="8" r="7"/></g></svg> <svg tabindex="0" id="search-icon" aria-labelledby="title desc" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7"><title id="title">Search Icon</title><desc id="desc">Icon to open search</desc><g class="search-path" fill="none"><path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4"/><circle cx="8" cy="8" r="7"/></g></svg>
<div class="spacer"></div> <div class="spacer"></div>
{{partial "darkmode.html" .}}
</header> </header>
<article> <article>
<h1>All {{.Title}}</h1> <h1>All {{.Title}}</h1>

View File

@ -10,7 +10,6 @@
<h1 id="page-title"><a href="{{ .Site.BaseURL }}"><img class="logo" src="https://overment.com/images/logo-icon.svg" alt="logo" /> {{ .Site.Data.config.page_title }}</a></h1> <h1 id="page-title"><a href="{{ .Site.BaseURL }}"><img class="logo" src="https://overment.com/images/logo-icon.svg" alt="logo" /> {{ .Site.Data.config.page_title }}</a></h1>
<svg tabindex="0" id="search-icon" aria-labelledby="title desc" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7"><title id="title">Search Icon</title><desc id="desc">Icon to open search</desc><g class="search-path" fill="none"><path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4"/><circle cx="8" cy="8" r="7"/></g></svg> <svg tabindex="0" id="search-icon" aria-labelledby="title desc" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7"><title id="title">Search Icon</title><desc id="desc">Icon to open search</desc><g class="search-path" fill="none"><path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4"/><circle cx="8" cy="8" r="7"/></g></svg>
<div class="spacer"></div> <div class="spacer"></div>
{{partial "darkmode.html" .}}
</header> </header>
<article> <article>
{{if .Title}}<h1>{{ .Title }}</h1>{{end}} {{if .Title}}<h1>{{ .Title }}</h1>{{end}}

View File

@ -10,7 +10,6 @@
<h1 id="page-title"><a href="{{ .Site.BaseURL }}">{{ .Site.Data.config.page_title }}</a></h1> <h1 id="page-title"><a href="{{ .Site.BaseURL }}">{{ .Site.Data.config.page_title }}</a></h1>
<svg tabindex="0" id="search-icon" aria-labelledby="title desc" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7"><title id="title">Search Icon</title><desc id="desc">Icon to open search</desc><g class="search-path" fill="none"><path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4"/><circle cx="8" cy="8" r="7"/></g></svg> <svg tabindex="0" id="search-icon" aria-labelledby="title desc" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7"><title id="title">Search Icon</title><desc id="desc">Icon to open search</desc><g class="search-path" fill="none"><path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4"/><circle cx="8" cy="8" r="7"/></g></svg>
<div class="spacer"></div> <div class="spacer"></div>
{{partial "darkmode.html" .}}
</header> </header>
<article> <article>
<h1>All {{.Title}}</h1> <h1>All {{.Title}}</h1>

View File

@ -10,7 +10,6 @@
<h1 id="page-title"><a href="{{ .Site.BaseURL }}">{{ .Site.Data.config.page_title }}</a></h1> <h1 id="page-title"><a href="{{ .Site.BaseURL }}">{{ .Site.Data.config.page_title }}</a></h1>
<svg tabindex="0" id="search-icon" aria-labelledby="title desc" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7"><title id="title">Search Icon</title><desc id="desc">Icon to open search</desc><g class="search-path" fill="none"><path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4"/><circle cx="8" cy="8" r="7"/></g></svg> <svg tabindex="0" id="search-icon" aria-labelledby="title desc" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7"><title id="title">Search Icon</title><desc id="desc">Icon to open search</desc><g class="search-path" fill="none"><path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4"/><circle cx="8" cy="8" r="7"/></g></svg>
<div class="spacer"></div> <div class="spacer"></div>
{{partial "darkmode.html" .}}
</header> </header>
<article> <article>
<h1>Tag: {{.Title | humanize}}</h1> <h1>Tag: {{.Title | humanize}}</h1>

View File

@ -9,7 +9,6 @@
<h1>{{if .Title}}{{ .Title }}{{else}}Untitled{{end}}</h1> <h1>{{if .Title}}{{ .Title }}{{else}}Untitled{{end}}</h1>
<svg tabindex="0" id="search-icon" aria-labelledby="title desc" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7"><title id="title">Search Icon</title><desc id="desc">Icon to open search</desc><g class="search-path" fill="none"><path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4"/><circle cx="8" cy="8" r="7"/></g></svg> <svg tabindex="0" id="search-icon" aria-labelledby="title desc" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7"><title id="title">Search Icon</title><desc id="desc">Icon to open search</desc><g class="search-path" fill="none"><path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4"/><circle cx="8" cy="8" r="7"/></g></svg>
<div class="spacer"></div> <div class="spacer"></div>
{{partial "darkmode.html" .}}
</header> </header>
<article> <article>
{{partial "toc.html" .}} {{partial "toc.html" .}}

View File

@ -1,4 +1,4 @@
<h3>Backlinks</h3> <h3>Powiązania</h3>
<ul class="backlinks"> <ul class="backlinks">
{{$url := urls.Parse .Site.BaseURL }} {{$url := urls.Parse .Site.BaseURL }}
{{$host := strings.TrimRight "/" $url.Path }} {{$host := strings.TrimRight "/" $url.Path }}
@ -18,7 +18,7 @@
{{- end -}} {{- end -}}
{{else}} {{else}}
<li> <li>
No backlinks found Brak powiązań
</li> </li>
{{end}} {{end}}
</ul> </ul>

View File

@ -1,10 +1,11 @@
<hr/> <hr/>
{{partial "graph.html" .}}
<div class="page-end"> <div class="page-end">
<div class="backlinks-container"> <div class="backlinks-container">
{{partial "backlinks.html" .}} {{partial "backlinks.html" .}}
</div> </div>
<div> <div>
{{partial "graph.html" .}}
</div> </div>
</div> </div>

View File

@ -1,5 +1,5 @@
<script src="https://cdn.jsdelivr.net/npm/d3@6.7.0/dist/d3.min.js" integrity="sha256-+7jaYCp29O1JusNWHaYtgUn6EhuP0VaFuswhNV06MyI=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/d3@6.7.0/dist/d3.min.js" integrity="sha256-+7jaYCp29O1JusNWHaYtgUn6EhuP0VaFuswhNV06MyI=" crossorigin="anonymous"></script>
<h3>Interactive Graph</h3> <h3>Mapa treści</h3>
<div id="graph-container"></div> <div id="graph-container"></div>
<style> <style>
:root { :root {

View File

@ -2,12 +2,12 @@
<!-- Meta tags --> <!-- Meta tags -->
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="description" content="{{if .IsHome}}{{$.Site.Data.config.description}}{{else}}{{.Summary}}{{end}}"> <meta name="description" content="{{if .IsHome}}{{$.Site.Data.config.description}}{{else}}{{.Summary}}{{end}}">
<title>{{ if .Title }}{{ .Title }}{{ else }}{{ $.Site.Data.config.page_title }}{{ end }}</title> <title>{{ if .Title }}{{ .Title }}{{ else }}{{ $.Site.Data.config.page_title }}{{ end }} - brain.overment.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/png" href="https://overment.com/icon.png" /> <link rel="shortcut icon" type="image/png" href="https://overment.com/icon.png" />
<!-- CSS Stylesheets and Fonts --> <!-- CSS Stylesheets and Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,900;1,900&family=Poppins:ital,wght@0,300;0,700;1,300;1,500;1,700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,900;1,900&family=Poppins:ital,wght@0,300;0,500;0,700;1,300;1,500;1,700&display=swap" rel="stylesheet">
{{$sass := resources.Match "styles/[!_]*.scss" }} {{$sass := resources.Match "styles/[!_]*.scss" }}
{{$css := slice }} {{$css := slice }}
{{range $sass}} {{range $sass}}

View File

@ -1,7 +1,7 @@
{{ if (and $.Site.Data.config.enableToc (ne .Params.enableToc false) (gt .WordCount 150)) }} {{ if (and $.Site.Data.config.enableToc (ne .Params.enableToc false) (gt .WordCount 150)) }}
<aside class="mainTOC"> <aside class="mainTOC">
<details open> <details >
<summary>Spis treści</summary> <summary> Zawartość tej strony</summary>
{{ .TableOfContents }} {{ .TableOfContents }}
</details> </details>
</aside> </aside>