Skip to content

Adds FAQ #59

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vpetersson merged 10 commits into from
Feb 27, 2026
Merged

Adds FAQ #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
cd8a508
Add /faq/ section with 7 FAQ entries and schema.org structured data
vpetersson Feb 24, 2026
0197aa8
Add client-side search and pagination to /faq/ page
vpetersson Feb 24, 2026
e4b02dd
Add TL;DR blocks to individual FAQ pages
vpetersson Feb 24, 2026
a63d848
Overhaul FAQ content and styling
vpetersson Feb 26, 2026
64ccac3
Update /features/integrations/ page to match sbomify-action v0.13
vpetersson Feb 27, 2026
0faaaab
Deduplicate icon shortcode by delegating to partial
vpetersson Feb 27, 2026
8325dcb
Add 5 new FAQ entries with screencast walkthroughs
vpetersson Feb 27, 2026
0dc1ed8
Improve FAQ section: video-first layout, plan badges, new entries
vpetersson Feb 27, 2026
4f5f6f3
Fix SPDX 3.0 referred to as current version, not next
vpetersson Feb 27, 2026
af3ea27
Fix markdown table formatting in NTIA/CISA FAQ
vpetersson Feb 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 60 additions & 54 deletions _assets/css/tailwind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,22 +221,23 @@
}
}

/* Blog Post & Page Styles */
.blog-post, .page {
/* Blog Post, Page & FAQ Styles */
.blog-post, .page, .faq-content {
font-family: "Inter Variable", "Inter", ui-sans-serif, system-ui, sans-serif;
}

/* Headings */
.blog-post h1, .blog-post h2, .blog-post h3, .blog-post h4, .blog-post h5, .blog-post h6,
.page h1, .page h2, .page h3, .page h4, .page h5, .page h6 {
.page h1, .page h2, .page h3, .page h4, .page h5, .page h6,
.faq-content h1, .faq-content h2, .faq-content h3, .faq-content h4, .faq-content h5, .faq-content h6 {
color: #141035;
font-weight: 600;
line-height: 1.3;
margin-top: 2rem; /* 32px */
margin-bottom: 1rem; /* 16px */
}

.blog-post h1, .page h1 {
.blog-post h1, .page h1, .faq-content h1 {
font-size: 2.25rem; /* 36px */
font-weight: 700;
line-height: 1.2;
Expand All @@ -245,127 +246,130 @@
}

@media (min-width: 768px) {
.blog-post h1, .page h1 {
.blog-post h1, .page h1, .faq-content h1 {
font-size: 3rem; /* 48px */
}
}

@media (min-width: 1024px) {
.blog-post h1, .page h1 {
.blog-post h1, .page h1, .faq-content h1 {
font-size: 3.5rem; /* 56px */
}
}

.blog-post h2, .page h2 {
.blog-post h2, .page h2, .faq-content h2 {
font-size: 1.75rem; /* 28px */
margin-top: 3rem; /* 48px */
}

@media (min-width: 768px) {
.blog-post h2, .page h2 {
.blog-post h2, .page h2, .faq-content h2 {
font-size: 2.25rem; /* 36px */
}
}

.blog-post h3, .page h3 {
.blog-post h3, .page h3, .faq-content h3 {
font-size: 1.5rem; /* 24px */
margin-top: 2.5rem; /* 40px */
}

@media (min-width: 768px) {
.blog-post h3, .page h3 {
.blog-post h3, .page h3, .faq-content h3 {
font-size: 1.75rem; /* 28px */
}
}

.blog-post h4, .page h4 {
.blog-post h4, .page h4, .faq-content h4 {
font-size: 1.25rem; /* 20px */
margin-top: 2rem; /* 32px */
}

@media (min-width: 768px) {
.blog-post h4, .page h4 {
.blog-post h4, .page h4, .faq-content h4 {
font-size: 1.375rem; /* 22px */
}
}

.blog-post h5, .page h5 {
.blog-post h5, .page h5, .faq-content h5 {
font-size: 1.125rem; /* 18px */
margin-top: 1.5rem; /* 24px */
}

@media (min-width: 768px) {
.blog-post h5, .page h5 {
.blog-post h5, .page h5, .faq-content h5 {
font-size: 1.25rem; /* 20px */
}
}

.blog-post h6, .page h6 {
.blog-post h6, .page h6, .faq-content h6 {
font-size: 1rem; /* 16px */
margin-top: 1.25rem; /* 20px */
}

@media (min-width: 768px) {
.blog-post h6, .page h6 {
.blog-post h6, .page h6, .faq-content h6 {
font-size: 1.125rem; /* 18px */
}
}

/* Paragraphs */
.blog-post p, .page p {
.blog-post p, .page p, .faq-content p {
color: #5E5E5E;
font-size: 1.125rem; /* 18px */
line-height: 1.7;
margin-bottom: 1.5rem; /* 24px */
}

@media (min-width: 768px) {
.blog-post p, .page p {
.blog-post p, .page p, .faq-content p {
font-size: 1.25rem; /* 20px */
line-height: 1.8;
}
}

/* First paragraph styling */
.blog-post > p:first-of-type, .page > p:first-of-type {
.blog-post > p:first-of-type, .page > p:first-of-type, .faq-content > p:first-of-type {
font-size: 1.25rem; /* 20px */
color: #141035;
}

@media (min-width: 768px) {
.blog-post > p:first-of-type, .page > p:first-of-type {
.blog-post > p:first-of-type, .page > p:first-of-type, .faq-content > p:first-of-type {
font-size: 1.375rem; /* 22px */
line-height: 1.8;
}
}

/* Links */
.blog-post a, .page a {
.blog-post a, .page a, .faq-content a {
color: #8A7DFF;
text-decoration: underline;
text-underline-offset: 3px;
transition: all 0.2s ease;
}

.blog-post a:hover, .page a:hover {
.blog-post a:hover, .page a:hover, .faq-content a:hover {
color: #7A6DE5;
text-decoration-thickness: 2px;
}

.blog-post strong, .blog-post b,
.page strong, .page b {
.page strong, .page b,
.faq-content strong, .faq-content b {
color: #141035;
font-weight: 600;
}

.blog-post em, .blog-post i,
.page em, .page i {
.page em, .page i,
.faq-content em, .faq-content i {
font-style: italic;
}

/* Lists */
.blog-post ul, .blog-post ol,
.page ul, .page ol {
.page ul, .page ol,
.faq-content ul, .faq-content ol {
font-size: 1.125rem; /* 18px */
line-height: 1.7;
margin-bottom: 1.5rem; /* 24px */
Expand All @@ -375,34 +379,35 @@

@media (min-width: 768px) {
.blog-post ul, .blog-post ol,
.page ul, .page ol {
.page ul, .page ol,
.faq-content ul, .faq-content ol {
font-size: 1.25rem; /* 20px */
line-height: 1.8;
}
}

.blog-post li, .page li {
.blog-post li, .page li, .faq-content li {
margin-bottom: 0.75rem; /* 12px */
padding-left: 0.5rem; /* 8px */
}

.blog-post li:last-child, .page li:last-child {
.blog-post li:last-child, .page li:last-child, .faq-content li:last-child {
margin-bottom: 0;
}

.blog-post ul, .page ul {
.blog-post ul, .page ul, .faq-content ul {
list-style: disc;
}

.blog-post ul li::marker, .page ul li::marker {
.blog-post ul li::marker, .page ul li::marker, .faq-content ul li::marker {
color: #8A7DFF;
}

.blog-post ol, .page ol {
.blog-post ol, .page ol, .faq-content ol {
list-style: decimal;
}

.blog-post ol li::marker, .page ol li::marker {
.blog-post ol li::marker, .page ol li::marker, .faq-content ol li::marker {
color: #8A7DFF;
font-weight: 600;
}
Expand Down Expand Up @@ -455,7 +460,7 @@
}

/* Blockquotes */
.blog-post blockquote, .page blockquote {
.blog-post blockquote, .page blockquote, .faq-content blockquote {
position: relative;
margin: 2rem 0; /* 32px */
padding: 1.5rem 1.5rem 1.5rem 3rem; /* 24px 24px 24px 48px */
Expand All @@ -468,24 +473,24 @@
}

@media (min-width: 768px) {
.blog-post blockquote, .page blockquote {
.blog-post blockquote, .page blockquote, .faq-content blockquote {
margin: 2.5rem 0; /* 40px */
padding: 2rem 2rem 2rem 3.5rem; /* 32px 32px 32px 56px */
font-size: 1.25rem; /* 20px */
}
}

.blog-post blockquote p, .page blockquote p {
.blog-post blockquote p, .page blockquote p, .faq-content blockquote p {
margin: 0;
color: #141035;
}

.blog-post blockquote p:not(:last-child), .page blockquote p:not(:last-child) {
.blog-post blockquote p:not(:last-child), .page blockquote p:not(:last-child), .faq-content blockquote p:not(:last-child) {
margin-bottom: 1rem; /* 16px */
}

/* TL;DR blocks */
.blog-post .tldr, .page .tldr {
.blog-post .tldr, .page .tldr, .faq-content .tldr {
margin: 0 0 2rem 0; /* 32px */
padding: 1.25rem 1.5rem; /* 20px 24px */
background: linear-gradient(135deg, rgba(138, 125, 255, 0.08) 0%, rgba(138, 125, 255, 0.03) 100%);
Expand All @@ -494,12 +499,12 @@
}

@media (min-width: 768px) {
.blog-post .tldr, .page .tldr {
.blog-post .tldr, .page .tldr, .faq-content .tldr {
padding: 1.5rem 2rem; /* 24px 32px */
}
}

.blog-post .tldr .tldr-label, .page .tldr .tldr-label {
.blog-post .tldr .tldr-label, .page .tldr .tldr-label, .faq-content .tldr .tldr-label {
display: block;
font-size: 0.75rem; /* 12px */
font-weight: 700;
Expand All @@ -509,21 +514,21 @@
margin-bottom: 0.5rem; /* 8px */
}

.blog-post .tldr p, .page .tldr p {
.blog-post .tldr p, .page .tldr p, .faq-content .tldr p {
margin: 0;
font-size: 1rem; /* 16px */
line-height: 1.7;
color: #141035;
}

@media (min-width: 768px) {
.blog-post .tldr p, .page .tldr p {
.blog-post .tldr p, .page .tldr p, .faq-content .tldr p {
font-size: 1.125rem; /* 18px */
}
}

/* Code */
.blog-post code, .page code {
.blog-post code, .page code, .faq-content code {
background: #f1f5f9;
color: #334155;
padding: 0.1875rem 0.5rem; /* 3px 8px */
Expand All @@ -533,7 +538,7 @@
border: 1px solid #e2e8f0;
}

.blog-post pre, .page pre {
.blog-post pre, .page pre, .faq-content pre {
background: #1e293b;
color: #e2e8f0;
padding: 1.5rem; /* 24px */
Expand All @@ -544,7 +549,7 @@
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.blog-post pre code, .page pre code {
.blog-post pre code, .page pre code, .faq-content pre code {
background: transparent;
padding: 0;
border: none;
Expand All @@ -553,13 +558,13 @@
}

@media (min-width: 768px) {
.blog-post pre code, .page pre code {
.blog-post pre code, .page pre code, .faq-content pre code {
font-size: 1rem; /* 16px */
}
}

/* Tables */
.blog-post table, .page table {
.blog-post table, .page table, .faq-content table {
display: block;
width: 100%;
overflow-x: auto;
Expand All @@ -570,19 +575,20 @@
}

@media (min-width: 768px) {
.blog-post table, .page table {
.blog-post table, .page table, .faq-content table {
font-size: 1.125rem; /* 18px */
}
}

.blog-post th, .blog-post td,
.page th, .page td {
.page th, .page td,
.faq-content th, .faq-content td {
border: 1px solid #e5e7eb;
padding: 0.75rem 1rem; /* 12px 16px */
text-align: left;
}

.blog-post th, .page th {
.blog-post th, .page th, .faq-content th {
background-color: #f9fafb;
color: #141035;
font-weight: 600;
Expand All @@ -591,29 +597,29 @@
letter-spacing: 0.05em;
}

.blog-post tbody tr, .page tbody tr {
.blog-post tbody tr, .page tbody tr, .faq-content tbody tr {
background: #FFF;
transition: background-color 0.2s ease;
}

.blog-post tbody tr:hover, .page tbody tr:hover {
.blog-post tbody tr:hover, .page tbody tr:hover, .faq-content tbody tr:hover {
background: #f9fafb;
}

.blog-post td, .page td {
.blog-post td, .page td, .faq-content td {
color: #5E5E5E;
}

/* Horizontal rules */
.blog-post hr, .page hr {
.blog-post hr, .page hr, .faq-content hr {
margin: 3rem 0; /* 48px */
border: none;
height: 2px;
background: linear-gradient(to right, transparent, #e5e7eb 20%, #e5e7eb 80%, transparent);
}

@media (min-width: 768px) {
.blog-post hr, .page hr {
.blog-post hr, .page hr, .faq-content hr {
margin: 4rem 0; /* 64px */
}
}
Expand Down
Loading
Loading