Theodor-Springmann-Stiftung/musenalm
1
0
Fork 0
mirror of https://github.com/Theodor-Springmann-Stiftung/musenalm.git synced 2025-10-29 09:15:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Styling things on the front page

Browse Source
This commit is contained in:
Simon Martens
2025-02-18 23:44:04 +01:00
parent 3be64bd10d
commit 0c5e19609f
6 changed files with 89 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
views/assets/style.css
View File

File diff suppressed because one or more lines are too long

10
views/layouts/components/_menu.gohtml
View File

@@ -3,14 +3,18 @@
class="pb-1.5 border-b border-zinc-300"
x-data="{ openeditionmenu: window.location.pathname.startsWith('/edition/')}">
<div class="flex flex-row justify-between">
<div>
<h1 class="font-bold">{{ .site.title }}</h1>
<div class="flex flex-row gap-x-3">
<div class="grow-0"><img class="h-14 w-14 border" src="/assets/favicon.png" /></div>
<div class="flex flex-col">
<h1 class="font-bold text-2xl tracking-wide">{{ .site.title }}</h1>
<h2 class="italic">{{ .site.desc }}</h2>
</div>
</div>
<nav
class="self-end font-serif font-bold flex flex-row gap-x-4 [&>a]:no-underline
[&>*]:px-1.5 [&>*]:pt-1 [&>*]:-mb-1.5">
[&>*]:px-1.5 [&>*]:pt-1 [&>*]:-mb-1.5"
hx-boost="false">
<a
href="/reihen/"
{{ if and $model.page (HasPrefix $model.page.Path "/reihe") -}}

2
views/layouts/default/root.gohtml
View File

@@ -29,7 +29,7 @@
</script>
</head>
<body class="w-full" hx-ext="response-targets" hx-boost="true">
<body class="w-full" hx-ext="response-targets" hx-boost="false">
<div class="container flex flex-col min-h-screen max-w-(--breakpoint-xl) mx-auto px-3 py-3.5">
<header class="" id="header">
{{ block "_menu" . }}

37
views/routes/components/_alphabet.gohtml
View File

@@ -1,13 +1,48 @@
{{ $model := . }}
{{ if $model.letters }}
<div class="alphabet">
<div class="flex flex-row border-b px-3 border-zinc-300 items-end min-h-14">
<div id="alphabet" class="alphabet flex flex-row items-end" hx-swap-oob="true" hx-boost="false">
{{ range $id, $r := .letters }}
<a
class="odd:bg-stone-100 even:bg-zinc-100 mr-1 border-zinc-300 border-x border-t [&>a[aria-current='page']]:font-bold
px-2 no-underline transition-all duration-75
{{ if not $model.active -}}inactive{{- end -}}"
href="?letter={{ $r }}"
{{ if eq $model.active $r }}aria-current="page"{{ end }}
hx-get="./?letter={{ $r }}"
hx-push-url="true"
hx-select="#searchcontent"
hx-target="#searchcontent"
>{{ $r }}</a
>
{{ end }}
</div>
<div class="flex-grow"></div>
<div>
<i class="ri-search-line"></i><i class="-ml-0.5 inline-block ri-arrow-right-s-line"></i>
<input
class="px-1.5 py-0.5 font-serif italic"
type="search"
name="search"
placeholder="Suchbegriff eingeben"
hx-get="./"
hx-trigger="input changed delay:=200ms, keyup[key=='Enter']"
hx-select="#searchcontent"
hx-target="#searchcontent"
autocomplete="off" />
</div>
<div id="permalink" class="font-serif ml-3 py-1" hx-swap-oob="true">
{{ if $model.search }}
<a
href="/reihen?search={{ $model.search }}"
class="inline-block px-1
text-white no-underline bg-stone-700 hover:bg-stone-900 rounded">
<i class="ri-links-line"></i
></a>
{{ end }}
</div>
</div>
{{ end }}

19
views/routes/reihen/body.gohtml
View File

@@ -1,19 +1,14 @@
{{ $model := . }}
{{ template "_alphabet" Dict "active" .letter "letters" .letters }}
<div class="mt-4">
{{ template "_alphabet" Dict "active" .letter "letters" .letters "search" .search }}
</div>
<input
class="form-control"
type="search"
name="search"
placeholder="Suche"
hx-get="/reihen"
hx-trigger="input changed delay:=200ms, keyup[key=='Enter']"
hx-select="#series"
hx-target="#series" />
<div id="series">
<div id="searchcontent" class="pt-4 font-serif">
{{ if .search }}
<div class="mt-8">Reihen für {{ .search }} gefunden.</div>
{{ end }}
{{ if or .series .altseries }}
{{ range $id, $r := .series }}
<div class="mb-1.5">

30
views/transform/site.css
View File

@@ -3,6 +3,22 @@
--font-script: Rancho, ui-serif;
--font-sans: "Source Sans 3", "Merriweather Sans", ui-sans-serif;
--font-serif: "Merriweather", ui-serif;
--color-background: oklch(0.985 0.001 106.423);
--color-background-darker: oklch(0.97 0.001 106.424);
--color-background-dark: oklch(0.923 0.003 48.717);
--color-border-main: oklch(0.97 0.001 106.424);
--color-border-secondary: oklch(0.923 0.003 48.717);
--color-text: oklch(0.21 0.034 264.665);
--color-text-strong: oklch(0 0 0);
--color-text-muted: oklch(0.373 0.034 259.733);
--color-text-disabled: oklch(0.872 0.01 258.338);
--color-text-subtle: oklch(0.707 0.022 261.325);
--color-accent-blue-500: oklch(0.623 0.214 259.815);
--color-accent-blue-100: oklch(0.932 0.032 255.585);
}
/*
@@ -33,7 +49,7 @@
}
body {
@apply bg-slate-50;
@apply bg-stone-50;
}
h1,
@@ -78,4 +94,16 @@
main {
@apply grow shrink-0;
}
.small-caps {
@apply font-variant-small-caps;
}
.alphabet a[aria-current="page"] {
@apply pb-3 pt-2 font-bold italic !bg-stone-50 relative -bottom-3 border-b;
}
.alphabet a:hover:not([aria-current="page"]) {
@apply pb-1 pt-0.5 !bg-stone-50 relative;
}
}