bookstack/website
Fork 4
Code Issues 5 Pull requests Activity

Improved hack page styling to be presentable

Browse source
This commit is contained in:
Dan Brown 2023-01-24 05:54:17 +00:00
commit eee1340af8
Signed by: danb
GPG key ID: 46D9F943C24A2EF9
3 changed files with 96 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

11
themes/bookstack/layouts/hacks/single.html
View file

@ -31,14 +31,15 @@
</div>
</aside>
<main class="col-md-8 col-md-offset-1 docs-content">
<main class="col-md-8 col-md-offset-1 hacks-content">
<h1>{{.Title}}</h1>
<ul>
<li><strong>Author:</strong> {{ .Params.Author }}</li>
<li><strong>Created:</strong> {{ .Params.Date }}</li>
<li><strong>Updated:</strong> {{ .Params.Updated }}</li>
<ul class="hack-meta">
{{ $author := .Params.Author }}
<li><strong>Author:</strong> <a href="https://github.com/{{ strings.TrimLeft "@" $author }}" target="_blank">{{ $author }}</a></li>
<li><strong>Created:</strong> {{ .Date.Format "2" | humanize }} {{ .Date.Format "Jan 2006" }}</li>
<li><strong>Updated:</strong> {{ .Params.Updated.Format "2" | humanize }} {{ .Params.Updated.Format "Jan 2006" }}</li>
<li><strong>Last Tested On:</strong> {{ .Params.Tested }}</li>
</ul>

43
themes/bookstack/layouts/shortcodes/hack.html
View file

@ -5,21 +5,30 @@
{{ $md := printf "```%s\n%s\n```" $ext (readFile $file) }}
<div class="hack-file-block">
<div class="hack-file-block-filename">{{ $filename }}</div>
<div class="hack-file-wrapper">
<div class="hack-file-block-type">
{{ if eq $type "logical"}}
Logical Theme System
{{ else if eq $type "visual"}}
Logical Theme System
{{ else if eq $type "head"}}
Head Code
{{ end }}
</div>
</div>
<details>
<summary>View Code</summary>
{{ $md | markdownify }}
</details>
<details>
<summary class="hack-file-block">
<div class="hack-file-block-filename">{{ $filename }}</div>
<div class="hack-file-block-type type-{{ $type }}">
<a href="#{{$type}}" target="_blank">
{{ if eq $type "logical"}}
Logical Theme System
{{ else if eq $type "visual"}}
Logical Theme System
{{ else if eq $type "head"}}
Head Code
{{ end }}
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-question-circle-fill" viewBox="0 0 16 16" data-attribution="https://icons.getbootstrap.com/icons/question-circle/">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"/>
</svg>
</a>
</div>
</summary>
{{ $md | markdownify }}
</details>
</div>

64
themes/bookstack/sass/styles.scss
View file

@ -553,4 +553,68 @@ iframe[src^="https://www.youtube-nocookie.com"],
font-size: .9rem;
color: #666;
}
}
.hack-meta {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
column-gap: 1rem;
margin-bottom: 1.2rem;
li {
display: inline-block;
color: #888;
font-size: .9rem;
}
}
.hacks-content {
margin-bottom: 3rem;
h1 {
margin-bottom: .5rem;
}
}
.hack-file-wrapper {
background-color: #EEE;
border: 1px solid #DDD;
.chroma {
margin: -1px;
}
summary {
list-style: none;
font-size: .9rem;
cursor: pointer;
}
summary::-webkit-details-marker {
display: none;
}
}
.hack-file-block {
display: flex;
justify-content: space-between;
}
.hack-file-block-filename {
padding: .4rem 1rem;
font-weight: bold;
font-size: .9rem;
&:before {
display: inline-block;
width: 1rem;
content: "▸ ";
}
}
details[open] .hack-file-block-filename:before {
content: "▾ ";
}
.hack-file-block-type a {
display: inline-flex;
gap: .2em;
align-items: center;
padding: .4rem 1rem;
font-size: .9rem;
font-weight: 400;
}