UX: update styles and markup for share feature (#525)

This commit is contained in:
Kris 2024-03-12 18:25:33 -04:00 committed by GitHub
parent 25d283b527
commit 1c90ad81c2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 339 additions and 239 deletions

View File

@ -1,31 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<title><%= @shared_conversation.title %></title>
<meta property="og:title" content="<%= @shared_conversation.title %>">
<meta property="og:description" content="<%= @shared_conversation.formatted_excerpt %>">
<meta property="og:type" content="website">
<meta property="og:url" content="<%= request.original_url %>">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="<%= @shared_conversation.title %>">
<meta name="twitter:description" content="<%= @shared_conversation.formatted_excerpt %>">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="<%= ::UrlHelper.local_cdn_url("/plugins/discourse-ai/ai-share/share.css") %>">
<link rel="stylesheet" href="<%= ::UrlHelper.local_cdn_url("/plugins/discourse-ai/ai-share/highlight.min.css") %>">
<script>
window.hljs_initHighlighting = function() {
document.querySelectorAll('pre code').forEach((el) => {
hljs.highlightElement(el);
});
};
</script>
<script async src="<%= ::UrlHelper.local_cdn_url("/plugins/discourse-ai/ai-share/highlight.min.js") %>" async onload="window.hljs_initHighlighting()" ></script>
</head>
<body>
<div class="container">
<div class="header">
<head>
<title><%= @shared_conversation.title %></title>
<meta property="og:title" content="<%= @shared_conversation.title %>">
<meta property="og:description" content="<%= @shared_conversation.formatted_excerpt %>">
<meta property="og:type" content="website">
<meta property="og:url" content="<%= request.original_url %>">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="<%= @shared_conversation.title %>">
<meta name="twitter:description" content="<%= @shared_conversation.formatted_excerpt %>">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="<%= ::UrlHelper.local_cdn_url("/plugins/discourse-ai/ai-share/share.css") %>">
<link rel="stylesheet" href="<%= ::UrlHelper.local_cdn_url("/plugins/discourse-ai/ai-share/highlight.min.css") %>">
<script>
window.hljs_initHighlighting = function() {
document.querySelectorAll('pre code').forEach((el) => {
hljs.highlightElement(el);
});
};
</script>
<script async src="<%= ::UrlHelper.local_cdn_url("/plugins/discourse-ai/ai-share/highlight.min.js") %>" onload="window.hljs_initHighlighting()" ></script>
</head>
<body>
<header class="site-header">
<a href="https://discourse.org/ai" class="ai-logo">
<img src="<%= ::UrlHelper.local_cdn_url("/plugins/discourse-ai/ai-share/discourse_ai.png") %>" alt="AI Share" class="logo" width=193 height=61>
<svg xmlns="http://www.w3.org/2000/svg" class="logo" viewBox="0 0 289.09 72.93">
<path id="d-sparkles" fill="#f15d22" d="M280.75 16.89c-9.26 0-16.79-7.53-16.79-16.79 0-.05-.04-.1-.1-.1s-.1.04-.1.1c0 9.3-7.53 16.86-16.79 16.86-.05 0-.1.04-.1.1v.03c0 .05.04.1.1.1 9.26 0 16.79 7.5 16.79 16.72 0 .05.04.1.1.1s.1-.04.1-.1c0-9.26 7.53-16.79 16.79-16.79.05 0 .1-.04.1-.1v-.03c0-.05-.04-.1-.1-.1ZM289.04 33.73c-4.58 0-8.31-3.73-8.31-8.31 0-.03-.02-.05-.05-.05s-.05.02-.05.05c0 4.6-3.73 8.35-8.31 8.35-.03 0-.05.02-.05.05v.02s.02.05.05.05c4.58 0 8.31 3.71 8.31 8.27 0 .03.02.05.05.05s.05-.02.05-.05c0-4.58 3.73-8.31 8.31-8.31.03 0 .05-.02.05-.05v-.02s-.02-.05-.05-.05Z"/>
<path fill="#010101" d="M62.53 29.48c.9 0 1.68.33 2.33.98.65.66.97 1.45.97 2.38s-.32 1.7-.96 2.35c-.64.65-1.41.97-2.3.97s-1.7-.33-2.35-.99c-.65-.66-.97-1.46-.97-2.41s.32-1.68.96-2.32c.64-.64 1.41-.96 2.32-.96Zm-2.58 11.21h5.16v21.49h-5.16V40.69ZM82.38 44.09l-3.19 3.19c-1.3-1.28-2.47-1.93-3.53-1.93-.58 0-1.03.12-1.36.37-.33.25-.49.55-.49.92 0 .28.1.53.31.77.21.23.72.55 1.54.95l1.89.94c1.99.98 3.36 1.98 4.1 3 .74 1.02 1.12 2.22 1.12 3.59 0 1.83-.67 3.35-2.01 4.57-1.34 1.22-3.14 1.83-5.39 1.83-3 0-5.39-1.17-7.18-3.51l3.17-3.46c.6.71 1.31 1.28 2.13 1.71.81.43 1.53.65 2.16.65.68 0 1.23-.16 1.64-.49.42-.33.62-.71.62-1.13 0-.79-.75-1.57-2.25-2.32l-1.74-.87c-3.33-1.67-4.99-3.77-4.99-6.29 0-1.62.63-3.01 1.88-4.17 1.25-1.15 2.86-1.73 4.81-1.73 1.33 0 2.59.29 3.77.88 1.18.59 2.18 1.43 2.99 2.52ZM106.4 45.38l-4.29 2.36c-.81-.84-1.6-1.43-2.39-1.76-.79-.33-1.71-.49-2.77-.49-1.93 0-3.49.58-4.68 1.73-1.19 1.15-1.79 2.62-1.79 4.42s.57 3.18 1.72 4.28c1.15 1.11 2.65 1.66 4.52 1.66 2.31 0 4.1-.79 5.39-2.36l4.07 2.79c-2.2 2.87-5.32 4.3-9.33 4.3-3.61 0-6.45-1.07-8.49-3.21-2.05-2.14-3.07-4.65-3.07-7.52 0-1.99.5-3.82 1.49-5.5.99-1.67 2.38-2.99 4.17-3.95 1.78-.96 3.78-1.44 5.98-1.44 2.04 0 3.87.41 5.5 1.22 1.62.81 2.95 1.97 3.99 3.47ZM119.11 40.69c1.94 0 3.76.49 5.47 1.45 1.71.97 3.04 2.29 4 3.95.96 1.66 1.44 3.46 1.44 5.38s-.48 3.75-1.45 5.44c-.96 1.69-2.28 3.01-3.94 3.96-1.66.95-3.5 1.43-5.5 1.43-2.95 0-5.46-1.05-7.55-3.15-2.08-2.1-3.13-4.64-3.13-7.64 0-3.21 1.18-5.89 3.53-8.03 2.07-1.86 4.44-2.8 7.12-2.8Zm.08 4.86c-1.6 0-2.94.56-4 1.67-1.07 1.11-1.6 2.54-1.6 4.28s.53 3.24 1.58 4.35c1.05 1.11 2.39 1.66 4 1.66s2.96-.56 4.03-1.68c1.07-1.12 1.61-2.56 1.61-4.33s-.53-3.2-1.58-4.3c-1.05-1.1-2.4-1.65-4.04-1.65ZM133.14 41.22h5.22v9.9c0 1.93.13 3.27.4 4.02.27.75.69 1.33 1.28 1.75.59.42 1.31.62 2.17.62s1.59-.2 2.19-.61c.6-.41 1.04-1.01 1.34-1.8.21-.59.32-1.86.32-3.8V41.23h5.16v8.71c0 3.59-.28 6.05-.85 7.37-.69 1.61-1.71 2.85-3.06 3.71-1.35.86-3.06 1.29-5.14 1.29-2.25 0-4.08-.5-5.47-1.51-1.39-1.01-2.37-2.41-2.94-4.21-.4-1.25-.61-3.51-.61-6.8v-8.56ZM154.63 41.22h4.42v2.59c.48-1.02 1.11-1.79 1.91-2.32.79-.53 1.66-.79 2.61-.79.67 0 1.37.18 2.1.53l-1.61 4.44c-.6-.3-1.1-.45-1.49-.45-.79 0-1.46.49-2.01 1.47-.55.98-.82 2.91-.82 5.78l.02 1v8.31h-5.12V41.23ZM180.27 44.09l-3.19 3.19c-1.3-1.28-2.47-1.93-3.53-1.93-.58 0-1.03.12-1.36.37-.33.25-.49.55-.49.92 0 .28.1.53.31.77.21.23.72.55 1.54.95l1.89.94c1.99.98 3.36 1.98 4.1 3 .74 1.02 1.12 2.22 1.12 3.59 0 1.83-.67 3.35-2.01 4.57-1.34 1.22-3.14 1.83-5.39 1.83-3 0-5.39-1.17-7.18-3.51l3.17-3.46c.6.71 1.31 1.28 2.13 1.71.81.43 1.53.65 2.16.65.68 0 1.23-.16 1.64-.49.42-.33.62-.71.62-1.13 0-.79-.75-1.57-2.25-2.32l-1.74-.87c-3.32-1.67-4.99-3.77-4.99-6.29 0-1.62.63-3.01 1.88-4.17 1.25-1.15 2.86-1.73 4.81-1.73 1.33 0 2.59.29 3.77.88 1.18.59 2.18 1.43 2.99 2.52ZM204.77 52.99H188.2c.24 1.46.88 2.62 1.92 3.49 1.04.86 2.36 1.29 3.98 1.29 1.93 0 3.58-.67 4.97-2.02l4.35 2.04c-1.08 1.54-2.38 2.67-3.89 3.41-1.51.74-3.31 1.1-5.38 1.1-3.22 0-5.85-1.02-7.88-3.05-2.03-2.03-3.04-4.58-3.04-7.64s1.01-5.74 3.03-7.81c2.02-2.07 4.56-3.11 7.6-3.11 3.24 0 5.87 1.04 7.9 3.11 2.03 2.07 3.04 4.81 3.04 8.21l-.02.98Zm-5.16-4.06c-.34-1.15-1.01-2.08-2.02-2.8-1-.72-2.17-1.08-3.49-1.08-1.44 0-2.7.4-3.78 1.21-.68.5-1.31 1.39-1.89 2.66h11.18ZM27.63 17.64C12.63 17.64 0 29.8 0 44.8v28.13l27.62-.03c15 0 27.16-12.63 27.16-27.63S42.62 17.64 27.62 17.64Z"/>
<path fill="#fff9ae" d="M27.89 28.15c-9.3 0-16.84 7.54-16.84 16.84 0 2.91.74 5.64 2.03 8.02l-3.04 9.8 10.94-2.47c2.11.95 4.44 1.48 6.91 1.48 9.3 0 16.84-7.54 16.84-16.84s-7.54-16.84-16.84-16.84Z"/>
<path fill="#00aeef" d="M41.26 34.75c2.18 2.84 3.47 6.39 3.47 10.24 0 9.3-7.54 16.84-16.84 16.84-2.46 0-4.8-.53-6.91-1.48l-10.94 2.47 11.14-1.32c2 1.16 4.27 1.94 6.71 2.2 9.25.97 17.53-5.74 18.5-14.98.57-5.41-1.49-10.48-5.15-13.96Z"/>
<path fill="#00a94f" d="M38.15 31.64c2.46 2.59 4.12 5.99 4.52 9.82.97 9.25-5.74 17.53-14.98 18.5-2.45.26-4.83-.03-7.02-.75l-10.62 3.6 10.94-2.47c2.11.95 4.44 1.48 6.91 1.48 9.3 0 16.84-7.54 16.84-16.84 0-5.44-2.58-10.27-6.58-13.35Z"/>
<path fill="#f15d22" d="M14.1 53.39c-1.04-2.51-1.49-5.3-1.18-8.19.97-9.25 9.26-15.96 18.5-14.98 3.84.4 7.24 2.07 9.84 4.54-3.08-4.01-7.92-6.6-13.36-6.6-9.3 0-16.84 7.54-16.84 16.84 0 2.91.74 5.64 2.03 8.02l-3.04 9.8 4.05-9.43Z"/>
<path fill="#d0232b" d="M13.09 53.01c-1.3-2.39-2.03-5.12-2.03-8.02 0-9.3 7.54-16.84 16.84-16.84 3.86 0 7.42 1.3 10.26 3.49-3.48-3.67-8.56-5.73-13.98-5.17-9.25.97-15.96 9.26-14.98 18.5.3 2.89 1.32 5.53 2.86 7.77l-2 10.07 3.04-9.8Z"/>
<path fill="#231f20" d="M227.73 34.1h5.4l10.75 27.94h-5.53l-2.19-5.76h-11.4l-2.27 5.76h-5.53l10.78-27.94Zm2.73 7.41-3.75 9.59h7.48l-3.73-9.59ZM247.21 34.1h5.28v27.94h-5.28V34.1Z"/>
</svg>
</a>
<a class="site-title" href="<%= Discourse.base_url %>">
<%= SiteSetting.title %>
@ -33,23 +41,28 @@
<div class="llm-name">
<span><%= @shared_conversation.llm_name %></span>
</div>
</div>
<h2><%= @shared_conversation.title %></h2>
</header>
<section>
<header class="page-header">
<h1><%= @shared_conversation.title %></h1>
<time datetime="<%= @shared_conversation.populated_context.first.created_at.iso8601 %>"><%= @shared_conversation.populated_context.first.created_at.strftime('%d %B %Y') %></time>
</header>
<% @shared_conversation.populated_context.each do |post| %>
<div class="post">
<div class="post-header">
<span class="post-user"><%= post.user.username %></span>
<%if post.persona.present? %>
<span class="post-persona"><%= post.persona %></span>
<% end %>
<span class="post-date"><%= post.created_at.strftime('%Y-%m-%d') %></span>
</div>
<div class="post-content">
<%= post.cooked.html_safe %>
</div>
</div>
<% end %>
</div>
</body>
<% @shared_conversation.populated_context.each do |post| %>
<article class="post">
<header class="post__header">
<span class="post__user"><%= post.user.username %></span>
<%if post.persona.present? %>
<span class="post__persona"><%= post.persona %></span>
<% end %>
<time class="post__date" datetime="<%= post.created_at.iso8601 %>"><%= post.created_at.strftime('%Y-%m-%d') %></time>
</header>
<div class="post__content">
<%= post.cooked.html_safe %>
</div>
</article>
<% end %>
</section>
</body>
</html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

View File

@ -1,184 +1,351 @@
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--background-color: #f8f9fa;
--post-background-color: #ffffff;
--details-background-color: #e9ecef;
--details-hover-color: #dee2e6;
--shadow-header: 0 2px 30px -1px rgba(0, 0, 0, 0.05);
--shadow-content: 0 10px 20px -1px rgba(0, 0, 0, 0.05);
--primary: #333;
--primary-50: #f7f8fa;
--primary-100: #eff2f5;
--primary-200: #e4e9ee;
--primary-300: #c9d2dd;
--primary-400: #aebccb;
--primary-500: #93a5ba;
--primary-600: #778fa9;
--primary-700: #5b7490;
--primary-800: #4e627a;
--primary-900: #344252;
--secondary: #fff;
--tertiary: #08c;
--border-radius-large: 1em;
--border-radius-small: 0.33em;
--font-up-6: 2.296em;
--font-up-5: 2em;
--font-up-4: 1.7511em;
--font-up-3: 1.5157em;
--font-up-2: 1.3195em;
--font-up-1: 1.1487em;
--font-0: 1em;
--font-down-1: 0.8706em;
--font-down-2: 0.7579em;
--font-down-3: 0.6599em;
--font-down-4: 0.5745em;
--font-down-5: 0.5em;
--font-down-6: 0.4355em;
}
* { /* reset */
box-sizing: border-box;
}
body {
font-family: Söhne, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, Helvetica Neue, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
margin: 0;
padding: 20px;
font-size: 18px;
font-size: 1.125em; /* root scale */
line-height: 1.8;
background-color: var(--background-color);
color: #212529;
color: var(--primary);
background: var(--primary-50);
}
.header {
display: flex;
justify-content: space-between;
.site-header {
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-areas: "logo site llm";
position: sticky;
top: 0;
padding: 0 1em;
align-items: center;
background-color: #ffffff;
color: #ffffff;
padding: 0.5rem 1rem 0 0.1rem;
background-color: var(--secondary);
box-shadow: var(--shadow-header);
z-index: 2;
@media screen and (max-width: 768px) {
grid-template-areas: "logo site" "logo llm";
font-size: var(--font-down-1);
padding-bottom: 0.25em;
gap: 0 1em;
align-items: start;
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr;
}
@media screen and (max-width: 500px) {
position: relative;
grid-template-areas: "logo" "site" "llm";
}
}
.ai-logo {
grid-area: logo
}
.ai-logo .logo {
height: 61px;
width: 193px;
height: 3.75em;
width: auto;
padding: 0.5em 0;
@media screen and (max-width: 768px) {
padding-bottom: 0;
max-width: 180px;
}
}
@media (prefers-reduced-motion: no-preference) {
.ai-logo:hover #d-sparkles {
animation: d-rainbow-sparkles 1.5s forwards ease-in-out;
}
}
@keyframes d-rainbow-sparkles {
0% {
fill: #f15d22;
}
33% {
fill: #fff9ae;
}
66% {
fill: #00a94f;
}
100% {
fill: #00aeef;
}
}
.site-title {
font-size: 1.4em;
font-weight: 600;
letter-spacing: 0.02em;
color: #060606;
grid-area: site;
font-size: var(--font-up-2);
color: var(--primary);
padding: 0 1em;
transition: color 0.3s ease;
transition: color 0.25s ease-in-out;
text-decoration: none;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: bold;
@media screen and (max-width: 768px) {
margin-top: 0.8em;
line-height: 1.2;
text-align: right;
padding: 0;
}
@media screen and (max-width: 500px) {
font-size: var(--font-up-3);
text-align: left;
margin-top: 0;
}
}
.llm-name {
font-size: 1em;
background-color: #0056b3;
color: #ffffff;
grid-area: llm;
font-size: var(--font-down-1);
padding: 0.5em 1em;
border-radius: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
text-decoration: none;
text-align: right;
line-height: 1.2;
color: var(--primary-600);
@media screen and (max-width: 768px) {
padding: 0;
}
@media screen and (max-width: 500px) {
text-align: left;
margin-top: 0;
margin-bottom: 1.25em;
}
}
section {
max-width: 900px;
margin: 4em auto 8em;
background-color: var(--secondary);
border-radius: var(--border-radius-large);
box-shadow: var(--shadow-content);
@media screen and (max-width: 768px) {
margin-top: 0;
border-radius: 0;
margin-bottom: 0;
box-shadow: none;
}
}
.page-header {
text-align: center;
line-height: 1.2;
padding: 3em 2.5em;
@media screen and (max-width: 768px) {
padding: 2em 1em;
text-align: left;
}
@media screen and (max-width: 500px) {
padding: 1em;
}
}
.page-header h1 {
margin: 0;
font-size: var(--font-up-5);
font-weight: normal;
@media screen and (max-width: 768px) {
font-size: var(--font-up-3);
}
}
.page-header time {
display: block;
color: var(--primary-500);
margin-top: 0.5em;
@media screen and (max-width: 768px) {
font-size: var(--font-down-1);
}
}
article {
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
transition: border-color 0.25s ease-in-out;
@media screen and (max-width: 768px) {
border-top-color: var(--primary-100);
border-bottom-color: transparent;
}
}
@media screen and (min-width: 769px) {
article:hover {
border-top-color: var(--primary-100);
border-bottom-color: var(--primary-100);
}
article:last-of-type:hover {
border-bottom-color: transparent;
}
}
pre, code {
font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
font-size: 0.9em;
background-color: #f0f0f0;
}
pre {
padding: 1em;
border-radius: 6px;
overflow-x: auto;
}
code {
padding: 0.2em 0.4em;
border-radius: 4px;
}
pre code {
font-size: var(--font-down-1);
background-color: var(--primary-50);
font-size: inherit;
padding: 0;
background-color: transparent;
}
pre {
border-radius: var(--border-radius-small);
overflow-x: auto;
}
code {
padding: 0.2em 0.4em;
border-radius: var(--border-radius-small);
background: var(--primary-50);
}
code.hljs {
background-color: var(--primary-50);
}
h1 h2 h3 h4 h5 h6 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 2em;
color: #333;
margin-bottom: 0.5em;
}
.container {
max-width: 900px;
margin: 0 auto;
padding: 3rem;
}
.post {
margin-bottom: 3rem;
padding: 2em;
background-color: var(--post-background-color);
border-radius: 8px;
box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
padding: 1.5em 3em 1.5em;
@media screen and (max-width: 768px) {
padding: 1em;
}
}
.post-header {
.post__header {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: start;
margin-bottom: 1rem;
margin-bottom: 0.5em;
gap: 0 0.5em;
}
.post-user, .post-persona, .post-date {
display: block;
margin-top: auto;
margin-bottom: auto;
}
.post-user {
.post__user {
font-weight: bold;
margin-right: 10px;
color: var(--primary-color);
color: var(--primary);
}
.post-date, .post-persona {
color: var(--secondary-color);
.post__date, .post__persona {
font-size: 0.8em;
margin-top: 0.3em;
}
.post-persona {
margin-right: 10px;
.post__persona {
color: var(--primary-600);
}
.post-content {
.post__content {
line-height: 1.4;
color: var(--primary-800);
}
details {
margin-top: 10px;
padding: 20px;
background-color: var(--details-background-color);
border-radius: 6px;
cursor: pointer;
transition: background-color 0.3s ease;
.post__content p:first-child {
margin-top: 0;
}
details:hover {
background-color: var(--details-hover-color);
.post__content p:last-child {
margin-bottom: 0.4em;
}
.post__date {
color: var(--primary-500);
margin-left: auto;
display: none; /* hiding for now */
}
summary {
font-weight: bold;
color: var(--primary-color);
outline: none;
padding: 1em;
border-radius: var(--border-radius-small);
cursor: pointer;
color: var(--tertiary);
outline: none;
}
summary:hover {
background-color: var(--primary-100);
}
details {
background-color: var(--primary-50);
border-radius: var(--border-radius-small);
transition: background-color 0.3s ease;
}
details[open] {
padding-bottom: 0.75em;
}
details > *:not(summary) {
padding: 0 1em;
}
.post__content details p:last-child {
margin-bottom: 0;
}
details p {
margin-top: 10px;
color: #555;
color: var(--primary-800);
}
details[open] summary {
color: #0056b3;
color: var(--tertiary);
border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;
}
a {
text-decoration: none;
color: var(--primary-color);
transition: color 0.3s ease;
color: var(--tertiary);
transition: color 0.25s ease-in-out;
}
a:hover {
color: #0056b3;
}
ol, ul {
margin: 0.1em 0;
padding-left: 1em;
}
li {
margin-bottom: 0.5em;
line-height: 1.6;
}
li:last-child {
margin-bottom: 0;
color: var(--tertiary);
text-decoration: underline;
}
ol {
@ -189,12 +356,19 @@ ul {
list-style-type: disc;
}
p + ol, p + ul {
margin-top: -0.5em;
@media screen and (max-width: 500px) {
ol, ul {
padding-left: 1.33em;
}
}
ol + p, ul + p {
margin-top: 1.5em;
li {
margin-bottom: 0.75em;
line-height: 1.6;
}
li:last-child {
margin-bottom: 0;
}
li, p {
@ -203,90 +377,3 @@ li, p {
word-break: break-word;
}
@media screen and (max-width: 768px) {
body {
padding: 10px;
}
.header, details {
padding: 0.5rem;
}
.post-content {
font-size: 17px;
padding: 0;
}
.container {
padding: 0rem;
}
h1, h2 {
font-size: 1.5em;
line-height: 1.3;
}
.post-content, p, ol, ul {
line-height: 1.5;
}
.post-date {
display: none;
}
.site-title, .llm-name, .post-header {
font-size: 1.4em;
padding: 0;
margin: 0;
}
.llm-name {
padding: 0;
margin: 0;
display: inline-block;
font-size: 1em;
background-color: inherit;
border-radius: 0;
box-shadow: none;
color: black;
font-size: 15px;
}
.ai-logo {
display: block;
margin-left: -10px;
}
.site-title {
display: inline-block;
margin-right: 10px;
}
.post {
margin-bottom: 1rem;
padding: 5px;
background-color: var(--post-background-color);
border-radius: unset;
box-shadow: unset;
}
.post p {
margin-block-start: 0.4em;
}
.post-user, .post-persona {
font-size: 0.7em;
margin-top: 0;
}
.header {
display: block;
padding: 0;
}
body {
background-color: var(--post-background-color);
}
}