mirror of
https://github.com/neocities/neocities.git
synced 2025-04-24 17:22:35 +02:00
fighting the insanity that is css
This commit is contained in:
Kyle Drake
parent
e732c3ad8b
commit
efd61fb885
2 changed files with 119 additions and 127 deletions
|
|
@ -2147,15 +2147,6 @@ a.tag:hover {
|
|||
|
||||
.row.editor {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
.col {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.header-Outro.with-columns.press .col {
|
||||
|
|
@ -2279,121 +2270,124 @@ pre, code {
|
|||
|
||||
|
||||
|
||||
|
||||
|
||||
.chat-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - 60px); /* Adjust the height as needed */
|
||||
color: #e0e0e0;
|
||||
border-left: 1px solid #373737;
|
||||
font-family: Arial, sans-serif;
|
||||
.left-col {
|
||||
padding: 1rem;
|
||||
overflow-y: scroll;
|
||||
height: 90vh;
|
||||
}
|
||||
|
||||
.chat-box {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 10px;
|
||||
background-color: #1d1f21;
|
||||
.right-col {
|
||||
padding: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.chat-container {
|
||||
border-left: 1px solid #373737;
|
||||
font-family: Arial, sans-serif;
|
||||
font-weight: 300;
|
||||
font-size: 13.5px;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.chat-box p {
|
||||
font-weight: 300;
|
||||
font-size: 13.5px;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.chat-box ul,
|
||||
.chat-box ol {
|
||||
list-style: square;
|
||||
}
|
||||
|
||||
.chat-box li {
|
||||
font-weight: 300;
|
||||
font-size: 13.5px;
|
||||
}
|
||||
|
||||
.message {
|
||||
margin-bottom: 12px;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bot-message {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.user-message {
|
||||
text-align: left;
|
||||
background-color: #5e95a1;
|
||||
}
|
||||
|
||||
.chat-box div code {
|
||||
display: inline;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.chat-box div pre {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chat-box div pre code {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.chat-box div code {
|
||||
border-left: 0px;
|
||||
border: 0px;
|
||||
word-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.copy-button {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background-color: #acd473;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.copy-button:hover {
|
||||
background-color: #45a049;
|
||||
}
|
||||
|
||||
#chat-form {
|
||||
padding: 10px;
|
||||
background-color: #252525;
|
||||
margin-bottom: 25px;
|
||||
|
||||
input[type="text"] {
|
||||
margin-right: 10px;
|
||||
margin-bottom: 7px;
|
||||
background-color: #333;
|
||||
border: 1px solid #777;
|
||||
color: #fff;
|
||||
width: calc(100% - 90px);
|
||||
.chat-box {
|
||||
overflow-y: scroll;
|
||||
height: calc(90vh - 60px);
|
||||
padding: 10px;
|
||||
background-color: #1d1f21;
|
||||
font-weight: 300;
|
||||
font-size: 13.5px;
|
||||
line-height: 1.5em;
|
||||
|
||||
p {
|
||||
font-weight: 300;
|
||||
font-size: 13.5px;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
list-style: square;
|
||||
}
|
||||
|
||||
li {
|
||||
font-weight: 300;
|
||||
font-size: 13.5px;
|
||||
}
|
||||
|
||||
.message {
|
||||
margin-bottom: 12px;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bot-message {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.user-message {
|
||||
text-align: left;
|
||||
background-color: #5e95a1;
|
||||
}
|
||||
|
||||
div code {
|
||||
display: inline;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
div pre {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div code {
|
||||
border-left: 0px;
|
||||
border: 0px;
|
||||
word-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
div pre code {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.copy-button {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background-color: #acd473;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.copy-button:hover {
|
||||
background-color: #45a049;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
button {
|
||||
margin-bottom: 5px;
|
||||
#chat-form {
|
||||
padding: 10px;
|
||||
background-color: #252525;
|
||||
margin-bottom: 25px;
|
||||
|
||||
input[type="text"] {
|
||||
margin-right: 10px;
|
||||
margin-bottom: 7px;
|
||||
background-color: #333;
|
||||
border: 1px solid #777;
|
||||
color: #fff;
|
||||
width: calc(100% - 90px);
|
||||
}
|
||||
|
||||
button {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.resize-handle {
|
||||
position: absolute;
|
||||
left: -5px; /* Adjust based on handle width to center it on the border */
|
||||
|
|
|
|||
|
|
@ -112,24 +112,22 @@
|
|||
<div class="col left-col" style="width: 66%;">
|
||||
<div id="editor"><h3>Loading...</h3></div>
|
||||
</div>
|
||||
<div class="col right-col" style="width: 33%;">
|
||||
<div class="col right-col chat-container" style="width: 33%;">
|
||||
<div class="resize-handle"></div>
|
||||
<div class="chat-container">
|
||||
<div id="chat-box" class="chat-box">
|
||||
<div class="bot-message message">
|
||||
<img src="/img/plaincat.svg" style="width: 30px; margin-bottom: 10px;">
|
||||
<p>I'm Penelope, your coding assistant! I'm here to answer any questions you have about coding web sites.</p>
|
||||
<p>I'm good at coding but can be wrong on general knowledge, <strong>so be sure to verify facts I give you</strong>.</p>
|
||||
<p>How can I help you today?</p>
|
||||
</div>
|
||||
<div id="chat-box" class="chat-box">
|
||||
<div class="bot-message message">
|
||||
<img src="/img/plaincat.svg" style="width: 30px; margin-bottom: 10px;">
|
||||
<p>I'm Penelope, your coding assistant! I'm here to answer any questions you have about coding web sites.</p>
|
||||
<p>I'm good at coding but can be wrong on general knowledge, <strong>so be sure to verify facts I give you</strong>.</p>
|
||||
<p>How can I help you today?</p>
|
||||
</div>
|
||||
<div id="chat-form">
|
||||
<form>
|
||||
<input name="csrf_token" value="<%= csrf_token %>" type="hidden">
|
||||
<input type="text" id="chat-input" placeholder="Ask a coding question..." value="give me a hello world html file" autocomplete="off">
|
||||
<button type="submit" class="btn-Action">Send</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div id="chat-form">
|
||||
<form>
|
||||
<input name="csrf_token" value="<%= csrf_token %>" type="hidden">
|
||||
<input type="text" id="chat-input" placeholder="Ask a coding question..." value="give me a hello world html file" autocomplete="off">
|
||||
<button type="submit" class="btn-Action">Send</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue