seccodesmith/seccodesmith-frontend
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: refactor PageHeader component to use CSS modules and remove unused styles from Blog module

Browse Source
This commit is contained in:
SecCodeSmith
2025-05-22 15:44:26 +02:00
parent 77ba446d4d
commit b6894fac9b
4 changed files with 71 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/styles/Blog.module.scss
-58
View File
@@ -1,53 +1,5 @@
@use "./variables.scss" as *;
/* Page Header */
.pageHeader {
padding-top: 7rem;
padding-bottom: 3rem;
background-color: $secondary-dark;
position: relative;
overflow: hidden;
}
.pageHeader::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: url('/api/placeholder/1200/400');
opacity: 0.15;
filter: brightness(0.3);
z-index: 0;
}
.pageTitle {
font-size: 3rem;
margin-bottom: 1rem;
position: relative;
display: inline-block;
}
.pageTitle::after {
content: "";
position: absolute;
width: 60px;
height: 3px;
background: $accent-fire;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
box-shadow: $glow-effect;
}
.pageSubtitle {
font-size: 1.2rem;
color: $text-ash;
}
/* Meta items */
@mixin metaItem {
.metaItem {
@@ -269,13 +221,3 @@
border-color: $accent-fire;
color: $text-light;
}
/* Binary background effect */
.binaryLine {
position: absolute;
font-family: 'Fira Code', monospace;
color: $accent-fire;
font-size: 0.8rem;
opacity: 0.15;
pointer-events: none;
}
src/assets/styles/PageHeader.module.scss
+58
View File
@@ -0,0 +1,58 @@
@use "./variables.scss" as *;
/* Binary background effect */
.binaryLine {
position: absolute;
font-family: 'Fira Code', monospace;
color: $accent-fire;
font-size: 0.8rem;
opacity: 0.15;
pointer-events: none;
}
/* Page Header */
.pageHeader {
padding-top: 7rem;
padding-bottom: 3rem;
background-color: $secondary-dark;
position: relative;
overflow: hidden;
}
.pageHeader::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: url('/api/placeholder/1200/400');
opacity: 0.15;
filter: brightness(0.3);
z-index: 0;
}
.pageTitle {
font-size: 3rem;
margin-bottom: 1rem;
position: relative;
display: inline-block;
}
.pageTitle::after {
content: "";
position: absolute;
width: 60px;
height: 3px;
background: $accent-fire;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
box-shadow: $glow-effect;
}
.pageSubtitle {
font-size: 1.2rem;
color: $text-ash;
}
src/components/PageHeader.tsx
+10 -8
View File
@@ -1,3 +1,5 @@
import style from '@styles/PageHeader.module.scss'
interface PageHeaderProps {
title: string;
subtitle?: string;
@@ -5,17 +7,17 @@ interface PageHeaderProps {
export const PageHeader: React.FC<PageHeaderProps> = ({ title, subtitle }) => {
return (
<section className="page-header text-center">
<div className="container position-relative">
<h1 className="page-title">{title}</h1>
{subtitle && <p className="page-subtitle mt-4">{subtitle}</p>}
<section className={`text-center ${style.pageHeader}`}>
<div className={`container position-relative`}>
<h1 className={style.pageTitle}>{title}</h1>
{subtitle && <p className={`mt-4 ${style.pageSubtitle}`}>{subtitle}</p>}
{/* Binary background effect */}
<div className="binary-bg">
<div className="binary-line" style={{ top: '20%', left: '10%' }}>01001100 01101111 01110010 01100101 01101101</div>
<div className="binary-line" style={{ bottom: '30%', right: '15%' }}>01001001 01110000 01110011 01110101 01101101</div>
<div className="binary-line" style={{ top: '50%', left: '80%' }}>01000100 01101111 01101100 01101111 01110010</div>
<div className="binary-line" style={{ bottom: '10%', left: '40%' }}>01010011 01101001 01110100 00100000 01000001 01101101 01100101 01110100</div>
<div className={style.binaryLine} style={{ top: '20%', left: '10%' }}>01001100 01101111 01110010 01100101 01101101</div>
<div className={style.binaryLine} style={{ bottom: '30%', right: '15%' }}>01001001 01110000 01110011 01110101 01101101</div>
<div className={style.binaryLine} style={{ top: '50%', left: '80%' }}>01000100 01101111 01101100 01101111 01110010</div>
<div className={style.binaryLine} style={{ bottom: '10%', left: '40%' }}>01010011 01101001 01110100 00100000 01000001 01101101 01100101 01110100</div>
</div>
</div>
</section>
src/pages/Blog.tsx
+3 -3
View File
@@ -75,9 +75,9 @@ export const Blog = () => {
<i className="fas fa-angle-left"></i>
</a>
</li>
<li className={`page-item ${style.pageItem} active`}><a className="page-link" href="#">1</a></li>
<li className={`page-item ${style.pageItem}`}><a className="page-link" href="#">2</a></li>
<li className={`page-item ${style.pageItem}`}><a className="page-link" href="#">3</a></li>
<li className={`page-item ${style.pageItem} ${style.active}`}><a className={`page-link ${style.pageLink}`} href="#">1</a></li>
<li className={`page-item ${style.pageItem}`}><a className={`page-link ${style.pageLink}`} href="#">2</a></li>
<li className={`page-item ${style.pageItem}`}><a className={`page-link ${style.pageLink}`} href="#">3</a></li>
<li className={`page-item ${style.pageItem}`}>
<a className={`page-link ${style.pageLink}`} href="#" aria-label="Next">
<i className="fas fa-angle-right"></i>