feat: rework color scheme
This commit is contained in:
parent
1e25e460fc
commit
f44efd5171
29 changed files with 163 additions and 406 deletions
|
|
@ -69,7 +69,7 @@ xmlns:atom="http://www.w3.org/2005/Atom">
|
|||
</xsl:template>
|
||||
<xsl:template match="atom:feed/atom:entry">
|
||||
<li>
|
||||
<a class="no-underline text-gray-800 dark:text-gray-200 leading-tight m-0 cursor-pointer">
|
||||
<a class="no-underline text-gray-800 hover:text-purple-400 dark:text-gray-200 dark:hover:text-purple-400 leading-tight m-0 cursor-pointer">
|
||||
<xsl:attribute name="href">
|
||||
<xsl:value-of select="atom:link/@href"/>
|
||||
</xsl:attribute>
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@ xmlns:atom="http://www.w3.org/2005/Atom">
|
|||
<xsl:template match="atom:feed/atom:entry">
|
||||
<div class="pb-4 border-b border-gray-200 dark:border-gray-700 mb-8">
|
||||
<h3 class="mb-0">
|
||||
<a class="no-underline text-gray-800 dark:text-gray-200 leading-tight m-0 md:text-2xl text-xl tracking-normal font-black">
|
||||
<a class="no-underline text-gray-800 hover:text-purple-400 dark:text-gray-200 dark:hover:text-purple-400 leading-tight m-0 cursor-pointer">
|
||||
<xsl:attribute name="href">
|
||||
<xsl:value-of select="atom:link/@href"/>
|
||||
</xsl:attribute>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 68 KiB After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 68 KiB After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4 KiB After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 44 KiB |
|
|
@ -1,375 +1,133 @@
|
|||
:root {
|
||||
--background: #282a36;
|
||||
--comment: #6272a4;
|
||||
--foreground: #f8f8f2;
|
||||
--selection: #44475a;
|
||||
--cyan: #8be9fd;
|
||||
--green: #50fa7b;
|
||||
--orange: #ffb86c;
|
||||
--pink: #ff79c6;
|
||||
--purple: #bd93f9;
|
||||
--red: #ff5555;
|
||||
--yellow: #f1fa8c;
|
||||
--background-30: #282a3633;
|
||||
--comment-30: #6272a433;
|
||||
--foreground-30: #f8f8f233;
|
||||
--selection-30: #44475a33;
|
||||
--cyan-30: #8be9fd33;
|
||||
--green-30: #50fa7b33;
|
||||
--orange-30: #ffb86c33;
|
||||
--pink-30: #ff79c633;
|
||||
--purple-30: #bd93f933;
|
||||
--red-30: #ff555533;
|
||||
--yellow-30: #f1fa8c33;
|
||||
--background-40: #282a3666;
|
||||
--comment-40: #6272a466;
|
||||
--foreground-40: #f8f8f266;
|
||||
--selection-40: #44475a66;
|
||||
--cyan-40: #8be9fd66;
|
||||
--green-40: #50fa7b66;
|
||||
--orange-40: #ffb86c66;
|
||||
--pink-40: #ff79c666;
|
||||
--purple-40: #bd93f966;
|
||||
--red-40: #ff555566;
|
||||
--yellow-40: #f1fa8c66;
|
||||
}
|
||||
pre::-webkit-scrollbar {
|
||||
width: 14px;
|
||||
}
|
||||
pre::-webkit-scrollbar-track {
|
||||
background-color: var(--comment);
|
||||
border-radius: 0;
|
||||
}
|
||||
pre::-webkit-scrollbar-thumb {
|
||||
background-color: var(--purple);
|
||||
border-radius: 0;
|
||||
}
|
||||
code[class*='language-'] ::-moz-selection,
|
||||
code[class*='language-']::-moz-selection,
|
||||
pre[class*='language-'] ::-moz-selection,
|
||||
pre[class*='language-']::-moz-selection {
|
||||
text-shadow: none;
|
||||
background-color: var(--selection);
|
||||
}
|
||||
code[class*='language-'] ::selection,
|
||||
code[class*='language-']::selection,
|
||||
pre[class*='language-'] ::selection,
|
||||
pre[class*='language-']::selection {
|
||||
text-shadow: none;
|
||||
background-color: var(--selection);
|
||||
}
|
||||
pre.line-numbers {
|
||||
position: relative;
|
||||
padding-left: 3.8em;
|
||||
counter-reset: linenumber;
|
||||
}
|
||||
pre.line-numbers > code {
|
||||
position: relative;
|
||||
white-space: inherit;
|
||||
}
|
||||
.line-numbers .line-numbers-rows {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
top: 0;
|
||||
font-size: 100%;
|
||||
left: -3.8em;
|
||||
width: 3em;
|
||||
letter-spacing: -1px;
|
||||
border-right: 1px solid #999;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.line-numbers-rows > span {
|
||||
pointer-events: none;
|
||||
display: block;
|
||||
counter-increment: linenumber;
|
||||
}
|
||||
.line-numbers-rows > span:before {
|
||||
content: counter(linenumber);
|
||||
color: #999;
|
||||
display: block;
|
||||
padding-right: 0.8em;
|
||||
text-align: right;
|
||||
}
|
||||
div.code-toolbar {
|
||||
position: relative;
|
||||
}
|
||||
div.code-toolbar > .toolbar {
|
||||
position: absolute;
|
||||
top: 0.3em;
|
||||
right: 0.2em;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
opacity: 0;
|
||||
}
|
||||
div.code-toolbar:hover > .toolbar {
|
||||
opacity: 1;
|
||||
}
|
||||
div.code-toolbar > .toolbar .toolbar-item {
|
||||
display: inline-block;
|
||||
padding-right: 20px;
|
||||
}
|
||||
div.code-toolbar > .toolbar a {
|
||||
cursor: pointer;
|
||||
}
|
||||
div.code-toolbar > .toolbar button {
|
||||
background: 0 0;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
line-height: normal;
|
||||
overflow: visible;
|
||||
padding: 0;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
div.code-toolbar > .toolbar a,
|
||||
div.code-toolbar > .toolbar button,
|
||||
div.code-toolbar > .toolbar span {
|
||||
color: var(--foreground);
|
||||
font-size: 0.8em;
|
||||
padding: 0.5em;
|
||||
background: var(--comment);
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
div.code-toolbar > .toolbar a:focus,
|
||||
div.code-toolbar > .toolbar a:hover,
|
||||
div.code-toolbar > .toolbar button:focus,
|
||||
div.code-toolbar > .toolbar button:hover,
|
||||
div.code-toolbar > .toolbar span:focus,
|
||||
div.code-toolbar > .toolbar span:hover {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
background-color: var(--green);
|
||||
}
|
||||
@media print {
|
||||
code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
/*
|
||||
* Laserwave Theme originally by Jared Jones for Visual Studio Code
|
||||
* https://github.com/Jaredk3nt/laserwave
|
||||
*
|
||||
* Ported for PrismJS by Simon Jespersen [https://github.com/simjes]
|
||||
*/
|
||||
|
||||
code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
color: var(--foreground);
|
||||
background: var(--background);
|
||||
text-shadow: none;
|
||||
font-family: PT Mono, Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
background: #27212e;
|
||||
color: #ffffff;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; /* this is the default */
|
||||
/* The following properties are standard, please leave them as they are */
|
||||
font-size: 1em;
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
/* The following properties are also standard */
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
code[class*='language-']::-moz-selection,
|
||||
code[class*='language-'] ::-moz-selection,
|
||||
pre[class*='language-']::-moz-selection,
|
||||
pre[class*='language-'] ::-moz-selection {
|
||||
background: #eb64b927;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
code[class*='language-']::selection,
|
||||
code[class*='language-'] ::selection,
|
||||
pre[class*='language-']::selection,
|
||||
pre[class*='language-'] ::selection {
|
||||
background: #eb64b927;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Properties specific to code blocks */
|
||||
pre[class*='language-'] {
|
||||
background: var(--background);
|
||||
padding: 1em; /* this is standard */
|
||||
margin: 0.5em 0; /* this is the default */
|
||||
overflow: auto; /* this is standard */
|
||||
border-radius: 0.5em;
|
||||
padding: 1em;
|
||||
margin: 0.5em 0;
|
||||
overflow: auto;
|
||||
height: auto;
|
||||
}
|
||||
:not(pre) > code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
/* Properties specific to inline code */
|
||||
:not(pre) > code[class*='language-'] {
|
||||
padding: 4px 7px;
|
||||
border-radius: 0.3em;
|
||||
white-space: normal;
|
||||
padding: 0.2em 0.3em;
|
||||
border-radius: 0.5rem;
|
||||
white-space: normal; /* this is standard */
|
||||
}
|
||||
.limit-300 {
|
||||
height: 300px !important;
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.cdata {
|
||||
color: #91889b;
|
||||
}
|
||||
.limit-300 {
|
||||
height: 400px !important;
|
||||
|
||||
.token.punctuation {
|
||||
color: #7b6995;
|
||||
}
|
||||
.limit-500 {
|
||||
height: 500px !important;
|
||||
|
||||
.token.builtin,
|
||||
.token.constant,
|
||||
.token.boolean {
|
||||
color: #ffe261;
|
||||
}
|
||||
.limit-600 {
|
||||
height: 600px !important;
|
||||
|
||||
.token.number {
|
||||
color: #b381c5;
|
||||
}
|
||||
.limit-700 {
|
||||
height: 700px !important;
|
||||
|
||||
.token.important,
|
||||
.token.atrule,
|
||||
.token.property,
|
||||
.token.keyword {
|
||||
color: #40b4c4;
|
||||
}
|
||||
.limit-800 {
|
||||
height: 800px !important;
|
||||
|
||||
.token.doctype,
|
||||
.token.operator,
|
||||
.token.inserted,
|
||||
.token.tag,
|
||||
.token.class-name,
|
||||
.token.symbol {
|
||||
color: #74dfc4;
|
||||
}
|
||||
.language-css {
|
||||
color: var(--purple);
|
||||
|
||||
.token.attr-name,
|
||||
.token.function,
|
||||
.token.deleted,
|
||||
.token.selector {
|
||||
color: #eb64b9;
|
||||
}
|
||||
.token {
|
||||
color: var(--pink);
|
||||
|
||||
.token.attr-value,
|
||||
.token.regex,
|
||||
.token.char,
|
||||
.token.string {
|
||||
color: #b4dce7;
|
||||
}
|
||||
.language-css .token {
|
||||
color: var(--pink);
|
||||
}
|
||||
.token.script {
|
||||
color: var(--foreground);
|
||||
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.token.variable {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* The following rules are pretty similar across themes, but feel free to adjust them */
|
||||
.token.bold {
|
||||
font-weight: 700;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
.token.atrule,
|
||||
.token.attr-name,
|
||||
.token.attr-value {
|
||||
color: var(--green);
|
||||
}
|
||||
.language-css .token.atrule {
|
||||
color: var(--purple);
|
||||
}
|
||||
.language-html .token.attr-value,
|
||||
.language-markup .token.attr-value {
|
||||
color: var(--yellow);
|
||||
}
|
||||
.token.boolean {
|
||||
color: var(--purple);
|
||||
}
|
||||
.token.builtin,
|
||||
.token.class-name {
|
||||
color: var(--cyan);
|
||||
}
|
||||
.token.comment {
|
||||
color: var(--comment);
|
||||
}
|
||||
.token.constant {
|
||||
color: var(--purple);
|
||||
}
|
||||
.language-javascript .token.constant {
|
||||
color: var(--orange);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
color: var(--pink);
|
||||
}
|
||||
.language-css .token.entity {
|
||||
color: var(--green);
|
||||
}
|
||||
.language-html .token.entity.named-entity {
|
||||
color: var(--purple);
|
||||
}
|
||||
.language-html .token.entity:not(.named-entity) {
|
||||
color: var(--pink);
|
||||
}
|
||||
.language-markup .token.entity.named-entity {
|
||||
color: var(--purple);
|
||||
}
|
||||
.language-markup .token.entity:not(.named-entity) {
|
||||
color: var(--pink);
|
||||
}
|
||||
.token.function {
|
||||
color: var(--green);
|
||||
}
|
||||
.language-css .token.function {
|
||||
color: var(--cyan);
|
||||
}
|
||||
.token.important,
|
||||
.token.keyword {
|
||||
color: var(--pink);
|
||||
}
|
||||
.token.prolog {
|
||||
color: var(--foreground);
|
||||
}
|
||||
.token.property {
|
||||
color: var(--orange);
|
||||
}
|
||||
.language-css .token.property {
|
||||
color: var(--cyan);
|
||||
}
|
||||
.token.punctuation {
|
||||
color: var(--pink);
|
||||
}
|
||||
.language-css .token.punctuation {
|
||||
color: var(--orange);
|
||||
}
|
||||
.language-html .token.punctuation,
|
||||
.language-markup .token.punctuation {
|
||||
color: var(--foreground);
|
||||
}
|
||||
.token.selector {
|
||||
color: var(--pink);
|
||||
}
|
||||
.language-css .token.selector {
|
||||
color: var(--green);
|
||||
}
|
||||
.token.regex {
|
||||
color: var(--red);
|
||||
}
|
||||
.language-css .token.rule:not(.atrule) {
|
||||
color: var(--foreground);
|
||||
}
|
||||
.token.string {
|
||||
color: var(--yellow);
|
||||
}
|
||||
.token.tag {
|
||||
color: var(--pink);
|
||||
}
|
||||
.token.url {
|
||||
color: var(--cyan);
|
||||
}
|
||||
.language-css .token.url {
|
||||
color: var(--orange);
|
||||
}
|
||||
.token.variable {
|
||||
color: var(--comment);
|
||||
}
|
||||
.token.number {
|
||||
color: rgba(189, 147, 249, 1);
|
||||
}
|
||||
.token.operator {
|
||||
color: rgba(139, 233, 253, 1);
|
||||
}
|
||||
.token.char {
|
||||
color: rgba(255, 135, 157, 1);
|
||||
}
|
||||
.token.symbol {
|
||||
color: rgba(255, 184, 108, 1);
|
||||
}
|
||||
.token.deleted {
|
||||
color: #e2777a;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.token.namespace {
|
||||
color: #e2777a;
|
||||
}
|
||||
.highlight-line {
|
||||
color: inherit;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
padding: 2px 10px;
|
||||
}
|
||||
.highlight-line:empty:before {
|
||||
content: ' ';
|
||||
}
|
||||
.highlight-line:not(:last-child) {
|
||||
min-width: 100%;
|
||||
}
|
||||
.highlight-line .highlight-line:not(:last-child) {
|
||||
min-width: 0;
|
||||
}
|
||||
.highlight-line-isdir {
|
||||
color: var(--foreground);
|
||||
background-color: var(--selection-30);
|
||||
}
|
||||
.highlight-line-active {
|
||||
background-color: var(--comment-30);
|
||||
}
|
||||
.highlight-line-add {
|
||||
background-color: var(--green-30);
|
||||
}
|
||||
.highlight-line-remove {
|
||||
background-color: var(--red-30);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
|
|
|||
Reference in a new issue