Members page, Top bar updates
This commit is contained in:
Yaloalo
parent
baa874a148
commit
55b98d4916
5 changed files with 157 additions and 9 deletions
|
|
@ -8,3 +8,27 @@ find src -name "*.html" | while read f; do
|
||||||
preproc/buildpage.sh "$f"
|
preproc/buildpage.sh "$f"
|
||||||
done
|
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
|
||||||
|
|
|
||||||
|
|
@ -3,16 +3,19 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>%[PAGE_TITLE]</title>
|
<title>%[PAGE_TITLE]</title>
|
||||||
|
<meta charset="UTF-8"/>
|
||||||
<link rel="stylesheet" href="/style.css"/>
|
<link rel="stylesheet" href="/style.css"/>
|
||||||
<link rel="icon" type="image/x-icon" href="/assets/favicon.png"/>
|
<link rel="icon" type="image/x-icon" href="/assets/favicon.png"/>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="navbar">
|
<div class="navbar">
|
||||||
<div class="navbutton">
|
<div class="navbutton">
|
||||||
<div class="logo">
|
<a class="logo-link" href="/index.html">
|
||||||
<img src="assets/logo.png" alt="logo"/>
|
<div class="logo">
|
||||||
</div>
|
<img src="/assets/logo.png" alt="logo"/>
|
||||||
Karl<strong>OS</strong>
|
</div>
|
||||||
|
Karl<strong>OS</strong>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="navbutton">
|
<div class="navbutton">
|
||||||
|
|
@ -24,6 +27,14 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="navbutton">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
20
src/member_page.inc
Normal file
20
src/member_page.inc
Normal 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
|
||||||
|
|
@ -99,6 +99,13 @@ h2 {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
.logo-link {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.4em;
|
||||||
|
}
|
||||||
.impressum {
|
.impressum {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
@ -112,3 +119,73 @@ h2 {
|
||||||
.listing tr:nth-child(even) {
|
.listing tr:nth-child(even) {
|
||||||
background-color: %[COLOR_BLOCK_ALT];
|
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);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,25 @@
|
||||||
%PAGE_TITLE:KarlOS - Our Team
|
%PAGE_TITLE:KarlOS - Members
|
||||||
%~ include src/header.inc
|
%~ include src/header.inc
|
||||||
<div class="banner">
|
<div class="banner">
|
||||||
<h1>Our Team</h1>
|
<h1>Our Members</h1>
|
||||||
|
<h3>Click a member to see their profile</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="content members-grid">
|
||||||
%~ for member in src/team/*; do printf "<div class=\"softpage\">\n"; include_md "$member"; printf "</div>\n"; done
|
%~ 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>
|
</div>
|
||||||
%~ include src/footer.inc
|
%~ include src/footer.inc
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue