i0uring/page
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 added color-palettes

Browse Source
This commit is contained in:
lunarydess
2024-02-26 17:36:21 +01:00
parent ea0b61e827
commit 5e3e93444e
3 changed files with 273 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
main.css
View File

@@ -8,19 +8,27 @@
/* @formatter:off */
:root {
--accent: 198, 160, 246; /* #c6a0f6 */
--text: 202, 211, 245; /* #cad3f5 */
--sub-text: 184, 192, 224; /* #b8c0e0 */
--base: 36, 39, 58; /* #24273a */
--mantle: 30, 32, 48; /* #1e2030 */
--crust: 24, 25, 38; /* #181926 */
} /* https://github.com/catppuccin/catppuccin | macchiato */
--base : 0, 0, 0;
--mantle : 0, 0, 0;
--crust : 0, 0, 0;
--text : 0, 0, 0;
--pink : 0, 0, 0;
--purple : 0, 0, 0;
--red : 0, 0, 0;
--light_red : 0, 0, 0;
--orange : 0, 0, 0;
--yellow : 0, 0, 0;
--green : 0, 0, 0;
--light_green : 0, 0, 0;
--blue : 0, 0, 0;
--light_blue : 0, 0, 0;
}
/* @formatter:on */
html * {
font-family: Comfortaa, 'Courier New', Courier, monospace;
color: rgb(var(--text));
scrollbar-color: rgb(var(--accent)) rgb(var(--mantle));
scrollbar-color: rgb(var(--purple)) rgb(var(--mantle));
scrollbar-width: auto;
}
@@ -38,7 +46,7 @@ rect {
}
::-webkit-scrollbar-thumb {
background-color: rgb(var(--accent));
background-color: rgb(var(--purple));
border-radius: 50%;
}
@@ -53,13 +61,13 @@ main {
}
::-moz-selection {
background: rgba(var(--accent), 0.3125);
color: rgb(var(--sub-text));
background: rgba(var(--purple), 0.3125);
color: rgb(var(--text));
}
::selection {
background: rgba(var(--accent), 0.3125);
color: rgb(var(--sub-text));
background: rgba(var(--purple), 0.3125);
color: rgb(var(--text));
}
/* base - end */
@@ -111,10 +119,10 @@ main {
@keyframes header_hover_in {
from {
box-shadow: -1px -1px 2px rgba(var(--accent), 0.45),
1px -1px 2px rgba(var(--accent), 0.45),
-1px 1px 2px rgba(var(--accent), 0.45),
1px 1px 2px rgba(var(--accent), 0.45);
box-shadow: -1px -1px 2px rgba(var(--purple), 0.45),
1px -1px 2px rgba(var(--purple), 0.45),
-1px 1px 2px rgba(var(--purple), 0.45),
1px 1px 2px rgba(var(--purple), 0.45);
}
to {
box-shadow: -1px -1px 2px rgba(var(--crust), 1.0),
@@ -132,10 +140,10 @@ main {
1px 1px 2px rgba(var(--crust), 1.0);
}
to {
box-shadow: -1px -1px 2px rgba(var(--accent), 0.45),
1px -1px 2px rgba(var(--accent), 0.45),
-1px 1px 2px rgba(var(--accent), 0.45),
1px 1px 2px rgba(var(--accent), 0.45);
box-shadow: -1px -1px 2px rgba(var(--purple), 0.45),
1px -1px 2px rgba(var(--purple), 0.45),
-1px 1px 2px rgba(var(--purple), 0.45),
1px 1px 2px rgba(var(--purple), 0.45);
}
}
@@ -155,40 +163,40 @@ main {
}
.header_buttons button:hover {
box-shadow: -1px -1px 2px rgba(var(--accent), 0.45),
1px -1px 2px rgba(var(--accent), 0.45),
-1px 1px 2px rgba(var(--accent), 0.45),
1px 1px 2px rgba(var(--accent), 0.45);
box-shadow: -1px -1px 2px rgba(var(--purple), 0.45),
1px -1px 2px rgba(var(--purple), 0.45),
-1px 1px 2px rgba(var(--purple), 0.45),
1px 1px 2px rgba(var(--purple), 0.45);
animation: header_buttons_hover_in 0.45s forwards;
}
@keyframes header_buttons_hover_in {
from {
box-shadow: -1px -1px 2px rgba(var(--accent), 0.0),
1px -1px 2px rgba(var(--accent), 0.0),
-1px 1px 2px rgba(var(--accent), 0.0),
1px 1px 2px rgba(var(--accent), 0.0);
box-shadow: -1px -1px 2px rgba(var(--purple), 0.0),
1px -1px 2px rgba(var(--purple), 0.0),
-1px 1px 2px rgba(var(--purple), 0.0),
1px 1px 2px rgba(var(--purple), 0.0);
}
to {
box-shadow: -1px -1px 2px rgba(var(--accent), 0.45),
1px -1px 2px rgba(var(--accent), 0.45),
-1px 1px 2px rgba(var(--accent), 0.45),
1px 1px 2px rgba(var(--accent), 0.45);
box-shadow: -1px -1px 2px rgba(var(--purple), 0.45),
1px -1px 2px rgba(var(--purple), 0.45),
-1px 1px 2px rgba(var(--purple), 0.45),
1px 1px 2px rgba(var(--purple), 0.45);
}
}
@keyframes header_buttons_hover_out {
from {
box-shadow: -1px -1px 2px rgba(var(--accent), 0.45),
1px -1px 2px rgba(var(--accent), 0.45),
-1px 1px 2px rgba(var(--accent), 0.45),
1px 1px 2px rgba(var(--accent), 0.45);
box-shadow: -1px -1px 2px rgba(var(--purple), 0.45),
1px -1px 2px rgba(var(--purple), 0.45),
-1px 1px 2px rgba(var(--purple), 0.45),
1px 1px 2px rgba(var(--purple), 0.45);
}
to {
box-shadow: -1px -1px 2px rgba(var(--accent), 0.0),
1px -1px 2px rgba(var(--accent), 0.0),
-1px 1px 2px rgba(var(--accent), 0.0),
1px 1px 2px rgba(var(--accent), 0.0);
box-shadow: -1px -1px 2px rgba(var(--purple), 0.0),
1px -1px 2px rgba(var(--purple), 0.0),
-1px 1px 2px rgba(var(--purple), 0.0),
1px 1px 2px rgba(var(--purple), 0.0);
}
}
@@ -226,7 +234,7 @@ main {
.socials {
image-rendering: auto;
color: rgb(var(--accent));
color: rgb(var(--purple));
}
.socials img {
@@ -242,32 +250,32 @@ main {
@keyframes image_buttons_hover_in {
from {
color: rgb(var(--accent));
box-shadow: -1px -1px 2px rgba(var(--accent), 0.0),
1px -1px 2px rgba(var(--accent), 0.0),
-1px 1px 2px rgba(var(--accent), 0.0),
1px 1px 2px rgba(var(--accent), 0.0);
color: rgb(var(--purple));
box-shadow: -1px -1px 2px rgba(var(--purple), 0.0),
1px -1px 2px rgba(var(--purple), 0.0),
-1px 1px 2px rgba(var(--purple), 0.0),
1px 1px 2px rgba(var(--purple), 0.0);
}
to {
box-shadow: -1px -1px 2px rgba(var(--accent), 0.45),
1px -1px 2px rgba(var(--accent), 0.45),
-1px 1px 2px rgba(var(--accent), 0.45),
1px 1px 2px rgba(var(--accent), 0.45);
box-shadow: -1px -1px 2px rgba(var(--purple), 0.45),
1px -1px 2px rgba(var(--purple), 0.45),
-1px 1px 2px rgba(var(--purple), 0.45),
1px 1px 2px rgba(var(--purple), 0.45);
}
}
@keyframes image_buttons_hover_out {
from {
box-shadow: -1px -1px 2px rgba(var(--accent), 0.45),
1px -1px 2px rgba(var(--accent), 0.45),
-1px 1px 2px rgba(var(--accent), 0.45),
1px 1px 2px rgba(var(--accent), 0.45);
box-shadow: -1px -1px 2px rgba(var(--purple), 0.45),
1px -1px 2px rgba(var(--purple), 0.45),
-1px 1px 2px rgba(var(--purple), 0.45),
1px 1px 2px rgba(var(--purple), 0.45);
}
to {
box-shadow: -1px -1px 2px rgba(var(--accent), 0.0),
1px -1px 2px rgba(var(--accent), 0.0),
-1px 1px 2px rgba(var(--accent), 0.0),
1px 1px 2px rgba(var(--accent), 0.0);
box-shadow: -1px -1px 2px rgba(var(--purple), 0.0),
1px -1px 2px rgba(var(--purple), 0.0),
-1px 1px 2px rgba(var(--purple), 0.0),
1px 1px 2px rgba(var(--purple), 0.0);
}
}