YasinOnm08/interstellar_ai
0
0
Fork 0
forked from React-Group/interstellar_ai
Code Pull requests Activity

Tried to make the website responsive

Browse source
This commit is contained in:
Sage The DM 2024-09-18 12:52:36 +02:00
parent 284e70b841
commit 3c57aa8ece
4 changed files with 37 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

1
app/styles/header.css
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 {

2
app/styles/history.css
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 {

1
app/styles/master.css
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;
}
}