/* Global Reset */* { margin: 0; padding: 0; box-sizing: border-box;} /* Body Styles */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;} /* Left Side Bar */body::before { content: ""; position: fixed; top: 0; left: 0; width: 40px; height: 100%; background-color: #e0e0e0;} /* Header Section */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 */.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;} /* 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;} /* Blog Container and Posts */.blog-container { display: flex; justify-content: flex-start; /* Aligns content to the left */ align-items: flex-start; gap: 20px;} .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 { color: #333; text-decoration: none; font-weight: bold; transition: color 0.3s ease;} .continue-reading:hover { color: #555; text-decoration: underline;} /* Right Sidebar */.sidebar-right { position: absolute; top: 220px; /* Decrease this value to move the element up */ 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;} /* Tag Cloud */.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 */.load-more-container { text-align: center; margin: 40px 0 20px; padding-left: 10px;} #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;} footer { position: relative; /* Or 'static' if not fixed */ z-index: 10; /* For stacking context */ text-align: center; padding: 20px; background-color: #f5f5f5; color: #666; border-top: 1px solid #e0e0e0; margin-top: 150px; /* Footer will auto-adjust */} /* MathJax Integration */mjx-container { font-size: 18px !important; color: #333;} /* Media Queries for Responsiveness */@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; }} @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; }}
/* Global Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body Styles */
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;
}
/* Left Side Bar */
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 40px;
height: 100%;
background-color: #e0e0e0;
}
/* Header Section */
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 */
.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;
}
/* 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;
}
/* Blog Container and Posts */
.blog-container {
display: flex;
justify-content: flex-start; /* Aligns content to the left */
align-items: flex-start;
gap: 20px;
}
.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 {
color: #333;
text-decoration: none;
font-weight: bold;
transition: color 0.3s ease;
}
.continue-reading:hover {
color: #555;
text-decoration: underline;
}
/* Right Sidebar */
.sidebar-right {
position: absolute;
top: 220px; /* Decrease this value to move the element up */
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;
}
/* Tag Cloud */
.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 */
.load-more-container {
text-align: center;
margin: 40px 0 20px;
padding-left: 10px;
}
#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;
}
footer {
position: relative; /* Or 'static' if not fixed */
z-index: 10; /* For stacking context */
text-align: center;
padding: 20px;
background-color: #f5f5f5;
color: #666;
border-top: 1px solid #e0e0e0;
margin-top: 150px; /* Footer will auto-adjust */
}
/* MathJax Integration */
mjx-container {
font-size: 18px !important;
color: #333;
}
/* Media Queries for Responsiveness */
@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;
}
}
@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;
}
}