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

chore: remove utility classes + cleanup

Browse source
This commit is contained in:
Cory Dransfeldt 2024-09-15 12:49:33 -07:00
parent 4302f61f8c
commit 8a8de24caa
No known key found for this signature in database
30 changed files with 247 additions and 214 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -83,6 +83,13 @@ p {
}
}
.highlight-text {
color: var(--color-lightest);
background-color: var(--accent-color);
padding: var(--spacing-xs);
border-radius: var(--border-radius-slight);
}
blockquote {
font-size: var(--font-size-lg);
color: var(--gray-dark);
@ -98,7 +105,7 @@ code {
border-radius: var(--border-radius-slight);
}
p:not(.flex-centered):not(.banner p) > svg {
p:not(.banner p) > svg {
margin-bottom: var(--inline-margin-bottom);
}
@ -289,6 +296,7 @@ h6 {
}
.section-header {
display: flex;
margin: var(--spacing-xl) 0 var(--spacing-lg);
line-height: var(--line-height-sm);
@ -470,22 +478,32 @@ article {
}
footer {
& p:first-of-type {
margin: var(--spacing-3xl) 0 var(--spacing-lg);
& .updated {
text-align: center;
font-size: var(--font-size-sm);
margin: var(--spacing-3xl) 0 var(--spacing-lg);
}
& nav {
&.social,
&.sub-pages {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
&.social {
gap: var(--spacing-md);
margin-bottom: var(--spacing-lg);
width: 100%;
& svg {
margin-top: 0;
& .icon > span,
& .active > span {
display: none;
}
& a {
& .active {
display: flex;
}
}
@ -510,7 +528,6 @@ footer {
article {
& h3 {
margin: 0;
display: inline-block;
}
& time {
@ -539,30 +556,4 @@ ul, ol {
height: auto;
width: 100%;
display: block;
}
/* utilities */
.highlight-text {
color: var(--color-lightest);
background-color: var(--accent-color);
padding: var(--spacing-xs);
border-radius: var(--border-radius-slight);
}
.hidden {
display: none !important;
}
.text-centered {
text-align: center !important;
}
.flex-centered {
display: flex;
flex-direction: row;
align-items: center;
}
.justify-centered {
justify-content: center;
}

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

@ -2,7 +2,6 @@
display: grid;
gap: var(--spacing-md);
grid-template-columns: repeat(3, 1fr);
margin-top: var(--spacing-2xl);
@media screen and (min-width: 768px) {
grid-template-columns: repeat(4, 1fr);

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

@ -15,9 +15,6 @@ button,
border-radius: var(--border-radius-full);
padding: var(--spacing-xs) var(--spacing-md);
cursor: pointer;
display: inline-flex;
flex-direction: row;
justify-content: center;
font-size: var(--font-size-base);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-base);

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

@ -7,9 +7,7 @@ input[type="text"],
input[type="email"],
input[type="search"],
textarea {
font-family: var(--font-mono);
font-size: var(--font-size-base);
font-weight: var(--font-weight-base);
font: var(--font-weight-base) var(--font-size-base) var(--font-mono);
line-height: var(--line-height-base);
color: var(--text-color);
background-color: var(--background-color);
@ -47,7 +45,7 @@ select:focus-within {
select {
color: var(--text-color);
border: 1px solid var(--text-color);
border: var(--border-gray);
border-radius: var(--border-radius-slight);
background-color: var(--background-color);
padding: var(--spacing-xs) var(--spacing-sm);
@ -55,12 +53,17 @@ select {
.search__form {
margin-top: 0;
& .search__form--input::-webkit-search-cancel-button {
cursor: pointer;
}
}
.search__results {
margin: 0 0 var(--spacing-base);
padding: 0;
list-style: none;
display: none;
& li {
margin: var(--spacing-sm) 0;

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

@ -66,9 +66,7 @@
height: 100%;
border: var(--border-default);
border-radius: var(--border-radius-slight);
transition-property: border-color;
transition-timing-function: var(--transition-ease-in-out);
transition-duration: var(--transition-duration-default);
transition: border-color var(--transition-duration-default) var(--transition-ease-in-out);
}
}
@ -104,8 +102,8 @@
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 6;
overflow: hidden;
text-overflow: ellipsis;
overflow: hidden;
}
}
}

232
src/assets/styles/components/menu.css
View file

@ -1,141 +1,147 @@
.menu-primary {
menu {
display: flex;
flex-direction: row;
list-style: none;
margin: 0;
padding: 0;
gap: var(--spacing-md);
align-items: center;
& > li {
margin: 0;
& .menu-primary {
display: flex;
& .icon > svg,
& .active > svg {
display: block;
}
& .icon > span,
& .active > span {
display: none;
}
}
}
.menu-button-container {
display: none;
outline: none;
margin-left: var(--spacing-md);
& svg {
cursor: pointer;
}
&:focus,
&:focus-within {
outline: var(--outline-default);
border-radius: var(--border-radius-slight);
}
&:hover svg,
&:focus svg,
&:focus-within svg,
&:active svg {
stroke: var(--accent-color-hover);
}
}
#menu-toggle {
display: none;
&:checked + .menu-button-container {
& .menu-closed {
display: none;
}
& .menu-open {
display: block;
}
}
&:not(:checked) + .menu-button-container {
& .menu-closed {
display: block;
}
& .menu-open {
display: none;
}
}
}
@media (max-width: 768px) {
.menu-primary {
position: absolute;
top: 0;
left: 0;
gap: 0;
margin-top: calc(var(--spacing-3xl) * 2.25);
flex-direction: column;
width: 100%;
z-index: 3;
flex-direction: row;
list-style: none;
margin: 0;
padding: 0;
gap: var(--spacing-md);
& > li {
overflow: hidden;
align-items: center;
justify-content: center;
margin: 0;
padding: var(--spacing-sm) 0;
width: 100%;
color: var(--text-color);
background: var(--background-color);
display: flex;
& .icon > svg,
& .active > svg {
display: none;
display: block;
}
& .icon > span,
& .active > span {
display: inline;
display: none;
}
}
}
#menu-toggle ~ .menu-primary li {
height: 0;
border: 0;
padding: 0;
}
& .menu-button-container {
display: none;
outline: none;
margin-left: var(--spacing-md);
#menu-toggle:checked ~ .menu-primary li {
border-bottom: var(--border-gray);
height: calc(var(--sizing-3xl) * 1.5);
&:first-child {
border-top: var(--border-gray);
}
& a,
& .active {
font-size: var(--font-size-lg);
}
&:focus a,
&:focus-within a {
outline: none;
& svg {
cursor: pointer;
}
&:focus,
&:focus-within {
border-top: var(--outline-default);
border-bottom: var(--outline-default);
outline: var(--outline-default);
border-radius: var(--border-radius-slight);
}
&:hover svg,
&:focus svg,
&:focus-within svg,
&:active svg {
stroke: var(--accent-color-hover);
}
}
.menu-button-container {
display: unset;
width: var(--sizing-svg-base);
height: var(--sizing-svg-base);
& #menu-toggle {
display: none;
&:checked + .menu-button-container {
& .menu-closed {
display: none;
}
& .menu-open {
display: block;
}
}
&:not(:checked) + .menu-button-container {
& .menu-closed {
display: block;
}
& .menu-open {
display: none;
}
}
}
@media (max-width: 768px) {
.menu-primary {
position: absolute;
top: 0;
left: 0;
gap: 0;
margin-top: calc(var(--spacing-3xl) * 2.25);
flex-direction: column;
width: 100%;
z-index: 3;
& > li {
overflow: hidden;
align-items: center;
justify-content: center;
margin: 0;
padding: var(--spacing-sm) 0;
width: 100%;
color: var(--text-color);
background: var(--background-color);
& .icon > svg,
& .active > svg {
display: none;
}
& .icon > span,
& .active > span {
display: inline;
}
}
}
#menu-toggle ~ .menu-primary li {
height: 0;
border: 0;
padding: 0;
}
#menu-toggle:checked ~ .menu-primary li {
border-bottom: var(--border-gray);
height: calc(var(--sizing-3xl) * 1.5);
&:first-child {
border-top: var(--border-gray);
}
& a,
& .active {
font-size: var(--font-size-lg);
}
&:focus a,
&:focus-within a {
outline: none;
}
&:focus,
&:focus-within {
border-top: var(--outline-default);
border-bottom: var(--outline-default);
}
}
.menu-button-container {
display: unset;
width: var(--sizing-svg-base);
height: var(--sizing-svg-base);
}
}
}

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

@ -2,7 +2,7 @@
width: 100%;
height: 100%;
inset: 0;
background: #000000b3;
background: var(--gray-overlay);
position: fixed;
z-index: 3;

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

@ -1,4 +1,7 @@
.pagination {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
& button {
@ -11,6 +14,11 @@
display: flex;
}
& p {
text-align: center;
margin: 0;
}
& span.disabled svg[data-tablericon-name^="arrow-"] {
cursor: not-allowed;
stroke: color-mix(in srgb, var(--text-color), transparent 50%);

2
src/assets/styles/components/progress-bar.css
View file

@ -2,7 +2,7 @@
display: flex;
height: var(--sizing-lg);
width: 100%;
background-color: #d9dee499;
background-color: var(--gray-background-transparent);
border-radius: var(--border-radius-full);
& .progress-bar {

8
src/assets/styles/components/tab-buttons.css
View file

@ -1,3 +1,5 @@
#tracks-recent,
#tracks-window,
#tracks-recent ~ .tracks-recent,
#tracks-window ~ .tracks-window {
display: none;
@ -8,9 +10,9 @@
display: block;
}
input[id="tracks-recent"] ~ [for="tracks-recent"],
input[id="tracks-window"] ~ [for="tracks-window"] {
margin-bottom: var(--spacing-base);
input[id="tracks-recent"] ~ .tracks-recent,
input[id="tracks-window"] ~ .tracks-window {
margin-top: var(--spacing-base);
}
input[id="tracks-recent"] ~ [for="tracks-recent"]:has(+ [for="tracks-window"]) {

2
src/assets/styles/defaults/fonts.css
View file

@ -1,5 +1,5 @@
@font-face {
font-family: MonoLisa;
src: url('/assets/fonts/MonoLisa.min.woff2') format('woff2');
font-display: optional
font-display: optional;
}

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

@ -30,6 +30,10 @@
--gray-lighter: var(--gray-100);
--gray-dark: var(--gray-950);
/* semi-transparent overlay color */
--gray-overlay: #000000b3;
--gray-background-transparent: #d9dee499;
/* base theme */
--color-lightest: var(--gray-50);
--color-darkest: var(--gray-1000);

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

@ -7,9 +7,12 @@
}
.avatar-wrapper {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-bottom: var(--spacing-sm);
width: 100%;
justify-content: center;
& .interior {
display: flex;
@ -20,4 +23,8 @@
image-rendering: pixelated;
}
}
}
.about-title {
text-align: center;
}

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

@ -6,6 +6,11 @@
flex-direction: row;
}
& label.hp,
& label > span {
display: none;
}
& textarea {
height: calc(var(--sizing-3xl) * 5);
resize: none;

2
src/assets/styles/pages/watching.css
View file

@ -126,6 +126,8 @@ a:active > .watching.hero::after {
}
.subheader {
display: flex;
align-items: center;
gap: var(--spacing-xs);
}

8
src/assets/styles/pages/webrings.css
View file

@ -1,7 +1,15 @@
.webring-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
margin: var(--margin-vertical-base-horizontal-zero);
& .webring-navigation {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-sm);
& a {