Browse Source

added proper handling of dark themes for code blocks, fixed css typo for the search button on mobile

main
Artemis 3 months ago
parent
commit
9ef09d60ad
  1. 2
      config.php
  2. 2
      public/assets/style.css
  3. 2
      public/assets/style.css.sha
  4. 196
      resources/assets/code-block-theme.css
  5. 28
      resources/assets/style.css

2
config.php

@ -25,7 +25,7 @@ return [
'files' => [
ROOT . '/resources/assets/normalize.css',
ROOT . '/resources/assets/style.css',
ROOT . '/vendor/scrivo/highlight.php/styles/a11y-light.css'
ROOT . '/resources/assets/code-block-theme.css'
],
'output' => ROOT . '/public/assets/style.css',
'hash' => try_read_hash('style.css.sha')

2
public/assets/style.css
File diff suppressed because it is too large
View File

2
public/assets/style.css.sha

@ -1 +1 @@
Ax4e9/qvzgsQnfU/fT9I15klaBWDzFgEqRSySfDlU5B+pE9455FVCVqksAgf05NZ
H8uk8x/Rd3SIrBrChulPtl8//CmJFcTl+vJCWFbBBySXprvJVBjXfqvsoji9T/TE

196
resources/assets/code-block-theme.css

@ -0,0 +1,196 @@
/* a11y-light theme */
/* Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css */
/* @author: ericwbailey */
/* Comment */
.hljs-comment,
.hljs-quote {
color: #696969;
}
/* Red */
.hljs-variable,
.hljs-template-variable,
.hljs-tag,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class,
.hljs-regexp,
.hljs-deletion {
color: #d91e18;
}
/* Orange */
.hljs-number,
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params,
.hljs-meta,
.hljs-link {
color: #aa5d00;
}
/* Yellow */
.hljs-attribute {
color: #aa5d00;
}
/* Green */
.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition {
color: #008000;
}
/* Blue */
.hljs-title,
.hljs-section {
color: #007faa;
}
/* Purple */
.hljs-keyword,
.hljs-selector-tag {
color: #7928a1;
}
.hljs {
display: block;
overflow-x: auto;
background: #fefefe;
color: #545454;
padding: 0.5em;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
.hljs-addition,
.hljs-attribute,
.hljs-built_in,
.hljs-builtin-name,
.hljs-bullet,
.hljs-comment,
.hljs-link,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-params,
.hljs-string,
.hljs-symbol,
.hljs-type,
.hljs-quote {
color: highlight;
}
.hljs-keyword,
.hljs-selector-tag {
font-weight: bold;
}
@media screen and (prefers-color-scheme: dark) {
/* a11y-dark theme */
/* Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css */
/* @author: ericwbailey */
/* Comment */
.hljs-comment,
.hljs-quote {
color: #d4d0ab;
}
/* Red */
.hljs-variable,
.hljs-template-variable,
.hljs-tag,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class,
.hljs-regexp,
.hljs-deletion {
color: #ffa07a;
}
/* Orange */
.hljs-number,
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params,
.hljs-meta,
.hljs-link {
color: #f5ab35;
}
/* Yellow */
.hljs-attribute {
color: #ffd700;
}
/* Green */
.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition {
color: #abe338;
}
/* Blue */
.hljs-title,
.hljs-section {
color: #00e0e0;
}
/* Purple */
.hljs-keyword,
.hljs-selector-tag {
color: #dcc6e0;
}
.hljs {
display: block;
overflow-x: auto;
background: #2b2b2b;
color: #f8f8f2;
padding: 0.5em;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
.hljs-addition,
.hljs-attribute,
.hljs-built_in,
.hljs-builtin-name,
.hljs-bullet,
.hljs-comment,
.hljs-link,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-params,
.hljs-string,
.hljs-symbol,
.hljs-type,
.hljs-quote {
color: highlight;
}
.hljs-keyword,
.hljs-selector-tag {
font-weight: bold;
}
}

28
resources/assets/style.css

@ -86,7 +86,7 @@ a {
a:hover,
.current {
color: var(--dark);
background-color: var(--shadow);
border-bottom: .2rem solid var(--shadow);
}
a:visited {
@ -171,17 +171,6 @@ ul.shortened > li {
list-style-type: none;
}
@media screen and (min-width: 800px) {
main {
width: calc(800px - 2em);
margin: 0 auto;
}
#search {
flex-direction: row;
}
}
.spaced {
margin-top: 1em;
margin-bottom: 1em;
@ -199,7 +188,6 @@ form#search > input[type=search], form#search > button[type=submit] {
border: .2rem solid var(--site-theme);
}
form#search > button[type=submit] {
border-left: unset;
padding: 0.7rem;
}
@ -207,3 +195,17 @@ details {
border: 2px solid var(--shadow);
padding: .5rem;
}
@media screen and (min-width: 800px) {
main {
width: calc(800px - 2em);
margin: 0 auto;
}
#search {
flex-direction: row;
}
form#search > button[type=submit] {
border-left: unset;
}
}
Loading…
Cancel
Save