zydronium/neocities
1
0
Fork 0
mirror of https://github.com/neocities/neocities.git synced 2025-04-24 17:22:35 +02:00
Code Issues Projects Releases Packages Wiki Activity

fighting the insanity that is css

Browse source
This commit is contained in:
Kyle Drake 2024-03-27 18:56:40 -05:00
parent e732c3ad8b
commit efd61fb885
2 changed files with 119 additions and 127 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

216
sass/_project-sass/_project-Main.scss
View file

@ -2147,15 +2147,6 @@ a.tag:hover {
.row.editor { .row.editor {
display: flex; 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 { .header-Outro.with-columns.press .col {
@ -2279,121 +2270,124 @@ pre, code {
.left-col {
padding: 1rem;
.chat-container { overflow-y: scroll;
display: flex; height: 90vh;
flex-direction: column;
height: calc(100vh - 60px); /* Adjust the height as needed */
color: #e0e0e0;
border-left: 1px solid #373737;
font-family: Arial, sans-serif;
} }
.chat-box { .right-col {
flex: 1; padding: 1rem;
overflow-y: auto; position: relative;
padding: 10px; }
background-color: #1d1f21;
.chat-container {
border-left: 1px solid #373737;
font-family: Arial, sans-serif;
font-weight: 300; font-weight: 300;
font-size: 13.5px; font-size: 13.5px;
line-height: 1.5em; line-height: 1.5em;
}
.chat-box p { .chat-box {
font-weight: 300; overflow-y: scroll;
font-size: 13.5px; height: calc(90vh - 60px);
word-break: break-word; padding: 10px;
} background-color: #1d1f21;
font-weight: 300;
.chat-box ul, font-size: 13.5px;
.chat-box ol { line-height: 1.5em;
list-style: square;
} p {
font-weight: 300;
.chat-box li { font-size: 13.5px;
font-weight: 300; word-break: break-word;
font-size: 13.5px; }
}
ul, ol {
.message { list-style: square;
margin-bottom: 12px; }
padding: 8px;
border-radius: 4px; li {
background-color: #333; font-weight: 300;
color: #fff; font-size: 13.5px;
} }
.bot-message { .message {
text-align: left; margin-bottom: 12px;
} padding: 8px;
border-radius: 4px;
.user-message { background-color: #333;
text-align: left; color: #fff;
background-color: #5e95a1; }
}
.bot-message {
.chat-box div code { text-align: left;
display: inline; }
padding: 2px;
} .user-message {
text-align: left;
.chat-box div pre { background-color: #5e95a1;
display: block; }
width: 100%;
} div code {
display: inline;
.chat-box div pre code { padding: 2px;
display: block; }
}
div pre {
.chat-box div code { display: block;
border-left: 0px; width: 100%;
border: 0px; }
word-wrap: break-word;
white-space: pre-wrap; div code {
} border-left: 0px;
border: 0px;
.copy-button { word-wrap: break-word;
position: absolute; white-space: pre-wrap;
top: 10px; }
right: 10px;
background-color: #acd473; div pre code {
padding: 5px 10px; display: block;
cursor: pointer; }
border-radius: 4px;
} .copy-button {
position: absolute;
.copy-button:hover { top: 10px;
background-color: #45a049; right: 10px;
} background-color: #acd473;
padding: 5px 10px;
#chat-form { cursor: pointer;
padding: 10px; border-radius: 4px;
background-color: #252525; }
margin-bottom: 25px;
.copy-button:hover {
input[type="text"] { background-color: #45a049;
margin-right: 10px; }
margin-bottom: 7px;
background-color: #333;
border: 1px solid #777;
color: #fff;
width: calc(100% - 90px);
} }
button { #chat-form {
margin-bottom: 5px; 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 { .resize-handle {
position: absolute; position: absolute;
left: -5px; /* Adjust based on handle width to center it on the border */ left: -5px; /* Adjust based on handle width to center it on the border */

30
views/site_files/text_editor.erb
View file

@ -112,24 +112,22 @@
<div class="col left-col" style="width: 66%;"> <div class="col left-col" style="width: 66%;">
<div id="editor"><h3>Loading...</h3></div> <div id="editor"><h3>Loading...</h3></div>
</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="resize-handle"></div>
<div class="chat-container"> <div id="chat-box" class="chat-box">
<div id="chat-box" class="chat-box"> <div class="bot-message message">
<div class="bot-message message"> <img src="/img/plaincat.svg" style="width: 30px; margin-bottom: 10px;">
<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 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>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>
<p>How can I help you today?</p>
</div>
</div> </div>
<div id="chat-form"> </div>
<form> <div id="chat-form">
<input name="csrf_token" value="<%= csrf_token %>" type="hidden"> <form>
<input type="text" id="chat-input" placeholder="Ask a coding question..." value="give me a hello world html file" autocomplete="off"> <input name="csrf_token" value="<%= csrf_token %>" type="hidden">
<button type="submit" class="btn-Action">Send</button> <input type="text" id="chat-input" placeholder="Ask a coding question..." value="give me a hello world html file" autocomplete="off">
</form> <button type="submit" class="btn-Action">Send</button>
</div> </form>
</div> </div>
</div> </div>
</div> </div>