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

feat: design + perf + tags etc.

Browse source
This commit is contained in:
Cory Dransfeldt 2024-03-01 14:00:31 -08:00
parent 93f3506f83
commit 6c63611198
No known key found for this signature in database
44 changed files with 279 additions and 299 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/assets/styles/components/banner-old-post.css → src/assets/styles/components/banners.css
View file

@ -1,19 +1,32 @@
.banner__old-post {
.banner {
margin: 1rem 0;
padding: .75rem;
border: 1px solid var(--gray-light);
border: 1px solid;
border-radius: var(--rounded-lg);
}
.banner__old-post p {
.banner.old-post {
border-color: var(--gray-light);
}
.banner.npm {
border-color: var(--brand-npm);
}
.banner.npm svg {
stroke: var(--brand-npm);
}
.banner p {
font-size: var(--font-size-sm);
line-height: var(--line-height-sm);
margin: 0;
}
.banner__old-post p > svg {
.banner p > svg {
display: inline;
vertical-align: middle;
height: .875rem;
width: .875rem;
margin-right: .125rem;
}

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

@ -19,7 +19,7 @@ textarea {
/* necessary for pagefind overrides */
outline: none;
margin-bottom: 1.5rem;
margin-bottom: 1.25rem;
font-weight: 400 !important;
line-height: var(--line-height-base);
transition-property: border-color;
@ -32,4 +32,32 @@ input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus {
border: 1px solid var(--accent-color-hover) !important;
}
button:not(.theme__toggle, .share, .pagefind-ui__search-clear) {
border-radius: var(--rounded-full);
padding: .5rem 1rem;
margin: 0 .25rem .75rem 0;
cursor: pointer;
display: inline-flex;
flex-direction: row;
justify-content: center;
font-size: var(--font-size-base);
font-weight: 700;
line-height: var(--line-height-base);
color: var(--color-lightest);
background-color: var(--accent-color);
appearance: none;
border: none;
text-decoration: none;
transition-property: background-color;
}
button:not(.theme__toggle, .share, .pagefind-ui__search-clear):hover,
button:not(.theme__toggle, .share, .pagefind-ui__search-clear):active,
button:not(.theme__toggle, .share, .pagefind-ui__search-clear):focus {
color: var(--color-lightest);
background-color: var(--accent-color-hover) !important;
transition-timing-function: var(--transition-ease-in-out);
transition-duration: var(--transition-duration-default);
}

4
src/assets/styles/components/mastodon-post.css
View file

@ -1,7 +1,7 @@
.mastodon-post-wrapper {
border-bottom: 1px solid var(--gray-light);
margin-bottom: 2rem;
padding-bottom: 1rem;
margin-bottom: 1.25rem;
padding-bottom: .25rem;
}
dl {

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

@ -5,8 +5,7 @@
}
.now__section--header {
margin-top: 2rem;
margin-bottom: 1rem;
margin: 2rem 0 1rem;
}
.media__grid {

8
src/assets/styles/components/pagefind.css
View file

@ -1,5 +1,5 @@
.pagefind-ui {
margin-bottom: 2rem;
margin-bottom: 1.25rem;
--pagefind-ui-primary: var(--accent-color);
--pagefind-ui-text: var(--text-color);
--pagefind-ui-background: var(--color-lightest);
@ -60,6 +60,12 @@
background-color: transparent !important;
}
.pagefind-ui__search-clear:hover,
.pagefind-ui__search-clear:focus,
.pagefind-ui__search-clear:active {
color: var(--accent-color-hover) !important;
}
.pagefind-ui__result-title {
margin-bottom: .25rem !important;
}

4
src/assets/styles/components/paginator.css
View file

@ -8,12 +8,12 @@
padding-right: 0;
}
.pagination button > svg {
.pagination a > svg {
stroke: var(--accent-color);
cursor: pointer;
}
.pagination button.disabled > svg {
.pagination span.disabled svg {
cursor: not-allowed;
stroke: color-mix(in srgb, var(--text-color), transparent 50%);
stroke-width: var(--stroke-width-default);

3
src/assets/styles/components/popular-posts.css
View file

@ -1,4 +1,3 @@
.popular-posts h2 {
margin-top: 2rem;
margin-bottom: 1rem;
margin: 2rem 0 1rem;
}

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

@ -1,6 +1,9 @@
body,
html {
color: var(--text-color);
font-family: var(--font-sans);
font-size: var(--font-size-base);
line-height: var(--line-height-base);
background: var(--background-color);
margin: 0;
}
@ -33,7 +36,7 @@ blockquote {
stroke: var(--text-color);
}
:is(h1, h2, h3, h4, h5, h6, .pill--button) > svg {
:is(h1, h2, h3, h4, h5, h6) > svg {
margin-right: .25rem;
stroke-width: var(--stroke-width-bold) !important;
}
@ -42,11 +45,26 @@ sup.footnote-ref {
line-height: var(--line-height-xs);
}
strong,
blockquote {
font-weight: 700;
}
em,
blockquote {
font-style: italic;
}
/* links */
a {
transition-property: color;
}
a,
.active {
color: var(--accent-color);
}
a:hover,
a:focus,
a:active,
@ -56,6 +74,13 @@ a:active,
color: var(--accent-color-hover);
}
a:hover,
a:focus,
a:active {
transition-timing-function: var(--transition-ease-in-out);
transition-duration: var(--transition-duration-default);
}
:is(
a:has(svg):hover,
a:has(svg):active,
@ -101,6 +126,10 @@ table {
border: 1px solid var(--gray-light);
}
table a {
text-decoration: none;
}
table,
th,
td {
@ -124,6 +153,7 @@ td {
}
th {
font-weight: 700;
background-color: var(--gray-lighter);
text-align: center;
}
@ -132,6 +162,8 @@ th {
.main__title {
width: 100%;
padding-top: 2rem;
display: flex;
flex-direction: column;
}
.main__title h1 {
@ -209,6 +241,8 @@ nav ul li .active svg:hover {
.main__wrapper {
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
@ -222,14 +256,11 @@ main {
.now__topper,
article {
border-bottom: 1px solid var(--gray-light);
margin-bottom: 2rem;
padding-bottom: 1rem;
margin-bottom: 1.25rem;
}
.now__topper h2 {
font-size: var(--font-size-xl);
.now__topper p:first-child {
margin-top: 0;
margin-bottom: 1rem;
}
footer nav:first-child {
@ -259,60 +290,42 @@ footer nav:last-child span:not(.active) {
margin-right: .25rem;
}
:is(.main__title, footer nav:last-child) a {
color: var(--text-color);
text-decoration: none;
}
.highlight-text {
padding: .125rem;
color: var(--color-lightest);
background-color: var(--accent-color);
padding: .25rem;
}
code {
padding: .125rem;
padding: .25rem;
color: var(--text-color-inverted);
background-color: var(--background-color-inverted);
}
/* buttons */
.pill--button {
border-radius: var(--rounded-full);
padding: .5rem 1rem;
margin: 0 .25rem .75rem 0;
cursor: pointer;
transition-property: background-color;
display: inline-flex;
flex-direction: row;
}
.pill--button.pill--button__small {
padding: .25rem .5rem;
margin-right: .5rem;
margin-bottom: .5rem;
font-size: var(--font-size-sm);
line-height: var(--line-height-sm);
display: inline-block;
}
.pill--button:hover,
.pill--button:active,
.pill--button:focus {
background-color: var(--accent-color-hover) !important;
}
.pill--button > svg,
.pill--button svg:hover,
.pill--button svg:active,
.pill--button svg:focus,
.pill--button:hover svg,
.pill--button:active svg,
.pill--button:focus svg {
stroke: var(--color-lightest) !important;
}
/* articles */
article h2 {
color: var(--text-color);
line-height: var(--line-height-2xl);
margin: 0 0 .375rem;
transition-property: color;
}
article h2:hover,
article h2:focus,
article h2:active {
color: var(--accent-color-hover);
transition-timing-function: var(--transition-ease-in-out);
transition-duration: var(--transition-duration-default);
}
article [rel="author"],
article time {
color: var(--gray-dark);
font-size: var(--font-size-sm);
line-height: var(--line-height-sm);
margin-right: .25rem;
@ -322,6 +335,16 @@ article [rel="author"] {
margin-bottom: .25rem;
}
.tag:not(:last-child) {
margin-right: .125rem;
}
/* buttons */
button {
appearance: none;
border: none;
}
/* icons */
svg {
stroke-width: var(--stroke-width-default);
@ -395,10 +418,9 @@ li {
text-align: center !important;
}
.fade {
transition-property: opacity;
transition-timing-function: var(--transition-ease-in-out);
transition-duration: var(--transition-duration-default);
.text--small {
font-size: var(--font-size-sm);
line-height: var(--line-height-sm);
}
.flex--centered {
@ -407,88 +429,14 @@ li {
align-items: center;
}
.justify--centered {
justify-content: center;
}
.flex--wrap {
flex-wrap: wrap
}
/* shared styles */
body,
html,
:is(.main__title, footer nav:last-child) a {
color: var(--text-color);
}
body,
html,
.pill--button {
font-size: var(--font-size-base);
line-height: var(--line-height-base);
}
.main__title,
.main__wrapper,
.contact__wrapper {
display: flex;
flex-direction: column;
}
.highlight-text,
.pill--button,
.pill--button:hover,
.pill--button:active,
.pill--button:focus {
color: var(--color-lightest);
}
.highlight-text,
.pill--button {
background-color: var(--accent-color);
}
blockquote,
strong,
.pill--button,
th {
font-weight: 700;
}
blockquote,
em {
font-style: italic;
}
button,
.pill--button {
appearance: none;
border: none;
}
a,
.active {
color: var(--accent-color);
}
a:hover,
a:focus,
a:active,
.pill--button:hover,
.pill--button:focus,
.pill--button:active {
transition-timing-function: var(--transition-ease-in-out);
transition-duration: var(--transition-duration-default);
}
.pill--button,
:is(.main__title, footer nav:last-child) a,
table a {
text-decoration: none;
}
.pill--button,
footer nav {
justify-content: center;
}
/* screens: md */
@media screen and (min-width: 768px) {
.main__title {
@ -505,10 +453,6 @@ footer nav {
margin-right: .75rem;
}
.now__topper h2 {
font-size: var(--font-size-2xl);
}
main {
max-width: 768px;
}
@ -519,11 +463,6 @@ footer nav {
line-height: var(--line-height-3xl);
}
/* lists */
ul, ol {
padding-left: 2.5rem;
}
footer nav:first-child {
gap: .75rem;
}

6
src/assets/styles/pages/about.css
View file

@ -4,6 +4,7 @@
.avatar__wrapper {
margin-bottom: 1.5rem;
width: 100%;
}
.avatar__wrapper .avatar__wrapper--interior {
@ -22,14 +23,9 @@
overflow: hidden;
}
.avatar__wrapper,
.avatar__wrapper .avatar__wrapper--interior picture > *,
.avatar__wrapper .avatar__wrapper--interior img {
width: 100%;
}
.avatar__wrapper .avatar__wrapper--interior picture > *,
.avatar__wrapper .avatar__wrapper--interior img {
height: 100%;
}

5
src/assets/styles/pages/contact.css
View file

@ -1,3 +1,8 @@
.contact__wrapper {
display: flex;
flex-direction: column;
}
.contact__wrapper textarea {
height: 10rem;
resize: none;

3
src/assets/styles/pages/now.css
View file

@ -16,8 +16,7 @@
}
.now__section--header {
margin-top: 2rem;
margin-bottom: 1rem;
margin: 2rem 0 1rem;
}
.now__section--header:first-of-type {

4
src/assets/styles/pages/post.css
View file

@ -5,7 +5,7 @@
/* footnotes */
hr.footnotes-sep {
margin: 2.5rem 0;
margin: 1.25rem 0;
}
.footnotes-list {
@ -18,7 +18,7 @@ hr.footnotes-sep {
}
.footnotes {
padding-bottom: 1.5rem;
padding-bottom: 1.25rem;
}
.footnote-item > p {