Merge pull request 'Tried to make the website responsive' (#3) from sageTheDm/interstellar_ai:main into main

Reviewed-on: https://interstellardevelopment.org/code/code/React-Group/interstellar_ai/pulls/3
This commit is contained in:
Patrick 2024-09-18 14:54:05 +02:00
commit a143cea88d
4 changed files with 37 additions and 1 deletions

View file

@ -10,6 +10,7 @@ header {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
z-index: 1000; z-index: 1000;
font-family: var(--font-family); font-family: var(--font-family);
height: 5vh;
} }
header li { header li {

View file

@ -5,8 +5,8 @@
overflow: hidden; overflow: hidden;
background-color: var(--history-background-color); background-color: var(--history-background-color);
padding: 1em; padding: 1em;
border-radius: 2em;
margin: 1em; margin: 1em;
border-radius: 2em;
} }
.history { .history {

View file

@ -11,3 +11,4 @@
@import './input.css'; @import './input.css';
@import './faq.css'; @import './faq.css';
@import './scrollbar.css'; @import './scrollbar.css';
@import './responsive.css';

34
app/styles/responsive.css Normal file
View file

@ -0,0 +1,34 @@
/* 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;
}
}