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

chore: clean up css — generic styles where they make sense; remove deprecated styles, fragments of utility nonsense etc

Browse source
This commit is contained in:
Cory Dransfeldt 2024-06-14 14:30:43 -07:00
parent d73d791989
commit 8708b71227
No known key found for this signature in database
54 changed files with 137 additions and 244 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -95,10 +95,6 @@ sup.footnote-ref {
}
}
.footnote-item a {
text-decoration: none;
}
strong,
blockquote {
font-weight: var(--font-weight-bold);
@ -191,15 +187,7 @@ h6 { font-size: var(--font-size-sm) }
}
.section-header-buttons {
margin: var(--sizing-3xl) 0 var(--sizing-lg);
&.reduced-margin {
margin: var(--sizing-md) 0 var(--sizing-lg);
}
&.no-top-margin {
margin: 0 0 var(--sizing-lg);
}
margin: var(--sizing-md) 0 var(--sizing-lg);
& > button {
margin-bottom: var(--sizing-sm) !important;
@ -215,10 +203,7 @@ hr {
height: 1px;
background-color: var(--gray-light);
border: 0;
&.large-spacing {
margin: var(--sizing-base) 0;
}
margin: var(--sizing-base) 0;
}
/* tables */
@ -460,6 +445,16 @@ article {
margin-right: var(--sizing-xs);
}
& .time-wrapper {
gap: var(--sizing-xs);
& > svg {
width: var(--sizing-lg);
height: var(--sizing-lg);
stroke: var(--gray-dark) !important;
}
}
& [rel="author"] {
margin-bottom: var(--sizing-xs);
}
@ -491,20 +486,11 @@ svg {
stroke-width: var(--stroke-width-default);
}
.icon-small > svg {
width: var(--sizing-lg);
height: var(--sizing-lg);
}
.icon-center-vertical > svg {
display: inline;
vertical-align: middle;
}
.icon-light > svg {
stroke: var(--gray-dark) !important;
}
/* lists */
ul, ol {
list-style-position: inside;
@ -528,16 +514,6 @@ li {
margin-bottom: 0;
}
}
&.reduced-spacing {
margin-top: 0;
margin-bottom: var(--sizing-3xl);
padding-left: 0;
& li:first-of-type {
margin-top: 0;
}
}
}
.link-list-header {
@ -550,12 +526,6 @@ li {
height: auto;
display: block;
width: 100%;
& > * {
display: block;
width: 100%;
height: auto;
}
}
/* pages */
@ -602,14 +572,6 @@ li {
flex-wrap: wrap;
}
.gap-xs { gap: var(--sizing-xs) }
.gap-sm { gap: var(--sizing-sm) }
.gap-md { gap: var(--sizing-md) }
.gap-base { gap: var(--sizing-base) }
.gap-xl { gap: var(--sizing-xl) }
.gap-2xl { gap: var(--sizing-2xl) }
.gap-3xl { gap: var(--sizing-3xl) }
/* screens: md */
@media screen and (min-width: 768px) {
h1 { font-size: var(--font-size-3xl) }

8
src/assets/styles/components/addon-links.css
View file

@ -1,24 +1,24 @@
.addon-links {
display: grid;
gap: var(--sizing-sm);
grid-template-columns: repeat(1,minmax(0,1fr));
grid-template-columns: repeat(1, 1fr);
& div > h2 {
margin-top: 0;
}
& div:last-of-type h2 {
& div:last-of-type h2 {
margin-top: var(--sizing-base);
}
&.link-list {
& .link-list {
margin-bottom: 0;
}
}
@media screen and (min-width: 768px) {
.addon-links {
grid-template-columns: repeat(2,minmax(0,1fr));
grid-template-columns: repeat(2, 1fr);
& div:last-of-type h2 {
margin-top: 0;

10
src/assets/styles/components/badge-grid.css
View file

@ -1,21 +1,21 @@
.badge-grid {
display: grid;
gap: var(--sizing-md);
grid-template-columns: repeat(3,minmax(0,1fr));
grid-template-columns: repeat(3, 1fr);
margin-top: var(--sizing-2xl);
& > * {
& > * {
display: flex;
justify-content: center;
}
img {
& img {
image-rendering: pixelated;
}
}
@media screen and (min-width: 768px) {
.badge-grid {
grid-template-columns: repeat(4,minmax(0,1fr));
grid-template-columns: repeat(4, 1fr);
}
}
}

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

@ -27,73 +27,41 @@
border-color: var(--gray-light);
}
&.warning {
border-color: var(--warning);
& p a:hover,
& p a:active,
& p a:focus {
color: var(--warning);
}
& svg {
stroke: var(--warning);
}
}
&.error {
border-color: var(--error);
& p a:hover,
& p a:active,
& p a:focus {
color: var(--error);
}
& svg {
stroke: var(--error);
}
}
&.npm {
border-color: var(--brand-npm);
& p a:hover,
& p a:active,
& p a:focus {
color: var(--brand-npm);
}
& svg {
stroke: var(--brand-npm);
}
}
&.github {
border-color: var(--brand-github);
& p a:hover,
& p a:active,
& p a:focus {
color: var(--brand-github);
}
& svg {
stroke: var(--brand-github);
}
}
&.warning,
&.error,
&.npm,
&.github,
&.rss {
border-color: var(--brand-rss);
&.warning {
--border-color: var(--warning);
}
&.error {
--border-color: var(--error);
}
&.npm {
--border-color: var(--brand-npm);
}
&.github {
--border-color: var(--brand-github);
}
&.rss {
--border-color: var(--brand-rss);
}
border-color: var(--border-color);
& p a:hover,
& p a:active,
& p a:focus {
color: var(--brand-rss);
color: var(--border-color);
}
& svg {
stroke: var(--brand-rss);
stroke: var(--border-color);
}
}
}

14
src/assets/styles/components/buttons.css
View file

@ -1,5 +1,5 @@
button {
&:not(.theme-toggle, .share) {
&:not(.theme-toggle) {
border-radius: var(--rounded-full);
padding: var(--sizing-sm) var(--sizing-lg);
margin: 0 var(--sizing-xs) var(--sizing-md) 0;
@ -17,9 +17,9 @@ button {
transition-property: all;
}
&:not(.theme-toggle, .share, .active):hover,
&:not(.theme-toggle, .share, .active):active,
&:not(.theme-toggle, .share, .active):focus {
&:not(.theme-toggle, .active):hover,
&:not(.theme-toggle, .active):active,
&:not(.theme-toggle, .active):focus {
background-color: var(--accent-color-hover);
border-color: var(--accent-color-hover);
transition-timing-function: var(--transition-ease-in-out);
@ -37,9 +37,9 @@ button {
background: transparent;
}
&.secondary:not(.theme-toggle, .share):hover,
&.secondary:not(.theme-toggle, .share):active,
&.secondary:not(.theme-toggle, .share):focus {
&.secondary:not(.theme-toggle):hover,
&.secondary:not(.theme-toggle):active,
&.secondary:not(.theme-toggle):focus {
color: var(--accent-color-hover);
background: transparent;
}

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

@ -36,7 +36,6 @@ textarea:focus {
list-style: none;
& li {
margin-top: var(--sizing-sm);
margin-bottom: var(--sizing-sm);
margin: var(--sizing-sm) 0;
}
}

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

@ -1,18 +0,0 @@
.mastodon-post-wrapper {
border-bottom: 1px solid var(--gray-light);
margin-bottom: var(--sizing-base);
padding-bottom: var(--sizing-base);
& dl {
display: flex;
flex-direction: row;
}
& dd {
margin-left: var(--sizing-xs);
&:not(:last-child) {
margin-right: var(--sizing-lg);
}
}
}

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

@ -43,7 +43,7 @@
content: '';
top: 0;
left: 1px;
box-shadow: inset 0 -70px 50px -40px #000;
box-shadow: inset 0 -70px 50px -40px var(--black);
width: calc(100% - 2px);
height: calc(100% - 1px);
}

51
src/assets/styles/components/music-chart.css
View file

@ -2,6 +2,9 @@
margin-bottom: var(--sizing-base);
& .item {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
&:not(:last-of-type) {
@ -15,19 +18,23 @@
& img {
border: 1px solid var(--accent-color);
}
& img {
width: calc(var(--sizing-3xl) * 1.5);
height: calc(var(--sizing-3xl) * 1.5);
}
& .meta {
& .meta,
& .presentation {
justify-content: start;
gap: var(--sizing-md);
width: calc(55% - var(--sizing-lg));
}
& .meta {
display: flex;
flex-direction: row;
align-items: center;
}
& .meta-text {
display: flex;
flex-direction: column;
@ -37,37 +44,28 @@
& .title {
font-weight: var(--font-weight-bold);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
line-height: 1.5;
}
& .title,
& .subtext,
& .subtext p {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
& .subtext p,
& .timestamp {
line-height: 1.5;
}
& .subtext,
& .timestamp {
font-size: var(--font-size-sm);
}
& .title,
& .subtext,
& .timestamp {
line-height: 1.5;
white-space: nowrap;
}
& .timestamp {
margin-left: var(--sizing-lg);
text-align: right;
white-space: nowrap;
}
& .presentation {
display: flex;
flex-direction: row;
width: calc(55% - var(--sizing-lg));
}
& .count {
@ -79,17 +77,10 @@
}
}
& .item,
& .meta {
display: flex;
flex-direction: row;
align-items: center;
}
&.grid {
display: grid;
gap: var(--sizing-sm);
grid-template-columns: repeat(2,minmax(0,1fr));
grid-template-columns: repeat(2, 1fr);
margin-bottom: var(--sizing-base);
& .item {
@ -127,7 +118,7 @@
}
&.grid {
grid-template-columns: repeat(3,minmax(0,1fr));
grid-template-columns: repeat(3, 1fr);
& .item img {
width: calc(var(--sizing-3xl) * 2);

2
src/assets/styles/components/youtube-video.css
View file

@ -1,3 +1,3 @@
youtube-video {
margin-block: var(--sizing-base);
margin-bottom: var(--sizing-base);
}

4
src/assets/styles/defaults/animations.css
View file

@ -1,4 +0,0 @@
@keyframes spin {
from { transform: rotate(0deg) }
to { transform: rotate(360deg) }
}

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

@ -6,7 +6,6 @@
/* core defaults */
@import url('./defaults/fonts.css') layer(defaults);
@import url('./defaults/vars.css') layer(defaults);
@import url('./defaults/animations.css') layer(defaults);
/* base styles */
@import url('./base/index.css') layer(base);
@ -31,7 +30,6 @@
@import url('./components/banners.css') layer(components);
@import url('./components/buttons.css') layer(components);
@import url('./components/forms.css') layer(components);
@import url('./components/mastodon-post.css') layer(components);
@import url('./components/media-grid.css') layer(components);
@import url('./components/menu.css') layer(components);
@import url('./components/music-chart.css') layer(components);

1
src/assets/styles/pages/media.css
View file

@ -97,6 +97,7 @@
& .subheader {
font-size: var(--font-size-sm);
gap: var(--sizing-xs)
}
& .header,

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

@ -1,8 +1,4 @@
/* footnotes */
hr.footnotes-sep {
margin: var(--sizing-base) 0;
}
.footnotes-list {
margin-bottom: 0;
padding-left: 0;

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

@ -1,6 +1,6 @@
code[class*="language-"],
pre[class*="language-"] {
color: #e2ecff;
color: var(--blue-100);
background: none;
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
font-family: var(--font-mono);
@ -14,31 +14,31 @@ pre[class*="language-"] {
hyphens: none;
}
/* Code blocks */
/* code blocks */
pre[class*="language-"] {
padding: 1rem;
margin: 1.25rem 0;
padding: var(--sizing-lg);
margin: var(--sizing-xl) 0;
overflow: auto;
background: #1a1d22;
background: var(--gray-darkest);
border: 1px solid var(--gray-light);
}
/* Inline code */
/* inline code */
:not(pre) > code[class*="language-"] {
padding: 0.1rem;
padding: var(--sizing-xs);
white-space: normal;
background: #1a1d22;
background: var(--gray-darkest);
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #7f899b;
color: var(--gray-600);
}
.token.punctuation {
color: #dfe3e8; /* Light gray */
color: var(--gray-200);
}
.namespace {
@ -50,12 +50,12 @@ pre[class*="language-"] {
.token.constant,
.token.symbol,
.token.deleted {
color: #4b88ff;
color: var(--blue-500);
}
.token.boolean,
.token.number {
color: #2458d4;
color: var(--blue-700);
}
.token.selector,
@ -64,7 +64,7 @@ pre[class*="language-"] {
.token.char,
.token.builtin,
.token.inserted {
color: #40a02b;
color: var(--green-500);
}
.token.operator,
@ -73,23 +73,23 @@ pre[class*="language-"] {
.language-css .token.string,
.style .token.string,
.token.variable {
color: #e2ecff;
color: var(--blue-100);
}
.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
color: #df8e1d;
color: var(--orange-600);
}
.token.keyword {
color: #179299;
color: var(--teal-500);
}
.token.regex,
.token.important {
color: #fe640b;
color: var(--orange-500);
}
.token.important,