cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: scrollbars, alignment, overlays

Browse source
This commit is contained in:
Cory Dransfeldt 2024-10-05 18:01:42 -07:00
parent 60f48549cd
commit 7a79133124
No known key found for this signature in database
3 changed files with 27 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/assets/styles/base/index.css
View file

@ -5,6 +5,11 @@ body {
font-family: var(--font-mono); font-family: var(--font-mono);
} }
html {
scrollbar-width: thin;
scrollbar-color: var(--accent-color) var(--gray-light);
}
body { body {
font-size: var(--font-size-base); font-size: var(--font-size-base);
line-height: var(--line-height-base); line-height: var(--line-height-base);
@ -12,6 +17,23 @@ body {
word-spacing: -.05rem; word-spacing: -.05rem;
} }
::-webkit-scrollbar {
width: var(--sizing-md);
}
::-webkit-scrollbar-track {
background: var(--gray-light);
}
::-webkit-scrollbar-thumb {
background: var(--accent-color);
border-radius: var(--border-radius-full);
}
::-webkit-scrollbar-thumb:hover {
background: var(--accent-color-hover);
}
::selection { ::selection {
color: var(--color-lightest); color: var(--color-lightest);
background: var(--accent-color); background: var(--accent-color);

3
src/assets/styles/components/modal.css
View file

@ -14,7 +14,7 @@
inset: 0; inset: 0;
overflow-y: scroll; overflow-y: scroll;
border-radius: var(--border-radius-slight); border-radius: var(--border-radius-slight);
padding: var(--spacing-lg) var(--spacing-2xl); padding: var(--spacing-lg) var(--spacing-base);
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
max-height: 75%; max-height: 75%;
@ -48,6 +48,7 @@
.modal-toggle, .modal-toggle,
.modal-close { .modal-close {
cursor: pointer; cursor: pointer;
display: inline-flex;
vertical-align: middle; vertical-align: middle;
& svg { & svg {

6
src/assets/styles/defaults/vars.css
View file

@ -175,9 +175,9 @@
--text-shadow-default: rgba(0, 0, 0, 0.7) 0px 0px 10px; --text-shadow-default: rgba(0, 0, 0, 0.7) 0px 0px 10px;
/* modals */ /* modals */
--modal-overlay-background: #ffffffbf; --modal-overlay-background-light: #ffffffbf;
--modal-overlay-background-dark: #000000bf; --modal-overlay-background-dark: #000000bf;
--modal-overlay-background: var(--modal-overlay-background); --modal-overlay-background: var(--modal-overlay-background-light);
/* input accent color */ /* input accent color */
accent-color: var(--accent-color); accent-color: var(--accent-color);
@ -194,7 +194,7 @@
--gray-light: var(--gray-300); --gray-light: var(--gray-300);
--gray-lighter: var(--gray-200); --gray-lighter: var(--gray-200);
--gray-dark: var(--gray-800); --gray-dark: var(--gray-800);
--modal-overlay-background: var(--modal-overlay-background); --modal-overlay-background: var(--modal-overlay-background-light);
--brand-github: var(--brand-github-light); --brand-github: var(--brand-github-light);
--article: var(--article-light); --article: var(--article-light);
--about: var(--about-light); --about: var(--about-light);