templ generate, add markdown syntax highlighting, fix stuff
This commit is contained in:
312
static/style.css
312
static/style.css
@@ -400,3 +400,315 @@ a[href^="/tags/"]:hover {
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
/* Add to your existing CSS */
|
||||
|
||||
/* Syntax Highlighting */
|
||||
.chroma {
|
||||
background-color: #f8f8f8;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 6px;
|
||||
padding: 16px;
|
||||
overflow-x: auto;
|
||||
margin: 16px 0;
|
||||
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Consolas', 'Courier New', monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Line numbers */
|
||||
.chroma .lnt {
|
||||
color: #999;
|
||||
margin-right: 16px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.chroma .hl {
|
||||
background-color: #ffffcc;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Syntax highlighting colors (GitHub style) */
|
||||
.chroma .c { color: #6a737d; } /* Comment */
|
||||
.chroma .err { color: #cb2431; } /* Error */
|
||||
.chroma .k { color: #d73a49; } /* Keyword */
|
||||
.chroma .l { color: #032f62; } /* Literal */
|
||||
.chroma .n { color: #24292e; } /* Name */
|
||||
.chroma .o { color: #d73a49; } /* Operator */
|
||||
.chroma .p { color: #24292e; } /* Punctuation */
|
||||
.chroma .cm { color: #6a737d; } /* Comment.Multiline */
|
||||
.chroma .cp { color: #d73a49; } /* Comment.Preproc */
|
||||
.chroma .c1 { color: #6a737d; } /* Comment.Single */
|
||||
.chroma .cs { color: #6a737d; } /* Comment.Special */
|
||||
.chroma .gd { color: #cb2431; } /* Generic.Deleted */
|
||||
.chroma .ge { font-style: italic; } /* Generic.Emph */
|
||||
.chroma .gi { color: #28a745; } /* Generic.Inserted */
|
||||
.chroma .gs { font-weight: bold; } /* Generic.Strong */
|
||||
.chroma .gu { color: #6f42c1; } /* Generic.Subheading */
|
||||
.chroma .kc { color: #005cc5; } /* Keyword.Constant */
|
||||
.chroma .kd { color: #d73a49; } /* Keyword.Declaration */
|
||||
.chroma .kn { color: #d73a49; } /* Keyword.Namespace */
|
||||
.chroma .kp { color: #d73a49; } /* Keyword.Pseudo */
|
||||
.chroma .kr { color: #d73a49; } /* Keyword.Reserved */
|
||||
.chroma .kt { color: #d73a49; } /* Keyword.Type */
|
||||
.chroma .ld { color: #032f62; } /* Literal.Date */
|
||||
.chroma .m { color: #005cc5; } /* Literal.Number */
|
||||
.chroma .s { color: #032f62; } /* Literal.String */
|
||||
.chroma .na { color: #24292e; } /* Name.Attribute */
|
||||
.chroma .nb { color: #005cc5; } /* Name.Builtin */
|
||||
.chroma .nc { color: #6f42c1; } /* Name.Class */
|
||||
.chroma .no { color: #005cc5; } /* Name.Constant */
|
||||
.chroma .nd { color: #6f42c1; } /* Name.Decorator */
|
||||
.chroma .ni { color: #6f42c1; } /* Name.Entity */
|
||||
.chroma .ne { color: #6f42c1; } /* Name.Exception */
|
||||
.chroma .nf { color: #6f42c1; } /* Name.Function */
|
||||
.chroma .nl { color: #6f42c1; } /* Name.Label */
|
||||
.chroma .nn { color: #6f42c1; } /* Name.Namespace */
|
||||
.chroma .nx { color: #6f42c1; } /* Name.Other */
|
||||
.chroma .py { color: #24292e; } /* Name.Property */
|
||||
.chroma .nt { color: #22863a; } /* Name.Tag */
|
||||
.chroma .nv { color: #e36209; } /* Name.Variable */
|
||||
.chroma .ow { color: #d73a49; } /* Operator.Word */
|
||||
.chroma .w { color: #bbbbbb; } /* Text.Whitespace */
|
||||
.chroma .mb { color: #005cc5; } /* Literal.Number.Bin */
|
||||
.chroma .mf { color: #005cc5; } /* Literal.Number.Float */
|
||||
.chroma .mh { color: #005cc5; } /* Literal.Number.Hex */
|
||||
.chroma .mi { color: #005cc5; } /* Literal.Number.Integer */
|
||||
.chroma .mo { color: #005cc5; } /* Literal.Number.Oct */
|
||||
.chroma .sb { color: #032f62; } /* Literal.String.Backtick */
|
||||
.chroma .sc { color: #032f62; } /* Literal.String.Char */
|
||||
.chroma .sd { color: #032f62; } /* Literal.String.Doc */
|
||||
.chroma .s2 { color: #032f62; } /* Literal.String.Double */
|
||||
.chroma .se { color: #032f62; } /* Literal.String.Escape */
|
||||
.chroma .sh { color: #032f62; } /* Literal.String.Heredoc */
|
||||
.chroma .si { color: #032f62; } /* Literal.String.Interpol */
|
||||
.chroma .sx { color: #032f62; } /* Literal.String.Other */
|
||||
.chroma .sr { color: #032f62; } /* Literal.String.Regex */
|
||||
.chroma .s1 { color: #032f62; } /* Literal.String.Single */
|
||||
.chroma .ss { color: #032f62; } /* Literal.String.Symbol */
|
||||
.chroma .bp { color: #005cc5; } /* Name.Builtin.Pseudo */
|
||||
.chroma .vc { color: #e36209; } /* Name.Variable.Class */
|
||||
.chroma .vg { color: #e36209; } /* Name.Variable.Global */
|
||||
.chroma .vi { color: #e36209; } /* Name.Variable.Instance */
|
||||
|
||||
/* Dark mode syntax highlighting (optional) */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.chroma {
|
||||
background-color: #0d1117;
|
||||
border-color: #30363d;
|
||||
color: #e6edf3;
|
||||
}
|
||||
|
||||
.chroma .c { color: #8b949e; }
|
||||
.chroma .k { color: #ff7b72; }
|
||||
.chroma .s { color: #a5d6ff; }
|
||||
.chroma .nb { color: #ffa657; }
|
||||
.chroma .nc { color: #ffa657; }
|
||||
.chroma .nf { color: #d2a8ff; }
|
||||
.chroma .nt { color: #7ee787; }
|
||||
.chroma .m { color: #79c0ff; }
|
||||
}
|
||||
|
||||
/* Mobile adjustments */
|
||||
@media (max-width: 600px) {
|
||||
.chroma {
|
||||
padding: 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.chroma .lnt {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* HTMX Loading States */
|
||||
.loading {
|
||||
opacity: 0.7;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.loading::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: -10px 0 0 -10px;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-top: 2px solid #3182ce;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Pagination Styles */
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 32px;
|
||||
padding: 20px;
|
||||
background-color: #f7fafc;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.pagination a {
|
||||
color: #3182ce;
|
||||
text-decoration: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s ease;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.pagination a:hover {
|
||||
background-color: #bee3f8;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.page-info {
|
||||
color: #718096;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Post Detail Styles */
|
||||
.post-detail {
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 6px;
|
||||
padding: 32px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.post-detail .post-title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 16px;
|
||||
color: #1a202c;
|
||||
}
|
||||
|
||||
.post-detail .post-meta {
|
||||
font-size: 14px;
|
||||
color: #718096;
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.post-content {
|
||||
font-size: 16px;
|
||||
line-height: 1.7;
|
||||
color: #2d3748;
|
||||
}
|
||||
|
||||
.post-content h2 {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
margin: 32px 0 16px 0;
|
||||
color: #1a202c;
|
||||
}
|
||||
|
||||
.post-content h3 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin: 24px 0 12px 0;
|
||||
color: #1a202c;
|
||||
}
|
||||
|
||||
.post-content p {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.post-content code {
|
||||
background-color: #f7fafc;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 14px;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.post-content pre {
|
||||
background-color: #1a202c;
|
||||
color: #f7fafc;
|
||||
padding: 16px;
|
||||
border-radius: 6px;
|
||||
overflow-x: auto;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.post-content pre code {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.post-footer {
|
||||
margin-top: 32px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.post-footer a {
|
||||
color: #3182ce;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.post-footer a:hover {
|
||||
background-color: #ebf8ff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Tag Links */
|
||||
a[href^="/tags/"] {
|
||||
background-color: #ebf8ff;
|
||||
color: #2b6cb0;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
a[href^="/tags/"]:hover {
|
||||
background-color: #bee3f8;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* HTMX Transitions */
|
||||
.htmx-settling {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.htmx-swapping {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
/* Mobile adjustments for new elements */
|
||||
@media (max-width: 600px) {
|
||||
.pagination {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.post-detail {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.post-detail .post-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user