forked from React-Group/interstellar_ai
76 lines
No EOL
1.3 KiB
CSS
76 lines
No EOL
1.3 KiB
CSS
/* responsive.css */
|
|
|
|
/* Responsive behavior - applies only on smaller screens */
|
|
@media (max-width: 1200px) {
|
|
|
|
/* Left panel as an overlay */
|
|
.left-panel {
|
|
margin: 0 auto;
|
|
min-width: 100vw;
|
|
max-width: 100vw;
|
|
padding: 1em;
|
|
}
|
|
|
|
.left-panel.hidden {
|
|
width: 0;
|
|
/* Set width to 0 when hidden */
|
|
visibility: hidden;
|
|
/* Fully hide the panel */
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
header {
|
|
height: 125px;
|
|
}
|
|
|
|
header li {
|
|
flex-direction: column;
|
|
display: block;
|
|
padding: 2px;
|
|
}
|
|
|
|
body {
|
|
margin-top: 100px;
|
|
}
|
|
|
|
.conversation-container.expanded {
|
|
|
|
width: 0;
|
|
/* Set width to 0 when hidden */
|
|
visibility: hidden;
|
|
/* Fully hide the panel */
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.conversation-container.collapsed {
|
|
margin: 0 auto;
|
|
min-width: 100vw;
|
|
max-width: 100vw;
|
|
padding: 1em;
|
|
margin-left: 0;
|
|
|
|
}
|
|
}
|
|
|
|
/* Responsive design adjustments */
|
|
@media (max-width: 768px) {
|
|
.title {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.subsection-title {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.paragraph {
|
|
font-size: 0.9rem;
|
|
}
|
|
} |