This repository was archived by the owner on Jan 12, 2026. It is now read-only.

Added 30 minute skills page - #106

Open
bryanbab wants to merge 1 commit into
mainfrom
81-implement-30-minute-skills-page
Open

Added 30 minute skills page#106
bryanbab wants to merge 1 commit into
mainfrom
81-implement-30-minute-skills-page

Conversation

@bryanbab

@bryanbabbryanbab commented Jul 12, 2025•
edited
Loading

Copy link
Copy Markdown
Collaborator

Most changes made in existing components were made to match the Figma page

EducationInitiativeWrapper.tsx

  • changed link for 30-minute skills page to reflect page hierarchy

PastRecordingDisplay.tsx

  • changed view more icon to use FontAwesome library
  • changed width of cal to screen size for dynamic sizing
  • changed default grid layout from grid-cols-2 to grid-cols-1 for better mobile responsiveness
  • kept sm:grid-cols-2 to maintain two columns on small and larger screens
  • increased max container width from max-w-xl to max-w-[900px] for improved horizontal centering
  • added flex justify-center to horizontally center the pagination buttons within the container

Sidebar.tsx

  • changed bar width and height to match Figma

SidebarWrapper,.tsx

  • increased horizontal and vertical padding
  • changed text size to match Figma

thirty-minute-skills.tsx

  • combined components from previous tickets to make up 30 minute skills page

globals.css

  • added .override-flex-col utility to force specific flex-row layouts to stack vertically
Screenshot 2025-07-12 at 15 59 13Screenshot 2025-07-12 at 15 59 28Screenshot 2025-07-12 at 15 59 40

@bryanbabbryanbab linked an issue Jul 12, 2025 that may be closed by this pull request
Implement 30 Minute Skills page #81
Open
builderpepc
builderpepc suggested changes Jul 27, 2025
View reviewed changes

@builderpepcbuilderpepc left a comment •
edited
Loading

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey Bryan, looks great overall, but I think one of the changes relating to the sidebar have caused a visual bug:

main81-implement-30-minute-skills-page
imageimage

I used the FOI guide page to demonstrate this since it exists on both branches, but this also affects the 30 Minute Skills page and others that use the sidebar template. The title is getting padded too much from the left, so it is no longer aligned with the rest of the page. I think the px-10 added here is what's causing that. Could you please take a look? Also, until the navbar and footer are updated to be mobile responsive, you can temporarily comment out those components in pages/_app.tsx before testing on mobile so they don't interfere with the responsiveness of the rest of the site (but don't commit that change).

nefac/nefac-website/src/components/sidebar/SidebarWrapper.tsx

Line 22 in 02acb4d

<divclassName="text-nefacblue text-[36px] font-bold px-10 pt-10 pb-3 ">

Sign up for freeto subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

1 more reviewer
@builderpepcbuilderpepcbuilderpepc requested changes
Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Implement 30 Minute Skills page

2 participants

@bryanbab@builderpepc
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content

This repository was archived by the owner on Jan 12, 2026. It is now read-only.

Added 30 minute skills page - #106
Open
bryanbab wants to merge 1 commit into
mainfrom 
81-implement-30-minute-skills-page
Open
Added 30 minute skills page#106
bryanbab wants to merge 1 commit into
mainfrom 
81-implement-30-minute-skills-page
Conversation
@bryanbab
@bryanbabbryanbab
commented
Jul 12, 2025•

edited

Loading

Copy link


Copy Markdown

Collaborator
Most changes made in existing components were made to match the Figma page
EducationInitiativeWrapper.tsx
  • changed link for 30-minute skills page to reflect page hierarchy
PastRecordingDisplay.tsx
  • changed view more icon to use FontAwesome library
  • changed width of cal to screen size for dynamic sizing
  • changed default grid layout from grid-cols-2 to grid-cols-1 for better mobile responsiveness
  • kept sm:grid-cols-2 to maintain two columns on small and larger screens
  • increased max container width from max-w-xl to max-w-[900px] for improved horizontal centering
  • added flex justify-center to horizontally center the pagination buttons within the container
Sidebar.tsx
  • changed bar width and height to match Figma
SidebarWrapper,.tsx
  • increased horizontal and vertical padding
  • changed text size to match Figma
thirty-minute-skills.tsx
  • combined components from previous tickets to make up 30 minute skills page
globals.css
  • added .override-flex-col utility to force specific flex-row layouts to stack vertically
Screenshot 2025-07-12 at 15 59 13Screenshot 2025-07-12 at 15 59 28Screenshot 2025-07-12 at 15 59 40
@bryanbabbryanbab
linked an issue
Jul 12, 2025
that may be
closed
by this pull request


Implement 30 Minute Skills page
#81

Open

builderpepc
builderpepc
suggested changes
Jul 27, 2025
View reviewed changes
@builderpepcbuilderpepc
left a comment
•

edited

Loading

Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey Bryan, looks great overall, but I think one of the changes relating to the sidebar have caused a visual bug:
main81-implement-30-minute-skills-page
imageimage
I used the FOI guide page to demonstrate this since it exists on both branches, but this also affects the 30 Minute Skills page and others that use the sidebar template. The title is getting padded too much from the left, so it is no longer aligned with the rest of the page. I think the px-10 added here is what's causing that. Could you please take a look? Also, until the navbar and footer are updated to be mobile responsive, you can temporarily comment out those components in pages/_app.tsx before testing on mobile so they don't interfere with the responsiveness of the rest of the site (but don't commit that change).
nefac/nefac-website/src/components/sidebar/SidebarWrapper.tsx

Line 22
in
02acb4d
<divclassName="text-nefacblue text-[36px] font-bold px-10 pt-10 pb-3 ">
Sign up for freeto subscribe to this conversation on GitHub.
Already have an account?
Sign in.


Reviewers


1 more reviewer

@builderpepcbuilderpepcbuilderpepc requested changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

Implement 30 Minute Skills page


2 participants

@bryanbab@builderpepc

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content

This repository was archived by the owner on Jan 12, 2026. It is now read-only.

Added 30 minute skills page - #106
Open
bryanbab wants to merge 1 commit into
mainfrom 
81-implement-30-minute-skills-page
Open
Added 30 minute skills page#106
bryanbab wants to merge 1 commit into
mainfrom 
81-implement-30-minute-skills-page
Conversation
@bryanbab
@bryanbabbryanbab
commented
Jul 12, 2025•

edited

Loading

Copy link


Copy Markdown

Collaborator
Most changes made in existing components were made to match the Figma page
EducationInitiativeWrapper.tsx
  • changed link for 30-minute skills page to reflect page hierarchy
PastRecordingDisplay.tsx
  • changed view more icon to use FontAwesome library
  • changed width of cal to screen size for dynamic sizing
  • changed default grid layout from grid-cols-2 to grid-cols-1 for better mobile responsiveness
  • kept sm:grid-cols-2 to maintain two columns on small and larger screens
  • increased max container width from max-w-xl to max-w-[900px] for improved horizontal centering
  • added flex justify-center to horizontally center the pagination buttons within the container
Sidebar.tsx
  • changed bar width and height to match Figma
SidebarWrapper,.tsx
  • increased horizontal and vertical padding
  • changed text size to match Figma
thirty-minute-skills.tsx
  • combined components from previous tickets to make up 30 minute skills page
globals.css
  • added .override-flex-col utility to force specific flex-row layouts to stack vertically
Screenshot 2025-07-12 at 15 59 13Screenshot 2025-07-12 at 15 59 28Screenshot 2025-07-12 at 15 59 40
@bryanbabbryanbab
linked an issue
Jul 12, 2025
that may be
closed
by this pull request


Implement 30 Minute Skills page
#81

Open

builderpepc
builderpepc
suggested changes
Jul 27, 2025
View reviewed changes
@builderpepcbuilderpepc
left a comment
•

edited

Loading

Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey Bryan, looks great overall, but I think one of the changes relating to the sidebar have caused a visual bug:
main81-implement-30-minute-skills-page
imageimage
I used the FOI guide page to demonstrate this since it exists on both branches, but this also affects the 30 Minute Skills page and others that use the sidebar template. The title is getting padded too much from the left, so it is no longer aligned with the rest of the page. I think the px-10 added here is what's causing that. Could you please take a look? Also, until the navbar and footer are updated to be mobile responsive, you can temporarily comment out those components in pages/_app.tsx before testing on mobile so they don't interfere with the responsiveness of the rest of the site (but don't commit that change).
nefac/nefac-website/src/components/sidebar/SidebarWrapper.tsx

Line 22
in
02acb4d
<divclassName="text-nefacblue text-[36px] font-bold px-10 pt-10 pb-3 ">
Sign up for freeto subscribe to this conversation on GitHub.
Already have an account?
Sign in.


Reviewers


1 more reviewer

@builderpepcbuilderpepcbuilderpepc requested changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

Implement 30 Minute Skills page


2 participants

@bryanbab@builderpepc

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content

This repository was archived by the owner on Jan 12, 2026. It is now read-only.

Added 30 minute skills page - #106
Open
bryanbab wants to merge 1 commit into
mainfrom 
81-implement-30-minute-skills-page
Open
Added 30 minute skills page#106
bryanbab wants to merge 1 commit into
mainfrom 
81-implement-30-minute-skills-page
Conversation
@bryanbab
@bryanbabbryanbab
commented
Jul 12, 2025•

edited

Loading

Copy link


Copy Markdown

Collaborator
Most changes made in existing components were made to match the Figma page
EducationInitiativeWrapper.tsx
  • changed link for 30-minute skills page to reflect page hierarchy
PastRecordingDisplay.tsx
  • changed view more icon to use FontAwesome library
  • changed width of cal to screen size for dynamic sizing
  • changed default grid layout from grid-cols-2 to grid-cols-1 for better mobile responsiveness
  • kept sm:grid-cols-2 to maintain two columns on small and larger screens
  • increased max container width from max-w-xl to max-w-[900px] for improved horizontal centering
  • added flex justify-center to horizontally center the pagination buttons within the container
Sidebar.tsx
  • changed bar width and height to match Figma
SidebarWrapper,.tsx
  • increased horizontal and vertical padding
  • changed text size to match Figma
thirty-minute-skills.tsx
  • combined components from previous tickets to make up 30 minute skills page
globals.css
  • added .override-flex-col utility to force specific flex-row layouts to stack vertically
Screenshot 2025-07-12 at 15 59 13Screenshot 2025-07-12 at 15 59 28Screenshot 2025-07-12 at 15 59 40
@bryanbabbryanbab
linked an issue
Jul 12, 2025
that may be
closed
by this pull request


Implement 30 Minute Skills page
#81

Open

builderpepc
builderpepc
suggested changes
Jul 27, 2025
View reviewed changes
@builderpepcbuilderpepc
left a comment
•

edited

Loading

Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey Bryan, looks great overall, but I think one of the changes relating to the sidebar have caused a visual bug:
main81-implement-30-minute-skills-page
imageimage
I used the FOI guide page to demonstrate this since it exists on both branches, but this also affects the 30 Minute Skills page and others that use the sidebar template. The title is getting padded too much from the left, so it is no longer aligned with the rest of the page. I think the px-10 added here is what's causing that. Could you please take a look? Also, until the navbar and footer are updated to be mobile responsive, you can temporarily comment out those components in pages/_app.tsx before testing on mobile so they don't interfere with the responsiveness of the rest of the site (but don't commit that change).
nefac/nefac-website/src/components/sidebar/SidebarWrapper.tsx

Line 22
in
02acb4d
<divclassName="text-nefacblue text-[36px] font-bold px-10 pt-10 pb-3 ">
Sign up for freeto subscribe to this conversation on GitHub.
Already have an account?
Sign in.


Reviewers


1 more reviewer

@builderpepcbuilderpepcbuilderpepc requested changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

Implement 30 Minute Skills page


2 participants

@bryanbab@builderpepc

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content

This repository was archived by the owner on Jan 12, 2026. It is now read-only.

Added 30 minute skills page - #106
Open
bryanbab wants to merge 1 commit into
mainfrom 
81-implement-30-minute-skills-page
Open
Added 30 minute skills page#106
bryanbab wants to merge 1 commit into
mainfrom 
81-implement-30-minute-skills-page
Conversation
@bryanbab
@bryanbabbryanbab
commented
Jul 12, 2025•

edited

Loading

Copy link


Copy Markdown

Collaborator
Most changes made in existing components were made to match the Figma page
EducationInitiativeWrapper.tsx
  • changed link for 30-minute skills page to reflect page hierarchy
PastRecordingDisplay.tsx
  • changed view more icon to use FontAwesome library
  • changed width of cal to screen size for dynamic sizing
  • changed default grid layout from grid-cols-2 to grid-cols-1 for better mobile responsiveness
  • kept sm:grid-cols-2 to maintain two columns on small and larger screens
  • increased max container width from max-w-xl to max-w-[900px] for improved horizontal centering
  • added flex justify-center to horizontally center the pagination buttons within the container
Sidebar.tsx
  • changed bar width and height to match Figma
SidebarWrapper,.tsx
  • increased horizontal and vertical padding
  • changed text size to match Figma
thirty-minute-skills.tsx
  • combined components from previous tickets to make up 30 minute skills page
globals.css
  • added .override-flex-col utility to force specific flex-row layouts to stack vertically
Screenshot 2025-07-12 at 15 59 13Screenshot 2025-07-12 at 15 59 28Screenshot 2025-07-12 at 15 59 40
@bryanbabbryanbab
linked an issue
Jul 12, 2025
that may be
closed
by this pull request


Implement 30 Minute Skills page
#81

Open

builderpepc
builderpepc
suggested changes
Jul 27, 2025
View reviewed changes
@builderpepcbuilderpepc
left a comment
•

edited

Loading

Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey Bryan, looks great overall, but I think one of the changes relating to the sidebar have caused a visual bug:
main81-implement-30-minute-skills-page
imageimage
I used the FOI guide page to demonstrate this since it exists on both branches, but this also affects the 30 Minute Skills page and others that use the sidebar template. The title is getting padded too much from the left, so it is no longer aligned with the rest of the page. I think the px-10 added here is what's causing that. Could you please take a look? Also, until the navbar and footer are updated to be mobile responsive, you can temporarily comment out those components in pages/_app.tsx before testing on mobile so they don't interfere with the responsiveness of the rest of the site (but don't commit that change).
nefac/nefac-website/src/components/sidebar/SidebarWrapper.tsx

Line 22
in
02acb4d
<divclassName="text-nefacblue text-[36px] font-bold px-10 pt-10 pb-3 ">
Sign up for freeto subscribe to this conversation on GitHub.
Already have an account?
Sign in.


Reviewers


1 more reviewer

@builderpepcbuilderpepcbuilderpepc requested changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

Implement 30 Minute Skills page


2 participants

@bryanbab@builderpepc

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content

This repository was archived by the owner on Jan 12, 2026. It is now read-only.

Added 30 minute skills page - #106
Open
bryanbab wants to merge 1 commit into
mainfrom 
81-implement-30-minute-skills-page
Open
Added 30 minute skills page#106
bryanbab wants to merge 1 commit into
mainfrom 
81-implement-30-minute-skills-page
Conversation
@bryanbab
@bryanbabbryanbab
commented
Jul 12, 2025•

edited

Loading

Copy link


Copy Markdown

Collaborator
Most changes made in existing components were made to match the Figma page
EducationInitiativeWrapper.tsx
  • changed link for 30-minute skills page to reflect page hierarchy
PastRecordingDisplay.tsx
  • changed view more icon to use FontAwesome library
  • changed width of cal to screen size for dynamic sizing
  • changed default grid layout from grid-cols-2 to grid-cols-1 for better mobile responsiveness
  • kept sm:grid-cols-2 to maintain two columns on small and larger screens
  • increased max container width from max-w-xl to max-w-[900px] for improved horizontal centering
  • added flex justify-center to horizontally center the pagination buttons within the container
Sidebar.tsx
  • changed bar width and height to match Figma
SidebarWrapper,.tsx
  • increased horizontal and vertical padding
  • changed text size to match Figma
thirty-minute-skills.tsx
  • combined components from previous tickets to make up 30 minute skills page
globals.css
  • added .override-flex-col utility to force specific flex-row layouts to stack vertically
Screenshot 2025-07-12 at 15 59 13Screenshot 2025-07-12 at 15 59 28Screenshot 2025-07-12 at 15 59 40
@bryanbabbryanbab
linked an issue
Jul 12, 2025
that may be
closed
by this pull request


Implement 30 Minute Skills page
#81

Open

builderpepc
builderpepc
suggested changes
Jul 27, 2025
View reviewed changes
@builderpepcbuilderpepc
left a comment
•

edited

Loading

Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey Bryan, looks great overall, but I think one of the changes relating to the sidebar have caused a visual bug:
main81-implement-30-minute-skills-page
imageimage
I used the FOI guide page to demonstrate this since it exists on both branches, but this also affects the 30 Minute Skills page and others that use the sidebar template. The title is getting padded too much from the left, so it is no longer aligned with the rest of the page. I think the px-10 added here is what's causing that. Could you please take a look? Also, until the navbar and footer are updated to be mobile responsive, you can temporarily comment out those components in pages/_app.tsx before testing on mobile so they don't interfere with the responsiveness of the rest of the site (but don't commit that change).
nefac/nefac-website/src/components/sidebar/SidebarWrapper.tsx

Line 22
in
02acb4d
<divclassName="text-nefacblue text-[36px] font-bold px-10 pt-10 pb-3 ">
Sign up for freeto subscribe to this conversation on GitHub.
Already have an account?
Sign in.


Reviewers


1 more reviewer

@builderpepcbuilderpepcbuilderpepc requested changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

Implement 30 Minute Skills page


2 participants

@bryanbab@builderpepc

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content

This repository was archived by the owner on Jan 12, 2026. It is now read-only.

Added 30 minute skills page - #106
Open
bryanbab wants to merge 1 commit into
mainfrom 
81-implement-30-minute-skills-page
Open
Added 30 minute skills page#106
bryanbab wants to merge 1 commit into
mainfrom 
81-implement-30-minute-skills-page
Conversation
@bryanbab
@bryanbabbryanbab
commented
Jul 12, 2025•

edited

Loading

Copy link


Copy Markdown

Collaborator
Most changes made in existing components were made to match the Figma page
EducationInitiativeWrapper.tsx
  • changed link for 30-minute skills page to reflect page hierarchy
PastRecordingDisplay.tsx
  • changed view more icon to use FontAwesome library
  • changed width of cal to screen size for dynamic sizing
  • changed default grid layout from grid-cols-2 to grid-cols-1 for better mobile responsiveness
  • kept sm:grid-cols-2 to maintain two columns on small and larger screens
  • increased max container width from max-w-xl to max-w-[900px] for improved horizontal centering
  • added flex justify-center to horizontally center the pagination buttons within the container
Sidebar.tsx
  • changed bar width and height to match Figma
SidebarWrapper,.tsx
  • increased horizontal and vertical padding
  • changed text size to match Figma
thirty-minute-skills.tsx
  • combined components from previous tickets to make up 30 minute skills page
globals.css
  • added .override-flex-col utility to force specific flex-row layouts to stack vertically
Screenshot 2025-07-12 at 15 59 13Screenshot 2025-07-12 at 15 59 28Screenshot 2025-07-12 at 15 59 40
@bryanbabbryanbab
linked an issue
Jul 12, 2025
that may be
closed
by this pull request


Implement 30 Minute Skills page
#81

Open

builderpepc
builderpepc
suggested changes
Jul 27, 2025
View reviewed changes
@builderpepcbuilderpepc
left a comment
•

edited

Loading

Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey Bryan, looks great overall, but I think one of the changes relating to the sidebar have caused a visual bug:
main81-implement-30-minute-skills-page
imageimage
I used the FOI guide page to demonstrate this since it exists on both branches, but this also affects the 30 Minute Skills page and others that use the sidebar template. The title is getting padded too much from the left, so it is no longer aligned with the rest of the page. I think the px-10 added here is what's causing that. Could you please take a look? Also, until the navbar and footer are updated to be mobile responsive, you can temporarily comment out those components in pages/_app.tsx before testing on mobile so they don't interfere with the responsiveness of the rest of the site (but don't commit that change).
nefac/nefac-website/src/components/sidebar/SidebarWrapper.tsx

Line 22
in
02acb4d
<divclassName="text-nefacblue text-[36px] font-bold px-10 pt-10 pb-3 ">
Sign up for freeto subscribe to this conversation on GitHub.
Already have an account?
Sign in.


Reviewers


1 more reviewer

@builderpepcbuilderpepcbuilderpepc requested changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

Implement 30 Minute Skills page


2 participants

@bryanbab@builderpepc

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content

This repository was archived by the owner on Jan 12, 2026. It is now read-only.

Added 30 minute skills page - #106
Open
bryanbab wants to merge 1 commit into
mainfrom 
81-implement-30-minute-skills-page
Open
Added 30 minute skills page#106
bryanbab wants to merge 1 commit into
mainfrom 
81-implement-30-minute-skills-page
Conversation
@bryanbab
@bryanbabbryanbab
commented
Jul 12, 2025•

edited

Loading

Copy link


Copy Markdown

Collaborator
Most changes made in existing components were made to match the Figma page
EducationInitiativeWrapper.tsx
  • changed link for 30-minute skills page to reflect page hierarchy
PastRecordingDisplay.tsx
  • changed view more icon to use FontAwesome library
  • changed width of cal to screen size for dynamic sizing
  • changed default grid layout from grid-cols-2 to grid-cols-1 for better mobile responsiveness
  • kept sm:grid-cols-2 to maintain two columns on small and larger screens
  • increased max container width from max-w-xl to max-w-[900px] for improved horizontal centering
  • added flex justify-center to horizontally center the pagination buttons within the container
Sidebar.tsx
  • changed bar width and height to match Figma
SidebarWrapper,.tsx
  • increased horizontal and vertical padding
  • changed text size to match Figma
thirty-minute-skills.tsx
  • combined components from previous tickets to make up 30 minute skills page
globals.css
  • added .override-flex-col utility to force specific flex-row layouts to stack vertically
Screenshot 2025-07-12 at 15 59 13Screenshot 2025-07-12 at 15 59 28Screenshot 2025-07-12 at 15 59 40
@bryanbabbryanbab
linked an issue
Jul 12, 2025
that may be
closed
by this pull request


Implement 30 Minute Skills page
#81

Open

builderpepc
builderpepc
suggested changes
Jul 27, 2025
View reviewed changes
@builderpepcbuilderpepc
left a comment
•

edited

Loading

Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey Bryan, looks great overall, but I think one of the changes relating to the sidebar have caused a visual bug:
main81-implement-30-minute-skills-page
imageimage
I used the FOI guide page to demonstrate this since it exists on both branches, but this also affects the 30 Minute Skills page and others that use the sidebar template. The title is getting padded too much from the left, so it is no longer aligned with the rest of the page. I think the px-10 added here is what's causing that. Could you please take a look? Also, until the navbar and footer are updated to be mobile responsive, you can temporarily comment out those components in pages/_app.tsx before testing on mobile so they don't interfere with the responsiveness of the rest of the site (but don't commit that change).
nefac/nefac-website/src/components/sidebar/SidebarWrapper.tsx

Line 22
in
02acb4d
<divclassName="text-nefacblue text-[36px] font-bold px-10 pt-10 pb-3 ">
Sign up for freeto subscribe to this conversation on GitHub.
Already have an account?
Sign in.


Reviewers


1 more reviewer

@builderpepcbuilderpepcbuilderpepc requested changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

Implement 30 Minute Skills page


2 participants

@bryanbab@builderpepc