Slight minify CSS files

src/assets/css/cassettebeasts.css

@@ -33,10 +33,6 @@
 
 .hero__top-bar,
 .footer,
-.footer a {
+.footer a { color: var(--clr-navbar-link); }
-    color: var(--clr-navbar-link);
-}
 
-.footer a:focus {
+.footer a:focus { outline-color: var(--clr-navbar-link); }
-    outline-color: var(--clr-navbar-link);
-}

src/assets/css/comments.css

@@ -6,9 +6,7 @@
 * File Description: Styles for the guestbook control
 * CSS variables come from https://groundedwren.neocities.org/styles/gwBoilerPlatePersonalization.css
 */
-:root {
+:root { --icon-color: var(--clr-body-txt); }
-    --icon-color: var(--clr-body-txt);
-}
 
 .comment-form {
     display: grid;
@@ -18,9 +16,7 @@
 }
 
 .comment-form,
-.input-horizontal-wrapper {
+.input-horizontal-wrapper { gap: 1em; }
-    gap: 1em;
-}
 
 .comment-form-title {
     text-align: center;
@@ -45,13 +41,9 @@
 }
 
 .input-vertical input:focus,
-.comment-box-container textarea:focus {
+.comment-box-container textarea:focus { outline: 0.15em solid var(--clr-link); }
-    outline: 0.15em solid var(--clr-link);
-}
 
-.comment-box-container textarea {
+.comment-box-container textarea { resize: vertical; }
-    resize: vertical;
-}
 
 .inline-banner {
 	padding: 0.5em;
@@ -63,13 +55,9 @@
     background-color: var(--clr-quote-bg);
 }
 
-.inline-banner.warning {
+.inline-banner.warning { background-color: #9e0f00; }
-    background-color: #9e0f00;
-}
 
-.inline-banner.warning a {
+.inline-banner.warning a { color: unset; }
-    color: unset;
-}
 
 .form-footer,
 .comment-footer {
@@ -77,9 +65,7 @@
     gap: 0.5em;
 }
 
-.form-footer {
+.form-footer { justify-content: flex-end; }
-    justify-content: flex-end;
-}
 
 .form-footer input,
 .comment-footer button,
@@ -93,23 +79,12 @@
 }
 
 .comment-footer button,
-.show-comment {
+.show-comment { font-size: initial; }
-    font-size: initial;
-}
 
-gw-comment-card:not(.collapsed) .show-comment {
+gw-comment-card:not(.collapsed) .show-comment { display: none; }
-	display: none;
+gw-comment-card.collapsed .comment-article > *:not(.comment-header) { display: none !important; }
-}
+gw-comment-card.collapsed .show-comment { display: block; }
-gw-comment-card.collapsed .comment-article > *:not(.comment-header) {
+gw-comment-card.collapsed .comment-header-right time { display: none; }
-	display: none !important;
-}
-gw-comment-card.collapsed .show-comment {
-	display: block;
-}
-
-gw-comment-card.collapsed .comment-header-right time {
-	display: none;
-}
 
 .comments-container {
     display: flex;
@@ -131,9 +106,7 @@ gw-comment-card.collapsed .comment-header-right time {
     margin: 0.5em 0;
 }
 
-.comment-article > button {
+.comment-article > button { max-width: fit-content; }
-    max-width: fit-content;
-}
 
 .comment-header {
     display: grid;

src/assets/css/components.css

@@ -74,9 +74,7 @@
 
 .link-btn,
 .link-btn:hover,
-.link-btn:visited {
+.link-btn:visited { text-decoration: none; }
-    text-decoration: none;
-}
 
 .link-btn:hover {
     background: var(--clr-link-btn-hover);
@@ -89,30 +87,14 @@
 }
 
 /* Content Accordion */
-* + .content-accordion {
+* + .content-accordion { margin-top: var(--sz-paragraph-margin); }
-    margin-top: var(--sz-paragraph-margin);
+.content-accordion { padding: 0.5em 0; }
-}
+.content-accordion__summary { font-weight: 700; }
-
+.content-accordion__content { padding: 0.5em 1em; }
-.content-accordion {
+.content-accordion__content p + p { margin-top: 1em; }
-    padding: 0.5em 0;
-}
-
-.content-accordion__summary {
-    font-weight: 700;
-}
-
-.content-accordion__content {
-    padding: 0.5em 1em;
-}
-
-.content-accordion__content p + p {
-    margin-top: 1em;
-}
 
 /* Content warning accordion */
-* + .contnet-warning {
+* + .contnet-warning { margin-top: var(--sz-paragraph-margin); }
-    margin-top: var(--sz-paragraph-margin);
-}
 
 .contnet-warning {
     border: 0.1em solid var(--clr-title-border);
@@ -132,13 +114,9 @@
 }
 
 .contnet-warning__warning:hover,
-.contnet-warning__warning:focus {
+.contnet-warning__warning:focus { --stripe-color: var(--clr-cw-hover); }
-    --stripe-color: var(--clr-cw-hover);
-}
 
-.contnet-warning__content {
+.contnet-warning__content { padding: 1em; }
-    padding: 1em;
-}
 
 /* Adoptables wrapper */
 .adoptables {

src/assets/css/content.css

@@ -1,18 +1,12 @@
 /* MAIN CONTENT */
 content-wrapper,
-.content--divided {
+.content--divided { display: grid; }
-    display: grid;
-}
 
 content-wrapper,
-.content--divided {
+.content--divided { gap: 1rem; }
-    gap: 1rem;
-}
 
 .content:not(.content--divided),
-.content__section {
+.content__section { padding: 1.5rem var(--sz-main-padding); }
-    padding: 1.5rem var(--sz-main-padding);
-}
 
 .main__header {
     padding: 2.5rem var(--sz-main-padding);
@@ -21,9 +15,7 @@ content-wrapper,
 }
 
 .content:not(.content--divided),
-.content__section {
+.content__section { background-color: var(--clr-content-bg); }
-    background-color: var(--clr-content-bg);
-}
 
 .article__info {
     text-align: center;
@@ -32,14 +24,10 @@ content-wrapper,
 }
 
 .content > * + .h2,
-.content__section > * + .h2 {
+.content__section > * + .h2 { margin-top: 2em; }
-    margin-top: 2em;
-}
 
 .content > * + :not([class]),
-.content__section > * + :not([class]) {
+.content__section > * + :not([class]) { margin-top: var(--sz-paragraph-margin); }
-    margin-top: var(--sz-paragraph-margin);
-}
 
 .content ul:not([class]), .content ol:not([class]) {
     display: grid;
@@ -47,9 +35,7 @@ content-wrapper,
 }
 
 .content ul ul, .content ol ol,
-.content ul ol, .content ol ul {
+.content ul ol, .content ol ul { margin-top: 0.7em; }
-    margin-top: 0.7em;
-}
 
 .sidebar--sticky {
     position: sticky;
@@ -64,15 +50,7 @@ content-wrapper,
         grid-template-columns: minmax(0, 18vw) minmax(min(60ch, 40vw), 2.5fr) minmax(0, 18vw);
     }
 
-    .content {
+    .content { grid-area: content; }
-        grid-area: content;
+    .left-sidebar { grid-area: leftbar; }
-    }
+    .right-sidebar { grid-area: rightbar; }
-
-    .left-sidebar {
-        grid-area: leftbar;
-    }
-
-    .right-sidebar {
-        grid-area: rightbar;
-    }
 }

src/assets/css/general.css

@@ -28,55 +28,30 @@ h1 {
     margin-bottom: 0.5em;
 }
 
-h2, h3, h4, h5, h6 {
+h2, h3, h4, h5, h6 { color: var(--clr-sub-heading); }
-    color: var(--clr-sub-heading);
+h1, h2, h3 { line-height: 1.2; }
-}
+h2, .h2 { font-size: var(--fs-h2); }
-
+h3, .h3 { font-size: var(--fs-h3); }
-h1, h2, h3 {
-    line-height: 1.2;
-}
-
-h2, .h2 {
-    font-size: var(--fs-h2);
-}
-
-h3, .h3 {
-    font-size: var(--fs-h3);
-}
 
 h2:has(+ *[class]:not(.heading-anchor)), .h2:has(+ *[class]),
-h3:has(+ *[class]:not(.heading-anchor)), .h3:has(+ *[class]) {
+h3:has(+ *[class]:not(.heading-anchor)), .h3:has(+ *[class]) { margin-bottom: 0.5em; }
-    margin-bottom: 0.5em;
-}
 
-h4, .h4 {
+h4, .h4 { font-size: var(--fs-h4); }
-    font-size: var(--fs-h4);
-}
 
-strong {
+strong { color: var(--clr-bold-txt); }
-    color: var(--clr-bold-txt);
-}
 
-:focus {
+:focus { outline: 0.15em solid var(--clr-body-txt); }
-    outline: 0.15em solid var(--clr-body-txt);
-}
 
 a {
     font-weight: 700;
     color: var(--clr-link);
 }
 
-a:hover {
+a:hover { color: var(--clr-link-hover); }
-    color: var(--clr-link-hover);
-}
 
-a:not([class]):focus {
+a:not([class]):focus { outline: 0.15rem solid var(--clr-link); }
-    outline: 0.15rem solid var(--clr-link);
-}
 
-a:focus img {
+a:focus img { outline: 0.2em solid var(--clr-body-txt); }
-    outline: 0.2em solid var(--clr-body-txt);
-}
 
 :not(.c-blockquote) > blockquote,
 .c-blockquote {
@@ -89,18 +64,12 @@ a:focus img {
 blockquote > * + :not([class]),
 * + blockquote,
 * + .c-blockquote,
-.c-blockquote__attribution {
+.c-blockquote__attribution { margin-top: var(--sz-paragraph-margin); }
-    margin-top: var(--sz-paragraph-margin);
-}
 
-button:hover {
+button:hover { cursor: pointer; }
-    cursor: pointer;
-}
 
 button:focus,
-details:focus {
+details:focus { outline-offset: 0.2em; }
-    outline-offset: 0.2em;
-}
 
 figure {
     margin-bottom: var(--sz-paragraph-margin);
@@ -115,18 +84,12 @@ figcaption {
     margin-top: 0.2em;
 }
 
-code {
+code { font-family: var(--ff-monospace), ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; }
-    font-family: var(--ff-monospace), ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
-}
 
-:not(pre) > code {
+:not(pre) > code { padding: 0.125em 0.25em; }
-    padding: 0.125em 0.25em;
-}
 
 :not(pre) > code,
-pre {
+pre { background-color: var(--clr-code-bg); }
-    background-color: var(--clr-code-bg);
-}
 
 pre {
     border: 0.1em solid var(--clr-code-border);
@@ -135,13 +98,9 @@ pre {
     padding: 1rem;
 }
 
-pre > code {
+pre > code { white-space: pre; }
-    white-space: pre;
-}
 
-summary {
+summary { cursor: pointer; }
-    cursor: pointer;
-}
 
 dl {
     display: grid;
@@ -149,10 +108,5 @@ dl {
     grid-template-columns: auto auto;
 }
 
-dt {
+dt { font-weight: 700; }
-    font-weight: 700;
+dd {grid-column-start: 2; }
-}
-
-dd {
-    grid-column-start: 2;
-}

src/assets/css/misc.css

@@ -107,17 +107,14 @@ body {
     text-align: center;
 }
 
-body,
+body, main {
-main {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
 }
 
-main {
+main { max-width: 90%; }
-    max-width: 90%;
-}
 
 h1 {
     font-size: var(--fs-h1);
@@ -128,9 +125,7 @@ h1 {
     line-height: 1;
 }
 
-p {
+p { font-size: var(--fs-p); }
-    font-size: var(--fs-p);
-}
 
 .index__btn-wrapper {
     display: flex;

src/assets/css/plugins.css

@@ -5,9 +5,7 @@
     align-items: baseline;
 }
 
-* + .heading-wrapper {
+* + .heading-wrapper { margin-top: 1.8em; }
-    margin-top: 1.8em;
-}
 
 .heading-anchor {
     order: -1;
@@ -19,14 +17,10 @@
     outline-offset: 0.05em;
 }
 
-.heading-anchor [hidden] {
+.heading-anchor [hidden] { display: block; }
-    display: block;
-}
 
 /* BLOCKQUOTES With CITATIONS */
-.c-blockquote__attribution {
+.c-blockquote__attribution { text-align: left; }
-    text-align: left;
-}
 
 .c-blockquote__attribution::before {
     content: "—";
@@ -34,13 +28,8 @@
 }
 
 /* FOOTNOTES */
-.footnote-ref {
+.footnote-ref { margin-left: 0.2em; }
-    margin-left: 0.2em;
+.footnote-ref a:target { scroll-margin-block: calc(var(--sz-navbar-ht) + 5ex); }
-}
-
-.footnote-ref a:target {
-    scroll-margin-block: calc(var(--sz-navbar-ht) + 5ex);
-}
 
 .footnotes {
     margin-top: 3em;

src/assets/css/utility.css

@@ -1,17 +1,12 @@
 /* UTILITY CLASSES */
-.bold-text {
+.bold-text { font-weight: 700; }
-    font-weight: 700;
+.center-text { text-align: center; }
-}
 
 .center-el {
     display: grid;
     place-content: center;
 }
 
-.center-text {
-    text-align: center;
-}
-
 .indent-text {
     padding: 1em 0 1em 2em;
     display: grid;
@@ -23,9 +18,7 @@
     color: var(--clr-dates);
 }
 
-.hidden {
+.hidden { display: none; }
-    display: none;
-}
 
 .visually-hidden {
     position: absolute;
@@ -39,4 +32,4 @@
     border: 0;
     outline: 0;
     outline-offset: 0;
-}
+}