UX: update styles and markup for share feature (#525)
This commit is contained in:
Kris
GitHub
parent
25d283b527
commit
1c90ad81c2
|
|
@ -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>
|
||||
|
||||
<% @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>
|
||||
<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| %>
|
||||
<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 |
|
|
@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue