diff --git a/preproc/buildall.sh b/preproc/buildall.sh index bbb9583..3ad68f2 100755 --- a/preproc/buildall.sh +++ b/preproc/buildall.sh @@ -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 diff --git a/src/header.inc b/src/header.inc index 0276ff7..f88364f 100644 --- a/src/header.inc +++ b/src/header.inc @@ -3,16 +3,19 @@ %[PAGE_TITLE] +
- - KarlOS + + + KarlOS +
@@ -24,6 +27,14 @@
- Code + Code +
+ +
+ Build +
+ +
+ Members
diff --git a/src/member_page.inc b/src/member_page.inc new file mode 100644 index 0000000..262a613 --- /dev/null +++ b/src/member_page.inc @@ -0,0 +1,20 @@ +%~ include src/header.inc + +
+
+
+ %[MEMBER_NAME] +
+
+
%[MEMBER_NAME]
+
@%[MEMBER_HANDLE]
+
+
+
+%~ include_md "$DATA_MEMBER_MD" +
+
+%~ include src/footer.inc diff --git a/src/style.css b/src/style.css index 28f3451..ffad3c4 100644 --- a/src/style.css +++ b/src/style.css @@ -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); +} diff --git a/src/team.html b/src/team.html index 1f666ba..5aaf5f3 100644 --- a/src/team.html +++ b/src/team.html @@ -1,9 +1,25 @@ -%PAGE_TITLE:KarlOS - Our Team +%PAGE_TITLE:KarlOS - Members %~ include src/header.inc -
-%~ for member in src/team/*; do printf "
\n"; include_md "$member"; printf "
\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 '\n' "$slug" +%~ printf '
%s
\n' "$photo" "$name" +%~ printf '
\n' +%~ printf '
%s
\n' "$name" +%~ printf '
@%s
\n' "$handle" +%~ printf '
\n' +%~ printf '\n' +%~ done
%~ include src/footer.inc