/*---------------------------------------------- * Table of Contents: * 1. Global Reset & Base Styles * 2. Layout Components *    - Body *    - Left Sidebar *    - Header *    - Navigation *    - Content Wrapper * 3. Blog Components *    - Blog Container *    - Blog Posts *    - Right Sidebar * 4. UI Components *    - Tag Cloud *    - Load More Button *    - Pagination * 5. Footer * 6. Third-party Integration * 7. Media Queries * 8. Post Metadata *----------------------------------------------*/ /*---------------------------------------------- * 1. Global Reset & Base Styles *----------------------------------------------*/ * {    margin: 0;    padding: 0;    box-sizing: border-box;} /*---------------------------------------------- * 2. Layout Components *----------------------------------------------*/ /* Base body structure */body {    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;    background-color: #fff;    color: #333;    line-height: 1.6;    display: flex;    flex-direction: column;    min-height: 100vh;} /* Fixed left sidebar decoration */body::before {    content: "";    position: fixed;    top: 0;    left: 0;    width: 40px;    height: 100%;    background-color: #e0e0e0;} /* Header styling with shadow effect */header {    text-align: left;    background-color: #f9f9f9;    padding: 20px 50px;    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);} header h1 {    font-size: 32px;    color: #333;    font-family: 'Segoe UI', serif;    margin-bottom: 5px;} header p {    font-size: 14px;    color: #666;    font-family: 'Segoe UI', sans-serif;    line-height: 1.4;} /* Navigation bar styling */.navbar {    background-color: #fff;    padding-left: 50px;    padding-top: 10px;    padding-bottom: 10px;    border-bottom: 1px solid #e0e0e0;    margin-top: 10px;} .navbar ul {    list-style-type: none;    display: flex;    gap: 20px;    padding: 10px 0;} .navbar ul li {    margin-right: 15px;} .navbar ul li a {    color: #333;    font-size: 16px;    text-decoration: none;    font-weight: 400;    transition: color 0.3s ease;} .navbar ul li a:hover,.navbar ul li a:focus,.navbar ul li a:active {    color: #555;} /* Main content wrapper */.content-wrapper {    position: relative;    display: flex;    flex-direction: column;    margin: 30px auto;    max-width: 900px;    background-color: #f5f5f5;    border-radius: 8px;    padding: 20px;    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);    margin-right: 950px;    flex: 1;} /*---------------------------------------------- * 3. Blog Components *----------------------------------------------*/ /* Blog container layout */.blog-container {    display: flex;    justify-content: flex-start;    align-items: flex-start;    gap: 20px;} /* Individual blog post styling */.blog-post {    flex: 3;    max-width: 70%;    background-color: #fff;    padding: 20px;    margin-bottom: 30px;    border-radius: 8px;    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);} .blog-post h2 {    font-size: 22px;    color: #333;    margin-bottom: 10px;    font-family: 'Segoe UI', sans-serif;    line-height: 1.3;    font-weight: 700;} .blog-post p {    font-size: 16px;    color: #555;    margin-bottom: 15px;    line-height: 1.6;} /* Continue reading link styling */.continue-reading {    color: #333;    text-decoration: none;    font-weight: bold;    transition: color 0.3s ease;} .continue-reading:hover {    color: #555;    text-decoration: underline;} /* Right sidebar styling */.sidebar-right {    position: absolute;    top: 220px;    width: 300px;    padding: 20px;    background-color: #f9f9f9;    border-radius: 8px;    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);    margin-left: 1000px;    margin-bottom: 250px;} .sidebar-right section {    margin-bottom: 20px;    padding: 15px;} .sidebar-right h3 {    font-size: 16px;    color: #444;    margin-bottom: 10px;    font-weight: 700;} .sidebar-right ul {    list-style: none;    padding-left: 0;} .sidebar-right ul li {    margin-bottom: 8px;    font-size: 13px;    line-height: 20px;    color: #878789;} .sidebar-right ul li::before {    content: "→";    margin-right: 5px;    color: #878789;} .sidebar-right a {    color: #878789;    text-decoration: none;    transition: color 0.3s ease;} .sidebar-right a:hover {    color: #666;    text-decoration: underline;} /*---------------------------------------------- * 4. UI Components *----------------------------------------------*/ /* Tag cloud styling */.categories .tag-cloud {    display: flex;    flex-wrap: wrap;    gap: 10px;} .tag {    display: inline-block;    padding: 5px 10px;    background-color: #e0e0e0;    color: #555;    border-radius: 4px;    font-size: 14px;    text-decoration: none;    transition: background-color 0.3s ease;} .tag:hover {    background-color: #d0d0d0;    text-decoration: underline;} /* Load more button container */.load-more-container {    text-align: center;    margin: 40px 0 20px;    padding-left: 10px;} /* Load more button styling */#load-more {    background-color: #e0e0e0;    color: #333;    padding: 10px 20px;    border: none;    border-radius: 5px;    cursor: pointer;    font-size: 16px;    font-family: 'Segoe UI', sans-serif;    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);    transition: background-color 0.3s ease;} #load-more:hover {    background-color: #d0d0d0;} /* Pagination styling */.pagination-container {    display: flex;    justify-content: center;    align-items: center;    margin-top: 20px;} .pagination-btn {    background-color: #e0e0e0;    color: #333;    border: none;    padding: 10px 20px;    font-size: 16px;    cursor: pointer;    border-radius: 5px;    margin: 0 10px;    transition: background-color 0.3s ease;} .pagination-btn:hover {    background-color: #d0d0d0;} .prev-btn:disabled, .next-btn:disabled {    background-color: #ccc;    cursor: not-allowed;} .page-number {    font-size: 18px;    font-weight: bold;    color: #333;} /*---------------------------------------------- * 5. Footer *----------------------------------------------*/footer {    position: relative;    z-index: 10;    text-align: center;    padding: 20px;    background-color: #f5f5f5;    color: #666;    border-top: 1px solid #e0e0e0;    margin-top: 150px;} /*---------------------------------------------- * 6. Third-party Integration *----------------------------------------------*//* MathJax specific styling */mjx-container {    font-size: 18px !important;    color: #333;} /*---------------------------------------------- * 7. Media Queries *----------------------------------------------*//* Large screens */@media screen and (max-width: 1200px) {    .content-wrapper {        margin-right: 0;        max-width: 95%;    }        .sidebar-right {        position: relative;        margin: 20px auto;        width: 95%;        max-width: 300px;    }} /* Medium screens */@media screen and (max-width: 768px) {    .navbar ul {        flex-direction: column;        gap: 10px;    }        .blog-post {        max-width: 100%;    }        header {        padding: 15px 30px;    }        body::before {        width: 20px;    }     .pagination-container {        flex-direction: column;    }     .pagination-btn {        margin: 10px 0;    }} /*---------------------------------------------- * 8. Post Metadata *----------------------------------------------*//* Post metadata and tags styling */.post-meta p {    font-size: 14px;    color: #666;    line-height: 1.5;    margin-bottom: 10px;    font-family: 'Segoe UI', sans-serif;} .post-meta a {    color: #555;    text-decoration: none;    font-size: 14px;    font-weight: 500;    padding: 2px 8px;    background-color: #e0e0e0;    border-radius: 4px;    margin-right: 8px;    margin-bottom: 6px;    display: inline-block;    transition: background-color 0.3s ease, color 0.3s ease;} .post-meta a:hover {    background-color: #d0d0d0;    color: #333;    text-decoration: underline;}    /*---------------------------------------------- * 9. Dark Mode Styles *----------------------------------------------*/  @media (prefers-color-scheme: dark) {    /* Global Reset & Base Styles */    body {        background-color: #121212; /* Dark background */        color: #e0e0e0; /* Light text */    }     /* Left Sidebar */    body::before {        content: "";        position: fixed;        top: 0;        left: 0;        width: 40px;        height: 100%;        background-color: #444; /* Dark color for left sidebar */    }     /* Header */    header {        background-color: #1e1e1e; /* Dark header background */        color: #e0e0e0; /* Light text */        padding: 20px 50px;        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);    }     header h1 {        color: #ffffff; /* Lighter text for header */    }     header p {        color: #bbbbbb; /* Lighter subline text */    }     /* Navbar */    .navbar {        background-color: #1c1c1c; /* Dark navbar */        padding-left: 50px;        padding-top: 10px;        padding-bottom: 10px;        border-bottom: 1px solid #444; /* Dark border */        margin-top: 10px;    }     .navbar ul li a {        color: #e0e0e0; /* Light text for links */    }     .navbar ul li a:hover,    .navbar ul li a:focus,    .navbar ul li a:active {        color: #bbbbbb; /* Light hover color */    }     /* Content Wrapper */    .content-wrapper {        background-color: #181818; /* Dark content wrapper */        color: #e0e0e0; /* Light text */        margin-right: 950px; /* Added same margin-right as light mode */        box-shadow: 0 2px 6px rgba(255, 255, 255, 0.1); /* Light shadow */        padding: 20px;        flex: 1;    }     /* Blog Post */    .blog-post {        background-color: #2b2b2b; /* Dark background for posts */        color: #e0e0e0; /* Light text */

Lines 1–500 of 607. Load more