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

chore: add scrollbar styles; fix units + alignment

Browse source
This commit is contained in:
Cory Dransfeldt 2024-04-15 09:03:07 -07:00
parent 9c5bdf8ef8
commit ab1182725f
No known key found for this signature in database
7 changed files with 45 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/assets/styles/components/banners.css
View file

@ -2,7 +2,7 @@
margin: var(--sizing-base) 0; margin: var(--sizing-base) 0;
padding: var(--sizing-md); padding: var(--sizing-md);
border: 1px solid; border: 1px solid;
border-radius: var(--sizing-xs); border-radius: var(--rounded);
} }
.banner.old-post { .banner.old-post {

2
src/assets/styles/components/forms.css
View file

@ -14,7 +14,7 @@ textarea {
padding: var(--sizing-sm); padding: var(--sizing-sm);
font-size: var(--font-size-base); font-size: var(--font-size-base);
width: 100%; width: 100%;
border-radius: var(--sizing-xs); border-radius: var(--rounded);
outline: none; outline: none;
margin-bottom: var(--sizing-base); margin-bottom: var(--sizing-base);
font-weight: var(--font-weight-base); font-weight: var(--font-weight-base);

4
src/assets/styles/components/link-peek.css
View file

@ -9,7 +9,7 @@ link-peek:defined figure {
gap: 1rem; gap: 1rem;
max-inline-size: max-content; max-inline-size: max-content;
border: 1px solid var(--gray-light); border: 1px solid var(--gray-light);
border-radius: var(--sizing-xs); border-radius: var(--rounded);
padding: 1rem; padding: 1rem;
margin: 0 0 var(--sizing-base); margin: 0 0 var(--sizing-base);
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
@ -32,5 +32,5 @@ link-peek img[data-key="data.logo.url"] {
link-peek img[data-key="data.image.url"] { link-peek img[data-key="data.image.url"] {
max-inline-size: 100%; max-inline-size: 100%;
block-size: auto; block-size: auto;
border-radius: var(--sizing-xs); border-radius: var(--rounded);
} }

2
src/assets/styles/components/media-grid.css
View file

@ -84,7 +84,7 @@
.media__grid img { .media__grid img {
border: 1px solid var(--accent-color); border: 1px solid var(--accent-color);
border-radius: var(--sizing-xs); border-radius: var(--rounded);
transition-property: border-color; transition-property: border-color;
transition-timing-function: var(--transition-ease-in-out); transition-timing-function: var(--transition-ease-in-out);
transition-duration: 300ms; transition-duration: 300ms;

2
src/assets/styles/components/track-chart.css
View file

@ -51,7 +51,7 @@
.track__chart--item img { .track__chart--item img {
border: 1px solid var(--accent-color); border: 1px solid var(--accent-color);
border-radius: var(--sizing-xs); border-radius: var(--rounded);
} }
.track__chart--item img, .track__chart--item img,

42
src/assets/styles/index.css
View file

@ -18,6 +18,37 @@ html {
background: var(--selection-color); background: var(--selection-color);
} }
/* scrollbars */
body,
html {
scrollbar-width: thin;
scrollbar-color: var(--accent-color) var(--gray-light);
}
::-webkit-scrollbar {
width: var(--sizing-xs);
height: var(--sizing-xs);
}
body::-webkit-scrollbar {
width: var(--sizing-md);
height: var(--sizing-md);
}
::-webkit-scrollbar-thumb {
background: var(--accent-color);
border-radius: var(--rounded-full);
}
::-webkit-scrollbar-track {
background-color: var(--gray-light);
}
::-webkit-scrollbar-button {
background-color: var(--accent-color);
border-radius: var(--rounded);
}
p, p,
blockquote { blockquote {
line-height: var(--line-height-lg); line-height: var(--line-height-lg);
@ -113,12 +144,12 @@ hr.large__spacing {
/* tables */ /* tables */
table { table {
display: block; display: block;
overflow-x: auto; overflow-x: scroll;
width: 100%; width: 100%;
max-width: fit-content; max-width: fit-content;
margin: 0 auto; margin: 0 auto;
white-space: nowrap; white-space: nowrap;
border-radius: var(--sizing-xs); border-radius: var(--rounded);
border: 1px solid var(--gray-light); border: 1px solid var(--gray-light);
} }
@ -375,7 +406,7 @@ li {
/* images */ /* images */
.image__banner { .image__banner {
border: 1px solid var(--accent-color); border: 1px solid var(--accent-color);
border-radius: var(--sizing-xs); border-radius: var(--rounded);
height: auto; height: auto;
} }
@ -430,8 +461,9 @@ select-pagination {
.select select, .select select,
select-pagination, select-pagination,
select-pagination select { select-pagination select {
min-height: calc(var(--sizing-3xl) * 1.25); min-width: calc(var(--sizing-3xl) * 4);
min-width: calc(var(--sizing-3xl) * 4);; padding-top: var(--sizing-xs);
padding-bottom: var(--sizing-xs);
} }
.select select, .select select,

4
src/assets/styles/plugins/prism.css
View file

@ -20,7 +20,7 @@ pre[class*="language-"] {
padding: 1rem; padding: 1rem;
margin: 1.25rem 0; margin: 1.25rem 0;
overflow: auto; overflow: auto;
border-radius: var(--sizing-xs); border-radius: var(--rounded);
} }
:not(pre) > code[class*="language-"], :not(pre) > code[class*="language-"],
@ -31,7 +31,7 @@ pre[class*="language-"] {
/* Inline code */ /* Inline code */
:not(pre) > code[class*="language-"] { :not(pre) > code[class*="language-"] {
padding: 0.1rem; padding: 0.1rem;
border-radius: var(--sizing-xs); border-radius: var(--rounded);
white-space: normal; white-space: normal;
} }