Skip to content

Commit 438e1a6

Browse files
MrHinshMrHinsh
committed
✨ feat(creators): add creator profiles and styling
- create individual markdown files for Jeff Sutherland, John Coleman, and Ralph Jocham - add image for Jeff Sutherland - introduce new HTML layout for creator profiles 💄 style(site): apply custom styling and improve layout - add dark card styling and navbar design - enhance button styling for primary and outline buttons - modify main header and section layout for improved UX 🔧 chore(site): update site configuration and links - add GitHub URL to site configuration for discussions - update base HTML and index layout for navbar and card display
1 parent 93bfd85 commit 438e1a6

File tree

9 files changed

+170
-6
lines changed

9 files changed

+170
-6
lines changed

‎site/content/creators/_index.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
---
2+
title: "Creators"
3+
url: "/creators/"
4+
---

‎site/content/creators/jeff-sutherland/image.png‎

42.4 KB
Loading

‎site/content/creators/jeff-sutherland/index.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
title: "Jeff Sutherland"
3+
description: "Co-creator of Scrum, author, and Agile thought leader."
4+
date: 2025-06-01
5+
---

‎site/content/creators/john-coleman/index.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
title: "John Coleman"
3+
description: "Agile coach and Scrum trainer."
4+
date: 2025-06-01
5+
---

‎site/content/creators/ralph-jocham/index.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
title: "Ralph Jocham"
3+
short_title: "Ralph"
4+
description: "Enterprise Change Agent. Author. Speaker. Scrum Trainer."
5+
date: 2025-06-01
6+
---

‎site/hugo.yaml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ params:
1717
keywords: "Scrum"
1818
og_image: "/images/og-image.jpg" # URL to the default Open Graph image
1919
siteProdUrl: "https://scrumguidesexpansionpack.org"
20+
githubUrl: "https://github.com/ScrumGuides/ScrumGuide-ExpansionPack"
2021

2122
# Enable sitemap and robots.txt
2223
sitemap:

‎site/layouts/_default/baseof.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous" />
7+
<link rel="stylesheet" href="/css/style.css" />
78
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-j1CDi7MgGQ12Z7Qab0qlWQ/Qqz24Gc6BM0thvEMVjHnfYGF0rmFCozFSxQBxwHKO" crossorigin="anonymous"></script>
89
<title>{{ .Title }} | {{ .Site.Title }}</title>
910
<meta name="description" content="{{- (.Summary | default .Site.Params.description) | plainify }}" />
@@ -18,7 +19,7 @@
1819
<body data-ndka-environment="{{- hugo.Environment }}" data-ndka-version="v#{GitVersion.SemVer}#">
1920
<!-- Scripts -->
2021
{{ if ne hugo.Environment "production" }}
21-
<div class="container-fluid text-center p-2 bg-brand-{{- hugo.Environment }}">
22+
<div class="container-fluid text-center p-2 bg-{{- hugo.Environment }}">
2223
{{ if .Page.Draft }}!!DRAFT!! |{{ end }}
2324
{{ if eq hugo.Environment "development" }}
2425
Local | v0.0.0 | No Robots
@@ -30,7 +31,7 @@
3031
{{ end }}
3132
{{- block "header" . }}
3233
<!-- HEADER -->
33-
<div class="container-flex">
34+
<div class="container-flex navbar-dark">
3435
<header class="container d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
3536
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
3637
<svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"></use></svg>

‎site/layouts/index.html‎

Lines changed: 50 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,54 @@
11
{{- define "main" }}
2-
3-
<section class="section">
2+
<section class="section container-fluid main-header">
43
<div class="container">
5-
fgfdgfdgdfg
6-
4+
<div class="row">
5+
<div class="col-4 p-5">
6+
<div class="card card-dark"> <div class="card-body text-center">
7+
<i class="fa-solid fa-newspaper"></i>
8+
<h5 class="card-title">Read the official Scrum Guide Expansion Pack online</h5>
9+
<p class="card-text">This is a sample card with some text content. You can replace this with your own content.</p>
10+
</div>
11+
<div class="card-footer">
12+
<a href="/read-online/" class="btn btn-primary">Read online</a>
13+
</div>
14+
</div>
15+
</div>
716
</section>
17+
<section class="section container-fluid">
18+
<div class="container">
19+
<div class="row">
20+
<div class="col-12 col-xl-6">
21+
<div>
22+
<div class="col-12">
23+
<h2 class="text-center">What is the Scrum Guide Expansion Pack?</h2>
24+
<p class="lead text-center">This is a sample page for the Scrum Guide Expansion Pack. You can customize this content as needed.</p>
25+
</div>
26+
<div class="col-12">
27+
<h2 class="text-center">Share your Ideas!</h2>
28+
<p class="lead text-center">If you have ideas for improving the website or the Scrum Guide Expansion Pack itself, please share them! You may do so by sending a message to our support e-mail.</p>
29+
<a href="{{ .Site.Params.githubUrl }}/discussions" class="btn btn-primary d-block mx-auto">Join the Discussion</a>
30+
</div>
31+
</div>
32+
</div>
33+
<div class="col-12 col-xl-6">
34+
<h2 class="text-center">About the creators of Scrum Guide Expansion Pack</h2>
35+
36+
{{- range where .Site.Pages "Section" "creators" }}
37+
{{- if ne .Title "Creators" }}
38+
<div class="card">
39+
<div class="card-body text-center">
40+
<i class="fa-solid fa-user-tie mb-3"></i>
41+
<h5 class="card-title">{{ .Title }}</h5>
42+
<p class="card-text">{{ .Description }}</p>
43+
</div>
44+
<div class="card-footer text-center">
45+
<a href="{{ .Permalink }}" class="btn btn-outline-primary">Read {{.Params.short_title | default .Title}}'s bio</a>
46+
</div>
47+
</div>
48+
{{- end }}
49+
{{- end }}
50+
</div>
51+
</div>
52+
</div>
53+
</section>
854
{{- end }}

‎site/static/css/style.css‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
/* Dark card styling */
2+
.card-dark {
3+
background-color: #353535;
4+
color: white;
5+
border: none;
6+
}
7+
8+
.card-dark .card-body {
9+
background-color: #353535;
10+
}
11+
12+
.card-dark .card-footer {
13+
background-color: #353535;
14+
border-top: 1px solid #555;
15+
}
16+
17+
.main-header {
18+
background-color: #135289;
19+
color: white;
20+
padding: 10px;
21+
text-align: center;
22+
}
23+
24+
/* Header icon styling */
25+
.main-header .fa-newspaper {
26+
font-size: 4rem;
27+
margin-bottom: 1rem;
28+
color: white;
29+
}
30+
31+
/* Dark navbar styling */
32+
.navbar-dark {
33+
background-color: #343a40 !important;
34+
border-bottom: 1px solid #495057;
35+
}
36+
37+
.navbar-dark .navbar-brand {
38+
color: white !important;
39+
}
40+
41+
.navbar-dark .nav-link {
42+
color: rgba(255, 255, 255, 0.75) !important;
43+
}
44+
45+
.navbar-dark .nav-link:hover,
46+
.navbar-dark .nav-link:focus {
47+
color: white !important;
48+
}
49+
50+
.navbar-dark .nav-link.active {
51+
color: white !important;
52+
background-color: #495057;
53+
border-radius: 0.375rem;
54+
}
55+
56+
.bg-local {
57+
background-color: #f8f9fa !important;
58+
}
59+
60+
.bg-canary {
61+
background-color: #d3f9d8 !important;
62+
}
63+
64+
.bg-preview {
65+
background-color: #d3f9d8 !important;
66+
}
67+
68+
.bg-production {
69+
background-color: #f8d7da !important;
70+
}
71+
72+
/* Custom button styling */
73+
.btn-primary {
74+
background-color: #1d7fd5 !important;
75+
border-color: #1d7fd5 !important;
76+
}
77+
78+
.btn-primary:hover,
79+
.btn-primary:focus,
80+
.btn-primary:active {
81+
background-color: #1669b3 !important;
82+
border-color: #1669b3 !important;
83+
}
84+
85+
.btn-outline-primary {
86+
color: #1d7fd5 !important;
87+
border-color: #1d7fd5 !important;
88+
}
89+
90+
.btn-outline-primary:hover,
91+
.btn-outline-primary:focus,
92+
.btn-outline-primary:active {
93+
background-color: #1d7fd5 !important;
94+
border-color: #1d7fd5 !important;
95+
color: white !important;
96+
}

0 commit comments

Comments
 (0)