karlos/landing-page
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Members page, Top bar updates

Browse source
This commit is contained in:
Yaloalo 2026-01-21 20:44:17 +01:00
parent baa874a148
commit 55b98d4916
5 changed files with 157 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
preproc/buildall.sh
View file

@ -8,3 +8,27 @@ find src -name "*.html" | while read f; do
preproc/buildpage.sh "$f"
done
mkdir -p www/team
for member in src/team/*.md; do
slug=$(basename "$member" .md)
handle=$(sed -n 's/^##[[:space:]]*//p' "$member" | head -n1 | sed 's/^@//')
name=$(sed -n 's/^###[[:space:]]*//p' "$member" | head -n1)
photo="/assets/logo.png"
for ext in png jpg jpeg webp; do
if [ -f "src/assets/team/$slug.$ext" ]; then
photo="/assets/team/$slug.$ext"
break
fi
done
export DATA_MEMBER_SLUG="$slug"
export DATA_MEMBER_HANDLE="$handle"
export DATA_MEMBER_NAME="$name"
export DATA_MEMBER_PHOTO="$photo"
export DATA_MEMBER_MD="$member"
export DATA_PAGE_TITLE="KarlOS - $name"
awk -Pf preproc/interp.awk src/member_page.inc | sh > "www/team/$slug.html"
done

15
src/header.inc
View file

@ -3,16 +3,19 @@
<html>
<head>
<title>%[PAGE_TITLE]</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="/style.css"/>
<link rel="icon" type="image/x-icon" href="/assets/favicon.png"/>
</head>
<body>
<div class="navbar">
<div class="navbutton">
<a class="logo-link" href="/index.html">
<div class="logo">
<img src="assets/logo.png" alt="logo"/>
<img src="/assets/logo.png" alt="logo"/>
</div>
Karl<strong>OS</strong>
</a>
</div>
<div class="navbutton">
@ -24,6 +27,14 @@
</div>
<div class="navbutton">
<a href="/code/">Code</a>
<a href="https://karlsruhe-os.de/code/karlos/karlos">Code</a>
</div>
<div class="navbutton">
<a href="https://karlsruhe-os.de/code/karlos/karlos/releases">Build</a>
</div>
<div class="navbutton">
<a href="/team.html">Members</a>
</div>
</div>

20
src/member_page.inc Normal file
View file

@ -0,0 +1,20 @@
%~ include src/header.inc
<div class="banner member-banner">
<h1>%[MEMBER_NAME]</h1>
<h3>@%[MEMBER_HANDLE]</h3>
</div>
<div class="content member-profile">
<div class="member-card member-card--profile">
<div class="member-avatar">
<img src="%[MEMBER_PHOTO]" alt="%[MEMBER_NAME]"/>
</div>
<div class="member-text">
<div class="member-name">%[MEMBER_NAME]</div>
<div class="member-handle">@%[MEMBER_HANDLE]</div>
</div>
</div>
<div class="member-bio">
%~ include_md "$DATA_MEMBER_MD"
</div>
</div>
%~ include src/footer.inc

77
src/style.css
View file

@ -99,6 +99,13 @@ h2 {
width: 100%;
height: 100%;
}
.logo-link {
color: inherit;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.4em;
}
.impressum {
text-align: center;
font-size: 14px;
@ -112,3 +119,73 @@ h2 {
.listing tr:nth-child(even) {
background-color: %[COLOR_BLOCK_ALT];
}
.members-grid {
display: flex;
flex-wrap: wrap;
gap: 1.5em;
justify-content: center;
padding: 2em 0 4em;
}
.member-card {
background-color: %[COLOR_BLOCK];
border: 1px solid %[COLOR_BLOCK_ALT];
border-radius: 0.6em;
display: flex;
gap: 1em;
align-items: center;
padding: 1em 1.2em;
text-decoration: none;
color: %[COLOR_TEXT];
box-shadow: 0 0.6em 1.5em rgba(0, 0, 0, 0.35);
transition: transform 120ms ease, box-shadow 120ms ease;
width: min(20em, 100%);
}
.member-card:hover {
transform: translateY(-4px);
box-shadow: 0 0.8em 1.8em rgba(0, 0, 0, 0.45);
}
.member-card .member-avatar {
width: 4em;
height: 4em;
border-radius: 50%;
overflow: hidden;
background-color: %[COLOR_BLOCK_ALT];
display: flex;
align-items: center;
justify-content: center;
}
.member-card .member-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.member-card .member-text {
text-align: left;
line-height: 1.4;
}
.member-card .member-name {
font-weight: bold;
font-size: 1.1em;
}
.member-card .member-handle {
color: %[COLOR_SPECIAL];
font-size: 0.9em;
}
.member-banner {
margin-bottom: 2em;
}
.member-profile {
padding-bottom: 4em;
}
.member-card--profile {
max-width: 22em;
margin: 0 auto 2em;
justify-content: flex-start;
}
.member-bio {
background-color: %[COLOR_BLOCK];
padding: 1.5em;
border-radius: 0.6em;
box-shadow: 0 0.6em 1.5em rgba(0, 0, 0, 0.35);
}

24
src/team.html
View file

@ -1,9 +1,25 @@
%PAGE_TITLE:KarlOS - Our Team
%PAGE_TITLE:KarlOS - Members
%~ include src/header.inc
<div class="banner">
<h1>Our Team</h1>
<h1>Our Members</h1>
<h3>Click a member to see their profile</h3>
</div>
<div class="content">
%~ for member in src/team/*; do printf "<div class=\"softpage\">\n"; include_md "$member"; printf "</div>\n"; done
<div class="content members-grid">
%~ for member in src/team/*.md; do
%~ slug=$(basename "$member" .md)
%~ handle=$(sed -n 's/^##[[:space:]]*//p' "$member" | head -n1 | sed 's/^@//')
%~ name=$(sed -n 's/^###[[:space:]]*//p' "$member" | head -n1)
%~ photo="assets/logo.png"
%~ for ext in png jpg jpeg webp; do
%~ if [ -f "src/assets/team/$slug.$ext" ]; then photo="assets/team/$slug.$ext"; break; fi
%~ done
%~ printf '<a class="member-card" href="/team/%s.html">\n' "$slug"
%~ printf ' <div class="member-avatar"><img src="/%s" alt="%s"/></div>\n' "$photo" "$name"
%~ printf ' <div class="member-text">\n'
%~ printf ' <div class="member-name">%s</div>\n' "$name"
%~ printf ' <div class="member-handle">@%s</div>\n' "$handle"
%~ printf ' </div>\n'
%~ printf '</a>\n'
%~ done
</div>
%~ include src/footer.inc