* { margin: 0; padding: 0; box-sizing: border-box;} .meta-separator { height: 20px; /* Adjust this value for desired spacing */ width: 100%; /* Make it full width */} body { font-family: Arial, sans-serif; background-color: white; color: #333; line-height: 1.6;} /* Blue border on the left */body::before { content: ""; position: fixed; top: 0; left: 0; width: 40px; height: 100%; background-color: #4e7a91;} header { display: flex; background-color: #f0f0f0;} /* Sidebar Section */.sidebar-left { width: 40px; background-color: #4e7a91; height: 100vh; /* Make sidebar span the entire height */ position: fixed;} /* Top Bar (Header Content) */.header-content { margin-left: 40px; /* Offset by the sidebar width */ display: flex; flex-direction: column; justify-content: center; padding-left: 10px; background-color: #f0f0f0; width: 100%; height: 60px; /* Set height for the top bar */ padding-bottom: 10px; padding-top: 50px;} header h1 { font-size: 35px; color: #333; font-family: "Georgia", "Times New Roman", Times, Serif; font-weight: 400; line-height: 39px;} .navbar { margin-top: 10px;} .navbar ul { list-style-type: none; display: flex; padding: 10px 0;} .navbar ul li { margin-right: 15px;} .navbar ul li a { color: #4e7a91; font-weight: 400; font-style: normal; font-size: 17px; line-height: 0px; text-decoration: none;} .navbar ul li a:hover { color: red;} /* Content Wrapper */.content-wrapper { display: flex; flex-direction: column; margin: 20px auto; background-color: #fff; border-radius: 8px; text-align: left; margin-left: 70px; /* Shift the blog content to the right of the sidebar */ max-width: 900px; padding: 20px;} /* Blog Post Content */.blog-post { width: 100%; font-family: "Georgia", "Times New Roman", Times, Serif; font-size: 18px; line-height: 1.8; color: #333;} .blog-post h2 { font-size: 28px; color: #333; margin-bottom: 15px; font-family: "Georgia", "Times New Roman", Times, Serif; line-height: 1.5; font-weight: 700;} .post-meta { margin-bottom: 20px; /* Adds space below the metadata section */} .blog-post p { margin-bottom: 15px;} /* Footer */footer { display: flex; justify-content: center; align-items: center; text-align: center; padding: 20px; background-color: transparent; color: black; font-family: Arial, sans-serif; font-size: 14px; position: relative; bottom: 0; width: 100%;}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.meta-separator {
height: 20px; /* Adjust this value for desired spacing */
width: 100%; /* Make it full width */
}
body {
font-family: Arial, sans-serif;
background-color: white;
color: #333;
line-height: 1.6;
}
/* Blue border on the left */
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 40px;
height: 100%;
background-color: #4e7a91;
}
header {
display: flex;
background-color: #f0f0f0;
}
/* Sidebar Section */
.sidebar-left {
width: 40px;
background-color: #4e7a91;
height: 100vh; /* Make sidebar span the entire height */
position: fixed;
}
/* Top Bar (Header Content) */
.header-content {
margin-left: 40px; /* Offset by the sidebar width */
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 10px;
background-color: #f0f0f0;
width: 100%;
height: 60px; /* Set height for the top bar */
padding-bottom: 10px;
padding-top: 50px;
}
header h1 {
font-size: 35px;
color: #333;
font-family: "Georgia", "Times New Roman", Times, Serif;
font-weight: 400;
line-height: 39px;
}
.navbar {
margin-top: 10px;
}
.navbar ul {
list-style-type: none;
display: flex;
padding: 10px 0;
}
.navbar ul li {
margin-right: 15px;
}
.navbar ul li a {
color: #4e7a91;
font-weight: 400;
font-style: normal;
font-size: 17px;
line-height: 0px;
text-decoration: none;
}
.navbar ul li a:hover {
color: red;
}
/* Content Wrapper */
.content-wrapper {
display: flex;
flex-direction: column;
margin: 20px auto;
background-color: #fff;
border-radius: 8px;
text-align: left;
margin-left: 70px; /* Shift the blog content to the right of the sidebar */
max-width: 900px;
padding: 20px;
}
/* Blog Post Content */
.blog-post {
width: 100%;
font-family: "Georgia", "Times New Roman", Times, Serif;
font-size: 18px;
line-height: 1.8;
color: #333;
}
.blog-post h2 {
font-size: 28px;
color: #333;
margin-bottom: 15px;
font-family: "Georgia", "Times New Roman", Times, Serif;
line-height: 1.5;
font-weight: 700;
}
.post-meta {
margin-bottom: 20px; /* Adds space below the metadata section */
}
.blog-post p {
margin-bottom: 15px;
}
/* Footer */
footer {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 20px;
background-color: transparent;
color: black;
font-family: Arial, sans-serif;
font-size: 14px;
position: relative;
bottom: 0;
width: 100%;
}