phlaym/moshing-mammut
1
0
Fork 0
Code Issues 5 Pull Requests Projects Releases 8 Activity

Implement issues for v1.1.0 #20

Merged
phlaym merged 24 commits from v1.1.0 into main 2023-04-07 15:07:41 +00:00
Conversation 0 Commits 24 Files Changed 54 +62 -25
3 changed files with 62 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a273c8de4b - Show all commits

4
src/lib/components/FooterComponent.svelte
View File

@ -34,7 +34,7 @@
gap: 10px; gap: 10px;
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
background-color: #bbbbcd73; background-color: var(--color-grey-translucent);
padding: 0.3em 1em; padding: 0.3em 1em;
margin: 0 -8px; margin: 0 -8px;
border-radius: 3px; border-radius: 3px;
@ -50,7 +50,7 @@
filter: invert(); filter: invert();
} }
.footer { .footer {
background-color: #6364FF88; background-color: var(--color-grey-translucent);
} }
} }
</style> </style>

19
src/lib/components/LoadMoreComponent.svelte
View File

@ -31,16 +31,27 @@
padding: 0.75em; padding: 0.75em;
border-radius: 3px; border-radius: 3px;
border: none; border: none;
background-color: var(--color-link); background-color: var(--color-button);
color: white; color: var(--color-button-text);
cursor: grab; cursor: grab;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
} }
button:hover:not(:disabled) { button:hover:not(:disabled) {
background-color: var(--color-link-visited); background-color: var(--color-button-hover);
} }
button:hover:not(:disabled):not(:active) {
box-shadow: 4px 4px 3px 0 var(--color-button-shadow);
translate: -2px -2px;
}
button:disabled { button:disabled {
cursor: not-allowed; cursor: not-allowed;
background-color: grey; background-color: var(--color-button-deactivated);
}
button:not(:disabled) {
box-shadow: 2px 2px 1px 0 var(--color-button-shadow);
} }
</style> </style>

64
static/style.css
View File

@ -1,30 +1,56 @@
body { body {
--color-text: #2F0C7A; --color-blue: hsl(259, 82%, 26%);
--color-bg: white; --color-blue-dark: hsl(259, 82%, 10%);
--color-border: #17063B; --color-lavender: hsl(273, 43%, 65%);
--color-link: #563ACC; --color-mauve: hsl(286, 73%, 81%);
--color-link-visited: #858AFA;
color: var(--color-text); --color-grey: hsl(44, 7%, 41%);
background-color: var(--color-bg); --color-grey-translucent: hsla(44, 7%, 41%, 0.2);
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, --color-grey-light: hsl(42, 7%, 72%);
Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --color-red: hsl(7, 100%, 56%);
--color-red-light: hsl(7, 100%, 61%);
--color-red-desat: hsl(7, 20%, 56%);
--color-red-desat-dark: hsl(7, 20%, 30%);
--color-red-desat-desat: hsl(7, 8%, 56%);
--color-text: var(--color-blue);
--color-border: var(--color-grey);
--color-link: var(--color-mauve);
--color-link-visited: var(--color-lavender);
--color-bg: var(--color-grey-light);
--color-button: var(--color-red-light);
--color-button-shadow: var(--color-red-desat-dark);
--color-button-hover: var(--color-red);
--color-button-deactivated: var(--color-red-desat-desat);
--color-button-text: var(--color-blue-dark);
color: var(--color-text);
background-color: var(--color-bg);
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans,
Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
} }
a { a {
color: var(--color-link); color: var(--color-link);
} }
a:visited { a:visited {
color: var(--color-link-visited); color: var(--color-link-visited);
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
body { body {
--color-text: white; --color-text: var(--color-grey-light);
--color-bg: #17063B; --color-border: var(--color-grey-light);
--color-border: white; --color-link: var(--color-mauve);
--color-link: #8A9BF0; --color-link-visited: var(--color-lavender);
--color-link-visited: #C384FB; --color-bg: var(--color-blue);
} --color-button: var(--color-red-light);
--color-button-shadow: var(--color-red-desat);
--color-button-hover: var(--color-red);
--color-button-deactivated: var(--color-red-desat-desat);
--color-button-text: var(--color-blue-dark);
}
} }