Bauke/bauke-xyz
Bauke
/
bauke-xyz
1
Fork 0
Code Releases 12 Activity

Replace colors with CSS custom properties.

This commit is contained in:
Bauke 2020-08-12 23:59:47 +02:00
parent c33cf5b532
commit 71227e0a44
Signed by: Bauke
GPG Key ID: C1C0F29952BCF558
9 changed files with 64 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
source/css/index.css
View File

@ -3,9 +3,8 @@ html {
}
body {
--accent-1: #3bd18a;
background-color: #1f1731;
color: #f2efff;
background-color: var(--background-1);
color: var(--foreground-1);
font-size: 1.75rem;
padding: 16px;
}
@ -23,7 +22,7 @@ main {
h1,
h2 {
background-color: #2a2041;
background-color: var(--background-2);
padding: 16px;
width: 100%;
}
@ -36,7 +35,7 @@ p {
a {
border: 1px dashed transparent;
color: #41c8e5;
color: var(--primary-accent-7);
display: inline-block;
font-weight: bold;
padding: 4px 8px;
@ -44,13 +43,13 @@ a {
}
a:hover {
background-color: #d2b83a;
color: #1f1731;
background-color: var(--primary-accent-3);
color: var(--background-1);
}
a:active,
a:focus {
border: 1px dashed #f2efff;
border: 1px dashed var(--foreground-1);
outline: none;
}
@ -62,12 +61,12 @@ main,
footer,
h1,
ul {
border: 1px solid var(--accent-1);
border: 1px solid var(--primary-accent-5);
}
ul {
align-items: center;
background-color: #2a2041;
background-color: var(--background-2);
list-style: none;
margin: 0;
overflow: auto;
@ -84,7 +83,7 @@ li:last-child {
}
.divider {
border-top: 1px solid var(--accent-1);
border-top: 1px solid var(--primary-accent-5);
width: 100%;
}

16
source/css/libraries.css
View File

@ -5,7 +5,7 @@
}
.libraries li {
background-color: #2a2041;
background-color: var(--background-2);
padding: 16px;
}
@ -14,7 +14,7 @@
}
.libraries a:hover {
background-color: #3bd18a;
background-color: var(--primary-accent-2);
}
.libraries .badges {
@ -24,20 +24,20 @@
#npm,
.libraries li.npm {
border: 1px solid #f99fb1;
border: 1px solid var(--primary-accent-1);
}
.npm a {
background-color: #f99fb1;
color: #1f1731;
background-color: var(--primary-accent-1);
color: var(--background-1);
}
#crates,
.libraries li.crates {
border: 1px solid #96c839;
border: 1px solid var(--primary-accent-4);
}
.crates a {
background-color: #96c839;
color: #1f1731;
background-color: var(--primary-accent-4);
color: var(--background-1);
}

14
source/css/userscripts.css
View File

@ -1,11 +1,7 @@
body {
--accent-1: #96c839;
}
header {
align-items: center;
background-color: #2a2041;
border: 1px solid var(--accent-1);
background-color: var(--background-2);
border: 1px solid var(--primary-accent-4);
display: flex;
justify-content: center;
padding: 16px;
@ -18,12 +14,12 @@ h2 {
}
a.install {
background-color: var(--accent-1);
color: #1f1731;
background-color: var(--primary-accent-4);
color: var(--background-1);
}
a.install:hover {
background-color: #d2b83a;
background-color: var(--primary-accent-3);
}
.remove-padding,

12
source/css/userstyles.css
View File

@ -1,11 +1,7 @@
body {
--accent-1: #f99fb1;
}
header {
align-items: center;
background-color: #2a2041;
border: 1px solid var(--accent-1);
background-color: var(--background-2);
border: 1px solid var(--primary-accent-1);
display: flex;
justify-content: center;
padding: 16px;
@ -18,8 +14,8 @@ h2 {
}
a.install {
background-color: var(--accent-1);
color: #1f1731;
background-color: var(--primary-accent-1);
color: var(--background-1);
}
a.install:hover {

33
source/css/variables.css Normal file
View File

@ -0,0 +1,33 @@
body {
--foreground-1: #f2efff;
--foreground-2: #e6deff;
--background-1: #1f1731;
--background-2: #2a2041;
--primary-accent-1: #f99fb1;
--primary-accent-2: #faa56c;
--primary-accent-3: #d2b83a;
--primary-accent-4: #96c839;
--primary-accent-5: #3bd18a;
--primary-accent-6: #3ecdbf;
--primary-accent-7: #41c8e5;
--primary-accent-8: #98b9f8;
--primary-accent-9: #d5a6f8;
--primary-accent-10: #f99add;
--primary-gray-1: #e2e2e2;
--primary-gray-2: #c6c6c6;
--primary-gray-3: #ababab;
--secondary-accent-1: #8b123c;
--secondary-accent-2: #6a3b11;
--secondary-accent-3: #514610;
--secondary-accent-4: #384d10;
--secondary-accent-5: #115133;
--secondary-accent-6: #124f49;
--secondary-accent-7: #144d5a;
--secondary-accent-8: #17477e;
--secondary-accent-9: #6f1995;
--secondary-accent-10: #81156a;
--secondary-gray-1: #1b1b1b;
--secondary-gray-2: #303030;
--secondary-gray-3: #474747;
--transparent-accent-1: #000a;
}

1
source/index.html
View File

@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bauke</title>
<link rel="stylesheet" href="css/modern-normalize.css">
<link rel="stylesheet" href="css/variables.css">
<link rel="stylesheet" href="css/index.css">
</head>

1
source/libraries/index.html
View File

@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Libraries</title>
<link rel="stylesheet" href="../css/modern-normalize.css">
<link rel="stylesheet" href="../css/variables.css">
<link rel="stylesheet" href="../css/index.css">
<link rel="stylesheet" href="../css/libraries.css">
</head>

1
source/userscripts/index.html
View File

@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Userscripts</title>
<link rel="stylesheet" href="../css/modern-normalize.css">
<link rel="stylesheet" href="../css/variables.css">
<link rel="stylesheet" href="../css/index.css">
<link rel="stylesheet" href="../css/userscripts.css">
</head>

1
source/userstyles/index.html
View File

@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Userstyles</title>
<link rel="stylesheet" href="../css/modern-normalize.css">
<link rel="stylesheet" href="../css/variables.css">
<link rel="stylesheet" href="../css/index.css">
<link rel="stylesheet" href="../css/userstyles.css">
</head>