forked from React-Group/interstellar_ai
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:
commit
a143cea88d
4 changed files with 37 additions and 1 deletions
|
@ -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 {
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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
34
app/styles/responsive.css
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in a new issue