54 lines
1.7 KiB
CSS
54 lines
1.7 KiB
CSS
/* custom.css */
|
|
|
|
/* Add breakpoints for responsive design */
|
|
@media screen and (min-width: 1200px) {
|
|
/* Adjust layout for large screens */
|
|
div.document {
|
|
width: 90%; /* Adjust width for large screens */
|
|
margin: 30px auto; /* Center the document */
|
|
display: grid; /* Use grid layout */
|
|
grid-template-columns: 1fr 3fr; /* Sidebar takes 1/4, main content takes 3/4 of available space */
|
|
grid-template-areas:
|
|
"sidebar main"; /* Define grid areas */
|
|
}
|
|
|
|
div.sphinxsidebar {
|
|
/* Add some content or set a min-width to ensure it occupies the grid area */
|
|
width: 100%; /* Example min-width */
|
|
grid-area: sidebar; /* Assign to sidebar grid area */
|
|
padding: 0 20px; /* Add padding to maintain spacing */
|
|
margin-top: 0;
|
|
margin-right: 20px;
|
|
margin-bottom: 0;
|
|
margin-left: 0; /* Adjust margins to fit within the layout */
|
|
}
|
|
|
|
div.bodywrapper {
|
|
/* Ensure it occupies the grid area */
|
|
width: 100%;
|
|
grid-area: main; /* Assign to main grid area */
|
|
padding: 0 20px; /* Add padding to maintain spacing */
|
|
margin-top: 0;
|
|
margin-right: 0;
|
|
margin-bottom: 0;
|
|
margin-left: 20px; /* Adjust margins to fit within the layout */
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 767px) {
|
|
/* Adjust layout for mobile phones */
|
|
body {
|
|
padding: 10px; /* Add padding to body for better spacing */
|
|
}
|
|
|
|
div.document {
|
|
width: 100%; /* Set width to full for mobile phones */
|
|
margin: 10px auto; /* Center the document */
|
|
display: block; /* Revert to block layout */
|
|
}
|
|
|
|
div.sphinxsidebar {
|
|
display: none; /* Hide sidebar on mobile phones */
|
|
}
|
|
}
|