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;
padding: var(--sizing-md);
border: 1px solid;
border-radius: var(--sizing-xs);
border-radius: var(--rounded);
}
.banner.old-post {

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

@ -14,7 +14,7 @@ textarea {
padding: var(--sizing-sm);
font-size: var(--font-size-base);
width: 100%;
border-radius: var(--sizing-xs);
border-radius: var(--rounded);
outline: none;
margin-bottom: var(--sizing-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;
max-inline-size: max-content;
border: 1px solid var(--gray-light);
border-radius: var(--sizing-xs);
border-radius: var(--rounded);
padding: 1rem;
margin: 0 0 var(--sizing-base);
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"] {
max-inline-size: 100%;
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 {
border: 1px solid var(--accent-color);
border-radius: var(--sizing-xs);
border-radius: var(--rounded);
transition-property: border-color;
transition-timing-function: var(--transition-ease-in-out);
transition-duration: 300ms;

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

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

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

@ -18,6 +18,37 @@ html {
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,
blockquote {
line-height: var(--line-height-lg);
@ -113,12 +144,12 @@ hr.large__spacing {
/* tables */
table {
display: block;
overflow-x: auto;
overflow-x: scroll;
width: 100%;
max-width: fit-content;
margin: 0 auto;
white-space: nowrap;
border-radius: var(--sizing-xs);
border-radius: var(--rounded);
border: 1px solid var(--gray-light);
}
@ -375,7 +406,7 @@ li {
/* images */
.image__banner {
border: 1px solid var(--accent-color);
border-radius: var(--sizing-xs);
border-radius: var(--rounded);
height: auto;
}
@ -430,8 +461,9 @@ select-pagination {
.select select,
select-pagination,
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,

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

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