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

Merge pull request 'Css tweaks' (#21) from sageTheDm/interstellar_ai:main into main

Browse source 
Reviewed-on: https://interstellardevelopment.org/code/code/React-Group/interstellar_ai/pulls/21
This commit is contained in:
Patrick 2024-09-19 15:01:11 +02:00
commit fe6491f112
2 changed files with 59 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/styles/output.css
View file

@ -62,6 +62,7 @@
background-color: var(--button-background-color); background-color: var(--button-background-color);
border-radius: 50%; border-radius: 50%;
padding: 10px; padding: 10px;
padding-top: 0;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
} }

124
app/styles/responsive.css
View file

@ -1,76 +1,68 @@
/* responsive.css */
/* Responsive behavior - applies only on smaller screens */ /* Responsive behavior - applies only on smaller screens */
@media (max-width: 1200px) { @media (max-width: 1200px) {
header li{
/* Left panel as an overlay */ display: block;
.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 { .container {
font-size: 1.25rem; display: flex;
justify-content: center; /* Centers horizontally */
width: 90vw;
margin-top: 10vh;
} }
.subsection-title { .left-panel {
font-size: 1rem; display: none; /* Initially hidden */
min-width: 90%; /* Takes full width when shown */
margin: 0;
} }
.paragraph {
font-size: 0.9rem; .conversation-container {
width: 90%;
}
.left-panel.visible {
display: block;
}
.conversation-container.collapsed {
display: none;
}
.conversation-container.expanded {
width: 100%;
}
.grid {
grid-template-columns: 1fr; /* One item per line */
}
.model-box {
max-width: none; /* Remove max-width constraint */
margin: 0 auto; /* Center each model-box */
}
.input {
grid-column: 1 / -1;
flex-direction: row;
gap: 10px;
padding: 0.5em;
margin: 0 auto;
align-items: center;
width: 90%;
}
.input input {
font-size: 1em; /* Adjust font size */
max-width: 65%;
margin-right: 0;
}
.input button {
height: 40px; /* Adjust button height */
width: 40px; /* Adjust button width */
font-size: 1.2em; /* Adjust button font size */
margin: auto;
} }
} }