818 lines
20 KiB
CSS
818 lines
20 KiB
CSS
/* ============================================================================
|
|
STATIC WEBSITE STYLESHEET
|
|
============================================================================
|
|
|
|
This stylesheet provides all styling for the static website.
|
|
It includes:
|
|
- CSS reset and base styles
|
|
- Layout and navigation
|
|
- Section styling with scroll-snap
|
|
- Blog post styling
|
|
- Responsive design
|
|
- Dark/light mode support via CSS variables
|
|
============================================================================ */
|
|
|
|
/* ============================================================================
|
|
RESET & BASE STYLES
|
|
============================================================================ */
|
|
|
|
/* Reset default browser styles and set box-sizing for consistent sizing */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
/* Base body styling - uses flexbox for layout, prevents double scrollbars */
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 0;
|
|
overflow: hidden; /* Prevent double scrollbars */
|
|
line-height: 1.6;
|
|
color: var(--text-color);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
background-color: var(--bg-color);
|
|
}
|
|
|
|
/* ============================================================================
|
|
HEADER & NAVIGATION
|
|
============================================================================ */
|
|
|
|
/* Fixed header at top of page with backdrop blur effect */
|
|
header {
|
|
position: fixed;
|
|
width: 100%;
|
|
background: var(--header-footer-bg);
|
|
padding: 1rem 5%;
|
|
z-index: 100;
|
|
height: 160px; /* Doubled from 80px */
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Title styles */
|
|
header h1 {
|
|
font-size: 1.5rem; /* Adjust size as needed */
|
|
margin: 0;
|
|
color: #ffffff;
|
|
}
|
|
|
|
nav {
|
|
margin: 0; /* Remove any margin */
|
|
}
|
|
|
|
nav ul {
|
|
display: flex;
|
|
list-style: none;
|
|
gap: 2rem;
|
|
margin: 0; /* Remove any margin */
|
|
}
|
|
|
|
nav a {
|
|
text-decoration: none;
|
|
color: var(--text-color);
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* ============================================================================
|
|
MAIN CONTENT & LAYOUT
|
|
============================================================================ */
|
|
|
|
/* Main container - no max-width to allow full-width sections */
|
|
main {
|
|
margin: 0;
|
|
padding: 0;
|
|
max-width: none;
|
|
}
|
|
|
|
/* Section base styling */
|
|
section {
|
|
margin-bottom: 3rem;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Section headings */
|
|
h2 {
|
|
color: var(--text-color);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* Paragraph text with max-width for readability */
|
|
p {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* ============================================================================
|
|
FOOTER
|
|
============================================================================ */
|
|
|
|
/* Fixed footer at bottom of page */
|
|
footer {
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
background: var(--header-footer-bg);
|
|
padding: 1rem;
|
|
text-align: center;
|
|
height: 60px; /* Give footer a fixed height */
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Responsive adjustments for header */
|
|
@media screen and (max-width: 768px) {
|
|
header {
|
|
flex-direction: column;
|
|
height: auto;
|
|
padding: 1rem;
|
|
}
|
|
|
|
header h1 {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
nav ul {
|
|
flex-direction: row; /* Keep navigation horizontal on mobile */
|
|
gap: 1rem;
|
|
}
|
|
}
|
|
|
|
/* ============================================================================
|
|
SCROLL-SNAP CONTAINER
|
|
============================================================================
|
|
|
|
Implements smooth scroll-snap behavior where each section snaps into view.
|
|
Scrollbar is hidden for cleaner appearance while maintaining functionality.
|
|
============================================================================ */
|
|
|
|
/* Main scroll container with vertical snap behavior */
|
|
.snap-container {
|
|
height: 100vh;
|
|
overflow-y: scroll;
|
|
scroll-snap-type: y mandatory; /* Enable vertical snap */
|
|
-webkit-scroll-snap-type: y mandatory; /* Safari support */
|
|
scroll-padding-top: 0; /* Reset any scroll padding */
|
|
scrollbar-width: none; /* Firefox - hide scrollbar */
|
|
-ms-overflow-style: none; /* Internet Explorer 10+ - hide scrollbar */
|
|
}
|
|
|
|
/* Hide scrollbar in WebKit browsers (Chrome, Safari, etc.) */
|
|
.snap-container::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* ============================================================================
|
|
SECTION STYLING
|
|
============================================================================
|
|
|
|
Each section uses full viewport height with scroll-snap alignment.
|
|
Sections have semi-transparent backgrounds with backdrop blur for modern look.
|
|
============================================================================ */
|
|
|
|
/* Individual snap section - full viewport height with snap alignment */
|
|
.snap-section {
|
|
min-height: 100vh;
|
|
height: 100vh;
|
|
scroll-snap-align: start;
|
|
-webkit-scroll-snap-align: start; /* Safari support */
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 200px 2rem 60px 2rem;
|
|
box-sizing: border-box;
|
|
justify-content: flex-start; /* Change to flex-start to better control spacing */
|
|
overflow-y: auto; /* Allow scrolling within sections if needed */
|
|
border: 1px solid var(--border-color);
|
|
box-shadow: 0 0 20px var(--accent-glow);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px); /* Safari support */
|
|
}
|
|
|
|
/* Center all section titles */
|
|
.snap-section h2 {
|
|
text-align: center;
|
|
margin-bottom: 3rem;
|
|
font-size: 2.5rem;
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
/* ============================================================================
|
|
SECTION CONTENT LAYOUT
|
|
============================================================================
|
|
|
|
Content blocks alternate between left and right alignment for visual interest.
|
|
Each block contains text content and an image side-by-side.
|
|
============================================================================ */
|
|
|
|
/* Content block container - flexbox for text/image layout */
|
|
.section-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 90%;
|
|
max-width: 1200px;
|
|
gap: 3rem;
|
|
margin-bottom: 3rem; /* Add bottom margin for spacing between content blocks */
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.section-content:hover {
|
|
transform: translateY(-3px);
|
|
}
|
|
|
|
/* Text content styling */
|
|
.text-content {
|
|
flex: 1;
|
|
max-width: 500px;
|
|
text-align: left; /* Keep all text left-aligned */
|
|
}
|
|
|
|
/* Image content styling */
|
|
.image-content {
|
|
flex: 1;
|
|
max-width: 500px;
|
|
aspect-ratio: 16/9;
|
|
}
|
|
|
|
.image-content img {
|
|
display: block; /* Show the images */
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
border-radius: 15px;
|
|
box-shadow: 0 4px 8px var(--shadow-color);
|
|
border: 1px solid var(--border-color);
|
|
box-shadow: 0 4px 15px var(--accent-glow);
|
|
}
|
|
|
|
/* Remove the placeholder boxes */
|
|
.image-content:after {
|
|
display: none;
|
|
}
|
|
|
|
/* Remove the different colors for placeholder boxes since we're using real images now */
|
|
#about .image-content:after,
|
|
#services .image-content:after,
|
|
#portfolio .image-content:after,
|
|
#contact .image-content:after {
|
|
display: none;
|
|
}
|
|
|
|
/* Left alignment (image on right) */
|
|
.left-align {
|
|
flex-direction: row;
|
|
}
|
|
|
|
/* Right alignment (image on left) */
|
|
.right-align {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
/* Remove these conflicting styles */
|
|
.left-align .text-content,
|
|
.right-align .text-align {
|
|
text-align: left; /* Override previous right-align */
|
|
}
|
|
|
|
/* Adjust responsive design for multiple content blocks */
|
|
@media screen and (max-width: 768px) {
|
|
.snap-section {
|
|
padding: 100px 1rem 60px 1rem;
|
|
}
|
|
|
|
.section-content {
|
|
flex-direction: column !important;
|
|
padding: 0 1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.image-content {
|
|
width: 100%;
|
|
max-width: 400px;
|
|
}
|
|
}
|
|
|
|
/* Add some different background colors to distinguish sections */
|
|
#about {
|
|
background-color: var(--section-bg-1);
|
|
}
|
|
|
|
#services {
|
|
background-color: var(--section-bg-2);
|
|
}
|
|
|
|
#portfolio {
|
|
background-color: var(--section-bg-3);
|
|
}
|
|
|
|
#contact {
|
|
background-color: var(--section-bg-4);
|
|
}
|
|
|
|
/* ============================================================================
|
|
CSS VARIABLES - THEME COLORS
|
|
============================================================================
|
|
|
|
CSS custom properties for theming. Supports both light and dark modes
|
|
via media query. All colors are defined here for easy theme customization.
|
|
============================================================================ */
|
|
|
|
/* Light mode color variables (default) */
|
|
:root {
|
|
/* Light mode colors (default) */
|
|
--bg-color: rgba(240, 245, 255, 0.9);
|
|
--text-color: #2C3E50;
|
|
--section-bg-1: #f0f0f0;
|
|
--section-bg-2: #e0e0e0;
|
|
--section-bg-3: #d0d0d0;
|
|
--section-bg-4: #c0c0c0;
|
|
--header-footer-bg: rgba(28, 34, 56, 0.95);
|
|
--shadow-color: rgba(62, 84, 172, 0.1);
|
|
--accent-color: #4A90E2;
|
|
--accent-glow: rgba(74, 144, 226, 0.2);
|
|
--border-color: rgba(74, 144, 226, 0.2);
|
|
--section-bg-1-transparent: rgba(236, 240, 255, 0.85);
|
|
--section-bg-2-transparent: rgba(226, 232, 255, 0.85);
|
|
--section-bg-3-transparent: rgba(216, 224, 255, 0.85);
|
|
--section-bg-4-transparent: rgba(206, 216, 255, 0.85);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
/* Dark mode colors */
|
|
--bg-color: rgba(16, 20, 34, 0.9);
|
|
--text-color: #E0E6FF;
|
|
--section-bg-1: #2a2a2a;
|
|
--section-bg-2: #303030;
|
|
--section-bg-3: #383838;
|
|
--section-bg-4: #404040;
|
|
--header-footer-bg: rgba(18, 22, 38, 0.95);
|
|
--shadow-color: rgba(62, 84, 172, 0.3);
|
|
--accent-color: #64A9FF;
|
|
--accent-glow: rgba(100, 169, 255, 0.2);
|
|
--border-color: rgba(100, 169, 255, 0.2);
|
|
--section-bg-1-transparent: rgba(22, 26, 44, 0.85);
|
|
--section-bg-2-transparent: rgba(26, 30, 50, 0.85);
|
|
--section-bg-3-transparent: rgba(30, 34, 56, 0.85);
|
|
--section-bg-4-transparent: rgba(34, 38, 62, 0.85);
|
|
}
|
|
}
|
|
|
|
/* Update existing color references */
|
|
body {
|
|
background-color: var(--bg-color);
|
|
color: var(--text-color);
|
|
}
|
|
|
|
header {
|
|
background: var(--header-footer-bg);
|
|
backdrop-filter: blur(15px);
|
|
-webkit-backdrop-filter: blur(15px); /* Safari support */
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
footer {
|
|
background: var(--header-footer-bg);
|
|
border-top: 1px solid var(--border-color);
|
|
border-bottom: none;
|
|
}
|
|
|
|
nav a {
|
|
color: var(--text-color);
|
|
position: relative;
|
|
padding: 0.5rem 1rem;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
nav a::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -2px;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 2px;
|
|
background: var(--accent-color);
|
|
transform: scaleX(0);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
nav a:hover::after {
|
|
transform: scaleX(1);
|
|
}
|
|
|
|
h2 {
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.image-content img {
|
|
box-shadow: 0 4px 8px var(--shadow-color);
|
|
}
|
|
|
|
/* Update section background colors */
|
|
#about {
|
|
background-color: var(--section-bg-1);
|
|
}
|
|
|
|
#services {
|
|
background-color: var(--section-bg-2);
|
|
}
|
|
|
|
#portfolio {
|
|
background-color: var(--section-bg-3);
|
|
}
|
|
|
|
#contact {
|
|
background-color: var(--section-bg-4);
|
|
}
|
|
|
|
/* Content container styles */
|
|
.content-container {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 3rem;
|
|
}
|
|
|
|
/* Ensure markdown-generated paragraphs maintain styles */
|
|
.text-content p {
|
|
margin: 0;
|
|
max-width: none;
|
|
}
|
|
|
|
.error-message {
|
|
color: var(--text-color);
|
|
padding: 1rem;
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Add background image styles */
|
|
body::before {
|
|
content: '';
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -1;
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
opacity: 0.15;
|
|
}
|
|
|
|
/* Update section backgrounds to be semi-transparent */
|
|
#about {
|
|
background-color: var(--section-bg-1-transparent);
|
|
}
|
|
|
|
#services {
|
|
background-color: var(--section-bg-2-transparent);
|
|
}
|
|
|
|
#portfolio {
|
|
background-color: var(--section-bg-3-transparent);
|
|
}
|
|
|
|
#contact {
|
|
background-color: var(--section-bg-4-transparent);
|
|
}
|
|
|
|
/* Add subtle border glow to sections */
|
|
.snap-section {
|
|
border: 1px solid var(--border-color);
|
|
box-shadow: 0 0 20px var(--accent-glow);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px); /* Safari support */
|
|
}
|
|
|
|
/* Update header and footer style */
|
|
header, footer {
|
|
backdrop-filter: blur(15px);
|
|
-webkit-backdrop-filter: blur(15px); /* Safari support */
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
footer {
|
|
border-top: 1px solid var(--border-color);
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* Update navigation links */
|
|
nav a {
|
|
position: relative;
|
|
padding: 0.5rem 1rem;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
nav a::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -2px;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 2px;
|
|
background: var(--accent-color);
|
|
transform: scaleX(0);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
nav a:hover::after {
|
|
transform: scaleX(1);
|
|
}
|
|
|
|
/* Update blog post styling */
|
|
.blog-post {
|
|
background-color: var(--section-bg-1-transparent);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 15px;
|
|
padding: 2.5rem;
|
|
margin-bottom: 2rem;
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px); /* Safari support */
|
|
box-shadow: 0 0 20px var(--accent-glow);
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
|
|
}
|
|
|
|
.blog-post:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 5px 25px var(--accent-glow);
|
|
background-color: var(--section-bg-2-transparent);
|
|
}
|
|
|
|
/* Update blog tags */
|
|
.blog-tag {
|
|
background-color: var(--accent-glow);
|
|
border: 1px solid var(--accent-color);
|
|
color: var(--text-color);
|
|
padding: 0.4rem 0.8rem;
|
|
border-radius: 20px;
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
display: inline-block;
|
|
}
|
|
|
|
.blog-tag:hover {
|
|
background-color: var(--accent-color);
|
|
color: white;
|
|
transform: scale(1.05);
|
|
box-shadow: 0 2px 8px var(--accent-glow);
|
|
}
|
|
|
|
/* Update scrollbar styling */
|
|
.blog-container::-webkit-scrollbar-thumb {
|
|
background: var(--accent-color);
|
|
border: 3px solid var(--bg-color);
|
|
}
|
|
|
|
/* Add subtle animations */
|
|
.section-content {
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.section-content:hover {
|
|
transform: translateY(-3px);
|
|
}
|
|
|
|
/* Update image styling */
|
|
.image-content img {
|
|
border: 1px solid var(--border-color);
|
|
box-shadow: 0 4px 15px var(--accent-glow);
|
|
}
|
|
|
|
/* Update headings */
|
|
h1, h2 {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
h2::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -5px;
|
|
left: 0;
|
|
width: 60px;
|
|
height: 2px;
|
|
background: var(--accent-color);
|
|
box-shadow: 0 0 10px var(--accent-glow);
|
|
}
|
|
|
|
/* Add subtle transitions to all interactive elements */
|
|
a, button {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
/* Update section transitions */
|
|
.snap-section {
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
/* ============================================================================
|
|
BLOG PAGE STYLING
|
|
============================================================================
|
|
|
|
Blog-specific styles for the blog.html page. Includes:
|
|
- Blog container and grid layout
|
|
- Blog post card styling
|
|
- Blog post metadata and tags
|
|
- Content formatting
|
|
============================================================================ */
|
|
|
|
/* Main blog container - scrollable area with padding for header/footer */
|
|
.blog-container {
|
|
padding-top: 200px;
|
|
padding-bottom: 100px;
|
|
width: 90%;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
height: calc(100vh - 220px); /* Account for header and footer */
|
|
overflow-y: auto; /* Enable scrolling */
|
|
}
|
|
|
|
.blog-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2.5rem;
|
|
padding-bottom: 2rem; /* Add some padding at the bottom */
|
|
}
|
|
|
|
.blog-post-header {
|
|
margin-bottom: 2rem;
|
|
padding-bottom: 1.5rem;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.blog-post-title {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 1rem;
|
|
color: var(--text-color);
|
|
position: relative;
|
|
display: inline-block;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
|
|
.blog-post-title::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 80px;
|
|
height: 3px;
|
|
background: var(--accent-color);
|
|
box-shadow: 0 0 10px var(--accent-glow);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.blog-post-meta {
|
|
font-size: 0.95rem;
|
|
color: var(--text-color);
|
|
opacity: 0.8;
|
|
margin-bottom: 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.blog-post-content {
|
|
line-height: 1.8;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.blog-post-content p {
|
|
margin-bottom: 1.5rem;
|
|
font-size: 1.05rem;
|
|
}
|
|
|
|
.blog-post-content ul,
|
|
.blog-post-content ol {
|
|
margin-left: 2rem;
|
|
margin-bottom: 1.5rem;
|
|
padding-left: 0.5rem;
|
|
}
|
|
|
|
.blog-post-content li {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.blog-post-content h1,
|
|
.blog-post-content h2,
|
|
.blog-post-content h3,
|
|
.blog-post-content h4 {
|
|
color: var(--text-color);
|
|
margin-top: 2rem;
|
|
margin-bottom: 1rem;
|
|
position: relative;
|
|
}
|
|
|
|
.blog-post-content h2::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -5px;
|
|
left: 0;
|
|
width: 60px;
|
|
height: 2px;
|
|
background: var(--accent-color);
|
|
box-shadow: 0 0 10px var(--accent-glow);
|
|
}
|
|
|
|
.blog-post-image {
|
|
width: 100%;
|
|
margin-bottom: 2rem;
|
|
border-radius: 15px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--border-color);
|
|
box-shadow: 0 4px 15px var(--accent-glow);
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
.blog-post-image:hover {
|
|
transform: scale(1.02);
|
|
box-shadow: 0 6px 20px var(--accent-glow);
|
|
}
|
|
|
|
.blog-post-image img {
|
|
width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
.blog-post-tags {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.blog-pagination {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 1rem;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.pagination-link {
|
|
padding: 0.5rem 1rem;
|
|
background-color: var(--section-bg-1-transparent);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
text-decoration: none;
|
|
color: var(--text-color);
|
|
transition: all 0.3s ease;
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.pagination-link:hover {
|
|
background-color: var(--section-bg-2-transparent);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px var(--accent-glow);
|
|
}
|
|
|
|
.pagination-link.active {
|
|
background-color: var(--accent-color);
|
|
color: white;
|
|
border-color: var(--accent-color);
|
|
box-shadow: 0 0 15px var(--accent-glow);
|
|
}
|
|
|
|
/* Add scrollbar styling for better visibility */
|
|
.blog-container::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
.blog-container::-webkit-scrollbar-track {
|
|
background: var(--section-bg-1-transparent);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.blog-container::-webkit-scrollbar-thumb {
|
|
background: var(--accent-color);
|
|
border: 3px solid var(--bg-color);
|
|
}
|
|
|
|
.blog-container::-webkit-scrollbar-thumb:hover {
|
|
background: var(--text-color);
|
|
}
|
|
|
|
/* Ensure content is visible on all browsers */
|
|
@supports (scrollbar-width: thin) {
|
|
.blog-container {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--header-footer-bg) var(--section-bg-1-transparent);
|
|
}
|
|
}
|
|
|