Update scrum.html
· 1 year ago
7ac614f7f70777a2643b7bb265564c3949a11287
Parent:
b795bf241
1 file changed +151 −155
- scrum.html +151 −155
Diff
--- a/scrum.html +++ b/scrum.html @@ -16,50 +16,54 @@ content="A comprehensive and interactive cheatsheet for the Scrum framework. Understand Scrum roles, events, artifacts, values, and pillars to enhance your agile project management." /> - <!-- Canonical URL (Update this to your actual URL when deployed) --> + <!-- Canonical URL --> <link rel="canonical" href="http://cheatsheets.davidveksler.com/scrum.html" /> <!-- Social Media Metadata --> <meta property="og:title" content="The Scrum Framework Cheatsheet: Agile Project Management" /> <meta property="og:description" - content="Visually explore Scrum: Core concepts, roles, events, artifacts, values, and the empirical pillars for effective agile delivery." + content="Visually explore Scrum: Core concepts, roles, events, artifacts, values, and the empirical pillars for effective agile delivery. An interactive cheatsheet." /> <meta property="og:type" content="article" /> <meta property="og:url" content="http://cheatsheets.davidveksler.com/scrum.html" /> - <meta property="og:site_name" content="Agile Cheatsheets" /> - <!-- Placeholder for og:image --> - <!-- <meta property="og:image" content="http://cheatsheets.davidveksler.com/scrum-cheatsheet-image.jpg" /> --> + <meta property="og:site_name" content="David Vekslers Cheatsheets" /> + <!-- Replace with actual image URL when available --> + <meta property="og:image" content="http://cheatsheets.davidveksler.com/scrum_og_image.png" /> + <meta property="og:image:alt" content="A visual representation of the Scrum Framework" /> + <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="The Scrum Framework Cheatsheet: Agile Project Management" /> <meta name="twitter:description" - content="Visually explore Scrum: Core concepts, roles, events, artifacts, values, and the empirical pillars for effective agile delivery." + content="Visually explore Scrum: Core concepts, roles, events, artifacts, values, and the empirical pillars for effective agile delivery. An interactive cheatsheet." /> - <!-- Placeholder for twitter:image --> - <!-- <meta name="twitter:image" content="http://cheatsheets.davidveksler.com/scrum-cheatsheet-image.jpg" /> --> + <!-- Replace with actual image URL when available --> + <meta name="twitter:image" content="http://cheatsheets.davidveksler.com/scrum_twitter_image.png" /> + <meta name="twitter:creator" content="@davidveksler" /> <!-- Optional: if you have a Twitter handle --> + <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" /> <style> :root { - --bs-body-bg: #f0f2f5; /* Light grey background */ - --bs-primary: #0078d4; /* Energetic Blue */ - --bs-primary-dark: #005a9e; - --bs-primary-light: #e6f2ff; - --bs-secondary: #ffc107; /* Vibrant Yellow/Orange */ - --card-border-color: #cfd8dc; + --bs-primary: #0078d4; /* Energetic Blue from template */ + --bs-primary-dark: #005a9e; /* Darker blue */ + --bs-primary-light: #e6f2ff; /* Light blue for gradients/backgrounds */ + --bs-secondary: #ffc107; /* Vibrant Yellow/Orange from template for accents */ + --bs-body-bg: #f0f2f5; + --card-border-color: #cfd8dc; /* Softer border */ --card-shadow-color: rgba(0, 120, 212, 0.1); - --text-color-main: #212529; /* Darker text for better readability */ + --text-color-main: #212529; --text-color-secondary: #495057; - --text-color-highlight: var(--bs-primary-dark); + --text-color-highlight: var(--bs-primary-dark); /* Use primary dark for highlights */ --blueprint-grid-color: rgba(0, 120, 212, 0.07); - --schema-bg-color: rgba(255, 255, 255, 0.9); /* Slightly more opaque */ - --schema-border-color: #b0bec5; + --schema-bg-color: rgba(255, 255, 255, 0.95); /* Slightly more opaque */ + --schema-border-color: #b0bec5; /* Greyish blue */ - /* --- Scrum Category Colors --- */ + /* Scrum Category Colors (kept from original, they are good) */ --scrum-color-definition: #0078d4; /* Primary Blue */ --scrum-color-pillars: #20c997; /* Teal */ --scrum-color-values: #6f42c1; /* Purple */ @@ -67,262 +71,266 @@ --scrum-color-team: #fd7e14; /* Orange */ --scrum-color-events: #6610f2; /* Indigo */ --scrum-color-artifacts: #d63384; /* Pink */ - --scrum-color-general: #6c757d; /* Grey for general/summary */ + --scrum-color-general: #6c757d; - --scrum-category-color: var(--scrum-color-general); /* Default */ + --scrum-category-color: var(--scrum-color-general); /* Default, overridden by specific classes */ } body { background-color: var(--bs-body-bg); background-image: linear-gradient(to right, var(--blueprint-grid-color) 1px, transparent 1px), linear-gradient(to bottom, var(--blueprint-grid-color) 1px, transparent 1px); - background-size: 80px 80px; /* Slightly larger grid */ + background-size: 70px 70px; /* Adjusted grid size */ font-family: "Segoe UI", "Roboto", Helvetica, Arial, sans-serif; padding-bottom: 3rem; - font-size: 16px; + font-size: 16px; /* Base font size */ color: var(--text-color-main); box-sizing: border-box; } - *, - *::before, - *::after { + *, *::before, *::after { box-sizing: inherit; } .page-header { - background: linear-gradient(135deg, var(--bs-primary-light), #e0e0e0); - padding: 3rem 1.5rem; + /* Inspired by template's gradient and styling */ + background: linear-gradient(135deg, var(--bs-primary-light), #e9ecef); /* Softer gradient */ + padding: 3.5rem 1.5rem; /* More padding */ text-align: center; - border-bottom: 4px solid var(--bs-primary); - margin-bottom: 3rem; + border-bottom: 5px solid var(--bs-primary); /* Bolder border */ + margin-bottom: 3.5rem; /* More space */ position: relative; z-index: 10; - box-shadow: 0 5px 20px rgba(0, 120, 212, 0.15); + box-shadow: 0 6px 25px rgba(0, 120, 212, 0.18); /* Enhanced shadow */ } .page-header h1 { color: var(--bs-primary-dark); - font-weight: 600; /* Bolder */ + font-weight: 700; /* Bolder */ letter-spacing: 0.5px; - margin-bottom: 0.75rem; - font-size: 3rem; /* Larger */ + margin-bottom: 1rem; /* More space */ + font-size: 2.8rem; /* Slightly adjusted size */ } .page-header h1 .bi { - font-size: 1em; /* Adjusted for potentially larger main icon */ - vertical-align: -0.05em; - margin-right: 0.5em; - color: var(--bs-secondary); /* Accent color for icon */ + font-size: 1.1em; /* Icon size relative to h1 */ + vertical-align: -0.1em; /* Fine-tune alignment */ + margin-right: 0.4em; + color: var(--bs-secondary); /* Accent color for main icon */ } .page-header .lead { color: var(--text-color-secondary); - font-size: 1.25rem; /* Larger lead */ - max-width: 850px; + font-size: 1.3rem; /* Larger lead */ + max-width: 900px; /* Wider lead */ margin: auto; - font-weight: 300; + font-weight: 300; /* Lighter lead for contrast */ + line-height: 1.6; } .schema-container { background-color: var(--schema-bg-color); - border: 2px solid var(--schema-border-color); - border-radius: 10px; - padding: 1.5rem 1.5rem 0.5rem 1.5rem; - margin-bottom: 3rem; - box-shadow: 0 6px 15px rgba(0, 120, 212, 0.08); - backdrop-filter: blur(4px); + border: 2px solid var(--schema-border-color); /* Template's border */ + border-radius: 12px; /* Softer radius */ + padding: 2rem 2rem 0.5rem 2rem; /* Increased padding */ + margin-bottom: 3.5rem; /* More space */ + box-shadow: 0 8px 20px rgba(0, 120, 212, 0.1); /* Enhanced shadow */ + backdrop-filter: blur(5px); /* Blur effect */ position: relative; } .section-title { + /* Template's section title style */ color: #fff; - background-color: var(--scrum-category-color); /* Uses the specific section color */ - margin: -2.8rem 0 1.8rem 0; /* Adjusted for aesthetics */ - font-weight: 700; /* Bolder */ + background-color: var(--scrum-category-color); + margin: -3.5rem 0 2rem 0; /* Adjusted for visual appeal */ + font-weight: 700; text-transform: uppercase; - letter-spacing: 0.1em; - font-size: 1.2rem; /* Slightly larger */ - border-bottom: none; - padding: 0.6rem 1.2rem; + letter-spacing: 0.12em; /* More spacing */ + font-size: 1.25rem; /* Slightly larger */ + padding: 0.7rem 1.5rem; /* More padding */ display: inline-block; position: relative; - left: 1.2rem; /* Adjusted */ + left: 1.5rem; /* Slight offset */ z-index: 15; border: 2px solid var(--schema-border-color); border-bottom: none; - border-radius: 8px 8px 0 0; - box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.05); + border-radius: 10px 10px 0 0; /* Softer radius */ + box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.07); } .info-card { background: #fff; border: 1px solid var(--card-border-color); - border-radius: 8px; /* Softer radius */ - box-shadow: 0 4px 10px var(--card-shadow-color); + border-radius: 10px; /* Softer radius from template */ + box-shadow: 0 5px 12px var(--card-shadow-color); /* Template's shadow */ height: 100%; display: flex; flex-direction: column; - transition: box-shadow 0.25s ease, transform 0.25s ease; + transition: box-shadow 0.3s ease, transform 0.3s ease; position: relative; z-index: 5; } - .info-card:hover { - box-shadow: 0 7px 18px rgba(0, 120, 212, 0.22); /* Enhanced shadow on hover */ - transform: translateY(-4px); /* More lift */ + box-shadow: 0 8px 22px rgba(0, 120, 212, 0.25); /* Enhanced hover shadow */ + transform: translateY(-5px); /* More lift */ z-index: 20; } .info-card .card-body { - padding: 0; + padding: 0; /* Titles will handle top padding */ flex-grow: 1; display: flex; flex-direction: column; } .info-card h5 { + /* Template's card title style */ color: #fff; - background-color: var(--scrum-category-color); /* Uses the specific section/card color */ - font-size: 1.15rem; /* Bolder card titles */ + background-color: var(--scrum-category-color); + font-size: 1.25rem; /* Bolder, larger title */ text-align: center; margin: 0; - padding: 1rem 0.8rem; /* More padding */ - font-weight: 700; /* Bolder */ + padding: 1.2rem 1rem; /* Increased padding */ + font-weight: 700; display: flex; justify-content: center; align-items: center; - gap: 0.7rem; + gap: 0.8rem; /* More gap for icon */ font-family: "Segoe UI Semibold", "Roboto Condensed", Consolas, Menlo, Monaco, "Courier New", monospace; border-bottom: 1px solid var(--card-border-color); - border-radius: 7px 7px 0 0; /* Match card radius */ + border-radius: 9px 9px 0 0; /* Match card radius minus border */ } .info-card h5 .bi { - font-size: 1.4em; /* Larger icons in card titles */ - color: #fff; - opacity: 0.95; + font-size: 1.5em; /* Larger icons in titles */ + opacity: 0.9; } .card-content-wrapper { - padding: 1.5rem; /* More padding */ + padding: 1.8rem; /* Increased padding */ flex-grow: 1; display: flex; flex-direction: column; } .info-card p.summary { - font-size: 0.98rem; /* Slightly larger summary */ + font-size: 1rem; /* Slightly larger summary */ color: var(--text-color-secondary); - margin-bottom: 1.2rem; + margin-bottom: 1.5rem; /* More space */ flex-grow: 1; - line-height: 1.7; + line-height: 1.75; /* Better readability */ } .collapse-content { - font-size: 0.95rem; /* Slightly larger detail text */ + font-size: 0.98rem; /* Slightly larger detail text */ border-top: 1px solid #e0e0e0; - padding: 1.5rem; /* More padding */ - margin-top: 1rem; /* Keep some space */ + padding: 1.8rem; /* Increased padding */ + margin-top: 1.2rem; /* Space from summary */ color: var(--text-color-main); - background-color: #fcfdff; /* Very light background for contrast */ - border-radius: 0 0 7px 7px; + background-color: #fafdff; /* Very light blueish tint */ + border-radius: 0 0 9px 9px; /* Match card radius */ } .collapse-content h6 { font-weight: 700; color: var(--text-color-highlight); - margin-top: 1.2rem; - margin-bottom: 0.5rem; - font-size: 1.05rem; + margin-top: 1.5rem; /* More space */ + margin-bottom: 0.6rem; + font-size: 1.1rem; /* Larger subheading */ } .collapse-content ul { padding-left: 0.5rem; - margin-bottom: 1.2rem; + margin-bottom: 1.5rem; list-style: none; } .collapse-content li { - margin-bottom: 0.8rem; - padding-bottom: 0.8rem; - font-size: 0.92rem; - line-height: 1.6; - border-bottom: 1px dashed #ced4da; + margin-bottom: 1rem; /* More space */ + padding-bottom: 1rem; + font-size: 0.95rem; /* Slightly larger list item text */ + line-height: 1.65; + border-bottom: 1px dashed #d0d9e0; /* Softer dashed line */ position: relative; - padding-left: 2rem; /* More space for icon */ + padding-left: 2.2rem; /* More space for icon */ } .collapse-content li:last-child { border-bottom: none; margin-bottom: 0; } .collapse-content li::before { - content: "\F282"; /* Bootstrap icon check2 - can customize per list type */ + /* Using specific icons per list type or a generic one */ + content: "\F282"; /* Default: check2. Can customize. */ font-family: "bootstrap-icons"; position: absolute; left: 0; - top: 4px; - color: var(--scrum-category-color); /* Use category color */ - opacity: 0.85; - font-size: 1.2em; + top: 5px; /* Adjust alignment */ + color: var(--scrum-category-color); /* Use category color from card */ + opacity: 0.9; + font-size: 1.3em; /* Larger icon */ } .collapse-content li strong { color: var(--text-color-highlight); display: block; - margin-bottom: 0.3rem; + margin-bottom: 0.4rem; /* Space after strong */ font-weight: 600; } .collapse-content p { - font-size: 0.95rem; - margin-bottom: 0.8rem; - line-height: 1.65; + font-size: 0.98rem; + margin-bottom: 1rem; + line-height: 1.7; } - .collapse-content code, - .term { - font-size: 0.9rem; + .collapse-content code, .term { + /* Template's code/term style */ + font-size: 0.92rem; color: var(--bs-primary-dark); background-color: var(--bs-primary-light); - padding: 0.2em 0.5em; - border-radius: 4px; + padding: 0.25em 0.6em; /* Adjusted padding */ + border-radius: 5px; /* Softer radius */ font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; font-weight: 600; } .row > * { - margin-bottom: 2.8rem; /* Increased spacing between cards */ + margin-bottom: 3rem; /* Increased spacing between cards, template style */ } footer { - padding-top: 3.5rem; /* More padding */ - font-size: 0.95em; - color: #5a6872; /* Slightly darker footer text */ + padding-top: 4rem; /* More padding */ + font-size: 0.98em; /* Slightly larger */ + color: #525d66; /* Slightly darker footer text */ position: relative; z-index: 10; text-align: center; } footer a { color: var(--bs-primary); + font-weight: 500; /* Template style */ } footer a:hover { color: var(--bs-primary-dark); + text-decoration: underline; } .details-toggle { - font-size: 0.9rem; /* Slightly larger */ - margin-top: auto; - align-self: flex-start; - padding: 0.45rem 0.9rem; /* More padding */ + /* Template's button style */ + font-size: 0.95rem; /* Slightly larger */ + margin-top: auto; /* Pushes button to bottom */ + align-self: flex-start; /* Align to start of flex container */ + padding: 0.5rem 1rem; /* More padding */ color: var(--scrum-category-color); - border: 2px solid var(--scrum-category-color); /* Bolder border */ + border: 2px solid var(--scrum-category-color); background-color: transparent; - transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease; + transition: background-color 0.25s ease, color 0.25s ease, transform 0.15s ease; display: inline-flex; align-items: center; - gap: 0.5em; - border-radius: 5px; + gap: 0.6em; /* Space between text and icon */ + border-radius: 6px; /* Softer radius */ font-weight: 600; /* Bolder */ } - .details-toggle:hover { + .details-toggle:hover, .details-toggle:focus { background-color: var(--scrum-category-color); color: white; - transform: scale(1.03); /* Slight scale on hover */ + transform: scale(1.03); /* Slight scale effect */ + outline: none; } .details-toggle .bi { - transition: transform 0.2s ease-in-out; + transition: transform 0.25s ease-in-out; } .details-toggle[aria-expanded="true"] .bi { transform: rotate(180deg); } - a { + a { /* General link styling */ color: var(--bs-primary); text-decoration: none; font-weight: 500; @@ -332,35 +340,24 @@ text-decoration: underline; } - /* --- Scrum Category Color Styling --- */ - .section-definition, - .card-definition { - --scrum-category-color: var(--scrum-color-definition); - } - .section-pillars, - .card-pillars { - --scrum-category-color: var(--scrum-color-pillars); - } - .section-values, - .card-values { - --scrum-category-color: var(--scrum-color-values); - } - .section-why, - .card-why { - --scrum-category-color: var(--scrum-color-why); - } - .section-team, - .card-team { - --scrum-category-color: var(--scrum-color-team); - } - .section-events, - .card-events { - --scrum-category-color: var(--scrum-color-events); - } - .section-artifacts, - .card-artifacts { - --scrum-category-color: var(--scrum-color-artifacts); - } + /* Scrum Category Color Styling (applies --scrum-category-color to elements) */ + .section-definition, .card-definition { --scrum-category-color: var(--scrum-color-definition); } + .section-pillars, .card-pillars { --scrum-category-color: var(--scrum-color-pillars); } + .section-values, .card-values { --scrum-category-color: var(--scrum-color-values); } + .section-why, .card-why { --scrum-category-color: var(--scrum-color-why); } + .section-team, .card-team { --scrum-category-color: var(--scrum-color-team); } + .section-events, .card-events { --scrum-category-color: var(--scrum-color-events); } + .section-artifacts, .card-artifacts { --scrum-category-color: var(--scrum-color-artifacts); } + + /* Ensure category colors are applied to list item icons in collapse content */ + .card-definition .collapse-content li::before { color: var(--scrum-color-definition); } + .card-pillars .collapse-content li::before { color: var(--scrum-color-pillars); } + .card-values .collapse-content li::before { color: var(--scrum-color-values); } + .card-why .collapse-content li::before { color: var(--scrum-color-why); } + .card-team .collapse-content li::before { color: var(--scrum-color-team); } + .card-events .collapse-content li::before { color: var(--scrum-color-events); } + .card-artifacts .collapse-content li::before { color: var(--scrum-color-artifacts); } + </style> </head> <body> @@ -515,7 +512,6 @@ <h2 class="section-title" id="section-why-scrum-title">Why Use Scrum?</h2> <div class="row"> <div class="col-lg-6 col-md-6"> - <!-- Adjusted to col-lg-6 for two cards --> <div class="info-card card-why" id="card-scrum-benefits"> <div class="card-body"> <h5><i class="bi bi-graph-up-arrow"></i> Key Benefits</h5> @@ -570,7 +566,6 @@ </div> </div> <div class="col-lg-6 col-md-6"> - <!-- Adjusted to col-lg-6 for two cards --> <div class="info-card card-why" id="card-scrum-when-effective"> <div class="card-body"> <h5><i class="bi bi-lightbulb-fill"></i> When Scrum Shines</h5> @@ -1036,7 +1031,7 @@ <footer class="container text-center pb-3"> <p class="mb-2"> - © <span id="currentYear"></span> Agile Cheatsheet Contributor. Content inspired by the Scrum Guide™. + © <span id="currentYear"></span> David Vekslers Cheatsheets. Content inspired by the Scrum Guide™. </p> <div> <a @@ -1089,6 +1084,7 @@ } }; + // Set initial state based on whether the collapse element is already shown (e.g. by default) updateIconAndButton(collapseEl.classList.contains("show")); collapseEl.addEventListener("show.bs.collapse", () => { @@ -1104,4 +1100,4 @@ }); </script> </body> -</html> +</html> \ No newline at end of file