gordon/re-terminal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #40 from trviph/main

Browse Source 
Add a new light theme
This commit is contained in:
Mirus
2025-03-12 09:39:29 +02:00
committed by GitHub
parent c84a681ba1 41fe5f3cc7
commit 27d3dd669a
13 changed files with 113 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
assets/css/color/blue.scss
View File

@@ -1,3 +1,3 @@
:root {
--accent: #23B0FF;
html:root {
--accent: #23b0ff;
}

4
assets/css/color/green.scss
View File

@@ -1,3 +1,3 @@
:root {
--accent: #78E2A0;
html:root {
--accent: #78e2a0;
}

4
assets/css/color/orange.scss
View File

@@ -1,3 +1,3 @@
:root {
--accent: #FFA86A;
html:root {
--accent: #ffa86a;
}

3
assets/css/color/paper.scss Normal file
View File

@@ -0,0 +1,3 @@
html:root {
--accent: #1d1e28;
}

4
assets/css/color/pink.scss
View File

@@ -1,3 +1,3 @@
:root {
--accent: #EE72F1;
html:root {
--accent: #ee72f1;
}

4
assets/css/color/red.scss
View File

@@ -1,3 +1,3 @@
:root {
--accent: #FF6266;
html:root {
--accent: #ff6266;
}

14
assets/css/menu.scss
View File

@@ -2,11 +2,12 @@
--shadow-color: color-mix(in srgb, var(--background), transparent 20%);
display: none;
flex-direction: column;
--shadow: 0 10px var(--shadow-color), -10px 10px var(--shadow-color), 10px 10px var(--shadow-color);
--shadow: 0 10px var(--shadow-color), -10px 10px var(--shadow-color),
10px 10px var(--shadow-color);
position: absolute;
background: var(--background);
box-shadow: var(--shadow);
color: white;
color: var(--menu-color);
border: 2px solid;
margin: 0;
padding: 10px;
@@ -45,7 +46,7 @@
margin: 0;
padding: 0;
> li {
>li {
flex: 0 0 auto;
margin-bottom: 10px;
white-space: nowrap;
@@ -91,6 +92,7 @@
&--title {
padding: 5px;
}
&--list {
list-style-type: unset;
}
@@ -103,7 +105,7 @@
display: flex;
}
> li {
>li {
flex: 0 0 auto;
&:not(:last-of-type) {
@@ -119,7 +121,7 @@
&--desktop {
@media (max-width: $phone) {
display: none
display: none;
}
}
@@ -163,4 +165,4 @@
right: 0;
}
}
}
}

4
assets/css/style.scss
View File

@@ -1,6 +1,10 @@
$centerTheme: {{ if $.Site.Params.CenterTheme }}center{{ else }}flex-start{{ end }};
{{ if in (slice "paper") $.Site.Params.ThemeColor }}
@import "variables-light";
{{ else }}
@import "variables";
{{ end }}
@import "font";
@import "buttons";

78
assets/css/syntax.scss
View File

@@ -41,27 +41,26 @@ code.language-scss,
.token.function,
.token.function-name,
.token.deleted,
code.language-javascript,
code.language-html,
.command-line-prompt > span:before {
code[class*="language-"],
.command-line-prompt>span:before {
color: var(--syntax-func-color, color-mix(in srgb, var(--accent) 70%, #999 30%)) !important;
}
.token.selector,
.token.tag,
.token.punctuation {
color: white;
color: var(--syntax-punctuation-color);
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: rgba(255, 255, 255, .3) !important;
color: var(--syntax-comment-color) !important;
}
.token.namespace {
opacity: .7 !important;
opacity: 0.7 !important;
}
pre[data-line] {
@@ -75,13 +74,12 @@ pre[class*="language-"] {
}
.line-highlight {
--line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #999 10%);
position: absolute;
left: 0;
right: 0;
padding: 0;
margin: 0;
background: color-mix(in srgb, var(--line-highlight-mix), transparent 92%);
background: color-mix(in srgb, var(--syntax-line-highlight-mix), transparent 92%);
pointer-events: none;
line-height: inherit;
white-space: pre;
@@ -91,24 +89,23 @@ pre[class*="language-"] {
.line-highlight[data-end]:after {
content: attr(data-start);
position: absolute;
/* top: .4em; */
left: .6em;
left: 0.6em;
min-width: 1em;
padding: 0 .5em;
background-color: hsla(24, 20%, 50%, .4);
color: hsl(24, 20%, 95%);
padding: 0 0.5em;
background-color: var(--syntax-line-highlight-background-color);
color: var(--syntax-line-highlight-color);
font: bold 65%/1.5 sans-serif;
text-align: center;
vertical-align: .3em;
vertical-align: 0.3em;
border-radius: 999px;
text-shadow: none;
box-shadow: 0 1px white;
box-shadow: 0 1px var(--syntax-line-highlight-box-shadow);
}
.line-highlight[data-end]:after {
content: attr(data-end);
top: auto;
bottom: .4em;
bottom: 0.4em;
}
.line-numbers .line-highlight:before,
@@ -118,37 +115,38 @@ pre[class*="language-"] {
.code-toolbar {
--code-margin: 40px;
position: relative;
margin: var(--code-margin) 0;
padding: 20px;
border: 1px solid rgba(255, 255, 255, .1);
position: relative;
margin: var(--code-margin) 0;
padding: 20px;
border: 1px solid var(--syntax-code-border-color);
+ .code-toolbar,
+ .highlight,
+ .highlight .code-toolbar {
border-top: 0;
margin-top: calc(-1 * var(--code-margin));
}
+.code-toolbar,
+.highlight,
+.highlight .code-toolbar {
border-top: 0;
margin-top: calc(-1 * var(--code-margin));
}
pre, code {
border: none;
}
pre,
code {
border: none;
}
code {
display: block;
color: inherit;
}
code {
display: block;
color: inherit;
}
> .toolbar {
>.toolbar {
button {
font-size: .8em !important;
background: hsla(0,0%,87.8%,.2) !important;
color: #bbb !important;
box-shadow: 0 2px 0 0 rgba(0,0,0,.2) !important;
font-size: 0.8em !important;
background: var(--syntax-code-copy-button-background) !important;
color: var(--syntax-code-copy-button-color) !important;
box-shadow: 0 2px 0 0 var(--syntax-code-copy-button-box-shadow-color) !important;
border-radius: 0 !important;
margin: 6px !important;
padding: 10px !important;
user-select:none
user-select: none;
}
}
}
}

2
assets/css/terms.scss
View File

@@ -19,4 +19,4 @@
color: var(--accent);
}
}
}
}

29
assets/css/variables-light.scss Normal file
View File

@@ -0,0 +1,29 @@
:root {
--accent-contrast-color: white;
--article-link-color: var(inherit);
--background: color-mix(in srgb, var(--accent) 2%, #fefcfa 98%);
--border-color: rgba(0, 0, 0, 0.1);
--color: black;
--menu-color: black;
// Use in code syntax highlighting
--syntax-func-color: color-mix(in srgb, var(--accent) 70%, #000 30%);
--syntax-var-color: color-mix(in srgb, var(--accent) 90%, #000);
--syntax-value-color: color-mix(in srgb, var(--accent), black);
--syntax-punctuation-color: black;
--syntax-comment-color: rgba(0, 0, 0, 0.3);
--syntax-line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #000 10%);
--syntax-line-highlight-background-color: hsla(336, 20%, 50%, 0.4);
--syntax-line-highlight-color: hsl(336, 20%, 95%);
--syntax-line-highlight-box-shadow: black;
--syntax-code-border-color: rgba(0, 0, 0, 0.1);
--syntax-code-copy-button-background: hsla(360, 0%, 87.8%, 0.2);
--syntax-code-copy-button-color: #444;
--syntax-code-copy-button-box-shadow-color: rgba(255, 255, 255, 0.2);
}
// Native CSS Variable aren't supported in a combination with MEDIA QUERIES. Wait for a new standard https://drafts.csswg.org/css-env-1/
// --phone: "max-width: 684px";
// --tablet: "max-width: 900px";
$phone: 684px;
$tablet: 900px;

26
assets/css/variables.scss
View File

@@ -1,15 +1,29 @@
:root {
/* COLOR VARIABLES */
--background: color-mix(in srgb, var(--accent) 2%, #1D1E28 98%);
--accent-contrast-color: black;
--color: white;
--border-color: rgba(255, 255, 255, .1);
--article-link-color: var(inherit);
--background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%);
--border-color: rgba(255, 255, 255, 0.1);
--color: white;
--menu-color: white;
// Use in code syntax highlighting
--syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%);
--syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent);
--syntax-punctuation-color: white;
--syntax-value-color: color-mix(in srgb, var(--accent), white);
--syntax-comment-color: rgba(255, 255, 255, 0.3);
--syntax-line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #999 10%);
--syntax-line-highlight-background-color: hsla(24, 20%, 50%, 0.4);
--syntax-line-highlight-color: hsl(24, 20%, 95%);
--syntax-line-highlight-box-shadow: white;
--syntax-code-border-color: rgba(255, 255, 255, 0.1);
--syntax-code-copy-button-background: hsla(0, 0%, 87.8%, 0.2);
--syntax-code-copy-button-color: #bbb;
--syntax-code-copy-button-box-shadow-color: rgba(0, 0, 0, 0.2);
}
// Native CSS Variable aren't supported in a combination with MEDIA QUERIES. Wait for a new standard https://drafts.csswg.org/css-env-1/
// Native CSS Variable aren't supported in a combination with MEDIA QUERIES. Wait for a new standard https://drafts.csswg.org/css-env-1/
// --phone: "max-width: 684px";
// --tablet: "max-width: 900px";
$phone: 684px;
$tablet: 900px;

BIN
static/img/theme-colors/paper.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 208 B