add mono css framework, add some boiler plate, get started on responsive design fixes

This commit is contained in:
2025-07-26 04:48:30 -04:00
parent 378c8e09fb
commit bde72d0e93
25 changed files with 2077 additions and 32 deletions

59
_site/css/responsive.css Normal file
View File

@@ -0,0 +1,59 @@
/* responsive.css - Simple flexbox layout for the Mono theme */
/* Base flexbox layout */
body.mono-all {
display: flex;
flex-direction: row;
min-height: 100vh;
margin: 0;
padding: 0;
overflow-x: hidden;
}
/* Main content area takes up remaining space */
main {
flex: 1;
padding: 2rem;
overflow-y: auto;
}
/* Sidebar with fixed width */
aside {
width: 250px;
min-width: 250px;
padding: 2rem 1rem;
border-right: 2px solid var(--mono-main);
height: 100vh;
overflow-y: auto;
position: sticky;
top: 0;
}
/* Make footer stick to bottom of main content */
footer {
margin-top: auto;
padding-top: 2rem;
}
/* Mobile layout adjustments */
@media (max-width: 768px) {
body.mono-all {
flex-direction: column;
}
aside {
display: none; /* Hide sidebar on mobile */
}
main {
width: 100%;
padding: 1rem;
}
}
/* Simple print styles */
@media print {
aside {
display: none;
}
}