ash-project/ash_hq
1
0
Fork 0
mirror of https://github.com/ash-project/ash_hq.git synced 2024-09-20 05:13:23 +12:00
Code Issues Projects Releases Packages Wiki Activity

improvement: theming

Browse source
This commit is contained in:
Zach Daniel 2022-08-04 17:06:52 -04:00
parent fb418ad248
commit 784c31bdcf
3 changed files with 86 additions and 163 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

235
assets/css/syntax.css
View file

@ -1,3 +1,8 @@
.dark .inline {
background-color: #404040;
border-radius: 0.1rem;
}
.dark .highlight pre { .dark .highlight pre {
background-color: #404040 background-color: #404040
} }
@ -364,169 +369,75 @@
color: #3677a9 color: #3677a9
} }
/* Literal.Number.Integer.Long */ .light .code-pre {
/* LightDark */ background-color: #d2d2d2
.light .highlight .hll {
background-color: #ffffcc
} }
.light .highlight .c { .light .inline {
color: #008000 background-color: #d2d2d2;
border-radius: 0.1rem;
} }
/* Comment */ .light .highlight .hll { background-color: #ffffcc }
/* .light .highlight .err { .light .highlight .c { color: #000000; font-style: italic } /* Comment */
border: 1px solid #FF0000 .light .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
} */ .light .highlight .k { color: #000000; font-weight: bold } /* Keyword */
.light .highlight .o { color: #000000; font-weight: bold } /* Operator */
/* Error */ .light .highlight .cm { color: #000000; font-style: italic } /* Comment.Multiline */
.light .highlight .k { .light .highlight .cp { color: #000000; font-weight: bold; font-style: italic } /* Comment.Preproc */
color: #0000ff .light .highlight .c1 { color: #000000; font-style: italic } /* Comment.Single */
} .light .highlight .cs { color: #000000; font-weight: bold; font-style: italic } /* Comment.Special */
.light .highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
/* Keyword */ .light .highlight .ge { color: #000000; font-style: italic } /* Generic.Emph */
.light .highlight .cm { .light .highlight .gr { color: #aa0000 } /* Generic.Error */
color: #008000 .light .highlight .gh { color: #000000 } /* Generic.Heading */
} .light .highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.light .highlight .go { color: #000000 } /* Generic.Output */
/* Comment.Multiline */ .light .highlight .gp { color: #000000 } /* Generic.Prompt */
.light .highlight .cp { .light .highlight .gs { font-weight: bold } /* Generic.Strong */
color: #0000ff .light .highlight .gu { color: #000000 } /* Generic.Subheading */
} .light .highlight .p { color: #000000 } /* Generic.Subheading */
.light .highlight .gt { color: #aa0000 } /* Generic.Traceback */
/* Comment.Preproc */ .light .highlight .kc { color: #000000; font-weight: bold } /* Keyword.Constant */
.light .highlight .c1 { .light .highlight .kd { color: #000000; font-weight: bold } /* Keyword.Declaration */
color: #008000 .light .highlight .kn { color: #000000; font-weight: bold } /* Keyword.Namespace */
} .light .highlight .kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */
.light .highlight .kr { color: #000000; font-weight: bold } /* Keyword.Reserved */
/* Comment.Single */ .light .highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
.light .highlight .cs { .light .highlight .m { color: #009999 } /* Literal.Number */
color: #008000 .light .highlight .s { color: #d01040 } /* Literal.String */
} .light .highlight .n { color: #000000 } /* Name.Attribute */
.light .highlight .na { color: #008080 } /* Name.Attribute */
/* Comment.Special */ .light .highlight .nb { color: #0086B3 } /* Name.Builtin */
.light .highlight .ge { .light .highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
font-style: italic .light .highlight .no { color: #008080 } /* Name.Constant */
} .light .highlight .nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */
.light .highlight .ni { color: #800080 } /* Name.Entity */
/* Generic.Emph */ .light .highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
.light .highlight .gh { .light .highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
font-weight: bold .light .highlight .nl { color: #990000; font-weight: bold } /* Name.Label */
} .light .highlight .nn { color: #555555 } /* Name.Namespace */
.light .highlight .nt { color: #000080 } /* Name.Tag */
/* Generic.Heading */ .light .highlight .nv { color: #008080 } /* Name.Variable */
.light .highlight .gp { .light .highlight .ow { color: #000000; font-weight: bold } /* Operator.Word */
font-weight: bold .light .highlight .w { color: #000000 } /* Text.Whitespace */
} .light .highlight .mf { color: #009999 } /* Literal.Number.Float */
.light .highlight .mh { color: #009999 } /* Literal.Number.Hex */
/* Generic.Prompt */ .light .highlight .mi { color: #009999 } /* Literal.Number.Integer */
.light .highlight .gs { .light .highlight .mo { color: #009999 } /* Literal.Number.Oct */
font-weight: bold .light .highlight .sb { color: #d01040 } /* Literal.String.Backtick */
} .light .highlight .sc { color: #d01040 } /* Literal.String.Char */
.light .highlight .sd { color: #d01040 } /* Literal.String.Doc */
/* Generic.Strong */ .light .highlight .s2 { color: #d01040 } /* Literal.String.Double */
.light .highlight .gu { .light .highlight .se { color: #d01040 } /* Literal.String.Escape */
font-weight: bold .light .highlight .sh { color: #d01040 } /* Literal.String.Heredoc */
} .light .highlight .si { color: #d01040 } /* Literal.String.Interpol */
.light .highlight .sx { color: #d01040 } /* Literal.String.Other */
/* Generic.Subheading */ .light .highlight .sr { color: #009926 } /* Literal.String.Regex */
.light .highlight .kc { .light .highlight .s1 { color: #d01040 } /* Literal.String.Single */
color: #0000ff .light .highlight .ss { color: #990073 } /* Literal.String.Symbol */
} .light .highlight .bp { color: #000000 } /* Name.Builtin.Pseudo */
.light .highlight .vc { color: #008080 } /* Name.Variable.Class */
/* Keyword.Constant */ .light .highlight .vg { color: #008080 } /* Name.Variable.Global */
.light .highlight .kd { .light .highlight .vi { color: #008080 } /* Name.Variable.Instance */
color: #0000ff .light .highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
}
/* Keyword.Declaration */
.light .highlight .kn {
color: #0000ff
}
/* Keyword.Namespace */
.light .highlight .kp {
color: #0000ff
}
/* Keyword.Pseudo */
.light .highlight .kr {
color: #0000ff
}
/* Keyword.Reserved */
.light .highlight .kt {
color: #2b91af
}
/* Keyword.Type */
.light .highlight .s {
color: #a31515
}
/* Literal.String */
.light .highlight .nc {
color: #2b91af
}
/* Name.Class */
.light .highlight .ow {
color: #0000ff
}
/* Operator.Word */
.light .highlight .sb {
color: #a31515
}
/* Literal.String.Backtick */
.light .highlight .sc {
color: #a31515
}
/* Literal.String.Char */
.light .highlight .sd {
color: #a31515
}
/* Literal.String.Doc */
.light .highlight .s2 {
color: #a31515
}
/* Literal.String.Double */
.light .highlight .se {
color: #a31515
}
/* Literal.String.Escape */
.light .highlight .sh {
color: #a31515
}
/* Literal.String.Heredoc */
.light .highlight .si {
color: #a31515
}
/* Literal.String.Interpol */
.light .highlight .sx {
color: #a31515
}
/* Literal.String.Other */
.light .highlight .sr {
color: #a31515
}
/* Literal.String.Regex */
.light .highlight .s1 {
color: #a31515
}
/* Literal.String.Single */
.light .highlight .ss {
color: #a31515
}
/* Literal.String.Symbol */

12
assets/tailwind.config.js
View file

@ -6,6 +6,18 @@ module.exports = {
darkMode: "class", darkMode: "class",
theme: { theme: {
extend: { extend: {
typography: {
DEFAULT: {
css: {
'code::before': {
content: '""'
},
'code::after': {
content: '""'
}
}
}
},
backgroundImage: { backgroundImage: {
'dark-grid': `linear-gradient(to bottom, rgb(24, 25, 32, 80%) 20%, rgb(24, 25, 32, 50%) 40%, rgb(24, 25, 32, 40%) 80%, rgb(24, 25, 32, 60%) 20%), url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ada3bf' fill-opacity='0.26'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`, 'dark-grid': `linear-gradient(to bottom, rgb(24, 25, 32, 80%) 20%, rgb(24, 25, 32, 50%) 40%, rgb(24, 25, 32, 40%) 80%, rgb(24, 25, 32, 60%) 20%), url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ada3bf' fill-opacity='0.26'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
'light-grid': `linear-gradient(to bottom, rgb(255, 255, 255, 90%) 20%, rgb(255, 255, 255, 85%) 30%, rgb(255, 255, 255, 80%) 80%, rgb(255, 255, 255, 95%) 20%), url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23312a3b' fill-opacity='0.42'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");` 'light-grid': `linear-gradient(to bottom, rgb(255, 255, 255, 90%) 20%, rgb(255, 255, 255, 85%) 30%, rgb(255, 255, 255, 80%) 80%, rgb(255, 255, 255, 95%) 20%), url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23312a3b' fill-opacity='0.42'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");`

2
lib/ash_hq/docs/extensions/render_markdown/highlighter.ex
View file

@ -41,7 +41,7 @@ defmodule AshHq.Docs.Extensions.RenderMarkdown.Highlighter do
formatter_options: [highlight_tag: "span"] formatter_options: [highlight_tag: "span"]
) )
~s(<pre><code class="makeup #{lang} highlight">#{highlighted}</code></pre>) ~s(<pre class="code-pre"><code class="makeup #{lang} highlight">#{highlighted}</code></pre>)
end end
entities = [{"&amp;", ?&}, {"&lt;", ?<}, {"&gt;", ?>}, {"&quot;", ?"}, {"&#39;", ?'}] entities = [{"&amp;", ?&}, {"&lt;", ?<}, {"&gt;", ?>}, {"&quot;", ?"}, {"&#39;", ?'}]