karim/kgva
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: filebrowser shows only images; info.md moves to a side panel in Libre Baskerville

Browse Source
This commit is contained in:
kgva CMS
2026-08-10 22:02:37 +00:00
parent b807373472
commit fb6e87ef24
6 changed files with 79 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/custom.css
+58
View File
@@ -6,6 +6,30 @@
remove this file → original shibui look returns.
══════════════════════════════════════════════════════════════ */
/* self-hosted serif, used only for the project-info side panel */
@font-face {
font-family: "Libre Baskerville";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/fonts/libre-baskerville-400.woff2") format("woff2");
}
@font-face {
font-family: "Libre Baskerville";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("/fonts/libre-baskerville-400italic.woff2") format("woff2");
}
@font-face {
font-family: "Libre Baskerville";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/fonts/libre-baskerville-700.woff2") format("woff2");
}
:root { --font-family-serif: "Libre Baskerville", Georgia, serif; }
/* ─────────────────────── SHELL PROMPT ─────────────────────── */
.prompt {
font-family: var(--font-family-mono);
@@ -143,6 +167,40 @@ body:not(.home) .menu { display: none; }
.tui__text > :first-child { margin-top: 0; }
.tui__text > :last-child { margin-bottom: 0; }
/* ─────────────────── PROJECT INFO PANEL ─────────────────── */
/* info.md (the project description / about text) lives outside the
filebrowser now — on wide viewports it sits to the right of the whole
file list, clearing the "$ ls" / "total N" shell lines up top; on narrow
ones there's no room for two columns, so it just stacks below instead. */
.proj-layout { display: block; }
.proj-info {
margin: 1.5rem 0 0;
font-family: var(--font-family-serif);
font-size: 1.05em;
line-height: 1.6;
}
.proj-info > :first-child { margin-top: 0; }
.proj-info > :last-child { margin-bottom: 0; }
@media (min-width: 900px) {
.proj-layout {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding: 0 1.5rem;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: flex-start;
gap: 2.5rem;
}
.proj-layout .filebrowser { flex: 0 1 var(--container-width); min-width: 0; }
.proj-info {
flex: 0 1 calc(var(--container-width) - 4rem); /* slightly narrower than the content column */
margin-top: 3.6rem; /* clear the two shell lines above the file list */
}
}
/* prev/next as shell "cd" commands — same vocabulary as the rest of the site */
.proj-nav {
font-family: var(--font-family-mono);
layouts/_default/about.html
+9 -10
View File
@@ -1,27 +1,26 @@
{{ define "bodyclass" }}page-about{{ end }}
{{ define "main" }}
{{ $cv := .Site.GetPage "/cv" }}
<div class="proj-layout">
{{ if $cv }}
<div class="tui tui--files filebrowser">
<p class="tui__cmd"><span class="tui__sym">$</span> ls</p>
<p class="tui__cmd tui__total">total {{ if $cv }}2{{ else }}1{{ end }}</p>
<p class="tui__cmd tui__total">total 1</p>
<ul class="tui__ls">
<li><a href="{{ "/" | relLangURL }}" data-name="..">
<span class="tui__perm">drwxr-xr-x</span><span class="tui__name">..</span>
</a></li>
<li><a data-name="info.md" data-text="info.md" class="is-selected">
<span class="tui__perm">-rw-r--r--</span><span class="tui__name">info.md</span>
</a></li>
{{ if $cv }}
<li><a data-name="cv.md" data-text="cv.md">
<li><a data-name="cv.md" data-text="cv.md" class="is-selected">
<span class="tui__perm">-rw-r--r--</span><span class="tui__name">cv.md</span>
</a></li>
{{ end }}
</ul>
<figure class="tui__preview">
<div class="tui__text" data-text="info.md">{{ .Content }}</div>
{{ if $cv }}<div class="tui__text" data-text="cv.md" hidden>{{ $cv.Content }}</div>{{ end }}
<figcaption class="tui__status">info.md</figcaption>
<div class="tui__text" data-text="cv.md">{{ $cv.Content }}</div>
<figcaption class="tui__status">cv.md</figcaption>
</figure>
</div>
{{ end }}
<aside class="proj-info">{{ .Content }}</aside>
</div>
{{ end }}
layouts/portfolio/single.html
+12 -13
View File
@@ -4,36 +4,32 @@
{{ $images := .Params.images }}
{{ $video := .Params.video }}
{{ if or $images $hasText $video }}
{{ if or $images $video $hasText }}
<div class="proj-layout">
{{ if or $images $video }}
<div class="tui tui--files filebrowser">
<p class="tui__cmd"><span class="tui__sym">$</span> ls</p>
{{ $total := 0 }}{{ if $images }}{{ $total = len $images }}{{ end }}{{ if $hasText }}{{ $total = add $total 1 }}{{ end }}{{ if $video }}{{ $total = add $total 1 }}{{ end }}
{{ $total := 0 }}{{ if $images }}{{ $total = len $images }}{{ end }}{{ if $video }}{{ $total = add $total 1 }}{{ end }}
<p class="tui__cmd tui__total">total {{ $total }}</p>
<ul class="tui__ls">
<li><a href="{{ "/portfolio/" | relLangURL }}" data-name="..">
<span class="tui__perm">drwxr-xr-x</span><span class="tui__name">..</span>
</a></li>
{{ if $hasText }}
<li><a data-name="info.md" data-text="info.md" class="is-selected">
<span class="tui__perm">-rw-r--r--</span><span class="tui__name">info.md</span>
</a></li>
{{ end }}
{{ if $video }}
<li><a data-name="video.mp4" data-video="1"{{ if not $hasText }} class="is-selected"{{ end }}>
<li><a data-name="video.mp4" data-video="1" class="is-selected">
<span class="tui__perm">-rw-r--r--</span><span class="tui__name">video.mp4</span>
</a></li>
{{ end }}
{{ range $i, $im := $images }}
<li><a data-img="{{ $im.src | relURL }}" data-name="{{ $im.name }}"{{ if and (not $hasText) (not $video) (eq $i 0) }} class="is-selected"{{ end }}>
<li><a data-img="{{ $im.src | relURL }}" data-name="{{ $im.name }}"{{ if and (not $video) (eq $i 0) }} class="is-selected"{{ end }}>
<span class="tui__perm">-rw-r--r--</span><span class="tui__name">{{ $im.name }}</span>
</a></li>
{{ end }}
</ul>
<figure class="tui__preview">
{{ if $hasText }}<div class="tui__text" data-text="info.md">{{ .Content }}</div>{{ end }}
{{ if $video }}
<div class="player"{{ if $hasText }} hidden{{ end }}>
<div class="player">
<video preload="none" playsinline{{ with .Params.thumbnail }} poster="{{ . }}"{{ end }}>
<source src="{{ $video }}" type="video/mp4">
</video>
@@ -47,11 +43,14 @@
</div>
</div>
{{ end }}
{{ if $images }}<img{{ if or $hasText $video }} hidden{{ end }} src="{{ (index $images 0).src | relURL }}" alt="{{ .Title }}">{{ end }}
<figcaption class="tui__status">{{ if $hasText }}info.md{{ else if $video }}video.mp4{{ else if $images }}{{ (index $images 0).name }}{{ end }}</figcaption>
{{ if $images }}<img{{ if $video }} hidden{{ end }} src="{{ (index $images 0).src | relURL }}" alt="{{ .Title }}">{{ end }}
<figcaption class="tui__status">{{ if $video }}video.mp4{{ else if $images }}{{ (index $images 0).name }}{{ end }}</figcaption>
</figure>
</div>
{{ end }}
{{ if $hasText }}<aside class="proj-info">{{ .Content }}</aside>{{ end }}
</div>
{{ end }}
{{ with .Params.studies }}
{{ $segs := after 2 (split . "/") }}
static/fonts/libre-baskerville-400.woff2
BIN
View File
Binary file not shown.
static/fonts/libre-baskerville-400italic.woff2
BIN
View File
Binary file not shown.
static/fonts/libre-baskerville-700.woff2
BIN
View File
Binary file not shown.