Bauke/href-plus
Bauke
/
href-plus
1
Fork 0
Code Releases 1 Activity

Make border size themeable.

This commit is contained in:
Bauke 2022-01-31 12:08:54 +01:00
parent 24640cce06
commit 61e59cb88c
Signed by: Bauke
GPG Key ID: C1C0F29952BCF558
9 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
source/scss/components/_search-bar.scss
View File

@ -3,14 +3,14 @@
input[type='text'] { input[type='text'] {
background-color: var(--background-2); background-color: var(--background-2);
border: 1px solid var(--foreground-1); border: var(--border-size) solid var(--foreground-1);
color: inherit; color: inherit;
padding: 0.5rem; padding: 0.5rem;
width: 100%; width: 100%;
} }
ul { ul {
border: 1px solid var(--foreground-1); border: var(--border-size) solid var(--foreground-1);
border-top: none; border-top: none;
list-style: none; list-style: none;
margin: 0; margin: 0;

2
source/scss/pages/_home.scss
View File

@ -9,7 +9,7 @@
.explainer { .explainer {
background-color: var(--background-2); background-color: var(--background-2);
border: 1px solid var(--foreground-2); border: var(--border-size) solid var(--foreground-2);
margin-top: 1rem; margin-top: 1rem;
max-width: 70rem; max-width: 70rem;
padding: 1rem; padding: 1rem;

4
source/scss/pages/_release.scss
View File

@ -1,6 +1,6 @@
.release { .release {
background-color: var(--background-2); background-color: var(--background-2);
border: 1px solid var(--foreground-2); border: var(--border-size) solid var(--foreground-2);
margin: 2rem auto; margin: 2rem auto;
max-width: 40rem; max-width: 40rem;
} }
@ -39,7 +39,7 @@
} }
.divider { .divider {
border-top: 2px solid var(--background-1); border-top: var(--border-size) solid var(--background-1);
} }
} }

2
source/scss/pages/_settings.scss
View File

@ -3,7 +3,7 @@
.setting { .setting {
background-color: var(--background-2); background-color: var(--background-2);
border: 1px solid var(--foreground-2); border: var(--border-size) solid var(--foreground-2);
margin-top: 1rem; margin-top: 1rem;
max-width: 70rem; max-width: 70rem;
padding: 1rem; padding: 1rem;

1
source/scss/themes/_dracula.scss
View File

@ -1,5 +1,6 @@
.dracula { .dracula {
--border-radius: 8px; --border-radius: 8px;
--border-size: 2px;
--foreground-1: #f8f8f2; --foreground-1: #f8f8f2;
--foreground-2: #f8f8f2; --foreground-2: #f8f8f2;
--background-1: #282a36; --background-1: #282a36;

2
source/scss/themes/_high-contrast.scss
View File

@ -1,5 +1,6 @@
.high-contrast-black { .high-contrast-black {
--border-radius: 8px; --border-radius: 8px;
--border-size: 2px;
--foreground-1: #fff; --foreground-1: #fff;
--foreground-2: #ddd; --foreground-2: #ddd;
--background-1: #000; --background-1: #000;
@ -8,6 +9,7 @@
.high-contrast-white { .high-contrast-white {
--border-radius: 8px; --border-radius: 8px;
--border-size: 2px;
--foreground-1: #000; --foreground-1: #000;
--foreground-2: #222; --foreground-2: #222;
--background-1: #fff; --background-1: #fff;

2
source/scss/themes/_love.scss
View File

@ -1,5 +1,6 @@
.love-dark { .love-dark {
--border-radius: 8px; --border-radius: 8px;
--border-size: 2px;
--foreground-1: #f2efff; --foreground-1: #f2efff;
--foreground-2: #e6deff; --foreground-2: #e6deff;
--background-1: #1f1731; --background-1: #1f1731;
@ -8,6 +9,7 @@
.love-light { .love-light {
--border-radius: 8px; --border-radius: 8px;
--border-size: 2px;
--foreground-1: #1f1731; --foreground-1: #1f1731;
--foreground-2: #2a2041; --foreground-2: #2a2041;
--background-1: #f2efff; --background-1: #f2efff;

1
source/scss/themes/_monokai.scss
View File

@ -2,6 +2,7 @@
.monokai { .monokai {
--border-radius: 8px; --border-radius: 8px;
--border-size: 2px;
--foreground-1: #d6d6d6; --foreground-1: #d6d6d6;
--foreground-2: #d6d6d6; --foreground-2: #d6d6d6;
--background-1: #{color.scale(#2e2e2e, $lightness: -25%)}; --background-1: #{color.scale(#2e2e2e, $lightness: -25%)};

2
source/scss/themes/_solarized.scss
View File

@ -1,5 +1,6 @@
.solarized-dark { .solarized-dark {
--border-radius: 8px; --border-radius: 8px;
--border-size: 2px;
--foreground-1: #839496; --foreground-1: #839496;
--foreground-2: #93a1a1; --foreground-2: #93a1a1;
--background-1: #002b36; --background-1: #002b36;
@ -8,6 +9,7 @@
.solarized-light { .solarized-light {
--border-radius: 8px; --border-radius: 8px;
--border-size: 2px;
--foreground-1: #657b83; --foreground-1: #657b83;
--foreground-2: #586e75; --foreground-2: #586e75;
--background-1: #fdf6e3; --background-1: #fdf6e3;